Friday Frontend: Independence Weekend Edition

Hey there,

Most years on a July 4th weekend I’d be spending a ton of time hanging out with friends, eating and drinking and being merry. This year, with COVID-19 on the upswing again, I’ll be celebrating just with my family. I hope you too are staying safe and healthy. We will get through this, but only if we don’t throw caution to the wind just because we’re feeling isolated.

There’s some truly great articles this week that you should definitely take the time to read. I absolutely LOVED the article on global and component style settings, the article on reactivity in Solid blew my mind, and ‘Accessible to some’ is a brilliant way of demonstrating the impact of accessibility work. Enjoy!

Best,

KBall from ZenDev

CSS & SCSS

Global and Component Style Settings with CSS Variables

Absolutely brilliant article diving into how you can use CSS Variables to build a simple, logical, easily themeable component library usable in any project with any design system. I don’t work on ZURB Foundation any more, but if I did this is absolutely the approach I’d be pushing.

When Sass and New CSS Features Collide

As powerful as CSS is becoming, there’s still a ton of things you can do in Sass that aren’t available in CSS. Mixins and the resulting modularity/reusability is top of mind for me. But what do you do when there’s a syntax collision between new CSS and Sass? The author walks through how that can happen, where it happens, and then highlights a clever workaround. 

Styling Layout Wrappers In CSS

Back to basics article but one that is super in-depth and well done. Wrappers are one of the fundamental building blocks you learn as your styling skills grow -- there are so many layout tasks that are hard or impossible without them but trivial with them. This article breaks down what they are, how they work, and a number of usecases.

New in Chrome: CSS Overview

Woah, this looks cool! A new developer tool being tested in Chrome that gives you a quick overview of everything going on in a page. I particularly like the way it will just show you all of the colors in use -- this can help you quickly diagnose if you’re following a design system or slap dash all over the place.

JavaScript

SolidJS: Reactivity to Rendering

The concept of reactivity seems to have been gradually taking over front-end web development for a while, but I love that I’m seeing more and more people talking about it explicitly rather than just as one tiny piece of a large framework. This article is super in depth, but if you’re interested in getting a deeper grasp on how reactivity works and how you can build more complex functionality very naturally on top of it, it’s worth the time.

Exploring React Renders: Different Ways a Component Gets Re-Rendered.

One extremely common source of performance issues in React is having an expensive component that is re-rendered a lot. And frequently that rerendering is happening by accident, due to not understanding exactly what triggers the rendering cycle. I’ve definitely been bitten by this. This article dives into the different situations that cause a re-render; having those in your head will help you reason about this. I wish it also went into techniques for preventing those rerenders, but it looks like the author is planning a second post on that subject.

How I work with arrays

Nice, easy to read article on useful techniques for working with arrays. While I shy away from the words “best practices”, many of these I think would fit in that category - they will keep you out of trouble if you follow them.

Understanding Template Literals in JavaScript

A dive into how strings work in JavaScript, comparing template literals to traditional single and double quote strings. If you’re already using template literals day in and day out, you probably don’t need this article. But if you’re not… woah, definitely take a moment to read through this. IMO, template literals are strictly superior to other strings approaches in JS. I use them for everything but the very simplest of strings. And especially with tagged template literals… those have become the underpinnings of tons of great libraries like styled components, graphql-tag, and more.

Other Awesomeness

Accessible to some

Brilliant illustration of the way ignoring accessibility impacts people. The author created a thought experiment -- what if we treated mouse & “traditional” browser users the same way we treat screen reader users? They implemented this experiment (definitely follow their link and check it out) and then proceed to talk about the shortcomings the way websites often talk about accessibility shortcomings. Very well done.

Information And Information Architecture: The BIG Picture

A misconception I had when I first started moving into the front-end was that design was all about “making things pretty”. This mistake made me both devalue design, and underestimate my ability to think about and reason about design. The lightbulb moment for me was when a designer friend sat me down and talked me through the concept of information architecture. THIS made sense to my engineering mind, and suddenly many of the things I’d brushed off as minor started to seem important as I saw how they impacted the user’s perception of information. If you don’t have a designer to sit you down and talk through this, try this article instead.

Testing your animations for “prefers-reduced-motion” support

Short and to the point. Highlights why we should care about the prefers-reduced-motion media query, how to use it, and how to simulate it with devtools for test.

Selection controls — UI component series

More on the design side, this is a look at the state of the art in terms of components for making selections. Not content to stick with checkboxes and radio buttons? Learn about toggle switches, choice chips, and more. Includes a nice breakdown of situations when it makes sense to use each.

The physics behind spring animations

Great look behind the scenes at what goes into a good spring animation. Useful both in terms of understanding the underpinnings, but also in just getting a grasp of the levers you can pull on to tweak your own animations.