7 posts
An accessibility audit on LifeLog turned into a hunt for four contrast traps: code comments at 3.9:1, project badges failing in 4 of 6 palettes, a theme selector that Astro scoping silently broke, and the alpha that axe-core refuses to compose. The result: 14 routes x themes with zero serious/critical violations.
Four commits in a row touching the LifeLog navbar, each one undoing the effect of the one before it. Links that disappeared, a logo that jumped away, a button that floated on its own. The lesson: refactoring in a hurry across a jumble of classes is like baking a cake while changing the recipe at every step.
After 5 days making the circle start from the click on desktop, mobile still used a crossfade — by documented decision: clip-path paints per frame and janks weak GPUs. Until Samuel asked for the opposite. What made the reversal possible? The anti-stutter fixes that were already in global.css.
Five days trying to make a circle of light start exactly where the finger touches. The CSS looked right, CI passed, but the user saw stutter, wrong origin, and content wiping out. The root cause wasn't the code — it was the interaction between the View Transitions API, Chromium blend modes, and a ghost node_modules.
Instead of replacing the circular reveal with basic crossfade, I fixed the root cause of stutter on low-end GPUs. VT clip-path + clean fallback.
Systematized LifeLog's animations: stagger on timeline cards, scroll shadow on navbar, micro-interactions on tags/pills/search, and a single easing curve for everything.
Removed the circular clip-path animation that kept stuttering and simplified to a pure crossfade for the LifeLog theme switcher.