#12 / May 12, 2021

Next Gen CSS: @container

Chrome recently shipped an experimental implementation of @container queries in Chrome behind a flag. If you're not familiar with container queries — the MDN page cuts to the chase pretty quickly, but in short — they represent a fundamental change to the way we make sites responsive. Rather than applying styles to elements when the viewport is at a certain size, they allow us to apply styles when the elements themselves (or "containers") are at a certain size.

Now that it's 2021 and everything is a component, you can probably imagine why this would be a groundbreaking change. (And yes, we've been able to do this for years now using ResizeObserver but @container queries allow us to do it purely with CSS.)

Disabled buttons suck but they don't have to

Two great articles for the price of one. I admit, I was not aware of all of the reasons disabled buttons suck. The proposed alternatives (to disabling buttons) in the second article feel like common sense and result in a better UX regardless of whether or not you have disabilities.

Every design is a system

[Inexperienced designers] don't think of every design project as a design system. They don't appreciate the interconnectedness of their design decisions. They solve design problems in isolation, not as a whole.

TypeScript Function Syntaxes

Ever been confused writing types for a function in TypeScript? Kent C. Dodds covers every conceivable scenario in this reference-style post.

Topframe

This is weird. And cool/powerful. But mostly weird. Also shoutout to those of you who, like me, had this exact thing decades ago via Active Desktop.