Web Design Weekly #71


A Tale of Animation Performance

A great post by Chris Coyier with an awesome video by Paul Irish that is compulsory viewing. The post came about when Chris was asked if there was any sources confirming translate() is better than top/right/bottom/left for moving objects. (css-tricks.com)

Hot in web standards: November/December 2012

Lea Verou’s final 2012 report on the latest developments at the W3C, including the FPWD of HTML 5.1, the addition of the element, news on the rescheduled W3Conf and more. (netmagazine.com)

Interactive Guide to Blog Typography (kaikkonendesign.fi)

Vexing Viewports (alistapart.com)

CodePen PRO (codepen.io)


The Making of Fastbook: An HTML5 Love Story

Mark Zuckerberg said HTML5 wasn’t ready. The guys at Sencha took a little offense to the comment. They knew HTML5 was in fact ready, and wanted to prove it. So they took it upon themselves to rebuild the challenging parts of the Facebook mobile application in HTML5 in their spare time. (sencha.com)

Conditional loading of resources with mediaqueries

A quick idea by Christian Heilmann about making mediaqueries to not only apply styles according to certain criteria being met, but also to load the resources needed on demand. (christianheilmann.com)

Time to update your CSS3

If you use experimental CSS on your sites, demos, articles or tools, there is a certain amount of maintenance required to keep on top of changes. With a number of recent changes in the browser world, now is the time to revisit and update your code. (generatedcontent.org)

Why you should say HTML classes, CSS class selectors, or CSS pseudo-classes, but not CSS classes (tantek.com)

Improving Front-End Code Quality and Workflow (word.bitly.com)

You Are Not Your Code (sstephenson.us)

Tools / Resources

HTML5 Bones: The template that goes back to basics

HTML5 Bones is a downloadable template that goes back to basics and provides you with the bare minimum required to get going with HTML5. In-line comments explain how and when to use some of the most common HTML5 elements. (html5bones.com)

GruntStart (Grunt+H5BP+jQuery+Modernizr)

Quickly get started with Grunt to lint, minify and concatenate CSS and Javascript and provide simple lossless image compression for building websites. Includes the H5BP, jQuery, Modernizr and Respond, with the right amount of abstraction to quickly integrate with the latest CSS frameworks like Bootstrap, CSS preprocessors like SASS or Javascript MVC solutions like Backbone. (github.com)


The hassle-free way to integrate analytics into any web application. Every project needs analytics but you shouldn’t have to litter your codebase with third-party-specific calls. That’s where analytics.js comes in! Instead of adding hooks for every single analytics service you integrate, you add a single set of provider-agnostic hooks that then route to any analytics service you want. (github.com)

Scalable JavaScript Application Architecture Resources

If you are interested in learning more about scalable JavaScript application architecture, this is a great list of recommended resources. (github.com)

CSS click events – a good round-up of all the techniques (tympanus.net)

All the slides from the CSS Dev Conf Honolulu (christopherschmitt.com)

SublimeVideo Horizon Framework (blog.jilion.com)

Socrates – online markdown editor (socrates.io)

CodeKit — The Kit Language (incident57.com)


Flickr UI gets broken down

Earlier this week Yahoo released their multi-platform email update, followed by the update to their iOS Flickr app. This update seems to be built from the ground up, as the entire UI seems to be completely different from the previous offering. (theindustry.cc)

From The Front conferences videos on Vimeo (vimeo.com)

The top 25 responsive sites of 2012 (netmagazine.com)


Awesome Jobs at The Theme Foundary

Designer – We are looking for a smart and talented designer who is obsessed with the details and understands great interface design, and is rooted in communication, usefulness, and clarity.

Last But Not Least…

Well thats another year!

So many awesome articles, tools and resources were released, and so much passion and energy was invested. It was a big year!

I have thoroughly enjoyed trying to capture weekly snapshots of what is happening and what is cutting edge. I hope you have enjoyed them. Also, this newsletter wouldn’t exist if it wasn’t for you and all the people that have contributed to making the web a better place – so a big thanks!

The web will win!

Oh yeah, this is the last issue for the year because I am taking a little break. The next issue will be hitting your inbox in mid January. Have a good one and enjoy the festive season!