This week I got super excited about Design Systems!

A design system is any set of tools, processes, and guidelines that helps you drive how your product is designed and developed. They help coordinate between design and development teams, and are key to high quality user interfaces.

We are in a golden age of design systems due to the coordinated rise of three separate factors. Learn more in this week’s Friday Frontend Inspiration Video:

Enjoy!
KBall from ZenDev

CSS & SCSS

How to build complicated grids using CSS grid

Very interesting walkthrough of building a complex, non-traditional grid with some funky offsets and ratios using CSS grid. I love how much CSS grid is sparking a renaissance in what types of layouts we can even consider on the web. Very cool!


9 Biggest Mistakes with CSS Grid

Wonderful video by Jen Simmons going through a number of common mistakes that happen as folks begin using CSS Grid. For each, she goes through not only the mistake but some thoughts about where it’s coming from and highlights better solutions. I’m not a huge video-watching guy, but this is 100% worth the 14 ½ minutes.


CSS: A New Kind Of JavaScript

A snarky take on the “CSS in JavaScript” debate, this post imagines a world where styling in JavaScript came first, and shows how CSS solves many of the problems that such an approach would introduce. Nothing too crazy here, but it tickled my funny bone.


4 CSS tricks I’ve learnt the hard way

A handy set of tricks for extremely common problems. Definitely you should be using box-sizing: border-box;, and I love the border-pulse animation for drawing attention, though the example is pretty aggressive; a subtler version is probably better for most sites.


The Complete Illustrated Flexbox Tutorial

For visual learners, this is a wonderful way to get a grasp on everything in Flexbox. The graphics in here are phenomenal, so if there’s any piece of flexbox you’ve been struggling to visualize or understand, check this out.


JavaScript

The Best Explanation of JavaScript Reactivity 🎆

An excellent explanation of how Reactivity works in Vue.js. I saw this in talk form at VueConf.US and it was simply outstanding, and the article makes it even easier to understand. That said, for those who prefer the interactive presentation there is a video available as well.


What Are Service Workers and How They Help Improve Performance

A solid introduction to service workers, introducing not only the concept but walking you through how to get started and write a service worker for yourself from scratch. That said, you really shouldn’t be writing them from scratch - the Service Worker Workbox from Google has plug-and-play libraries that utilize best practices for a wide range of the functionality you’ll want to build into a service worker.


Render Children in React Using Fragment or Array Components

One of the biggest changes in React 16 was the ability to have components with multiple roots. This is huge for flexibility of component design - there are situations where there are coherent sets of subcomponents that belong to be organized together, but where the DOM structure doesn’t allow wrapping them. List elements and table rows stand out as example. This post goes through how to implement this using React.Fragment or with arrays in a render function. For similar functionality in Vue.js, check out this post I wrote a while back on multiroot components in Vue.


10 JavaScript string methods you should know

In a previous edition of the newsletter I linked to a wonderful article titled ‘ 10 JavaScript array methods you should know’ highlighting the incredible functionality now available in modern JavaScript Arrays. The same author is back again, with a set of great string functionality that now comes built-in (accessible via babel even for old browsers), so more and more you can do without ever needing lodash or equivalent. Enjoy!


JavaScript eating the world, desktop edition

In the latest edition of the JSParty podcast, I got a chance to talk with some of the core members of the Electron team. It was fascinating to learn more about Electron as a platform, how they’re improving it, and where it is going in the future. Definitely worth a listen through on your drive home.


Other Awesomeness

UIengine 1.0

UI-driven development is definitely something I’ve been hearing more and more about, and I’ve heard very good things about storybook, but this is still an area that is ripe for tooling innovation and I’m excited to see a new player entering the space with UIEngine.


Design Systems at GitHub

Speaking of UI-driven development, here’s a case study of creating a shared design system and component library for use across a company. I love to see a company being honest about their approach and the different scaling challenges they’ve had.


The Secret To Connecting Designers and Developers

Another look into the power of design systems, this time from Invision, highlighting the power of these tools to align design and development within a company. Make sure you click through to the (free, no email required) e-book on design systems at the bottom of the post! This post is the appetizer, but the e-book is the main course, and it is 🔥🔥🔥


Building the Google Photos Web UI

A fascinating look under the covers of building a high-performance UI that scales to thousands upon thousands of photos while feeling snappy and reactive the entire time. Many many nuggets of front-end performance gold buried in here.


Create your own Serverless API

Pretty neat example of how simple it is to set up an “API endpoint on demand” using Microsoft Azure’s serverless functions implementation. I feel like my head is still wrapped up in the “building apps” approach to the world, but when it’s this easy to set up an infinitely scalable endpoint, JAMstack approaches (pure static frontend + apis) start to look awfully appealing.