bblog

Today I Learned

Daily reflections on work and learning—what I did and what I learned.

Alla11yanimationarchitecturebrowserbundlingcachingcanvasci-cdclscollaborationcssdrag-and-dropeditoreslintimagesimmutabilitylanding-pagemeasurementmobilemodalmonoreponavigationnetworknextjspage-transitionperformanceplaywrightpointer-eventsreactreliabilityscrollsearchsecurityselectionseoserverlessservice-workershellssrstorytellingtelemetrytestingthemingundousesyncexternalstorevirtualizationwebpackwebsocket
Search starts automatically 350ms after you stop typing.

3 entries · #css

2026년 7월

2026-07-11

Directing a scroll-driven home-hero narrative

A day implementing a TIL→Knowledge promotion demo and a pipeline section with sticky scrolly, CSS keyframes, and view-timeline — no GSAP

  • sticky scrolly makes a scroll time axis as tall as the wrapper, and if phases derive from progress the JS stays thin
  • A hero live demo can build a loop with just a clip-path steps wipe + animation-delay
2026-07-10

Modal peek stack and a CSS-layer package

A day aligning peek UX and theme customization via document push inside a single dialog and @layer-based editor CSS splitting

  • gallery→peek is more continuous when you just swap documentId in the same shell rather than opening a fresh dialog
  • async resolve must block the (newId, oldContent) intermediate frame with a render-time reset

2026년 6월

2026-06-30

Direct-Upload Contract, CSS-Token Theming, Hydration Boundaries

Shared principles learned from the 4-step presigned-URL upload, a single generator for @layer-based token theming, and fr layout with post-mount hydration

  • A presigned-URL upload is a 4-step contract of presign→PUT→complete→create, and skipping the complete notification means the backend never registers the upload.
  • CSS-token theming must separate @layer (priority), @scope (scope), and light-dark() (mode), and unify runtime and build CSS under a single generator so they don't diverge.