Puppeteer で静的サイトの Font Subsetting
Puppeteerを使用して静的サイトのWebフォントをFont Weightごとにサブセット化し、ファイルサイズを最適化する方法を解説。
日本のフロントエンドエンジニア Jxck が運営する技術ブログ。ブラウザ仕様や Web 標準、HTTP、Cookie、圧縮やキャッシュ戦略、Dialog や Popover などの最新 API まで、実験と検証に基づく詳しい解説が読めます。実装上の落とし穴やベストプラクティスをコードと計測結果で示すのが特徴です。 Jxck 本人のポートフォリオサイト jxck.io からは、研究用の Labs、登壇スライド、著書、ポッドキャスト mozaic.fm へのリンクも公開されています。コミュニティ向けの企画や試験問題の公開など、学習リソースとしての役割も大きい技術ブログです。
246 記事 from this blog
Puppeteerを使用して静的サイトのWebフォントをFont Weightごとにサブセット化し、ファイルサイズを最適化する方法を解説。
WebCodecsとWebTransportを活用した柔軟なビデオチャット実装方法を解説。WebRTCの代替としての可能性を探る。
WebBundleを用いたサブリソース(JS, CSS, 画像など)の取得を最適化する方法について、仕様と実装を解説します。
ローカル開発環境をHTTPS化する方法と、localhostの特殊性や証明書の課題について解説。安全な開発環境構築の実践的なアプローチを紹介。
ChromeのQuicTransport APIについて、QUICプロトコルをアプリケーション層で活用する仕様と実装方法を解説。
Spectre脆弱性への対策としてのSite Isolationと、CORB、CORP、COEP、COOPなどの新しいWebセキュリティモデル仕様について解説します。
mozaic.fm v3のリリースと、Progressive Web App (PWA)技術を用いてPodcastアプリをWeb上で実現するための技術的詳細と実装について解説。
Periodic Background Sync (PBS) APIの解説。PWAでバックグラウンド定期タスクを実現する仕様、セキュリティリスク、Chromeの実装制限について。
Scroll to Text Fragment 機能を使用してサイト内検索を実装する方法と、その技術的考察について解説しています。
Web広告を導入し、3rd Party Cookieの制限やPrivacy Sandboxへの移行が広告技術に与える影響を調査・検証する方法について解説。
Service WorkerのBackground Fetch APIを使用して、Podcastのような大きなメディアファイルを効率的にキャッシュする方法について解説します。
ブラウザ内で発生した問題を検知・収集するReporting APIとReportingObserverの仕組みと実装について解説します。
ブロガーJxckによる2019年の活動振り返り。ブログ執筆、ポッドキャスト運営、Web技術カンファレンス主催、自宅開発環境構築など一年間のIT活動をまとめています。
WebBundleとWebPackagingの仕組みについて解説。複数のWebコンテンツを1つのファイルにまとめて配信する技術の詳細を説明。
Intel NUCにUbuntu開発環境を構築し、SSH Port Forwardingで外部からアクセスする方法を解説。
ChromeのScroll To Text Fragment仕様について解説。URLフラグメントでIDなし要素へのスクロールを実現する新機能。
Noto Sansフォントのサブセット生成とfont-feature-settingsの'palt'機能を使った字詰め最適化についての技術検証。
Promise.allSettledとPromise.anyの仕様と使い方を、Promise.all/raceとの比較を通じて解説。JavaScriptの非同期処理を強化する新しいメソッド。