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 · #testing

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-07

Making Nested UI Re-renders O(1) — read-model, external store, and render-count tests

In an immutable-tree editor, editing a single line redrew everything; here's how I first pinned the problem with a test, then cut row and container re-renders with a normalized projection and per-id subscriptions

  • An immutable tree patch gives ancestors a new ref too, so passing props down triggers O(depth) re-renders — a normalized entry plus per-id subscription can cut it to O(1)
  • The entry cache must be stabilized by output value-equality, not input ref, and the external store sync must run synchronously at the choke point right before setState
2026-07-05

Block-Editor Ordering, Collaboration, and Keyboard Contracts

General patterns: fractional ordering, optimistic rebase, IME defer, keyboard undo delegation, scoped popover, Jest ESM shim, and more

  • For sibling ordering, a fractional position key + neighbor anchor + tie-break is better for concurrent inserts than an integer index.
  • Optimistic UI can't rebase without an inverse patch, and the remote seq must be the merge authority.