bblog

Today I Learned

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

Alla11yanimationarchitecturebabelbrowserbrowser-compatbrowser-extensionbundlebundlingcachingcanvasci-cdclscollaborationcompound-componentcssdebuggingdrag-and-dropeditoreslintetaghydrationimagesimeimmutabilityindexeddbinfinite-scrollisrlanding-pagelcpmeasurementmessage-passingmigrationmobilemodalmonorepomotionmutation-testingnavigationnetworknextjsobject-urlofflinepage-transitionpaginationperformanceplaywrightpointer-eventspolyfillproxyreactreact-hooksreact-queryredirectreliabilityrpcscrollsearchsecurityselectionseoserverlessservice-workershellssrstorytellingstructured-datatanstack-querytddtelemetrytest-oracletestingtext-anchoringthemingtype-safetytypescriptundousesyncexternalstorevariancevirtualizationwebpackwebsocketworkflow
Search starts automatically 350ms after you stop typing.

3 entries · #hydration

2026년 7월

2026-07-31

Legacy Browser Compat Is More Than babel Alone — the Multi-Layer Contract of Syntax, Polyfill, Conditional Load, and Smoke

What I learned fixing a bug where an app dies wholesale on a browser more than five years old — when several features die at once, suspect hydration; separate syntax down-leveling from runtime polyfills; load polyfills only on old browsers via feature-detect; and make the smoke run real interactions

  • When several UI features die at once, first suspect a common root cause like hydration/bundle parsing rather than separate bugs
  • Syntax down-leveling (babel) and runtime APIs (polyfill) are separate layers — a transpiler rewrites syntax but does not create missing functions
2026-07-25

First-Paint Splash and Offline-First — Getting Instant UX While Keeping ISR

The inline-script technique for showing a native-app-like loading splash from the first paint while hiding it from bots, and how to make 'my writes reflect instantly' in offline-first with invalidate and a durable queue rather than staleTime

  • Reveal before first paint + hide from bots is inline blocking script injection — a UA gate breaks ISR into dynamic via headers()
  • In react-query, "my writes reflect instantly" comes not from lowering staleTime but from invalidateQueries after the write (invalidate ignores staleTime)
2026-07-24

When the LCP bottleneck is hydration, not the image — and restrained scroll motion

What I learned improving landing performance — when LCP is slow but the image is small, suspect render delay (hydration) and strip client JS; prefer entrance stagger reveal over flashy scroll motion; structured data must be 1:1 with the screen

  • When LCP is slow but TBT is 0 and the image is small, suspect element render delay (= hydration at the client boundary) and strip the client JS from that surface
  • A short viewport-entrance stagger reveal is often the universal answer over flashy scroll-dependent motion (scroll-jacking)