ep45 Monthly Web 201811
- published_at
- 2018-12-05
- guest
- @myakura
- toc
-
headings
Theme
第 45 回のテーマは 2018 年 11 月の Monthly Web です。
Show Note
Chrome 動向
- Stable: 70.0.3538.110
-
Chrome Dev Summit
- Chrome Dev Summit 2018: Building a Faster, Smoother, Capable Web
- Chrome Dev Summit 2018 Day 2: Ready for the next movement
- From Low Friction to Zero Friction with Web Packaging and Portals
- virtual-scroller: Let there be less (DOM)
- State of Houdini
- Using WebAssembly and Threads
- State of the Union for Speed Tooling
- Building Faster, More Resilient Apps with Service Worker: A Caching Strategy Deep Dive
- Chrome Dev Summit 2018 - Day 1 - Sabarinathan Masilamani - Medium
-
Updates
- Signed HTTP Exchanges
- The Writable Files API: Simplifying local file access
- Our commitment to a more capable web
-
Web Audio, Autoplay Policy and Games
- https://developers.google.com/web/updates/2018/11/web-audio-autoplay
- Chrome 71 から、音声の自動再生ポリシーが変わる件の詳細
- ロード時に勝手に再生されるうざい Autoplay を止める
- 行動から、そのページに Autoplay を許すかを Media Engagement Index (MEI) に記録
- 例えば恒常的に 7 秒以上再生するなど
- それ以外は、 UserGesture が無いと resume できない
- Proxy で UserGesture を全部 resume に繋げるコード例が紹介されている
-
What's New In DevTools (Chrome 72)
- https://developers.google.com/web/updates/2018/11/devtools
- Visualize performance metrics in the Performance panel.
- Highlight text nodes in the DOM Tree.
- Copy the JS path to a DOM node from the DOM Tree.
- Audits panel updates, including a new audit that detects JS libraries and new keywords for accessing the Audits panel from the Command Menu.
-
Intents
-
Ship: CSS Properties and Values API Level 1
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/QjcyhPZ_sNI/SuB-GuNPDAAJ
CSS.registerProperty({name: "--my-font-size", syntax: "<length>", initialValue: "0px"})
- カスタムプロパティをアニメーションしたりできるようになる。
- Ship: IndexedDB database info enumeration function
-
Ship: Intl.ListFormat
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/_TllF9146H0/PgI3cqEMBAAJ
new ListFormat("en").format(["Alice", "Bob"]); // "Alice and Bob"
new ListFormat("zh").format(["譚永鋒", "劉新宇"]); // "譚永鋒和劉新宇"
- Ship: EME Encryption Scheme Query
-
Ship: Change default style of
<area>
to [display: none]- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/-dmig28jgAo/zPP4gPlnBwAJ
- 今は display: inline なので、仕様に合わせる
-
Ship: First Input Timing
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/LN92hkaKCzw/Y-ryVxu5AgAJ
- PerformanceObserver で First Input Timing が取れるように
- これにより First Input Delay が計算できる
- Chrome は、指標の 1 つとして First Input Delay を強く啓蒙しているので、優先的に ship したいらしい
- Ship: EME Extension - Policy Check
- Implement and Ship: Navigator Language for Workers
- Implement and Ship: fix IDL for PerformanceMark, PerformanceMeasure, and performance attribute in workers
- Implement and Ship: Network Error Logging request_headers and response_headers fields
- Implement and Ship: RTCPeerConnection.connectionState and RTCPeerConnection.onconnectionstatechanged
- Implement and Ship: RTCRtpReceiver.getParameters()
- Implement and Ship: DOMMatrixReadOnly.scaleNonUniform()
- Implement and Ship: Additional encodings.networkPriority field in RtpSender[Get|Set]Parameters
- Implement: FetchEvent Worker Timing
- Implement: Contacts API
-
Implement: Feature policy control over
document.domain
. - Implement: Form-associated custom elements
- Implement: Additional encodings.networkPriority field in RtpSender[Get|Set]Parameters
- Implement: User Idle Detection
- Implement: WebRTC RTCDtlsTransport object
- Implement: Storage Quota Usage Details
- Implement: Bidi Caret Affinity
- Experiment: Configurable WebRTC jitter buffer max size
-
(Reverse) Origin Trial for old Web Components
- https://groups.google.com/a/chromium.org/forum/#!topic/experimentation-dev/lrmxlU-Ddxk
- Web Components の deprecate を Origin Trials で延命しながら行う件
-
Experiment: HrefTranslate HTMLAnchor attribute
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/4DZIDt9o1ME/L4878LGOBwAJ
- hrefTranslate でリンク先のコンテンツの言語を指定できる
- サーバ側で翻訳機を通しているコンテンツの UX がよくなるらしい
- Continue Experimenting: Web XR Device API
- Change:
- Unship:
- Remove:
- Deprecate and Remove: Rendering FTP resources.
- Undeprecate: webkitURL on Window
-
Out of Renderer CORS (Cross-Origin Resource Sharing) is now on 50:50 canary/dev finch
- https://groups.google.com/a/chromium.org/forum/#!topic/network-service-dev/VdU2lGH_Mag
- fetch は renderer process から browser process に依頼される
- CORS チェックは renderer 側でやっていた
- これを browser 側に持っていく
- つまり CORS を off the main thread する
- browser 側でやることで、 renderer を騙せたとしても cors バイパスが成立しにくくなる
- by toyoshima-san
-
Ship: CSS Properties and Values API Level 1
-
Team Weekly Snippet
- Chrome Storage Team Weekly for 11/06/2018
-
v8
-
Faster async functions and promises
- https://v8.dev/blog/fast-async
- async/await まわりの高速化とデバッグしやすさについて
-
Faster async functions and promises
-
Other
- Streaming in the Shadow Reader
- PageSpeed Insights, now powered by Lighthouse
-
Developer Preview of better AMP URLs in Google Search
- https://amphtml.wordpress.com/2018/11/13/developer-preview-of-better-amp-urls-in-google-search/
- AMP の Signed HTTP Exchange 対応の話
- https://g.co/webpackagedemo
- 検索のデモも公開されている
-
web.dev 公開
- https://web.dev/
- Web のプラクティスを学ぶ新しいサイト
- ログインすると Lighthouse の結果を保存できる
-
.dev ドメイン自体が取得可能になっていく
- https://get.dev/
- まずは trademark 持ってる人 (1/16~2/19)、そのあと一般
- 社内で .dev 勝手に使ってる人は対応
- web.dev status update, 11/12/18
- web.dev status update, 11/14/2018
- web.dev status update, 29th Nov 2018
-
Squoosh
- https://squoosh.app/
- https://github.com/GoogleChromeLabs/squoosh
- WebP なども対応した画像圧縮ツール
- WASM でつくりブラウザで動く
- 確認しながらパラメータを決める GUI つき
- Progressively AMPlify EC-CUBE
- AMP Project's new governance model now in effect
- [ACTION REQUEST] Tell the World What You're Shipping in 72
- VisBug
Firefox 動向
- Stable: 63.0.3
-
Updates
-
Encrypted SNI Comes to Firefox Nightly (取りこぼし)
- https://blog.mozilla.org/security/2018/10/18/encrypted-sni-comes-to-firefox-nightly/
- ClientHello に含まれる SNI は平文なので、どこに接続しようとしてるかは漏れる
- これも暗号化したいので DNS で公開鍵を送って DH する
- それだけだと結局 DNS 見れば接続先はわかる
- そこで DoH ですよという話
- 提案は Kazuho さんたち
-
Next Steps in DNS-over-HTTPS Testing - Future Releases
- https://blog.mozilla.org/futurereleases/2018/11/27/next-steps-in-dns-over-https-testing/
- DoH (Cloudflare) を使うと一定の改善は見込めた
- CDN は一番近い Edge を DNS で解決するが、 DoH だとそれがうまくいかない
- これをどうするか、 Akamai と協力して Firefox でテストしていくことに
-
Encrypted SNI Comes to Firefox Nightly (取りこぼし)
-
Intents
- Ship: window.event
- Ship: set keyCode or charCode of "keypress" event to the other's non-zero value
- Ship: stop dispatching "keypress" events when pressed key (key combination) does not introduce text input
- Ship: dispatching "keydown" and "keyup" events during IME composition
- Implement and Ship: CSS environment variables
- Implement and Ship: Unprefix -moz-user-select, unship mozilla-specific values.
- Implement and Ship: overflow-wrap: anywhere
- Implement and Ship: img decode API support
-
Implement: Support Referrer Policy for
<script>
elements - Implement: css-scroll-anchoring
- Implement: Reporting API
-
Implement: implicit rel=noopener for
target=_blank
on anchor and area elements - (re-)enable new keyCode/charCode values of keypress events in Nightly
- Unship: MediaStream.currentTime
- Unship: DOM "text" event
- Unship xml:base
-
Site Compat
-
WebP image support has been added
- https://www.fxsitecompat.com/en-CA/docs/2018/webp-image-support-has-been-added/
- img への Accept ヘッダが
image/webp,*/*
になる
- Third-party tracking cookies are now blocked by default (Affecting)
- Non-standard text event will no longer be fired during IME composition
-
WebP image support has been added
-
Other
- The Power of Web Components
- New & Experimental Web Design Tools: Feedback Requested
- Firefox Monitor Launches in 26 Languages and Adds New Desktop Browser Feature
- These Weeks in Firefox: Issue 50
- Multilingual Gecko Status Update 2018.2 | Mozilla L10N
Safari 動向
- Stable: 12.0.1
-
Safari Technology Preview 69
- https://webkit.org/blog/8479/release-notes-for-safari-technology-preview-69/
- Enabled Conic Gradients by default
- Enabled the
<datalist>
element by default - Handled zero-area intersections
- Implemented
MerchantValidationEvent.methodName
- Implemented
PaymentResponse.retry()
-
Release Notes for Safari Technology Preview 70
- https://webkit.org/blog/8496/release-notes-for-safari-technology-preview-70/
- Implemented getTiming() and updateTiming()
- Implemented Animation.updatePlaybackRate()
- Added support to allow cross-document intersection observing
- Added CSS Custom Properties API Support for
syntax="*"
and<length>
with proper cycle handling - Implemented text-underline-offset and text-decoration-thickness
- Added support for sender and receiver getCapabilities
- Added onremovetrack support for RTCPeerConnection removed tracks
- Added a storage limit for IndexedDB
- Added a warning in the Smart Search field when loading non-secure pages
-
Other
-
Web High Level Shading Language
- https://webkit.org/blog/8482/web-high-level-shading-language/
- Web High Level Shading Language = WHLSL (ホイッスル)
- WebGPU Community Group が作業中
-
Web High Level Shading Language
Edge 動向
- Stable: EdgeHTML 18.17763 / Edge 44.17763
- Status Updates
-
EdgeHTML
- https://aka.ms/devguide_edgehtml_18
- Autoplay policies
- etc
- Build Changelog
-
Chakra
- Release ChakraCore v1.11.3
- Other
WHATWG/W3C 動向
-
TPAC
- W3C TPAC 2018 [Lyon]
- WebRTC Summary of decisions
- The CSS Working Group At TPAC: What's New In CSS?
-
[CSSWG] Minutes Lyon F2F 2018-10-23 Part I-V
- https://lists.w3.org/Archives/Public/www-style/2018Dec/0000.html
- https://lists.w3.org/Archives/Public/www-style/2018Dec/0001.html
- https://lists.w3.org/Archives/Public/www-style/2018Dec/0002.html
- https://lists.w3.org/Archives/Public/www-style/2018Dec/0003.html
- https://lists.w3.org/Archives/Public/www-style/2018Dec/0004.html
-
Recommendation
- TTML1 3rd, TTML2, TTML-IMSC1 are W3C Recommendations
- Selectors Level 3 is a W3C Recommendation
- Proposed Recommendation
-
Candidate Recommendation
- W3C Invites Implementations of CSS Containment and Flexible Box Layout Module Level 1
- Working Draft
-
First Public Working Draft
- First Public Working Draft: Trace Context
- First Public Working Draft: CSS Shadow Parts
- First Public Working Draft: Extensions to the Semantic Sensor Network Ontology
-
Chartering
-
BD Comics Manga Community Group created
- https://lists.w3.org/Archives/Public/public-new-work/2018Oct/0019.html
- バンド・デシネ、コミック、漫画、 Motion Comics, Web Comics, Visual novels, Interactive Manga, Webtoon, Turbomedia, Parallax strip, Still motion art ...
- Web における様々な表現についてのコミュニティグループ
- Pointer Events Working Group (until 2018-12-04)
- Browser Testing and Tools Working Group
- Accessible Rich Internet Applications Working Group Revised Charter Approved; Call for Participation
- The Business Case for Digital Accessibility
- Proposed W3C Charter: Web Fonts Working Group
- ARIA and Assistive Technologies Community Group Proposed
- ARIA and Assistive Technologies Community Group created
-
BD Comics Manga Community Group created
-
Other
-
WICG/change-password-url
- https://github.com/WICG/change-password-url
- https://lists.w3.org/Archives/Public/public-webappsec/2018Nov/0009.html
/.well-known/change-password
でパスワード更新を discover できるように
- [CSSWG][selectors-4] Updated WD of Selectors L4
-
Change Response's statusText's default by
""
annevk · Pull Request #836- https://github.com/whatwg/fetch/pull/836
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/URFbbfpXiPA/zaMD1BjqCQAJ
- fetch の仕様で、 res.statusText のデフォルトが "OK" から "" になる
- Chrome から PSA が出ている
- 仕様上
200 OK
のOK
(reason-phrase) はなんでも良いし、無くても良い。 - https://tools.ietf.org/html/rfc7230#section-3.1.2
- New Resource: Developing an Accessibility Statement
-
WICG/change-password-url
TC39 動向
-
Meeting
- agendas/11.md at master · tc39/agendas
-
Proposals Diff
- https://github.com/tc39/proposals/compare/master@{2018-11-01}...master@{2018-12-01}
-
0->1
- Asset References
- 1->2
-
2->3
- Hashbang Grammar
- 3->4
-
-> inactive
- Distinguishing literal strings
-
-> finished
- Symbol.prototype.description
- Function.prototype.toString
-
New Proposals
- samuelgoto/proposal-optional-types:
- sebmarkbage/ecmascript-asset-references: Proposal to ECMAScript to add first-class location references relative to a module
IETF 動向
-
IETF
- IETF | Highlights from IETF 103
- HTTP Working Group Minutes
-
HTTP3
- QUIC を HTTP over QUIC と思っている人がいる
- 実際は QUIC は Transport で、 HTTP 外にも議論すべき話が多数
- HTTP over QUIC を HTTP/3 と呼ぼう、という話に
- HTTP/3 | daniel.haxx.se
- Google's QUIC protocol: moving the web from TCP to UDP
-
WebRTC
- WebRTC QUIC が ML で盛り上がり中
- RFC
- IETF Last Call
-
WG Last Call
- Working Group Last Call: draft-ietf-httpbis-bcp56bis-08
- Call for Adoption
- I-D Action
-
Draft
- HTTP Redirects in HTTP Adaptive Streaming
- Security Considerations Regarding Compression Dictionaries
- Hybrid ECDHE-SIDH Key Exchange for TLS
- OAuth 2.0 for Browser-Based Apps
- A Registry for HTTP Header Fields
- CDNI extensions for HTTPS delegation
- The Updated IETF-ISOC Relationship
-
User Agent Client Hints
- https://tools.ietf.org/html/draft-west-ua-client-hints-00
- User-Agent はもう固定にして Client Hints で代替しよう
- デフォルトでは
Sec-CH-UA: "Chrome 74"
だけ送る Accept-CH: UA, UA-Platform, UA-Arch
などすると追加が受け取れる- GREASE 的なこともするらしい
-
The 'Lang' Client Hint
- https://tools.ietf.org/html/draft-west-lang-client-hint-00
- q で重み付けしても、結局使ってない
- 情報量が増えて fingerprint しやすくなるだけ
- 単に言語を優先順に並べるだけにしよう
-
HTTP-client suggested Push Preference
- https://tools.ietf.org/html/draft-pot-prefer-push-00
- Client が Push して欲しいリソースを乗せる HTTP Header
-
Other
- HTTPWorkshop/workshop2019: Working area for the 2019 HTTP Workshop
セキュリティ動向
-
The Holy Hand Grenade of Antioch - OpenSSL Blog
- https://www.openssl.org/blog/blog/2018/11/28/version/
- OpenSSL のバージョンフォーマットが変わる
- 旧: MAJOR.MINOR.FIX[PATCH]
- 新: MAJOR.MINOR.PATCH
- 1.1.1 and 1.0.2 は変わらない
- 2.0.0 は FIPS module で使われている
- 3.0.0 から新しくなる
周辺動向
- A Netflix Web Performance Case Study
- National Center for Supercomputing Applications (NCSA) at the University of Illinois
-
Cloud Computing without Containers
- https://blog.cloudflare.com/cloud-computing-without-containers/
- Cloudflare Workers の仕組みについて解説
- Container や VM を使わず V8 の isolate を使う
- (ここでの VM は OS 部分を言ってると思われる)
- フットプリントが小さく、コンテキストスイッチコストも小さい
- 任意の言語は実行できない代わりに WASM 対応
- 今後のクラウドのあり方になるだろう、としている
- Testing new ideas with Fastly Fiddle
- google/j2cl: Java to Closure JavaScript transpiler
-
The State of JavaScript 2018: Introduction
- https://2018.stateofjs.com/introduction
-
Highest Satisfaction
- Jest
- Express
- GraphQL
-
Highest Interest
- GraphQL
- Storybook
- Electron
-
Most Mentioned
- VueX
- Cypress
- Hapi
-
Most Used
- React
- Express
- Angular
-
Prediction Award
- Reason
- Svelte
- Parcel
-
Special Award
- VS Code
- Storybook
- Next.js
-
The 100 greatest innovations of 2018
- https://www.popsci.com/best-of-whats-new-2018
- 2018 年のイノベーション 100 選
- ここに WebAuthn (Web Authentication) by FIDO Alliance & W3C が入ってる
イベント
-
12 月
- 3-7: All Hands/Orlando2018 - MozillaWiki