Web Design Weekly #317


The Hidden Trap in Design Systems

Brian McKenna shares some thoughts around the negative aspects of design systems. I can’t say I 100% agree with him, but it does raise some concerns that are worth thinking about. (uxplanet.org)

Save valuable time with on-demand bug reproduction.

​FullStory captures every customer session on your site and replays it like a DVR, complete with the JavaScript console log and all underlying code. FullStory makes it easier than ever to diagnose problems without time-consuming repros or email exchanges. Get started with a free trial today. (fullstory.com)


Replace Animated GIFs with Video

In this article, Jeremy Wagner explains how the GIF hosting sites keep their bandwidth bills from going through the roof, and convert those giant GIFs into lean and fast video files. You’ll then learn how to properly embed these videos in web pages so they behave just like GIFs. Performance for the win. (developers.google.com)

Scrolling Interactions & Techniques

Jose Virgil Almeda tested some scrolling interactions in three different designs and found some do’s and don’ts, pros and cons, and a few rules about how to incorporate scrolling into your work correctly. (uxdesign.cc)

Making high quality video efficient

An in-depth look into how the YouTube player works and what the team do behind the scenes to make things as smooth as possible. (youtube-eng.googleblog.com)

Webdev on Windows with WSL and VS Code (daverupert.com)

Tools / Resources

CSS Blocks

A component-oriented CSS authoring system that compiles to high-performance stylesheets. By combining an opinionated authoring system, build-time analysis and rewriting of templates, CSS Blocks breathes new power and ease of use into the technologies and best practices that stylesheet developers already know and love. (github.com)

Grid to Flex

If you need to support users of IE11 and below, or Edge 15 and below, grid won’t really work as you expect. This site is a solution for you so you can start to progressively enhance without fear. (gridtoflex.com)

Eqio – a simple, tiny alternative to element/container queries

Eqio allows you to attain the holy grail of responsive web development/design systems: components that can adapt their styling based on their width, not the browser‘s. It uses IntersectionObservers under-the-hood to apply appropriately named classes to the component when necessary. (github.com)


Minimalistic Vue-powered static site generator (vuejs.org)

Using PhantomJS with PHP to screenshot webpages (themaninblue.com)

BuzzFeed’s design interview process open sourced (github.com)

Podcasts for Web Designers and Developers (smashingmagazine.com)

Node 10 released (nodejs.org)


Making Unsplash for the Mobile (medium.com)

CSS Houdini Experiments (css-houdini.rocks)


Product Engineer at Zapier

We’re looking for a Product Engineer to join the engineering team at Zapier. Want to help engineer a simple product that allows anyone to do complex, incredible things with the world’s APIs? (zapier.com)

Front-end Engineer at Help Scout

We’re looking for someone who’s really smart, and humble, and thorough, and meticulous, and self-motivated, and kind, and a little funny, and tenacious, and did I say self-motivated? Well, that’s because we’re a remote company. (helpscout.com)

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

Last but not least…

What five words best describe programming? (twitter.com)