Web Design Weekly #97


Writing DRYer vanilla CSS

Excellent short tutorial by Harry Roberts on maintainable CSS. It’s a short tip-style post covering how and where you can spot the chance to DRY things out in your regular/‘vanilla’ CSS. (csswizardry.com)

Free tutoring For HTML, CSS and JavaScript

Jeremy Kahn works at YouTube and is keen to move the web forward. This is his little bit. What an awesome idea. Rock on Jeremy! (jeremyckahn.com)

If one hit a week ain’t enough, follow Web Design Weekly on Twitter!


CSS sourcemaps and in-browser Sass editing

The Chrome Developer Tools have come a long way in the last year. It’s pretty crazy! In this post Tim Lucas walks though some of the cutting edge features to help give your editing workflow some serious awesomeness! (medium.com)

The Extend Concept

All three of the most popular CSS preprocessors support extend. Chris Coyier digs into how it works, why you should use it and when to use it. He also covers some gotchas. As always, solid post. (css-tricks.com)

Building The New Financial Times Web App

An in-depth look behind the scences by Wilson Page who worked on the project. He shares some useful tips about flexbox and how it impacted the rendering times. (smashingmagazine.com)

Which JavaScript Library Should I Pick?

Pamela Fox shares some wise words on how to make the decision of picking the correct library a little easier. (blog.pamelafox.org)

The Two Corners of Unsolicited Redesigns (medium.com)

Interface Inventory (bradfrostweb.com)

Tools / Resources

Create Striped Backgrounds With Gradients

A neat little post by Hugo Giraudel on CSS-Tricks. He has some great examples, especially the last one where he recreates the Treehouse strip without using 50 <span> tags! (css-tricks.com)

Discovering Sketch

If you need convincing or are keen to explore other design tools then this is for you. (medium.com)


A fun tool for easily creating CSS3 animations. You can configure your animation graphically, tweak it, grab the generated CSS and go! So easy to spend hours tinkering. (jeremyckahn.github.io)

CSS Balls

Donovan Hutchinson takes on the task of creating good looking CSS spheres without images. He nailed it! (hop.ie)

Grunt Modernizr

Grunt Modernizr sifts through your project files, gathers up your references to Modernizr tests and outputs a lean, mean Modernizr machine. (github.com)

Typeform – Awesome web form and online survey builder (typeform.com)

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


Two Minutes With TGD: Are You Creatively Satisfied? (vimeo.com)

An Interview with David DeSandro (theindustry.cc)

Pure CSS Animated 3D Molecules (codepen.io)

Industry Conference Talks (vimeo.com)


Full-stack Web Engineer at Disqus in San Francisco

Disqus is hiring software engineers to work on Python web development, focusing on the user-facing features of Disqus.com: a social content feed, moderator dashboard, real-time analytics and payments for new signups and advertising. (disqus.com)

Advertise in next week’s newsletter

Last But Not Least…

The Making of Face to GIF

Face to Gif is a simple webapp that lets you record yourself and gives you an infinitely looping animated gif. genius idea! In this post Horia Dragomir walks through how it came to be and what he learned from building it. (hacks.mozilla.org)

Tricky CSS Selectors Quiz (milanlandaverde.com)

Resize That S&*t (resize.thatsh.it)