Responsive Components for Layouts You'll Never See
Swap a card's viewport media query for a container query the host establishes, find the breakpoints its content needs, and keep user preferences and product intent in the mechanisms that own them.
Tagged Lit
How to Choose a Frontend Technology for the Long Term
A practical way to evaluate a frontend technology as a long-term commitment, from how much of your app it takes over to what replacing it would cost, with my own decision to build on Lit as the example.
Making a Long List Fast: content-visibility vs. Virtualization
The two best-known fixes for a slow list solve different problems and cost you different things. Measure which cost you're actually paying, then keep the DOM with content-visibility: auto or drop it with a virtualizer and rebuild the behaviors that disappear with it.
Building an Accordion the Browser Can Search
Build an FAQ that stays findable when it's collapsed, learn which hiding technique to pick by who should still reach the content, and let <details name> and hidden="until-found" hand discovery back to the browser.
Let CSS Pick Your Text Color
Build a smart badge whose foreground, border, and tonal dot derive from one accent, and learn which color decisions CSS can own with color-mix(), relative color syntax, light-dark(), and contrast-color(), and which still belong to your design system.
The Four User-Preference Media Queries Your CSS Should Honor
Build one adaptive card and learn to read motion, contrast, forced colors, and pointer input as signals from the user and device, then sort each into requirement, enhancement, or the one signal you can't depend on yet.
How animation-timeline: scroll() Replaces Scroll JavaScript
Build a reading-progress page, delete the JavaScript that only paints, and learn which scroll work still belongs to JavaScript.
HTML in Canvas: Render Real DOM Inside <canvas>
Build the shippable DOM-over-canvas version of a product configurator first, then feature-detect the experimental HTML-in-Canvas path, and learn how a senior decides what the platform owns, what the product still owns, and what fails safely when a frontier API is missing.
A Date Is Not a Day
Build an event-time component with Temporal and learn why "the same calendar day" is a different question in every time zone, and why an instant, a calendar date, and a duration are different review questions.
The Modern Tooltip Is a Systems Problem
Popover, CSS anchor positioning, and interest invokers turn a tiny UI request into a lesson about layering, placement, triggering, semantics, and fallback design.