|
Description:
|
|
# ep69 Monthly Web 202006
第 69 回のテーマは 2020 年 6 月の Monthly Web です。
### Chrome 動向
- Stable: 83
- Updates
- *What's New In DevTools (Chrome 85)*
- https://developers.google.com/web/updates/2020/06/devtools
- Style editing for CSS-in-JS frameworks
- Lighthouse 6 in the Lighthouse panel
- First Meaningful Paint (FMP) deprecation
- Optional Chaining
- Private Fields
- Nullish coalescing
- *New app shortcut warnings in the Manifest pane*
- *Service worker respondWith events in the Timing tab*
- Consistent display of the Computed pane
- Bytecode offsets for WebAssembly files
- Line-wise copy and cut in Sources Panel
- Ungroup same console messages
- Persisting Selected context only settings
- JavaScript compilation cache information in Performance panel
- Navigation timing alignment in the Performance panel
- *New icons for breakpoints, conditional breakpoints, and logpoints*
- Experimenting with QuicTransport
- https://web.dev/quictransport/
- Protect your resources from web attacks with Fetch Metadata
- https://web.dev/fetch-metadata/
- *How to file a good browser bug*
- https://web.dev/how-to-file-a-good-bug/
- Boldly link where no one has linked before: Text Fragments
- https://web.dev/text-fragments/
- Using the CrUX Dashboard on Data Studio
- https://web.dev/chrome-ux-report-data-studio-dashboard/
- Getting started with Chrome's origin trials
- https://web.dev/origin-trials/
- *Using the Chrome UX Report API*
- https://web.dev/chrome-ux-report-api/
- CrUX に REST API が
- Web developer tools for debugging JavaScript issues in Google Search
- https://web.dev/google-search-tools/
- Milliseconds make millions
- https://web.dev/milliseconds-make-millions/
- Accessibility tips for web developers
- https://web.dev/a11y-tips-for-web-dev/
- Notification Triggers
- https://web.dev/notification-triggers/
- Verify phone numbers on the web with the Web OTP API
- https://web.dev/web-otp/
- Know your code health with the ReportingObserver API
- https://web.dev/reporting-observer/
- The Native File System API: Simplifying access to local files
- https://web.dev/native-file-system/
- A contact picker for the web
- https://web.dev/contact-picker/
- Image support for the async clipboard API
- https://web.dev/image-support-for-async-clipboard/
- Resilient search experiences
- https://web.dev/resilient-search-experiences/
- Instant navigation experiences
- https://web.dev/instant-navigation-experiences/
- App shell UX with service workers and streams
- https://web.dev/app-shell-ux-with-service-workers/
- Progressively enhance your Progressive Web App
- https://web.dev/progressively-enhance-your-pwa/
- Choose the best build tool for your project with tooling.report
- https://web.dev/introducing-tooling-report/
- Sign-in form best practices
- https://web.dev/sign-in-form-best-practices/
- Improving user privacy and developer experience with User-Agent Client Hints
- https://web.dev/user-agent-client-hints/
- Intents
- *Ship: CSS content-visibility property*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/uElH0-Ys8Cs/bJXV-Ky5BAAJ
- 隠れている要素の処理を無くし高速化できる
- *Ship: Named pages with page-orientation*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/lExIv0Fh8fs/APsgi1auAQAJ
- `@page foobar { height: 10rem; } .foobar{ page: foobar; }` のように page property の値に指定する alias のようなものを作れる
- Ship: JavaScript BigInt to WebAssembly i64 integration
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/g4QKRUQV1-0/jdWjD1uZAAAJ
- Ship: WebXR Anchors
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Ay1bG_e9m00/kpJVUINhBQAJ
- *Ship: Non-Blocking Overscroll*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/MKshWSE9BzM/4LrO5VjiAgAJ
- TouchMove イベントはのタッチストリームは一度非ブロッキングになるとキャンセルできない
- Chromium はページの最上/下部に達したときにタッチストリームをブロッキングに戻す
- これは無限スクロールで問題を起こすため、ブロッキングに戻らないように変更する
- ページ内の Pull-to-Refresh などには CSS の overscroll-behavior を使う
- Ship: WebAssembly multi-value
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/K4-P5rq7FbY/qxxlkrjxAQAJ
- Ship: Web Bluetooth getDevices(), BluetoothDevice.watchAdvertisements(), and BluetoothAdvertisingEvent
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/lqCQ63CTKEQ/cYTNFETPAwAJ
- Ship: AVIF Decode
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/MlTJyKGGtks/rTfshC2SBAAJ
- *Ship: Media Feeds*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/OXZLwImwdbc/ai77f5puBAAJ
- ユーザに対して他のおすすめコンテンツを提供できる機能
- ブラウザの UI で行うための宣言的な API
- (どういう UI になるのか?)
- Implement and Ship: Update fallback content's behavior for ImageInputType and HTMLImageElement
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/xPWNM6g0mOs/asoj4aCkAQAJ
- *Implement and Ship: CSS counter-set*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/LpHjBZZSPB0/QpafCJheBQAJ
- CSS で連番を制御する API
- `counter-set`, `counter-increment`, `counter-reset`
- Implement and Ship: Remove 'no-preference' from prefers-color-scheme @media feature
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/ragu5Is6vCw/bsrP_5O6BAAJ
- Implement and Ship: Intensive throttling of Javascript timer wake ups
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/8En_5DqV_fU/fKD_sQRiAwAJ
- *Implement and Ship: HTMLMediaElement.preservesPitch*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/XVCt0EXVplQ/sDyHmylZAgAJ
- 音声の速度を変えたとき、音が高くなるか、変わらないか、選べる API
- 既にピッチを変えないように実装されているが DJ や音声効果など、変えられる方が良い場合もあるので入る
- Implement and Ship: Expose pictureInPictureWindow in leavepictureinpicture event
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/gwaEnJjtfKw/rEf_uw92AgAJ
- *Prototype and Ship: Feature Policy integration for Clipboard API*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/IDAapW6w4to/iSH1MXRFCgAJ
- *Prototype: cross-origin isolation*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/U51-KZ51vNY/gdA2ZYt6AQAJ
- site ではなく origin で完全に分離する
- Prototype: CSS Overflow scrollbar-gutter
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/GErJ9WbxJrU/F8N2xl1kBgAJ
- Prototype: CSS color-mix function
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/uASqamKZILY/DYm_UuokBQAJ
- Prototype: display-override
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/WvIeZT8uSzw/al7sVZjVBAAJ
- *Prototype: HTMLMediaElement.preservesPitch*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/bD4dZdquUZ8/cGYGla9UAgAJ
- Prototype: WebXR Raw Camera Access
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/4kMGCyCUIao/5vjPk4tuAQAJ
- *Prototype and chromestatus feature entries*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/GnV0dxxOR2I/3nsJ-iV8AwAJ
- chromestatus にエントリがないのに intents が送られているケースがある
- 基本は chromestatus にエントリを作るのが最初で、そこから連携して送るようにという通達
- Prototype: WebXR Layers
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/vI9AhAzxlWE/zQOmT824AgAJ
- Prototype: Cross-origin opener policy reporting API
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/h5s3SMpF8QI/TkukMVyTAgAJ
- *Prototype: Sanitizer API*
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/MJxVZs1H5SY/6q0QxEFtBAAJ
- 文字列から HTML 要素を除く API
- DOMPurify を参考にしている
- Extend Origin Trial: WebRTC Insertable Streams
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/6BSEbB0Ut5U/1-Xb-badAQAJ
- Experiment: WebHID (Human Interface Device)
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/LoyzK8xTRME/yLR-K-siBQAJ
- Experiment: adaptivePtime property for RTCRtpEncodingParameters.
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Mt9GmmF-Vwc/G4EhuBsdBQAJ
- Experiment \| Extend Origin Trial: Deprecation Trial For Disallowing Sync XHR in Page Dismissal
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Ubh0hXsM2_o/0aOCdlCaAQAJ
- Change:
- Unship:
- Remove:
- Non-Blocking Overscroll
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/0T8QSqDpNJ4/S9D125fYAgAJ
- PSA: a new fps meter
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/iHULoSyUxOQ/Tn2V2Ao_BAAJ
- Can you spare an hour?
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/jH80TVOwza4/XmnpftvGBAAJ
- v8
- V8 release v8.4 - V8
- https://v8.dev/blog/v8-release-84
- Other
- *Chromium Blog: Improving Chromium's browser compatibility in 2020*
- https://blog.chromium.org/2020/06/improving-chromiums-browser.html
- 2019 に Mozilla の実施した DNA(Developer Needs Assessment) の結果、最も求められているのは互換性だった
- これを受け Chrome は Scroll/Flexbox/Form などで改善を行った
- Chromium Blog: Changes to quality criteria for PWAs using Trusted Web Activity
- https://blog.chromium.org/2020/06/changes-to-quality-criteria-for-pwas.html
- Project Zero: FF Sandbox Escape (CVE-2020-12388)
- https://googleprojectzero.blogspot.com/2020/06/ff-sandbox-escape-cve-2020-12388.html
### Firefox 動向
- Stable: 78
- Updates
- *New in Firefox 77: DevTool improvements and web platform updates*
- https://hacks.mozilla.org/2020/06/new-in-firefox-77-devtool-improvements-and-web-platform-updates/
- DevTool Improvements
- Faster, leaner JavaScript debugging
- JavaScript & CSS Source Maps that just work
- Step JavaScript in the selected stack frame
- Overflow settings for Network and Debugger
- Pause on property read & write
- Improved Network data preview
- Platform Updates
- String#replaceAll
- IndexedDB cursor requests
- Extensions in Firefox 77: Fewer permission requests and more
- *New in Firefox 78: DevTools improvements, new regex engine, and abundant web platform updates*
- https://hacks.mozilla.org/2020/06/new-in-firefox-78/
- Developer tool improvements
- Source-mapped variables, now also in Logpoints
- Promises and frameworks error logs get more detailed
- Monitoring failed request issues
- Quality improvements
- Early-access DevTools features in Developer Edition
- Web platform updates
- *New CSS selectors :is and :where*
- *Styling forms with CSS :read-only and :read-write*
- New regex engine
- ECMAScript Intl API updates
- ParentNode.replaceChildren
- WebAssembly multi-value support
- WebAssembly large integer support
- WebExtensions
- TLS 1.0 and 1.1 removal
- Firefox 78 is an ESR release
- *Welcoming Safari to the WebExtensions Community*
- https://hacks.mozilla.org/2020/06/welcoming-safari-to-the-webextensions-community/
- WWDC での Safari の拡張対応のアナウンスを受けて
- Update on Firefox Support for macOS 10.9, 10.10 and 10.11
- https://blog.mozilla.org/futurereleases/2020/06/23/update-on-firefox-support-for-macos-10-9-10-10-and-10-11/
- *A New RegExp Engine in SpiderMonkey*
- https://hacks.mozilla.org/2020/06/a-new-regexp-engine-in-spidermonkey/
- 正規表現エンジンの刷新
- Let's meet online: Virtual All Hands 2020
- https://blog.mozilla.org/sumo/2020/07/01/lets-meet-online-virtual-all-hands-2020/
- Intents
- Ship: Require user interaction for session history entries
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/HTt3bnwTiUE/Acysxp-NAwAJ
- Ship: JavaScript weak references
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/FhtlL0tmz5M/_hOl81QRAwAJ
- Ship: WebAssembly bulk-memory-operations and reference-types proposals
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/crebIMmTEWg/-Z93I6dxAwAJ
- *Ship : HTML5 ` |