#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.