Web Design Weekly #152


Medium’s CSS is actually pretty good

Jacob Thornton explains some of the steps they have taken to craft Medium’s CSS and where it is today. (medium.com)

A Quick Tour Of WordPress 4.0 (smashingmagazine.com)

Support this newsletter by getting your hands on some WDW merchandise!


Building Interactive HTML5 Videos

In this article Jeroen Wijering gives a good overview of the HTML5 <track> element. He explores 3 examples: chapter markers, preview thumbnails and a timeline search. Some super impressive stuff! (hacks.mozilla.org)

WebP / JPEG XR delivery via content negotiation

The imgix team just announced that they are now going to support several new web image formats. These formats allow you to serve your images more efficiently while maintaining high levels of quality. The formats are WebP, JPEG XR and progressive JPEG. (blog.imgix.com)

Improving Performance with Prebrowsing

We all want our websites to be fast. We optimise images, create CSS sprites, use CDNs, cache aggressively and gzip. We use every trick in the book. But we can still do more. If we want faster outcomes, we have to think differently. (alistapart.com)

Making SVGs Responsive with CSS

An article by Sara Soueidan on how to make embedded SVGs responsive. Sara covers embedding techniques, how to apply the “Padding Hack” and how to use inline media queries to make SVGs adaptive. (tympanus.net)

What CSS Variables Can Do That Preprocessors Can’t

Daniel Imms dives into the new CSS variables spec and explains how it differs from the way preprocessors handle variables. (sitepoint.com)

What do you do when your design pattern breaks down? (css-tricks.com)

Unicode-aware regular expressions in ES6 (mathiasbynens.be)

Tools / Resources

Secure your website in one afternoon with SSL

Josh Emerson gives you the low down on how to make your site more secure and aims to have you rocking a HTTPS site in an afternoon. (joshemerson.co.uk)

Play nice with CSS tools and Methodologies

This talk by Brad Westfall exposes the pros and cons of some of the most widely accepted CSS best practices, which ones contradict others and which ones compliment others. (youtube.com)


A small JavaScript library that enables proper colour transitions through the HSL and HUSL spaces. (rileyjshaw.com)

Hugo Giraudel gives the lowdown on Sass 3.4 (sitepoint.com)

Building markdown-based developer docs (medium.com)

Underscore 1.7.0 released (underscorejs.org)

Flexbox IE11 bugs (alastairc.ac)


Native Responsive Images

Responsive images have been a pain point when developing responsive websites for quite some time. Now, finally, a native solution is getting close thanks to Yoav Weiss. (dev.opera.com)

Material Design exploration: NBA scores

Applying the Material Design language to a concept NBA app. (medium.com)

Animated CSS Mask to reveal/hide an image with a linear gradient mask (codepen.io)

An awesome magnifying demo in CSS (lab.hakim.se)

Sass Community Guidelines (sass-lang.com)


Scala Developer at Bilue

Bilue is a creative consultancy based out of the Sydney CBD and are looking for an awesome Scala developer. If you like the idea of working in a cool office in the CBD with some really cool people, on some amazing projects, this is your chance. (bilue.com.au)

Technical Writer

If you are a front-end developer that is keen to write about interesting challenges, topics or tricks, please get in contact. (web-design-weekly.com)

Advertise in next week’s newsletter →

Last But Not Least…

Here’s the latest reason to probably stop using document.write() (miketaylr.com)

Why do (all) code editors look the same? (medium.com)