Friday Frontend: Start of Hanukkah Edition

Hey there,

Last night we celebrated the first night of Hanukkah in our household. Not only is it a great excuse to eat lots of food fried in oil, but it is a reminder to appreciate blessings and things that turn out better than expected even during great hardships. During this time of COVID and isolation, I appreciate that I’m still able to communicate with all of you, and how many of you have written to me with your feedback, ideas, and questions. Thank you.

I continue to be slammed with work, so this week’s newsletter is pretty short again. Hope you are all staying safe and well.

Best,

KBall from ZenDev

CSS & SCSS

What Makes CSS Hard To Master

An interesting and useful exploration of some of the underlying complexities that make CSS hard. Multiple layers of coupling (between different properties and different declarations) is a lot of it, but there’s more. I like the point that if we describe CSS as easy, folks will then get frustrated when they get stuck, but if we’re honest about how difficult it is to master that will align expectations better.

How to Animate a SVG with border-image

Both a useful exercise and a fun result.

Native Aspect Ratio Boxes in CSS thanks to aspect-ratio

Another place where browsers and specifications are catching up to needs. Instead of awkward padding-based hacks, we will soon (in nightly builds now for both Chromium and Firefox!) be able to explicitly specify aspect ratios.

State of CSS Survey Results

As with most online-based surveys, I would be very cautious about drawing conclusions about the world broadly from this, as the representativeness of their sample is almost certainly not perfect, but this is still a fascinating lens into what’s going on in the community. And since they include showing change since the prior year, it captures some interesting trends within the part of the community that responds to this type of survey. I also greatly appreciate how the presentation includes recommendations from leaders in the community and links to resources about different features.

JavaScript

Incremental vs Virtual DOM

This article made me laugh. It positions “Incremental DOM” as a new advanced method, where as far as I can tell from the article it means “Just going back to using the DOM as the source of truth”. This isn’t new! That’s what all us old-school developers writing jQuery were doing! The reason for the virtual DOM as an innovation by React and quickly copied by other frameworks was that interactions with the DOM were slow, and the virtual DOM let you minimize them, which made it worth the overhead. All that said, I *do* think it is interesting that some modern frameworks are going back to the calculation that maintaining a virtual DOM is unnecessary, and that either the DOM is fast enough now or we can simplify our component rendering process enough that it is unnecessary.

React interview cheatsheet

Useful as a high level summary / jumping off point for understanding a number of the pieces of React and how they work. Wouldn’t recommend it for someone who feels super solid on React, but pretty good if you’re new to the framework.

5 Mistakes to Avoid When Using React Hooks

This is a useful article. Instead of telling you “what to do”, it highlights a number of very easy to make and common mistakes when using React hooks. Reading through this will help you notice patterns and debug your own code faster.

Other Awesomeness

Apple Music JavaScript integration guide

Real-world example of integrating with a 3rd party API. Doesn’t go super deep, but I appreciate how it also doesn’t breeze past the setup portion, but shows the steps needed to actually get an account and access token together.

Web Performance Calendar

“Advent Calendar” style site with a new web performance post rolling out every day of December. 

Changing Lanes: How Lyft is Migrating 100+ Frontend Microservices to Next.js

This is interesting from an architectural approach perspective. The value of micro frontends with independently evolving codebases is an ongoing discussion in our industry. It solves some of the same organizational problems that microservices do, letting teams move quickly and independently, but as this article highlights it creates new problems. Especially in an ecosystem that evolves as quickly as the JS ecosystem (and requires frequent updates), the maintenance benefits of standardizing on a single approach like this may outweigh the benefits of micro frontends.

From REST to GraphQL

A guide for migrating from a REST based API to a GraphQL one. Some interesting pieces in here - I didn’t know Apollo had a tool for mocking out a GraphQL service entirely on the frontend over an existing REST API. That’s cool!