Weekly Web Notes 20210218-20210225

Meta

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

Chrome

• Chromium Blog: Heads Up: Restriction on SharedArrayBuffers are coming in M91 https://blog.chromium.org/2021/02/restriction-on-sharedarraybuffers.html
  • M91から全てのプラットフォームにおいて、cross-origin isolated な環境化のみSharedArrayBuffer と performance.measureUserAgentSpecificMemory() が有効化されるようになる。
• Google Online Security Blog: Mitigating Memory Safety Issues in Open Source Software https://security.googleblog.com/2021/02/mitigating-memory-safety-issues-in-open.html
  • 毎年セキュリティアップデートされる脆弱性のうち70%近くがメモリ安全性の問題。
  • GoogleはISRGと協力してOSSがメモリ安全な言語で再実装することをサポートしている。
• Declarative Shadow DOM: Origin Trial Feedback - Google ドキュメント https://docs.google.com/document/d/1QmBKxQLE81PsMzyPCvYhzqRAn4hxz61Jzk0uXJAhaVc/edit
  • Declarative Shadow DOM の (主にAMPチームからの)フィードバック
  • ラボデータでは、SSRとの併用によりFCPが15%改善
  • polyfillよりも、ブラウザが <template> をinert content としてparseしてcustom elementがShadowDOMを作るほうが速い
• Add declarative Shadow DOM features by mfreed7 · Pull Request #892 · whatwg/dom https://github.com/whatwg/dom/pull/892#discussion_r578850565
  • webkitチームのrniwaさんからの現在のDSDのAPIの懸念点について指摘

Intents

Experiment

• Intent to Experiment: Canvas color management https://groups.google.com/a/chromium.org/g/blink-dev/c/YKH6RSab_vY
  • CanvasやWebGLでsRGB以外の色空間を指定できる。ディスプレイがサポートしている階調やHDRをフルに使うことができる
• Intent to Experiment: getCurrentBrowsingContextMedia() https://groups.google.com/a/chromium.org/g/blink-dev/c/j70Xe2xSh1s
  • getDisplayMedia()の、権限範囲を絞ったもの
  • ダイアログが承認/拒否 だけになる
• Intent to Experiment: Reverse Origin Trial for WebRTC's Plan B SDP semantics https://groups.google.com/a/chromium.org/g/blink-dev/c/35NFPYdumMs

Ship

• Intent to Implement and Ship: URL protocol setter: New restrictions for file URLs https://groups.google.com/a/chromium.org/g/blink-dev/c/RmpP1GKY5tc
  • 仕様のここに合うように修正 https://url.spec.whatwg.org/#scheme-state

  • If url’s scheme is "file" and its host is an empty host, then return.

• Intent to Ship: WebXR Depth API https://groups.google.com/a/chromium.org/g/blink-dev/c/v4fneq7tgDA/m/utkwOcjuAwAJ
• Intent to Prototype: 103 Early Hints for Navigation https://groups.google.com/a/chromium.org/g/blink-dev/c/DAgWIczGtG0/m/gSXvjYn-AwAJ
  • 103 Early Hints をトップレベルナビゲーションでもサポートする
  • 例えば /index.html の response を待たずに、103を受け取ったら /foo.html のpreload req/res をできる
• Intent to Ship: Declarative Shadow DOM https://groups.google.com/a/chromium.org/g/blink-dev/c/7sZ52cP8HMg/m/ciep5kv-AwAJ
• Intent to Ship: Ergonomic brand checks for private fields https://groups.google.com/a/chromium.org/g/blink-dev/c/SO8zL3dvKsI
  • https://github.com/tc39/proposal-private-fields-in-in の実装をship
  • private fieldの存在チェックを in keywordでチェックできる。
  • e.g. #field in object
• Intent to Ship: CSS custom counter style https://groups.google.com/a/chromium.org/g/blink-dev/c/kC8b-dZ8uBQ
  • ordered listのcounter styleをカスタマイズできる [at]counter-style ruleのship
  • speak-as はまだサポートしていない
• Intent to Implement and Ship: Seeking past the end of a file in the File System Access API https://groups.google.com/a/chromium.org/g/blink-dev/c/iQhMaR0rA2M/m/RdxYBm8rAgAJ
  • 大きいファイルをchunkで徐々にダウンロードしてファイルに書き込んでいく場合などに有用
• Intent to Ship: WebAssembly SIMD https://groups.google.com/a/chromium.org/g/blink-dev/c/Ks2iWmi32MM/m/wYnxaB6iAwAJ
  • wasmからSIMDの命令を使えるように
• Intent to Ship: @font-face descriptor advance-override https://groups.google.com/a/chromium.org/g/blink-dev/c/_BO41rwrrtI

  • The advance-override descriptor scales all character advances of the font face by the given percentage.

• Intent to Ship: Disable Double Tap to Zoom when mobile viewport is set https://groups.google.com/a/chromium.org/g/blink-dev/c/dXztlK096rs
  • モバイルデバイスで viewport に content="width=device-width" もしくは content="initial-scale=1.0" が指定されていたらダブルタップによるズームを無効化する(Firefoxはすでにこの挙動)

Origin Trials

New Active

• getCurrentBrowsingContextMedia https://developer.chrome.com/origintrials/#/view_trial/3654671097611157505
• First Party Sets & SameParty https://developer.chrome.com/origintrials/#/view_trial/988540118207823873

New Complete

• Cross-origin opener policy reporting https://developer.chrome.com/origintrials/#/view_trial/2780972769901281281
• WebXR Depth Sensing https://developer.chrome.com/origintrials/#/view_trial/1934296039955628033
• Sec-bfcache-experiment HTTP Header https://developer.chrome.com/origintrials/#/view_trial/3771764687922790401
• Allow Sync XHR In Page Dismissal https://developer.chrome.com/origintrials/#/view_trial/4391009636686233601
• WebHID https://developer.chrome.com/origintrials/#/view_trial/1074108511127863297
• Notification Trigger API https://developer.chrome.com/origintrials/#/view_trial/6883752030435803137
• Cross-Screen Window Placement https://developer.chrome.com/origintrials/#/view_trial/1411878483180650497

Firefox

Intents

Prototype

• Intent to prototype and ship: :user-valid and :user-invalid pseudo-classes. https://groups.google.com/g/mozilla.dev.platform/c/rEYMl79krS8
  • valid / invalid な input 要素にマッチするselector

Ship

• Intent to ship: make outlines follow border-radius automatically https://groups.google.com/g/mozilla.dev.platform/c/VJhM6SSQd-4
  • outlineがborder-radiusの曲線に沿うようになる

Unship

• Intent to unship: Non-standard values of caption-side property https://groups.google.com/g/mozilla.dev.platform/c/4Fdz0MankRU

• Intent to unship: Exposure of 11.x macOS versions in the User-Agent string https://groups.google.com/g/mozilla.dev.platform/c/yaYW2xo5Kik

  • 壊れるサイトがあるのでmacOSのUA文字列を戻す

• Intent to unship: :-moz-submit-invalid pseudo-class. https://groups.google.com/g/mozilla.dev.platform/c/woAtt9tvGf8

Edge

• Introducing adaptive notification requests in Microsoft Edge - Microsoft Edge Blog https://blogs.windows.com/msedgedev/2021/02/16/introducing-adaptive-notification-requests-in-microsoft-edge/
  • Push notification のユーザーの承認率が高いサイトと低いサイトのバランスを取るために、 そのサイトにおけるユーザーの行動に基づいてスコアリングし、notification prompt を出し分ける。
• Making Service Workers easier to debug for Progressive Web Applications and more - Microsoft Edge Blog https://blogs.windows.com/msedgedev/2021/02/22/service-worker-tools-network-application-sources/
  • DevTool の ServiceWorker サポートの改善

Blogs

• Things You Can Do With CSS Today https://www.smashingmagazine.com/2021/02/things-you-can-do-with-css-today/

  • 最近のCSSでできることのまとめ
  • Pinterestのようなlayout (Masonry Layout)、min(), max(), clamp() など

• Building a Tabs component https://web.dev/building-a-tabs-component/

  • Tab UIのベストプラクティス

• [css-color-4] clarify currentColor not restricted to sRGB · w3c/csswg-drafts@bb803b0 https://github.com/w3c/csswg-drafts/commit/bb803b0caac9deb551747d619735d584e6a8eea7

  • currentColor が sRGB に限定されないことの明記。 つまり <color> として有効ならば何でも良い

• Introducing GitHub Campus TV! - The GitHub Blog https://github.blog/2021-02-17-introducing-github-campus-tv/

  • GitHubが学生向けの動画チャンネルのようなものをTwitchに開設

• Let’s Create a Custom Audio Player | CSS-Tricks https://css-tricks.com/lets-create-a-custom-audio-player/

  • リッチなAudio Playerを実装する話

• Search Central Live にご参加ください | Google 検索セントラル ブログ | Google Developers https://developers.google.com/search/blog/2021/02/join-us-at-search-central-live

• “Computer! Tea, Earl Grey, Hot”: Offline Voice on NodeJS | by David Bartle | Picovoice | Feb, 2021 | Medium https://medium.com/picovoice/computer-tea-earl-grey-hot-offline-voice-on-nodejs-cb587fd3f5e8

  • Node.js でSpeech to textする

• Super fast super property access · V8 https://v8.dev/blog/fast-super

  • Ignitionに新しいバイトコードを追加して、interpreted mode の Inline Cache に プラグインを差し込めるようになり、 新しいIC(LoadSuperIC)を追加することでsuperのpropertyアクセスを高速化した

• ESLint, Prettier, VS Code, npm scripts の設定: 2021春 https://zenn.dev/teppeis/articles/2021-02-eslint-prettier-vscode

• Streams—The definitive guide https://web.dev/streams/

  • Streams API についての解説記事

• Using HPKE to Encrypt Request Payloads https://blog.cloudflare.com/using-hpke-to-encrypt-request-payloads/

• Use CSS Variables instead of React Context | Epic React by Kent C. Dodds https://epicreact.dev/css-variables/

  • contextを変えるよりも、CSSのcustom propertiesを変えるほうがrerenderされるcomponentを削減できる場合がある

• Getting Deep into Shadows | CSS-Tricks https://css-tricks.com/getting-deep-into-shadows/

  • 光源と影の考え方, CSSでの実装方法について

• SEO, A/B testing, and security: 3 benefits CDNs bring to startups | Fastly https://www.fastly.com/blog/seo-ab-testing-and-security-3-benefits-cdns-bring-to-startups

• Before You memo() — Overreacted https://overreacted.io/before-you-memo/

• Hello from GitHub’s new Chief Security Officer - The GitHub Blog https://github.blog/2021-02-24-hello-from-githubs-new-chief-security-officer/

  • GitHubにChief Security Officerが就任

• Web Font のメトリクス上書きによる CLS の改善 | blog.jxck.io https://blog.jxck.io/entries/2021-02-25/font-metrics-override.html

W3C

• [css-cascade-5] Draft revert-layer keyword behavior (#5793) · w3c/csswg-drafts@220eefc https://github.com/w3c/csswg-drafts/commit/220eefc1015ba3bc6dae6675dc169c337ed4325c
  • revert-layer keywordが入った。
  • 今のlayerで指定されているvalueをrevertすることで、1つ前のlayerにfallbackさせる。
• [css-cascade-5] Draft layer-import syntax (#5681) · w3c/csswg-drafts@e937d96 https://github.com/w3c/csswg-drafts/commit/e937d962aaf0452805e50f00901beccc6f12a234
  • 外部のcssをlayerに包んでimportする記法も変わった。
  • @layer <<layer-ident>>? <<url>>; から @import [ <<url>> | <<string>> ] [ layer(<<layer-ident>>?) ]? に変わった
• First Public Working Draft: EPUB Accessibility 1.1 | W3C News https://www.w3.org/blog/news/archives/8923