blog.jxck.io
mozaic.fm の v2 のリリースと Podcast の実装と移行
mozaic.fm をリニューアルし、v2 としてリリースした。今回の更新のモチベーションは大きく分けて 2 つある。tumblr を捨てたかったfeedburner を捨てたかったこれによる breaking change 含む変更の内容
すべて
blog.jxck.io
リンクへの rel=noopener 付与による Tabnabbing 対策
本サイト以下全ての target=_blank 付きのリンクに rel="noopener noreferrer" の付与を実施した。このプロパティの意味と、これが無い場合のフィッシング詐欺攻撃の可能性について解説する。
blog.jxck.io
Passive Event Listeners によるスクロールの改善
DOM のイベントリスナの仕様に Passive Event Listeners というオプションが追加された。このオプションは、主にモバイルなどでのスクロールの詰まり(Scroll Junk) を解決するために導入されたものである。今回は
blog.jxck.io
中級者向け Service Worker Tutorial
Service Worker の初心者向けのチュートリアルや、使ってみた系のエントリも増えてきました。しかし、Service Worker は通常のブラウザ用 JS の開発と少し経路が違い、慣れるまで開発やデバッグもなかなか難しいと思います
blog.jxck.io
Stale-While-Revalidate ヘッダによるブラウザキャッシュの非同期更新
システムにおいてキャッシュの設計は永遠の課題であり、Web のパフォーマンスにおいても非常に重要である。Web では、HTTP ヘッダを用いてブラウザやプロキシにキャッシュの制御を指定する。Stale-While-Revalidate ヘッ
blog.jxck.io
HTTP Strict Transport Security(HSTS) 対応
本サイトにて HTTP Strict Transport Security (HSTS) を有効化した。includeSubdomains を用いた *.jxck.io 全体への適用および、ブラウザへの Preload 登録も検討したが、本
blog.jxck.io
Public Key Pinning for HTTP(HPKP) 対応と report-uri.io でのレポート収集
本サイトにて Public Key Pinning for HTTP を有効化した。CSP 同様、まずは Report-Only を設定し、HPKP Report についても、report-uri.io を用いて収集することにした。導入に必
blog.jxck.io
Content Security Policy(CSP) 対応と report-uri.io でのレポート収集
本サイトにて Content Security Policy を有効化した。まずは Report Only にて導入し、段階的にポリシーとコンテンツを修正していく方針をとる。CSP Report については、report-uri.io を用
blog.jxck.io
画像最適化戦略 SVG/Font 編
本サイトで使用している UI アイコン系の画像を、ギリギリまで最適化した手書き SVG に置き換えた(ただしソースは 観賞用 なので、インデントは残す)。また、装飾に画像ではなく CSS の content を利用することで、ローカルフォン
blog.jxck.io
画像最適化戦略 WebP 編
本サイトの PNG/JPEG で提供している画像については、よりサイズが小さくなりやすい WebP 形式を提供し、対応ブラウザに配布するようにした。フォーマットを出し分けるため、画像の指定は <picture> 要素を用いて対応した。画像最
blog.jxck.io
画像最適化戦略 Picture 編
本サイトで使用している PNG/JPEG 画像を、対応デバイスと、Device Pixel Ratio に対して最適なサイズで出し分けるために、<picture> 要素を適用した。画像最適化シリーズ第 2 回目のエントリである。画像最適化戦
blog.jxck.io
画像最適化戦略 PNG/JPEG 編
本サイトで使用している PNG/JPEG 画像に対し、メタデータ削除、減色、リサイズなど基本的な最適化処理の適用戦略と、その方法および結果について。画像最適化シリーズ第 1 回目のエントリである。> 画像最適化戦略 PNG/JPEG 編画像
blog.jxck.io
Noto Sans の Web Font 対応とサブセットによる最適化
このサイトのフォントに Web Font を適用することにした。フォントには Google と Adobe が協同で開発した Noto Sans CJK JP を採用した。また、このサイトでは使用しないだろう文字を削除したサブセットを作るこ
blog.jxck.io
Preload を用いたリソースプリローディングの最適化
Preload を指定する <link rel=preload> の仕様が公開されており、現在 Chrome Canary に実装されている。この仕様のモチベーションについて、Chrome 開発者の Yoav Weiss 氏のブログも公開さ
blog.jxck.io
JSON-LD と Open Graph で構造化メタデータ対応
本サイトのメタ情報を整理するため、HTML のメタタグの整理、JSON-LD による schema.org 対応、Facebook, Twitter を主とした Open Graph 対応を実施した。これにより、既に AMP 対応していた本
blog.jxck.io
zopfli で静的コンテンツの gzip 配信と Content/Transfer-Encoding について
HTTP では Accept-Encoding と Content-Encoding でのネゴシエーションにより、gz などで圧縮したコンテンツを転送することができる。本サイトでは zopfli を用いて gzip 形式の配信に対応した。
blog.jxck.io
HTTP2 を前提とした HTML+CSS コンポーネントのレンダリングパス最適化について
Chrome が予定している <link rel=stylesheet> の挙動の変更について、Google Chrome チームの Jake が、興味深いブログを上げている。The future of loading CSSこの内容は、単
blog.jxck.io
Resource Hints API でリソースの投機的取得
Resource Hints とは現在提案されている以下のドラフトであり、ブラウザに「次に必要となるリソースを教える」ことで、投機的な取得を行う API 群である。https://w3c.github.io/resource-hints/主
blog.jxck.io
Atom の RSS Feed 対応
このブログの Atom feed を吐くようにした。右上の feed アイコン から登録できる。
blog.jxck.io
h2o で https/2 のデプロイと設定
土台がだいたいできたので、このサイトを h2o にデプロイした話。