Web Design Weekly #307


How to gain widespread adoption of your design system

If you are trying to get a design system off the ground within your workplace this article by Julie Nergararian has some greats takeaways that might help you get things over the line. (medium.com)

The increasing nature of frontend complexity (logrocket.com)

Sponsor Web Design Weekly and reach over 27,626 passionate designers and developers


Making SVG icon libraries for React apps

Nicolas Gallagher describes how to make a package of React components from a library of SVG icons. (nicolasgallagher.com)

Using Media Queries For Responsive Design

This article by Rachel Andrew takes a look at the use of media queries for responsive design today, and also looks at what is coming in the not too distant future. (smashingmagazine.com)

Streaming Server-Side Rendering and Caching at Spectrum

Max Stoiber describes the journey to high performance server-rendering of their React application with streaming responses and distributed caching. (zeit.co)

What’s the difference between UX and UI design?

Simply put, UI is how things look, UX is how things work. UX is a process, while UI is a deliverable. Harshita Arora explains. (freecodecamp.org)

Tools / Resources

Automatic visual diffing with Puppeteer

Monica Dinculescu shares how to set up Puppeteer to do visual diffing so you can make sure your pixels are still in check. (meowni.ca)

A GraphQL Primer

Part 1 of a mini series by Eric Baer. The aim of the series is not to just understand what GraphQL is, but give you an insight into the drawbacks and explain the basics of how to work with it. (smashingmagazine.com)

Northwestern’s Online Master’s in Information Design and Strategy

The Northwestern IDS program is part-time and designed for professionals working in wide-ranging fields. Learn more about information management, design, content strategy, and technology. (northwestern.edu)

Reas – React as Anything

A minimalist and highly customizable component system built on top of React and styled-components. (reas.js.org)

React component library for building declarative multi-step flows (github.com)

Next.js 5 – Universal Webpack, CSS Imports, Plugins and Zones (zeit.co)

Nested routes with React Router v4 (tylermcginnis.com)

Redesigned Buildkite site (buildkite.com)

Font Awesome – V5 (github.com)


Staying inspired isn’t easy. Here’s how to do it. (invisionapp.com)

Tim Holman: Jolly JS Journeys (youtube.com)


UX Designer at Canva

As a UX designer at Canva it’s your mission to create experiences that distill the complex into the simple and give ordinary people the ability to make extraordinary things. (canva.com)

Senior Node/React Developer at Humanitix

Looking to work on an amazing platform that has a purpose? Come help disrupt the events industry! Are you a passionate developer who has delivered amazing projects using Node and/or React? then this is great opportunity to work with a fun team on an important problem. (humanitix.com)

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

Last but not least…


Create and share beautiful images of your source code. (carbon.now.sh)