Webブラウザの仕組み 【テクニカル・上級編】 Webフォントの読み込みとレンダリング挙動 – Webブラウザの仕組み実践ガイド
Webフォントという名の「レンダリング爆弾」を調教する：Blink/WebKitの内部挙動とFOIT/FOUTの完全制御こんにちは。日々、ブラウザの描画パイプラインとメモリ消費の最適化に魂を削っているフロントエンド・アーキテクチャの住人です...
frontendintronational
Webブラウザの仕組み JavaScript 【テクニカル・上級編】 String.prototype.replace()による置換 – JavaScript実践ガイド
文字列置換の暗闇：`String.prototype.replace()` と第一引数文字列の深淵こんにちは。日々、V8エンジンのヒープ領域と睨めっこしながら、フロントエンドの極限最適化に興じているチーフアーキテクトだ。今回は、JavaSc...
CSS 【テクニカル・上級編】 out-of-range疑似クラス – CSS実践ガイド
境界線の向こう側：`:out-of-range` 疑似クラスが握る、フォームUXとレンダリングの最適化フォームバリデーション。この言葉を聞いただけで、夜中に冷や汗をかいて起きるフロントエンドエンジニアは少なくないはずだ。JavaScript...
HTML 【入門編】Headless UIにおけるリストコンポーネントの設計思想 – HTML実践ガイド
「ただ並べるだけ」じゃない！Headless UIで学ぶ、リストの「本質」とHTMLの役割Web制作を始めたばかりの頃、``や``を「なんとなく箇条書きにするためのタグ」だと思っていませんでしたか？実は、プロの現場でリストを扱う際、私たちは...
React 【テクニカル・上級編】 派生状態（Derived State）の計算とmemo化 – React実践ガイド
派生状態（Derived State）という名のアンチパターン：なぜプロは「二重管理」を憎むのかこんにちは。日々、数百万人がアクセスする巨大なReactアプリケーションのコードベースと格闘しているチーフアーキテクトだ。コードレビューをしてい...
TypeScript 【テクニカル・上級編】 Branded Types (Nominal Typingの模倣) – TypeScript実践ガイド
Branded Typesで実現する、TypeScriptの型安全の極み：プリミティブの呪縛からの解放TypeScriptを愛する君なら、一度はこんな絶望を味わったことがあるはずだ。「ユーザーID」も「商品ID」も「注文ID」も、すべて中身...
Webブラウザの仕組み 【テクニカル・上級編】 画像デコードとレンダリング – Webブラウザの仕組み実践ガイド
画像デコードとレンダリングの深層：ブラウザエンジンをハックするメモリ効率と最適化の極意こんにちは。日々、プロファイラとメモリダンプを眺めながら、ブラウザの描画パイプラインの機嫌を取ることに生きがいを感じているフロントエンドアーキテクトだ。W...
JavaScript 【テクニカル・上級編】 String.prototype.substr()の非推奨性 – JavaScript実践ガイド
さらば、レガシー：`String.prototype.substr()`があなたのコードベースを腐らせる理由と、現代の文字列操作戦略こんにちは。日夜フロントエンドのコードベースと格闘し、JavaScriptエンジンがV8の中でどうやってバイ...
CSS 【テクニカル・上級編】 in-range疑似クラス – CSS実践ガイド
in-range疑似クラス：ブラウザのネイティブバリデーションエンジンをCSSでハックする高度な実務アプローチこんにちは。フロントエンドの裏側、ブラウザの描画パイプラインやレイアウトツリーの挙動に思いを馳せるのが日課のチーフアーキテクトです...
HTML 【テクニカル・上級編】リストと構造化データ（Schema.org ItemList）の関連 – HTML実践ガイド
HTMLリストの「意味」を検索エンジンに正しく届ける：Schema.org ItemListの高度な実装戦略フロントエンド開発において、``や``といったリストタグはあまりにありふれた存在だ。しかし、テックリードとして大規模なアプリケーショ...