Log

Logs

Notes on patterns, practices, and workflows from the Joyco team.

13Reduced motion and GSAP: The Invisible Collision Layer53
12The Render Pipeline166
Deep dive into each stage of the browser rendering pipeline — what runs on main vs compositor thread and what makes each step slow.
11WTF Is Layout Thrashing35
What forced reflows are, why interleaving DOM writes and reads tanks your frame rate, and how to batch them.
10Color Spaces sRGB & Linear22
How sRGB encoding spends precision where your eyes care most, and why shader math must happen in linear space.
09Performance Monitor35
Chrome DevTools' real-time Performance monitor panel for catching memory leaks, layout thrashing, and jank as it happens.
08WebGL Scroll Sync73
Why WebGL canvas content drifts from the DOM during fast scrolls and how to fix it with compositor-aware techniques.
07Promises, PPR, and the Root Provider Pattern21
Pass promises instead of awaited data to context providers so the shell renders instantly with PPR.
06Parallel Claudes with cw19
Run multiple Claude Code sessions on the same repo without conflicts using git worktrees managed by cw.
05Group-has-[.magic]19
Style distant elements based on child state using Tailwind's group and has-[*] modifiers instead of lifting state.
04Context is all you need13
Replace prop drilling with React context to share state and derived values across deeply nested components.
03Agentic Thinking25
Design fewer but more capable tools, enforce clear usage criteria, and keep context windows lean.
02AI Driven Development27
Managing your main attention thread, shaping features with AI, and offloading long-running work to background agents.
01The Slot Approach33
Style inner elements from the parent using data-slot attributes instead of multiple className props.