Collective #56
Inspirational Website of the Week
AWARD is our pick this week: it has a stylish retro look with some lovely effects.
Get inspiredDiscover DevTools: Explore and Master Chrome DevTools
Discover DevTools is an interactive Code School training course that will teach you how to take advantage of Chrome DevTool's powerful suite of resources and speed up the development and debugging of your web apps.
Start learningjQuery Nested
Nested is a jQuery plugin which allows you to create multi-column, dynamic grid layouts - without gaps.
Check it outFlatDesign: A showcase of flat UI design
A great gallery of websites with flat UI design to get inspired with the new trend.
Check it outChart.js
Chart.js is a easy-to-use and slick JavaScript library for creating all kinds of graphs.
Check it outResponsive Web Design With Physical Units
Get a grip of resolution media queries with the help of this excellent Smashing Magazine article by Radu Chelariu.
Read itWorking with flexbox: The new specification
An in-depth article by Steven Bradley on the new flexbox specification with some practical examples.
Read itTell W3C: We don't want the Hollyweb
Did you already hear about the W3C proposal for Encrypted Media Extensions? If not, you are not the only one, and if you'd like to understand why it's so controversial you should check out the discussion on Hacker News and Reddit, and this post by Ian Hickson. Defective by Design is also collecting signatures against it to be delivered to the W3C.
Check it outMy Style
My Style is a Google Chrome extension by Karthik Viswanathan that allows you to insert custom CSS into pages, immediately see the visual results, and have that CSS persist for future visits.
Try itGo Vertical
Anthony Colangelo talks about vertical media queries and how they can, despite their rarity, be meaningful for some devices.
Read itLet's Build a Lightweight Blog System (part 2)
The second part of an in-depth tutorial on how to create a blog system by Martin Angelov.
Read itAutomatic Table of Contents
Learn how to dynamically create a table of contents for a web page in this tutorial by Chris Coyier.
Read itCommon Misconceptions About Touch
In this excellent article, Steven Hoober talks about common misconceptions about touchscreens and gives some useful design guidelines.
Read itIntro.js
With Intro.js by Afshin Mehrabani you can create better introductions for websites and features with a step-by-step guide for your projects.
Check it outStrikingly: Simple, beautiful sites in minutes
With the Strikingly site builder you can quickly create and publish a mobile-optimized site that looks simple and great.
Check it outPicozu Online Image Editor
Picozu (beta) is an image drawing and photo retouching application. It's build with HTML5, JavaScript and CSS3; so make sure you use a modern browser if you'd like to play with it.
Check it outjQuery Panzoom
Panzoom by Timmy Willison is a progressive plugin for providing panning and zooming functionality for an element. It supports the same browsers as jQuery 2.0 and can be used with jQuery 1.9.0+ or jQuery 2.0+. Rather than setting width and height on an image tag, Panzoom uses CSS transforms and matrix functions to take advantage of hardware/GPU acceleration in the browser.
Check it outTwo-Column Mobile Layouts Outperform Three-Columns by 29%
Some useful insights about how a two-column layout performs better than a three-column layout from ZURB.
Read itThere's more to the CSS rem unit than font sizing
Roman Rudenko explains the rem unit and shows us some interesting alternative uses of it.
Free Font: Lev Serif Handline
Lev is a beautiful slab serif font designed by Leon Hulst, TypeFaith Fonts. You can get Lev Serif Handline for free.
Get it