Web Design Weekly #156


Don’t use <picture> (most of the time)

As the <picture> element is landing in browsers it doesn’t mean we have to go crazy with it. Jason Grigsby clarifies when it is a good time to use it. (blog.cloudfour.com)

The ServiceWorker is coming, look busy! (youtube.com)

Build awesome sites with themeforest!

Launch beautiful, responsive websites faster with themes and templates for WordPress, Joomla, Drupal, Magento, Landing Pages and more. (themeforest.net)


The Future of Responsive Images

Luke Wroblewski’s comprehensive notes on Mat Marquis’s recent talk where he walked through the history of developing a responsive images solution for the Web and the solution coming to browsers soon. (lukew.com)

Getting Started with CSS Shapes

For a long time, web designers have been forced to create within the constraints of the rectangle. Most content on the web is still trapped in simple boxes because most creative ventures into non-rectangular layout end in frustration. That is about to change with the introduction of CSS Shapes, available starting with Chrome 37. (html5rocks.com)

The Hamburger icon against the word MENU (blog.booking.com)

Google Async Analytics using LocalStorage (davidmurdoch.com)

The Boring Designer (capwatkins.com)

Tools / Resources

A Scalable CSS Reading List

A list of things to read or watch that focus on scalable CSS and how to create scalable CSS. (github.com)


In this video Rob Dodson explains how to setup a Polymer project using the new Yeoman generator, how to create an element with a subgenerator and how to run some Mocha tests. (robdodson.me)

Design by Typing

Screencasts on using Vim, Git, Unix, HTML and OOCSS as design tools. (designbytyping.com)

Awesome SVG

A curated list of SVG resources. Willian Justen maintains the list so if you have any other resources be sure to submit a pull-request to keep it up-to-date. (github.com)

CSS Performance Tooling by Addy Osmani

A great slide deck that Addy used at CSSConf.eu. In the deck he explains how you can use the bleeding edge tools to keep your CSS fast. (speakerdeck.com)

Resources that are free for developers

Tim Evko has put together an evolving list of resources that are free for developers! Super handy. (github.com)

Basscss v4 – rebuilt from the ground up with Rework (basscss.com)

Paths.js – Generate SVG paths for geometric shapes (github.com)

A Chrome extension for devtools device emulation (github.com)

Real World React (presentboldly.com)


Inside the Design Team at Trello (invisionapp.com)

A Golden Age of Design (nytimes.com)


Front End Engineer at Yelp!

Join Yelp’s Front-end team and help build a modern, styleguide-driven UX for our 138 million users! We’re looking for people who love good code and working closely with design, product and other engineers to make great features. (yelp.com)

Advertise in next week’s newsletter →

From the Blog

Diving into Webpack

Of late there has been a little bit of hype around this “webpack” thing. Hopefully this post gives you an overview of what it is, how to use it and if it’s worth all the hype. (web-design-weekly.com)

Last But Not Least…

If you think the job hunt sucks, try recruiting… (medium.com)

14 new features added to Caniuse (caniuse.com)