Web Design Weekly #112



SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM. (snapsvg.io)

Ten years of Sliding Doors of CSS (stuffandnonsense.co.uk)

eBook: jQuery Trickshots

This useful ebook offers 100 advanced techniques for using jQuery. Based on hands-on knowledge from the author’s experience as a JavaScript programmer, you’ll get a large collection of incredibly useful tips and tricks. Includes 100 HTML5 & CSS3 examples that are ready to edit and try out in your browser. Only $7.95 – 47% off! (mightydeals.com)


Challenging CSS Best Practices

Thierry is a front end engineer at Yahoo trying to solve some complex problems. This article over on Smashing Magazine covers his thinking in great detail. Some really great points and comments. (smashingmagazine.com)

Avoiding Unnecessary Paints: Animated GIF Edition

Avoiding paints is critical to achieving a silky smooth frame rate, especially on mobile. Sometimes, however, paints crop up in the most unusual of places. This article looks at why animated GIFs can cause unnecessary paints to occur, and the remarkably simple fix you can apply. (html5rocks.com)

Breaking Development: Atomic Design

Luke Wroblewski’s notes from Brad Frost’s Atomic Design talk at the Breaking Development conference. Brad covered the benefits of design systems on the Web and shares some tools he’s created to help people work quickly with responsive design. (lukew.com)

Objects in Space

A style-guide for modular SASS development using SMACSS and BEM. (medium.com)

JavaScript has a Unicode problem (mathiasbynens.be)

Classy values (adactio.com)

Tools / Resources

Grunt Boilerplate

Heard of Grunt? Use Grunt? Or just keen to learn more about it? This is your source. Mark McDonnell, who is an Engineer for BBC News, has compiled a great resource which is worth diving into and bookmarking. (integralist.co.uk)

CSS Transforms: An Interactive Guide

New e-book for iBooks by former Safari technology evangelist Vicki Murley. (itunes.apple.com)


This handy little site helps you decided which Sublime Text theme to use. You can easily view different themes in the browser before downloading them. (colorsublime.com)

Regenerator — Open-source Facebook project (github.com)

Combine Media Queries with Grunt(github.com)

Flexbox: layout in CSS that doesn’t suck (github.io)

An awesome slide deck about Web Components (robdodson.me)

Support this newsletter by becoming a member for the price of a coffee →


Working Remotely

This video by 37signals about working remotely is quite inspiring for those that are either in charge of a company or are keen to make it a reality. (37signals.com)

Square, Airbnb and why experience really is design

Today, what matters is the complete experience, one that hides technology, infrastructure and complexity and in the process creates a bond between us and the product. (gigaom.com)

Animated Checkboxes and Radio Buttons with SVG (tympanus.net)

Inside GitHub’s Super-Lean Management Strategy (fastcolabs.com)

Animated Navigation Icons with CSS Transforms (sarasoueidan.com)


Front-End Engineer at Yelp – San Francisco

Our front end engineers are the glue between our engineering team and the more than 108 million people who visit our site every month. Yelp is looking for a front end developer who walks the HTML, CSS and JavaScript stack with ease. In this role you would do everything from implementing new UIs and features to battling browser inconsistencies through daily release cycles. (yelp.com)

Front End Engineer – Vimeo

Vimeo attracts over a 100 million views a month to our platform. Our viewers come to see the quality content that is unique to Vimeo. We are looking for a talented front end engineer to help us create an even better viewer experience. (vimeo.com)

Last But Not Least…

Apple Mice over the years made with pure CSS (codepen.io)

Scott Jehl on the Shoptalk Show (shoptalkshow.com)

Scroll Hijacking (trentwalton.com)