Scaling CSS: Two Sides of a Spectrum

There are essentially two solutions for styling at scale: Total isolation and total abstraction. Total isolation is some version of writing styles scoped to some boundary that you've set up (like a component) in which those styles don't leak in or out. Total abstraction is some version of writing styles that are global, yet so generic and re-usable, that they have no unintended side effects.

Tagged Template Literals

What can we actually do with this? Well, we could change this so any value that gets passed in gets wrapped in a <span> and we can use CSS to highlight it. You maybe want to show your user which pieces of the string were variables or which pieces of the string that they passed in, maybe it’s their user name or a total for an order. In our case, we just want to highlight the name and the actual age.

Finding the Way: screen reader strategies

Sometimes the thing that makes a website difficult to understand for a screen reader user is the absence of information, and that is a problem that is not identified in automated scans.

Inlining or Caching? Both Please!

Our two go-to options to achieve this goal are inlining and server push, but each has drawbacks: inlining prevents a file from being cached for reuse, and server push is still a bit experimental, with some browser bugs still being worked out. As I was preparing to describe these caveats, I thought, “I wonder if the new Service Worker and Caching APIs could enable caching for inline code.” As it turns out, they can!

Squoosh

New tool from Google: Compress and compare images with different codecs, right in your browser