9 min read
The Micro-Interactions I Add Last That Make a UI Feel Fast
Optimistic UI updates before the server confirms feel instant to users
The Lab · Written in the open · Tagged CSS
Lab.
Working notes from the studio. The tools I build, the workflows I keep, the mistakes I paid for.
31 entries · latest 2026-10-02
Latest entry
I Measured content-visibility: auto on 3,000 Cards
I rendered 48 to 3,000 product cards in headless Chromium with and without content-visibility. Long pages win big, the copied one-liner can lose.
Read the entry
TLDR
This entry in one minute
- At 3,000 cards the first frame dropped from 144 ms to 38 ms in headless Chromium 145
- Without contain-intrinsic-size, Chromium rendered 444 cards instead of 16, and a 200-card page got slower
- A 360 px height guess made the page 36 percent too short and broke scroll restore
All entries · CSS
9 min read
Accessible Color Contrast Without Killing the Brand
I keep a dark UI with a bright accent WCAG-AA readable at 4.5:1
8 min read
The CSS color-mix Patterns I Use Across Every RAXXO Theme
One brand variable feeds hover, disabled, surface, and text colors
9 min read
Form UX in 2026 Native HTML Validation Is Finally Enough
Removed a 12 KB validation library across 3 surfaces using native HTML
9 min read
Starting Style and Entry Animations in CSS Without JavaScript
@starting-style ships in every modern browser as of 2024
9 min read
The Native Popover API: 4 Menus and Tooltips I Built Without JavaScript
Popover attribute gives top-layer rendering and light-dismiss free
9 min read
Loading Skeletons That Don't Lie: 5 Patterns for Honest Perceived Performance
Content-shaped skeletons cut layout shift to zero versus 0.18 CLS for spinners
8 min read
5 CSS Animations That Needed JavaScript Until 2026
interpolate-size and calc-size finally let a panel transition to height auto with no measuring script.
8 min read
CSS Carousels With Zero JavaScript: 5 Patterns
A scroll-snap track plus the new pseudo-elements replaced a 14KB carousel dependency in my UI.
11 min read
CSS Scroll-Driven Animations: 6 Patterns I Ship in 2026
CSS scroll-driven animations in 2026: 6 copy-paste patterns using animation-timeline scroll() and view(), zero JavaScript.
9 min read
CSS :has() in Production: 6 Selectors That Replaced JavaScript Across My Sites
Six :has() selectors deleted roughly 240 lines of JS across my sites