タグ

ブックマーク / blog.jxck.io (13)

  • URL.parse を Chromium で Ship するまで | blog.jxck.io

    Intro Chrome 126 で筆者が実装した URL.parse が Ship された。 Chromium にコントリビュートしたことは何回かあったが、単体機能を Ship したのは初めてだった。 invalid URL の処理 new URL() によって、文字列の URL をパースすることができるようになって久しいが、この API は invalid な場合に例外を投げる。 例外処理をするよりも、先に URL としてパース可能かどうかを知るための URL.canParse() が提案され、先に実装が進んだ。 URL.canParse(str) // boolean しかし、これでは二回パースが必要になるため無駄が多い。 if (URL.canParse(str)) { // 1 回目のパース return new URL(str) // 2 回目のパース } そこで、失敗したら

    URL.parse を Chromium で Ship するまで | blog.jxck.io
  • Chromium にコントリビュートするための周辺知識 | blog.jxck.io

    Intro Chromium にコントリビュートするためには、ソースコードを理解する以外にも、もろもろ必要な周辺知識がある。 ドキュメントはかなり整備されている方ではあるが、そのドキュメントにたどり着くのが難しい場合もある。 レビュアーなどが親切に教えてくれるものをローカルにメモしているが、それも散らばってきたため、ここにまとめることにする。 まずは初期状態で公開するが、どんどん更新していき、長くなっても分割しないで追記を繰り返そうと考えている。 関連サイト 始めて取り組もうとすると、まずどこを見ればわからないところから始まる。 似たようないくつかのサイトがあり、使い分けがされているからだ。 code search https://source.chromium.org/chromium/chromium/src コードをインタラクティブに検索するためのサイト Workspace 風の U

    Chromium にコントリビュートするための周辺知識 | blog.jxck.io
  • Public Suffix List の用途と今起こっている問題について | blog.jxck.io

    Intro Public Suffix List (PSL) は、現在の Web プラットフォームの一端を支えている非常に重要な要素だ。 実はこれが、少数のボランティアにより GitHub でメンテナンスされた、単なるテキストリストであることは、あまり知られていないかもしれない。 最近、このリストへの追加リクエストがあとを絶たず、問題になっている。 そもそも PSL とは何であり、今どのような問題が起こっているのかについて解説する。 Public Suffix List とは何か PSL を解説するには、まず関連する用語について整理する。 Top Level Domain (TLD) 例えば、このブログのドメインは blog.jxck.io であり、これは筆者が取得したドメイン jxck.io のサブドメインだ。 jxck.io は、 .io という TLD のサブドメインを販売しているレ

    Public Suffix List の用途と今起こっている問題について | blog.jxck.io
  • ローカル開発環境の https 化 | blog.jxck.io

    Intro Web の https 化が進み、それに伴って https を前提とする API も増えてきた。 そうした API を用いた開発をローカルで行う場合、 localhost という特別なホストを用いることもできるが、それだけでは間に合わないケースも少なからずある。 localhost を https にするという方法もあるが、そのように紹介されている方法には、いくつか注意すべき点もある。 この辺りの話を、直近 1 ヶ月で 3 回くらいしたので、筆者が普段使っている方法や注意点についてまとめる。 特に推奨するつもりはない。 Update chrome の --host-rules について追記 localhost での開発の注意点 例として https://example.com にデプロイする予定の ServiceWorker を用いたアプリがあったとする。 開発をローカルで行う

    ローカル開発環境の https 化 | blog.jxck.io
  • 牧歌的 Cookie の終焉 | blog.jxck.io

    Intro Cookie は、ブラウザに一度保存すれば、次からその値を自動的に送ってくるという、非常に都合の良い仕様から始まった。 State Less が基だった Web にセッションの概念をもたらし、今ではこれが無ければ実現できないユースケースの方が多い。 冷静に考えればふざけてるとして思えないヘッダ名からもわかるように、当初はこのヘッダがこんなに重宝され、 Web のあり方を変えるかもしれないくらい重要な議論を巻き起こすことになるとは、最初の実装者も思ってなかっただろう。 そんな Cookie が今どう使われ、 3rd Party Cookie (3rdPC) の何が問題になっているのかを踏まえ、これからどうなっていくのかについて考える。 Cookie のユースケース Web にある API の中でも Cookie はいくつかの点で特異な挙動をする 一度保存すれば、次から自動で送る

    牧歌的 Cookie の終焉 | blog.jxck.io
  • Promise.allSettled と Promise.any | blog.jxck.io

    Intro Promise.allSettled() と Promise.any() の仕様策定が進んでいる。 両者は近いレイヤの仕様では有るが、作業の進捗には差がある。 Promise.allSettled は Stage 4 であり、 Chrome や Safari TP には実装もされている Promise.any は Stage 2 であり、実装はまだない ここでは、これらがあると何が嬉しいのかを Promise.all(), Promise.race() の特徴を踏まえて解説する。 Promise.all()/race() Promise.all(), Promise.race() は、いずれも複数の Promise をまとめて処理する Utility Method のようなものである。 all は全ての Promise が Resolve したら Resolve し、 race

    Promise.allSettled と Promise.any | blog.jxck.io
  • Bookmarklet という一番身近な自動化技術 | blog.jxck.io

    Intro 「毎回やるなら bookmarklet にでもすれば?」と言ったら、後輩が「そんな便利なことできたんですね、知りませんでした」と言っていた。 そんな時代にこそ、今更だれも解説しないであろう、 bookmarklet という技術についてもう一度書いておく。 Bookmarklet 簡単に言えば、 JS を書き、それを Bookmark として登録すれば、クリックするだけで現在のページでそれが動くというものだ。 ブラウザ上で何かを自動化したいと思うなら、最も簡単に実現できる便利な技術だろう。 似たような手法ではブラウザの Extension などもあるが、 Bookmarklet の良いところは一切誰にも邪魔されないというところだ。 開発者登録も、ストアへのアップロードも、難解なドキュメントを忖度して煩雑な設定ファイルを書く必要もない。 開発者ツールで、「こんなことできないかな」と

    Bookmarklet という一番身近な自動化技術 | blog.jxck.io
  • .mjs とは何か、またはモジュールベース JS とエコシステムの今後 | blog.jxck.io

    Intro 長いこと議論になっていた ES Modules の Node における扱いに一応の決着が付き、 .mjs という拡張子が採択された。 この拡張子の意味と、今後ブラウザと合わせて Universal JS を実装していく上での作法が見えてきたことになる。 合わせてエコシステムが対応していくことで、長年の夢だった JS のモジュール化を進めていくことができるだろう。 ES Modules 徐々に揃いつつある ES Modules(ESM) の仕様は TC39 で行われており、その仕様については主に以下のような部分になる。 import や export と行った構文 module 内はデフォルト strict mode module でスコープを閉じる module 内の this は undefined etc 逆に以下は TC39 での策定範囲外となる どう Module を読

    .mjs とは何か、またはモジュールベース JS とエコシステムの今後 | blog.jxck.io
  • JavaScript における文字コードと「文字数」の数え方 | blog.jxck.io

    Intro textarea などに入力された文字数を、 JS で数えたい場合がある。 ここで .length を数えるだけではダメな理由は、文字コードや JS の内部表現の話を理解する必要がある。 多言語や絵文字対応なども踏まえた上で、どう処理するべきなのか。 それ自体は枯れた話題ではあるが、近年 ECMAScript に追加された機能などを交えて解説する。 なお、文字コードの仕組みを詳解すること自体が目的では無いため、 BOM, UCS-2, Endian, 歴史的経緯など、この手の話題につき物な話の一部は省くこととする。 1 文字とは何か Unicode は全ての文字に ID を振ることを目的としている。 例えば 😭 (loudly crying face) なら 0x1F62D だ。 1 つの文字に 1 つの ID が割り当てられているのだから、文字の数を数える場合は、この ID

    JavaScript における文字コードと「文字数」の数え方 | blog.jxck.io
  • mixed contents 対応を促進する CSP ディレクティブ | blog.jxck.io

    Intro HTTPS 移行の問題点の一つに、 mixed contents への対応がある。 逆に mixed contents の発生を恐れ、 HTTPS に移行できないサービスもあるだろう。 エントリでは mixed contents の正しい理解と、その検出や解消に利用できる可能性のある、 CSP の Upgrade-Insecure-Request および、 Block-All-Mixed-Contents を解説する。 mixed contents HTTPS で配信されたコンテンツが、サブリソースとして HTTP のコンテンツを含む場合、これを mixed contents という。 HTTPS は MITM に対する耐性があるが、 HTTP は MITM への耐性がないため、 mixed contents の状態ではサブリソースを起点にメインコンテンツへの改ざんが成立して

    mixed contents 対応を促進する CSP ディレクティブ | blog.jxck.io
  • HTTP の新しいステータスコード 103 Early Hints | blog.jxck.io

    Intro これは、 http2 Advent Calendar 2016 の 16 日目の記事である。 HTTP に新しいステータスコード 103 Early Hints が追加されようとしている。 HTTP/1.1 および HTTP2 双方と関わり、リソース配信の最適化に利用することができる。 いったい何のために必要なのか、どういうメリットが考えられるかを解説する。 HTTP2 Push の復習 まず HTTP2 の Push について復習する。 H2 Push は、簡単に言えば PUSH_PROMISE フレームを用いて、レスポンスよりも先に依存するリソースを返すための仕様である。 例えば /users のレスポンスは script.js と style.css をサブリソースとして含んでいるとする。 HTTP2 では SQL を発行して Users の一覧を取得している間に、先行し

    HTTP の新しいステータスコード 103 Early Hints | blog.jxck.io
  • Google Developer Experts (GDE) になりました | blog.jxck.io

    Intro Google の中の人からお声がけ頂き、 Google Developer Experts (GDE) に Web Technologies の Expert として Join することになりました。 GDE GDE は、簡単に言えば Google技術についての啓蒙などを行う、社外アドボケート的な位置づけである。 https://developers.google.com/experts/ 各自専門領域(Android, GCP etc)があるが、自分はやはり Web Technologies ということになる。 Web に関する多くが標準技術であるため、 Google Developer Experts という名だが、別に GoogleChrome に限った内容を扱うわけではない。 活動 実際に何をするかというと、特に明確なタスクを詰まれるといったわけではないとのこ

    Google Developer Experts (GDE) になりました | blog.jxck.io
  • Stale-While-Revalidate ヘッダによるブラウザキャッシュの非同期更新 | blog.jxck.io

    Intro システムにおいてキャッシュの設計は永遠の課題であり、 Web のパフォーマンスにおいても非常に重要である。 Web では、 HTTP ヘッダを用いてブラウザやプロキシにキャッシュの制御を指定する。 Stale-While-Revalidate ヘッダは、このキャッシュ制御に選択肢を追加する新しい仕様である。 このヘッダの概要と、サイトへの適用を解説する。 Web におけるキャッシュ キャッシュの種類 まず、ブラウザが持つ従来のキャッシュの機構について整理する。 そもそも、キャッシュを行う意義は大きく二つある。 リソースの取得を高速化する サーバへの負荷を減らす これまでは HTTP ヘッダを用いて、キャッシュを管理させる方法を用いてきた。 Web における、キャッシュの指定には大きく二つの方式がある。 ブラウザはリクエストを発行せず、保持するキャッシュを使用する(Cache-

    Stale-While-Revalidate ヘッダによるブラウザキャッシュの非同期更新 | blog.jxck.io
  • 1