キーボード chord 収集ウィンドウ — 同時に押したキーを一つのイベントで確定しない
ブラウザは同時入力も keydown イベントに分けて送るため起きる「一緒に押したときだけ一方向になる」バグを、短く上限のある収集ウィンドウと固定ステップでの消費で解決する方法
Browser カテゴリーの知識文書です。
ブラウザは同時入力も keydown イベントに分けて送るため起きる「一緒に押したときだけ一方向になる」バグを、短く上限のある収集ウィンドウと固定ステップでの消費で解決する方法
DOM 座標だけでは壊れるハイライト復元を、引用・文脈・位置 selector の重み付きスコアと信頼しきい値で解決する方法
メモリを共有できない拡張機能の実行空間を、メッセージ API、runtime 検証、handler ルーティング、応答エンベロープ、変更通知で安全につなぐ方法
blur や Enter が変換途中の文字を確定保存してしまう理由と、イベント順序の仮定ではなく変換状態で直す方法
ネイティブアプリのようなローディングスプラッシュを初回ペイントから表示しつつクローラーには隠すには、SSR マークアップや UA 分岐ではなく body 最上部のインラインブロッキングスクリプトでノードを注入する。UA ゲートが静的キャッシュを壊す理由
LCP が遅いのに画像は小さく TBT がほぼゼロなら、ボトルネックはダウンロードではなく、LCP 要素がクライアントコンポーネントで hydration がペイントを妨げていることだ。診断とサーバー化の処方
createObjectURL を useMemo で生成し useEffect で revoke すると発生する断続的な画像崩れと、サーバープロキシ画像は直接 URL でレンダリングしてレースを根本から取り除くパターン
オフラインシェル（offline shell）フォールバックをすべてのリクエストに掛けると、画像・API の失敗に HTML を返して <img> が崩れキャッシュが汚染される。シェルフォールバックは request.mode が navigate の文書リクエストにだけ掛ける
CSS duration リセットだけでは JS スプリング・Observer ベースのページ遷移は止まらないため、matchMedia で明示的にゲートするパターン
非同期キャッシュ削除と stale-while-revalidate が重なるとき、generation で遅れて終わったリクエストの再保存を防ぐパターン
Canvas 2D グラフノードの色・きらめきを ID ハッシュで安定化し、globalAlpha・shadow 状態を復元するパターン
Service Worker Cache Storage でキャッシュを即返却しバックグラウンドで最新化する SWR パターンと、容量・セキュリティ上の注意点
animation-timeline view() と animation-range entry でスクロール進入の fade/slide を JS なしで作るパターン
optional display で遅延した webfont の swap を防ぎ、タグ・本文の layout shift（CLS）を減らすタイポグラフィ戦略
カスタムドラッグ・リサイズをモバイルで安定させる pointercancel、touch-action、coarse-pointer hover フォールバック
React commit は子 DOM から先に付けるため、子 useLayoutEffect の時点で祖先 ref が null でありうる — 祖先 DOM 副作用は useEffect に遅延する
position:fixed アンカーに一度だけ測った座標で貼り付けたポップオーバー・ツールバーがスクロール後にテキストから離れる原因と、scroll/resize 再測定パターン
テキスト選択ベースのフローティングツールバーを mousedown/mouseup ゲートの代わりに selectionchange で駆動する理由と、ハイブリッドエディタの所有権パターン
リッチテキストエンジンがフォーカス中に Mod-Z/Y を preventDefault する際、chainCommands で document undo へ明示的に委譲するパターン
CJK IME の composition session と contenteditable/React エディターで、commit defer・mount-once により変換の崩れを防ぐ原理
ブラウザネイティブのドラッグセッション API。OS ドラッグループと DataTransfer を通じてサブツリー境界を越える移動を実装する
user-select:none はドラッグ選択を防ぐだけで Selection/クリップボードからテキストを完全には除外せず、除外するには CSS generated content の方が安全
ローディングスケルトンが最終UIと異なる領域を占有するときにCLSが発生する原因と、高さ・幅を予約する処方
開発サーバー trace の outlier を避け、N 回の median で before/after を比較する実験設計
Lighthouse Performance スコア、カテゴリ audit、Chrome trace の ms がそれぞれ異なる計測であることを見分ける方法
ブラウザが HTML・CSS・JS を受け取って最初の画面ピクセルを描くまでに通る段階と、その経路を短くする方法