Weekly Web Notes 20210226-20210304

Meta

• https://twitter.com/arayaryoma でツイートしていたもののまとめ
• 毎週木曜に新しい投稿を作る予定

Chrome

• What's New In DevTools (Chrome 90) | Web | Google Developers https://developers.google.com/web/updates/2021/02/devtools
  • flexbox のデバッグの大きな改善
  • CWVの値をモニターできるOverlay
  • console status bar に issue countが出るように
  • Application panel に Trust Token paneを追加
  • Web App Manifest の description や Screenshots が要件を満たしていなかったり長過ぎたら警告をだす
  • DevTools を開いた状態でのページ読み込みを最大10倍高速化
  • Frame details view でpremission-policy で allow/disallow されているfeaturesが見られるように
  • Application panel > Cookies pane に SameParty attribute の値の表示を追加
  • 背景とテキストのコントラストが低い要素が存在したときにIssuesにwarningを出す(experimental)
  • Elements panel でDOM treee と accessibility treeを切り替えラッれる (experimental)
• Google Developers Blog: Announcing Flutter 2 https://developers.googleblog.com/2021/03/announcing-flutter-2.html
  • Flutter for webの変更もいくつか
    • PWA、SPA、mobileとwebのコード共有 についてフォーカス
    • CanvasKit の開発と導入
      • Skia + wasm
      • https://skia.org/user/modules/canvaskit
    • 各種デスクトップOSでのスクリーンリーダーをサポート
    • URLのコントロールとルーティング(SPA)

Intents

Prototype

• Intent to Prototype: App history API
  https://groups.google.com/a/chromium.org/g/blink-dev/c/R1D5xYccqb0
  • 同じorigin, frame内における既存のhistory APIのラッパー
  • 現在のhistory APIはSPAなどで使いづらいため、使いやすく再設計したAPIを実装する
  • window.appHistory
  • Spec: https://github.com/WICG/app-history

Experiment

• Intent to Experiment: Secure Payment Confirmation V2
  https://groups.google.com/a/chromium.org/g/blink-dev/c/6Dd00NJ-td8
  • Secure Payment Confirmation API の2回目のOrigin Trial
  • 1回目はAPIのフィードバックの収集が目的だったが、今回はこのAPIによるユーザー体験の向上が登録率のアップにつながるかのデータを集める
• Intent to Experiment: Federated Learning of Cohorts
  https://groups.google.com/a/chromium.org/g/blink-dev/c/MmijXrmwrJs
  • FLoCのOrigin Trialを始める
  • FLoCのExplainer: https://github.com/WICG/floc

Ship

• Intent to ship: RegExp Match Indices https://groups.google.com/g/mozilla.dev.platform/c/n5wXExJtomI
• Intent to implement and ship: Honor media HTML attribute for link icon
  https://groups.google.com/a/chromium.org/g/blink-dev/c/OwUSsHWokpA
  • rel 属性に "icon"が指定された<link>要素に media 属性を指定できるようになる
  • 仕様上は許されているが、現在実装されているブラウザはない
  • <link rel="icon" media="(prefers-color-scheme: dark)" href="https://example.com/icon-dark.ico"> のように、prefers-color-scheme に合わせてfaviconを変えることもできる。

Origin Trials

New Active

New Complet

Firefox

Intents

Prototype

Ship

• Intent to ship: WebAssembly SIMD
  https://groups.google.com/g/mozilla.dev.platform/c/yLQxaBp9-o8

Unship / Remove

Edge

• Pivoting to the future with Microsoft Edge - Microsoft Edge Blog https://blogs.windows.com/msedgedev/2021/03/02/microsoft-edge-ignite-2021/
• Microsoft Edge 89: Delivering improved browser performance to get the job done - Microsoft Edge Blog https://blogs.windows.com/msedgedev/2021/03/04/edge-89-performance/

W3C

• W3C Invites Implementations of WAI-ARIA 1.2 | W3C News https://www.w3.org/blog/news/archives/8933

WHATWG

• Define Content-Length parser · whatwg/fetch@f2a7922 https://github.com/whatwg/fetch/commit/f2a79224c3889c125f068ba37ef799be7f520c97
  • header fields から Content-Length header field の値を取り出してparseするためのアルゴリズムが明記された
  • https://fetch.spec.whatwg.org/#content-length-header
• Add http3Only and dedicated parameters to "obtain a connection" · whatwg/fetch@e5b330d https://github.com/whatwg/fetch/commit/e5b330dd724ef49f5d12b4bd046e88ee3d1c7aea
  • Connectionを得るためのアルゴリズムに http3Only オプションについての記述が追加された

IETF

Ecosystem

• Node v15.11.0 (Current) | Node.js https://nodejs.org/en/blog/release/v15.11.0/

Blogs

• Cloudflare recognized as a 'Leader' in The Forrester Wave for DDoS Mitigation Solutions https://blog.cloudflare.com/cloudflare-is-named-a-leader-in-the-forrester-wave-for-ddos-mitigation-solutions/
• Conntrack turns a blind eye to dropped SYNs https://blog.cloudflare.com/conntrack-turns-a-blind-eye-to-dropped-syns/