Friday Frontend: Rough Week Edition

This has been a rough week for those of us in the US, and I suspect for some folks outside the US. Some very very dark and messy stuff playing out on the national stage. If learning about front-end stuff helps distract you, hope you enjoy this week’s links. And if you’re feeling too emotionally strained to even think about this stuff right now, know I’m right there with you.

Take some time for self care. And if you haven’t been triggered by any of the stuff going on, lend some sympathy to anyone in your life who has been.

Hope you have a great weekend!

KBall from ZenDev

CSS & SCSS

Don’t use empty or low content for your design system grid examples

This is kinda blowing my mind. Exploring the fact that CSS-Grid based systems can not only reproduce the type of regular, controlled distribution of layout that we had before but a fascinating new type of system where grid sizing and space is determined by the content within it. Very very cool!

Putting things on top of other things

Fascinating exploration of the concept of ‘stacking contexts’. My previous primary exposure to them was with z-indexes, and this will help you if you ever get frustrated with z-index not doing what you expect, but this article also goes into the other effects of a stacking context and how that impacts things like blending and more.

What is Modular CSS?

A walk through the history and thinking behind modern CSS naming schemes and approaches. Explains what systems like OOCSS, BEM, and SMACSS are, but also walks through the thinking. A great overview of ‘component-oriented’ coding from a CSS (rather than JS framework) perspective.

3D Emoji Town (Pure CSS)

Mind totally blown by this one. An entire animated town, built entirely with html and css, with the only javascript being an event handler on a slider that lets you rotate the town in 3d. Wow.

JavaScript

A Beginner’s Guide to Closures in JavaScript

Closures are one of those language features that have been around since the beginning and are key to really starting to understand and work well with JavaScript. This article not only gives you a sense of how they work, but goes deep on the ‘why’ behind how they work.

5 Tips to Write Better Conditionals in JavaScript

This is a really nice “how to write better code” article. Some specific concrete tips that help you to write cleaner, more readable conditionals.

A Minimal JavaScript Setup

This article presents a JavaScript library/miniframework that the author was involved with writing, but that isn’t the interesting part of it. The great part of this article is the analysis of what decisions a framework needs to make. It breaks down what are the components of a modern JavaScript application and how those get represented in frameworks. Very valuable for understanding the big picture of how these things work.

Using Scoped Slots in Vue.js to Abstract Functionality

Took me a couple read throughs to fully wrap my head around this, but essentially what this is showing is how to use Vue’s scoped slot functionality to create what in the React World would be called higher order components with render props. Essentially wrapper components that add particular functionality but can then be used with arbitrary children.

3 Anti-patterns for Conditional Rendering with React

With JSX being “just javascript”, there are many many ways to achieve the same goals. This article dives into some of the mechanisms you might use for conditional rendering, and what the downsides of these particular approaches are.

Other Awesomeness

Content and Design Are Inseparable Work Partners

This is highlighted around design, but I’ve found it to be true for development as well. Any development that you do with purely “dummy data” that is not representative of actual data is incomplete at best. To build a truly robust system, you need to have an understanding of the real data that is going to be in it.

The “Developer Experience” Bait-and-Switch

A very important contribution to the conversation about our continued move to put more and more things in JavaScript. Many times tradeoffs are made in the name of ‘developer experience’ (like, for example, CSS in JS) and we handwave away the user costs based on an argument about iteration speed. These arguments may or may not be correct, but as this article presents we’ve neither validated them nor set up systems to make sure we keep developer motivations and user motivations aligned.

A framework for web performance

Along a similar line as the previous article, but instead of making an argument about what we should be valuing, this talks about how we even go about measuring web performance. What are the relevant things to look at, and if we want to optimize how should we determine what will be the most valuable.

Accurately measuring layout on the web

Continuing in the performance theme, this article looks at how we measure our JavaScript performance, particularly looking at JavaScript that manipulates the DOM. The author argues that a true measure of performance has to include the resulting formatting & layout work that the browser does as a result of your JavaScript, and looks at some mechanisms for measuring.

An open governance model for the AMP Project

If you think that AMP plays a valuable role outside of prefered google results (and I think it very well may - it’s another take on the mobile performance question) then this is a very good sign. The tech lead of the project announces a move towards an open governance model with a technical steering committee.

---

Happy Friday!

That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably follow me on Twitter or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html