Web Design Weekly #160


Axiomatic CSS and Lobotomized Owls

Heydon Pickering introduces the lobotomized owl selector (* + *) which sounds pretty crazy at first but this article gives it a lot more context and is a good reminder that we should all try and experiment when we get a chance. (alistapart.com)

First public draft of the Resource Hints specification (w3.org)

28 Premium WordPress Themes – only $37!

Get access to a total of 28 premium WordPress themes with this 1-year subscription to Zappy Themes. (mightydeals.com)

Sponsor Web Design Weekly and reach over 21,502 Developers


WebRTC Made Simple

WebRTC is super rad and if you are keen to get involved this guide by Tommy Fisher is a good starting point. (carbonfive.com)

Design Is Not An Investment

A nice interview with Mike Monteiro. He touches on his new book and offers some inspiring tips. (aneventapart.com)

Dropbox Database Sync for Local Testing

Getting all your testing computers on the same page (especially all those databases) can be a pain. This tutorial explains how you can leverage Dropbox to get all of your computers working from the same database so you can take your web development to the next level. (haeckdesign.com)

Understanding Sketch’s Export Options

Armando Sotoca looks at the various ways to use Sketch’s export feature to help prepare your assets for the web. (webdesign.tutsplus.com)

Does a print CSS file slow your site down?

A nice article that digs into the performance side of things. (nccgroup.com)

Swarm.js+React — real-time, offline-ready web apps (swarmjs.github.io)

Probably Don’t Base64 SVG (css-tricks.com)

Apple on Hamburger Menus (manbolo.com)

Tools / Resources


A simple template for designing responsive websites in the browser. Includes a nice gulp file that has browser reload on file save, sass compilation, CSS minification, image optimization and CSS lint output. (mn-ml.cc)

Strip CSS comments

A module for stripping comments from CSS. Could be useful when you have internal comments you want to remove. e.g. when sending the CSS to a client for review. (github.com)

Material Design icons by Google

The official open-source icons featured in the Google Material Design specification. (github.com)

React Primer

A small repository designed to gently introduce developers into the wonderful world of React. Each demo’s source is annotated with comments and can be read basically top-to-bottom. (github.com)

A curated list of web performance optimisation resources (github.com)

Deploy to gh-pages with one command (github.com)

Stats.js – JavaScript Performance Monitor (github.com)

React Router – A complete routing solution for React.js (github.com)


Aaron Draplin & The Art of the Side Hustle (vimeo.com)

Pure CSS parallax (make sure you turn on the debug option) (keithclark.co.uk)

Learning to Be Flexible (alistapart.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)

Need to find passionate developers? Why not advertise in next week’s newsletter!

From The Blog

Optimizing SVG for the Web

So you have an amazing vector and you’re just about ready to send it out for the world to see, but you notice it’s XML (the stuff that makes up an SVG) is a bit bulky. In this post Dennis Gaebel takes a look at a command line tool that can help. (web-design-weekly.com)

Last But Not Least…

Nerding out about CSS

A great discussion about small class names in the tachyons framework. Lots of smart peeps cherping in about the finer details of CSS in general. Worth a read! (github.com)

The CSS that you know nothing about (medium.com)