Web Design Weekly #191


What is Code?

This article by Paul Ford is epic. If you haven’t had time, or it is on your ‘read later’ list, now is the time to brew up a big coffee and enjoy it. (bloomberg.com)

You know how to code, but how are your UI/UX design skills?

Do you ever wish your websites & apps looked more “professional”? Take one of our online UI/UX design courses with hands-on projects & 1-on-1 mentoring from expert designers — we guarantee you’ll see an improvement in your work. Sign up today! (trydesignlab.com)


Modern Design Tools: Using Real Data

Josh Puckett floats the idea of a design tool that easily integrates with real data so we can focus on solving product and interaction problems as well as visual ones. (medium.com)

Progressive Apps: Escaping Tabs Without Losing Our Soul

A great post by Alex Russell about “Progressive Apps”. No doubt we will be seeing many more articles digging into this in the not to distant future. (infrequently.org)

Techniques for writing semantic and maintainable JavaScript

Nick Wientge explores 3 simple techniques that can be applied to your JavaScript app today. (medium.com)

The Future Generation of CSS Selectors: Level 4 (sitepoint.com)

Importing CSS Breakpoints Into Javascript (lullabot.com)

Tools / Resources

A Practical Guide to SVGs on the web

This guide by Jake Giltsoff gives a practical overview of how you can use SVGs on your websites. If you are an SVG beginner or expert it is a great read. (svgontheweb.com)

Envato Market have just released their ‘Structure Styleguide’

A Structure Styleguide is a special breed of living styleguide, designed to document an application’s UI logic and all of the possible permutations of the UI. In this post Jordan Lewis gives you the lowdown on the finer details. (webuild.envato.com)


Detects which CSS classes your app is using and creates a file without the unused CSS. PurifyCSS has been designed from the beginning with single-page apps in mind. (github.com)


Javascript library to create physics-based CSS animations. (dynamicsjs.com)


A handy module to produce CSS gradients as placeholders for images. (gradifycss.com)

Exploring ES6 (leanpub.com)

Conical gradients, today (lea.verou.me)


Creative Gooey Effects

A set of examples that use a gooey SVG filter for creating a variety of different effects for all kinds of website components. (tympanus.net)

Great tips for building a great design portfolio (medium.com)

Things I’ve Learned About CSS (youtube.com)


Software Engineer, Frontend at Airbnb

Frontend Engineers are an essential part of Airbnb’s Product Team. Working closely with designers, we implement the user interface of our web app. If this sounds like fun, then why not apply? (airbnb.com)

Need to find passionate developers? Why not advertise in the next newsletter!

From The Blog

Basic Performant Sharing Buttons

This is a lightweight, simple solution for adding sharing buttons to your site. Like many things, there are many ways to achieve this but the main goal of this solution is performance. (web-design-weekly.com)

Last but not least…

On being overwhelmed with our fast paced industry (wesbos.com)

Understanding npm (nodesource.com)