Web Design Weekly #131


Custom CSS preprocessing

A great insight by Nicolas Gallagher into some of the benefits of using tools like Rework to help manipulate CSS during development. (nicolasgallagher.com)

Get all 20 Fonts in Yellow Design Studio’s Gist Family

Gist is an inline slab serif that features a retro yet modern vibe. With 20 weights and loads of OpenType features it comes primed with the tools to work on just about any project. For a limited time only, you can nab all 20 Gist fonts for just $14! See the previews (mightydeals.com)

Advertise in a future issue of Web Design Weekly


Why RWD Looks Like RWD

One of the main takeaways Tim Kadlec discusses in this post is that the toughest problems to be solved aren’t related to technology. The toughest problems are related to people, process, workflow and politics within organisations. (timkadlec.com)

Looking back on “Look Back” videos

A look into how Facebook achieved the roll out of their “Look Back” feature in less than a month. (facebook.com)

Migrating from PHP to Node.js

Matt Quinn takes a look into the process of moving from PHP to Node.JS for front-end server side code. (medium.com)

A Q&A on the Picture Element

The revival of the picture element—the responsive images proposal that has seen the most support from the developer community—is exciting news, but there are still some outstanding questions about how the element will really work. (alistapart.com)

Angular js 2.0 will be a mobile framework first (angularjs.org)

Tools / Resources


CodePen is a code editor for HTML, CSS, and JS in the browser. Use it to build demos to show off your work, figure out a bug, or learn. CodePen PRO unlocks the full power of CodePen, allowing for uploading assets and powerful collaboration tools, and more. (codepen.com)

Paul Irish’s Keynote

Grab a beverage of your choice and get ready to learn some pretty awesome performance tips in this short video. (youtube.com)

Getting modular with CSS animations

This tutorial by Val Head covers applying multiple animations to one element one right after the other using delays, as well as applying more than one animation to an element, at the same time. Plus tips on how to organise your keyframes when using more than one animation at once. (valhead.com)

A CasperJS script to pull critical CSS information from your page (github.com)

Introducing the Canvas Debugger in Firefox Developer Tools (mozilla.org)

Hugo Giraudel’s CSS and Sass Styleguide (sitepoint.com)

Leveling Up With Flexbox (zomigi.com)

Whirlwind Tour of SVG (speakerdeck.com)



Australia’s Leading JavaScript & HTML5 Developer Conference. May 1st and 2nd in Melbourne. Use the discount code “WDW” to get $150 off the full price. (webdirections.org)


We should clone game Interaction Design tools

Some really great thoughts by Pasquale D’Silva on why we should be borrowing concepts from game & animation tools, to make interfaces. (medium.com)

My Advice to Young Designers and Developers

If you are a young developer confused as to what path you should take, this post by Andy Budd is definitely worth a read. (andybudd.com)

Ethan Marcotte – Responsive design with a side of WordPress (mattreport.com)

Last But Not Least…

CSS Diner Game

A fun little game to help you learn about CSS selectors. (github.io)

Useful Sublime Text power-tips from (github.io)