bblog

Today I Learned

日々の仕事と学びの振り返りです。何をして、何を学んだかを記録します。

Alla11yanimationarchitecturebabelbrowserbrowser-compatbrowser-extensionbundlebundlingcachingcanvasci-cdclscollaborationcompound-componentcssdebuggingdrag-and-dropeditoreslintetaghydrationimagesimeimmutabilityindexeddbinfinite-scrollisrlanding-pagelcpmeasurementmessage-passingmigrationmobilemodalmonorepomotionmutation-testingnavigationnetworknextjsobject-urlofflinepage-transitionpaginationperformanceplaywrightpointer-eventspolyfillproxyreactreact-hooksreact-queryredirectreliabilityrpcscrollsearchsecurityselectionseoserverlessservice-workershellssrstorytellingstructured-datatanstack-querytddtelemetrytest-oracletestingtext-anchoringthemingtype-safetytypescriptundousesyncexternalstorevariancevirtualizationwebpackwebsocketworkflow
入力を止めてから350ms後に自動で検索します。

3件の記録 · #testing

2026년 7월

2026-07-31

旧ブラウザ互換は babel 一つではない — 構文・ポリフィル・条件ロード・スモークの多層契約

5 年超の旧ブラウザでアプリが丸ごと死ぬバグを直しながら学んだこと — 複数の機能が同時に死んだらハイドレーションを疑い、構文ダウンレベルとランタイムポリフィルを分離し、ポリフィルは feature-detect で旧ブラウザにだけロードし、スモークは実際のインタラクションを実行する

  • 複数の UI 機能が同時に死んだら、個別のバグではなくハイドレーション/バンドルのパースといった共通の根本原因をまず疑う
  • 構文ダウンレベル（babel）とランタイム API（ポリフィル）は別々のレイヤーである — トランスパイラは構文は変えても存在しない関数は作らない
2026-07-07

ネストされたUIの再レンダーをO(1)へ — read-model・external store・レンダー回数テスト

イミュータブルなツリーエディタで一行直しただけで全体が再描画される問題を、まずテストで固定してから、正規化projectionとid別購読で行・コンテナの再レンダーを減らした過程

  • イミュータブルなツリーpatchは祖先も新しいrefを受け取り、propsで下ろすとO(depth)の再レンダーになる — 正規化entry + id別購読でO(1)に減らせる
  • entryキャッシュは入力refではなく出力の値-等価で安定化すべきで、外部storeのsyncはsetState直前のchoke pointで同期実行する
2026-07-05

ブロックエディタの順序・協業・キーボード契約

fractional ordering, optimistic rebase, IME defer, keyboard undo 委譲, scoped popover, Jest ESM shim など汎用パターンの整理

  • sibling の順序は integer index より fractional position key + neighbor anchor + tie-break が concurrent insert に有利だ
  • optimistic UI は inverse patch なしには rebase できず、remote seq が merge の権威でなければならない