Sent to you by nunok via Google Reader:
Here on Inspired Magazine we're going to take a look what has been published this last month on the Blogosphere. We hand-picked a selection with the best Resources, Tutorials, Scripts/Snippet and WordPress related Articles for you.
All these design-related links have been mentioned on Twitter in the last month, and collected in this single article. So, I hope you'll enjoy this roundup cause we think that having resources and staying up-to-date is important in your personal growth and development.
HTML, CSS, PhP, Coding & Resources
Sass and Media Queries: What You Can and Can't Do - So what about leveraging Sass for responsive design, or more specifically, for media queries? Are there any features of Sass that pair particularly well with media queries? Is there anything you should avoid?
Using Backgrounds in CSS3 - With CSS3, developers and designers can utilize an enhanced range of options for Web page backgrounds. New options include the ability to use multiple background images, to specify size properties for background images, and to define background ..
A Simple Device Diagram for Responsive Design Planning - There are an ever-increasing number of devices with different screen resolutions to take into account with a responsive design, so we put together a simple but handy diagram that lists the most common device widths as of the present, along with overlays for potential device width ranges.
Multi-Device Layout Patterns- Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, we're not only seeing a lot of innovation but the emergence of clear patterns as well.
Understanding em Units in CSS - Due to developers' habitual reliance on pixel values, I think some of us may not have a full understanding of what the em unit is, and how it works in CSS. So I hope this will serve as a nice summary of what em units are all about.
A Comprehensive Introduction to LESS - Technically speaking, LESS is a CSS preprocessor. In simple terms, CSS preprocessing is a method of extending the feature set of CSS by first writing the stylesheets in a new, extended language, then compiling the code to pure CSS so that its readable by browsers.
Responsive Web Design: Missing the Point - The point of creating adaptive sites is to create functional (and hopefully optimal) user experiences for a growing number of web-enabled devices and contexts. It's not because it's "the right thing to do". It's not because it's fun.
Use only what you need ~ I agree completely. Too many people include too much by default in their web projects these days. Boilerplates, polyfills, shivs, crazy conditional comments, rare or uneccesary meta elements, and so on.
JS Patterns ~ A JavaScript pattern and antipattern code collection that covers function patterns, jQuery patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM and browser patterns (upcoming).
HTML5 Best Practices for Designers - Learning as much as you can about HTML5 and following these basic practices will help you produce websites with high quality markup and improve your overall design and development process without running into the common pitfalls that have plagued the web for over a decade.
How to GitHub: Fork, Branch, Track, Squash and Pull Request - This guide will teach you how to properly contribute to open source projects on GitHub. It assumes that you already know about how to use Git for version control and that you already have a GitHub account.
Using Modernizr to detect HTML5 features and provide fallbacks - Modernizr is a JavaScript library that detects which HTML5 and CSS3 features your visitor's browser supports. In detecting feature support, it allows developers to test for some of the new technologies and then provide fallbacks for browsers that do not support them.
A Comprehensive Introduction to LESS: Mixins - With LESS, we can define so-called "mixins", which have some similarities to functions in programming languages. In LESS, they're used to group CSS instructions in handy, reusable classes. Mixins allow you to embed all the properties of …
Tutorials
Parallax Content Slider with CSS3 and jQuery - Today we want to share a simple parallax content slider with you. Using CSS animations, we'll control the animation of each single element in the slider and create a parallax effect by animating the background of the slider itself.
Making an Impressive Product Showcase with CSS3 - impress.js is a small, standalone library that makes it easy to design advanced CSS3 presentations with eye-catching effects. But what if we used impress.js for something other than a presentation? This is what we are doing today – we will be spicing up a plain old product page with some CSS3 magic!
40+ Excellent CSS3 Menu Tutorials - The tutorials presented below in this collection are more experimental. Through these CSS3 navigation tutorials, you will learn how to create user friendly navigation menu both vertically and horizontally.
20 Useful Tutorials for Web Developers- Being a web developer is not an easy job because you must always stay up to date with everything related to this domain, but it's impossible to know everything.
Informative Parallax Effects Tutorials - We've gathered for you a bunch of awesome parallax effect tutorials so you can improve your skills in creating this extraordinary effect.
Responsive Web Design Tutorials - RWD is not just an adjustable screen resolution and automatically resizable images, it is a whole new way in thinking of the web design and a great collection of techniques and ideas. In this post you can find various responsive design tutorials ..
Responsive Content Navigator with CSS3 - Today we'll show you how to create a content navigator with CSS only. The idea is to have several slides or content layers that we'll show or hide using the :target pseudo-class. With CSS transitions we can make the slides appear in a fancy way.
Login and Registration Form with HTML5 and CSS3 - In this tutorial we are going to create two HTML5 forms that will switch between login and registration using the CSS3 pseudo class :target. We will style it using CSS3 and an icon font.
Illustrator Tutorials Roundup – March 2012 - Tutorials are one of the most researched design resources on the web and it's essential when gathering any type of resource for your personal collection, to make sure they're also recent.
Tools (web applications, bookmarklets, frameworks etc.)
Fluent - Fluent's inbox is a workflow-oriented stream. See email threads & replies at a glance, preview attachments, and make the decision to reply, archive or add to your to-do list with one click.
Snoopy - Snoopy is a bookmarklet for snooping on web pages. It's intended for use on mobile browsers (such as Mobile Safari on the iPad) where you can't view-source to poke around under the hood of sites to see how they're built.
Resizer – A responsive design bookmarklet that allows you to quickly change the dimensions of a webpage to test responsive design. Then you simply visit any site that you wish to test responsive dimensions on and click the Resizer bookmarklet.
FontFont Subsetter - Web FontFonts speak many languages, but most of the time you only need a select few. Removing the letters you don't need can greatly reduce the font file size to make your websites faster, optimize bandwidth usage, and reduce high-traffic costs.
Fontomas - This tool helps to combine iconic webfonts for your project. With fontomas you can make a limited symbols subset – with reduced font size, merge symbols from several fonts to single file and access large collections of professional-grade open source icons.
Least- Least helps you move from your old-fashioned CSS files to something shiny: CSS pre-processors! Insert your raw CSS and it will be converted to new Output language: LESS / Sass or Stylus ..
Warp Framework - a fast framework which provides a rich tool set to develop cross-platform themes. You can create your theme easily, based on a well-engineered framework. It has a clearly arranged user interface focused on simplicity which integrates perfectly with WordPress.
978.gs - A Framework mainly built for rapid prototyping and offers more room compared to the popular 960.gs by widening the gutter space. The framework is not limited to 978px but there are also different stylesheets for 300px, 748px, 1218px and 1378px grids.
Kraken - In modern web development even minor optimizations have significant influence on how efficiently your app works. With hundreds of servers and millions of users, every single pixel counts. Want to save bandwidth and improve your website's load times?
SpritePad - Simply create CSS sprites. With SpritePad you can create your CSS sprites within minutes seconds. Simply drag & drop your images and have them immediately available as one PNG sprite + CSS code. No fiddling in Photoshop, no manual assignment of CSS styles.
Proto.io V2 - Proto.io is a new UI prototyping tool specifically tailored for mobile and tablet applications. The web based environment allows you to start off by creating a project for iPhone, iPad, Android phones or tablets.
Ingrid - a lightweight and fluid CSS layout system, whose main goal is to reduce the use of classes on individual units. Making it feel a bit less obtrusive and bit more fun to reflow for responsive layouts. Ingrid is also meant to be an extendable system, easy to customize to your own needs.
Box(CSS Framework) - CSS Framework that is based on display:inline-block; and box-sizing: border-box; principles, the right principles for building easy to understand CSS Framework. My constraint obsession about CSS Frameworks forced me to build one more CSS Framework based on these principles.
StyleBootstrap.info - Create unique design with Bootstrap v2
visual.ly/create - Build customized Infographics that tell yourstory. Create Free Custom Infographics In Seconds
snipsave.com - Save snippets of code for future reference! SnipSave features a very easy-to-use interface where you can quickly create, edit and delete code snippets. It was designed and built for ease and speed of use.
CSS Piffle - No more photo editing software for web design! You can create interactive wireframes, Animations and mobile web with CSS Piffle easily.
Intype – A fast and easy text editor. Snippets, themes or even language grammars can be changed or added in the comfy extension editor.
jQuery Plugins, Javascript, etc.
Morris.js - Making good-looking graphs shouldn't be hard. Morris.js is a lightweight library that uses jQuery and Raphaël to make drawing time-series graphs easy.
KineticJS - a free JavaScript library for working with HTML5 canvas much easier. Shapes and images can be drawn (there are ready-to-use ones like circle, rectangular, etc.), animated, rotated, scaled and can be set to interact with other shapes or user events.
Twitter Friends Widget v2.0 – jQuery Plugin - A new version of my most popular jQuery plugin -Twitter Friends widget. This version aims to be better looking and easier to setup.
Underscore - A utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It's the tie to go along with jQuery's tux, and Backbone.js's suspenders.
Overthrow - Overthrow is a conservative attempt at filling the gaps in overflow support, with an emphasis on letting native implementations do their thing, and in touch-supporting browsers, providing a very minimal polyfill in browsers where native support is not available.
Jquery Asynchronous Image Loader (Jail) - The need for a plugin that loads images asynchronously comes from the will of improving the page load time and making the user experience enjoyable/acceptable when there are heavy images in a page.
Tinycon - A small library for manipulating the favicon. Tinycon allows the addition of alert bubbles and changing the favicon image. Tinycon gracefully falls back to a number in title approach for browsers that don't support canvas or dynamic favicons.
URI.js - It offers a "jQuery-style" API (Fluent Interface, Method Chaining) to read and write all regular components and a number of convenience methods. URI.js offers simple, yet powerful ways of working with query string, has a number of URI-normalization functions and converts relative/absolute paths.
Sticky Sidebar jQuery plugin - This jQuery plugin allows you to set a number of sidebar or floating boxes that follow the user down the page as they scroll. The plugin uses absolute positioning calculated from the original css and offset to either the closest positioned parent or to the document.
cssFx - A standalone polyfill (JavaScript file – weights 2.5kb) that inserts the vendor-specific CSS3 properties necessary for old and new browsers on the client-side. It has support for most of the CSS3 properties and works with the majority of browsers (including IE6).
Camera - A jQuery slideshow plugin with lovely transition effects for responsive web designs. Slides can be created with any HTML elements (images, text, videos, etc.) and Camera displays them with a good looking interface + a set of transitions.
turn.js - A plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine for HTML5. Being inspired by the effect of iBooks and Maps for iOS, I created two objects: one for manipulating the overall publication and another for each individual page.
Adipoli jQuery - Adipoli is a simple jQuery plugin used to bring stylish image hover effects. There are 20+ transition effects: start effects, hover effects, and more.
mailcheck - The jQuery plugin that suggests a right domain when your users misspell it in an email address. We use Mailcheck to help reduce typos in email addresses during sign ups. It has reduced our sign up confirmation email bounces by 50%.
sigma.js - an open-source lightweight JavaScript library to draw graphs, using the HTML canvas element. It has been especially designed to display interactively static graphs exported from a graph visualization software and Display dynamically graphs that are generated on the fly
jQuery Retina Plugin - Until more desktops have retina displays, this requires a client side solution. Therefore, I created a jQuery plugin that will swap out the image source for an image that is sized for retina displays.
jqFloat.js - a jQuery plugin that able to make any HTML objects appear to be "floating" on your web page. It helps create simple floating animation and make your websites come alive with these little "floating" object.
TypeButter - TypeButter allows you to set optical kerning for any font on your website. If you're longing for beautifully laid out text that today's browsers just don't provide, this is the plugin for you!
WordPress Related
How to Insert a WordPress Photo Gallery into Your Blog - There are all sorts of photo gallery plugins and themes for WordPress, but in this post we're going to go over the out-of-the-box default WordPress gallery.
Lazy Loading, WP Smush It, and Optimizing Your Website's Performance - tips and tricks to improve the performance of your website. Some of these techniques may not be suited for all types of content but where they are, you can see dramatic improvements in page speed and functionality.
How to Create Advanced Search Form in WordPress for Custom Post Types - Therefore, we decided to create an advanced search form which lets user pick which area of the site they want to search by limiting custom post types via checkboxes. Users can combine their search queries and most importantly, we made it so the checkboxes are saved along with the search query.
10+ useful SQL queries to clean up your WordPress database - After years of usage, your WordPress database can contain weird characters, be filled with data you don't need anymore, and so on. In this article, I'm going to show you 10+ SQL queries to clean up your WordPress database.
21 WordPress Cheat Sheets – All Fresh and Useful! - what makes today's post really special is the fact that it contains only WordPress cheat sheets and nothing but them (because often on other design blogs authors present all kinds of related WordPress info in the cheat sheet posts).
Create Personal WordPress Login Page To Strengthen Your WordPress - I would like to share really simple steps help you improving your WordPress Login page security by changing wp-login.php to your personal login page. No advanced knowledge is needed.
Share Your Posts on Facebook With a Preview Image and a Description - In this tutorial we will write a plugin to set an image and a short summary that will be shown on Facebook every time a post is shared. We will use two WordPress core features: a Featured Image and the Post Excerpt for the description.
9 Tutorials to Get Started with Custom Post Types in WordPress - In custom Post types, we can create our own content publishing type. Lets get some more idea and hands on custom post type with the help of some awesome tutorials.
WordPress Robots.txt Optimization - It is recommended by all search engines to use this robots.txt file so that they don't waste time and resources crawling and indexing files which you don't want them to be indexed. Here is what WordPress recommends your robots.txt file to look like.
WordPress Conditional Tags (And Snippets) for Beginners - One of the best features of the WordPress could be the conditional tags. It allows you to tell the code to act differently in specific situations. You can also redirect to post if search query only returns single result.
.. and don't forget these!
10+ Testing Tools for Responsive Web Design - Finally, as we develop our responsive website. Now we need to make sure that our site works in as many browsing environments as possible and test the website in different resolutions and how the media queries work.
9 Free and Premium WordPress Ebooks - There are already lots of tutorials available on Internet to learn about WordPress. But if you don't like to visit each page on web sites and want everything compiled in an ebook form, here are some free WordPress ebooks which covers from basic to advance.
9 Useful Free PDF Ebooks About Responsive Web Design - Responsive web design will continue to be the trendy topic in the following years. In today's post we've gathered free ebooks in PDF format which are all about responsive web design.
21 Great Tools To Optimize Website's Loading Time - When it comes to WebSite Optimization, the first thing which could come in our list is to check the website's loading Speed that is how long it takes to load your webpage. How fast it Loads?
The web was always responsive - The web is inherently responsive. It's in it's DNA. If you create a structured HTML document with no CSS applied and open it in any browser, you will see it is naturally fluid and will fit any window size.
How Metrics Can Make You A Better Designer - User satisfaction and acceptance should be the driving force behind your creation, not the principles and points mentioned in that project document.
Typographer's Glossary - great resource for typographic terms, type classification and more
If you want to stay up-to-date with the latest articles and resources from the design community, you should follow Inspired Magazine on Twitter.
This is a post from Inspired Magazine. If you like it, you may want to subscribe to our RSS full feed to be updated on every article we're publishing. Also, it's highly recommended to follow us on Twitter!
Tweet Heat – The hottest Tweets of the Month [March 2012]
Things you can do from here:
- Subscribe to Inspired Magazine using Google Reader
- Get started using Google Reader to easily keep up with all your favorite sites
No comments:
Post a Comment