The thing was, I wanted to use all five of [the illustrations], and I wanted them to be picked on a random-ish basis. I could have written PHP or JS or some such to inject a random pick, but that felt a little too fiddly. Fortunately, I found a way to use plain old CSS to get the result I wanted, even if it isn’t truly random. In fact, its predictability became an asset to me as a designer, while still imparting the effect I wanted for readers.
Announcing: <watched-box>: I wanted a simple, declarative container queries solution, and here it is! Custom Element + ResizeObserver; Use and mix together any CSS length units; Orientation supported; 1.5KB minified!
For the last month I’ve found myself subconsciously jumping on “easier” tickets where I feel a high level of expertise (CSS tasks, layouts, prototypes) and I’ve struggled to get through tickets that have a high learning curve or cognitive load. Those deep work tasks are hard to sustain when reality, in the form of kids or breaking news, comes crashing through my door.
When compared to effects available in graphics editors such as Photoshop and the likes, CSS is still a long way behind. SVG, on the other hand, comes with a set of filter primitives that enable you to recreate Photoshop-grade effects in the browser, using just a few lines of code.