Mr Branding: Web Design Weekly #317

Monday, April 30, 2018

Web Design Weekly #317

Headlines

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)

Articles

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)