ep34 Monthly Web 201802
- published_at
- 2018-03-04
- guest
- @myakura
- toc
-
headings
Theme
第 34 回のテーマは 2018 年 2 月の Monthly Web です。
Show Note
Chrome 動向
- Stable: 64
-
Updates
-
Chrome 65 Beta: CSS Paint API and the ServerTiming API
- https://blog.chromium.org/2018/02/chrome-65-beta-css-paint-api-and.html
- CSS Paint API blog
- Server Timing API
- :any-link
- display: contents
<slot>
assignedElement()- HTMLAnchorElement.relList
- sync-xhr feature policy
-
Deprecations and removals in Chrome 65
- https://developers.google.com/web/updates/2018/02/chrome-65-deprecations
- Chrome no longer trusting certain Symantec certificates
- Block cross-origin
<a download>
- Document.all is no longer replaceable
-
What's New In DevTools (Chrome 66)
- https://developers.google.com/web/updates/2018/02/devtools
- Blackboxing in the Network panel
- Auto-adjust zooming in Device Mode
- Pretty-printing in the Preview and Response tabs
- Previewing HTML content in the Preview tab
- Local Overrides with styles inside of HTML
- 細かい
-
Lighthouse 2.8 Updates
- https://developers.google.com/web/updates/2018/02/lighthouse
- New Performance and SEO audits
- Performance as the first section of Lighthouse report
- Updated Accessibility scoring
- New loading message and fast facts
- New Lighthouse release guide
-
Chrome 65 Beta: CSS Paint API and the ServerTiming API
-
Intents
- Ship: Payment Handler
-
Ship: add InputMode attribute
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/MAHQkH4vvUQ/i0yCobrMCQAJ
<input inputmode=tel>
など- 既に intent を一回出しているが、ロケール関係の問題があったのでそこを省いて出す
- contenteditable でもサポート
-
Ship:
String.prototype.trimStart
/String.prototype.trimEnd
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Mx3Goj6pai4/CoJbFCDcCAAJ
String.prototype.{trimLeft,trimRight}
があったがこれは非標準に- 相対方向にするため、 Start/End にし、 Left/Right は互換のための alias に
- Ship: AudioWorklet
- Ship: Link rel=modulepreload
-
Ship: JSON
⊂
ECMAScript -
Ship: Slots in flat tree
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/6UNwnk97lrE/LmW0ni0NCwAJ
<slot>
を falt tree にdisplay: contents
で参加させる- incremental shadow dom でも必要
- https://docs.google.com/document/d/1R9J8CVaSub_nbaVQwwm3NjCoZye4feJ7ft7tVe5QerM/edit
-
Ship: Media Capabilities: decoding
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/aXYvQ01tMhw/SqA09gD7AgAJ
- このメディアはデコードできるか? を聞くと、できるかどうか教えてくれる API
- Implement and Ship: performance.memory improvements
- Implement and Ship: Update list of properties whitelisted for ::first-letter
- Implement and Ship: Return null from contentDocument and getSVGDocument() on cross-origin access
- Implement and Ship: RTCRtpcSender.get/setParameters()
- Implement and Ship MediaStreamTrack.getCapabilities()
- Implement and Ship: Throttling background dedicated workers
- Implement and Ship: aligning U2F attestation with webauthn
- Implement and Ship: dtmf attribute of RTCRtpSender
-
Implement: constructable stylesheet objects
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/irhrlr6n5YQ/LOS8xSGsBwAJ
- style を
<style>
や<link>
ではなく、new CSSStyleSheet()
で生成できるように - パースコストを減らしつつ、再利用などの最適化余地を与える
-
Implement :is()
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/BLBHKKG90DM/MxokOGuaBwAJ
- specificity-adjustment pseudo-class の実装(名前はまだ議論中?)
- 擬似セレクタで定義されたスタイルの優先度を zero にするためのもの
- オーバーライドしやすくする
- Implement: WebSockets over HTTP/2
- Implement: RTCPeerConnection.id (with origin trial)
-
Implement: srcset and imgsizes attributes on link rel=preload
- https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/8tVgAyS47y0/e9L-NbatBwAJ
<img>
と同じ srcset/imgsizes を<link>
に追加sizes
ではなくimgsizes
なのは、すでにrel=icon
で使われているから。
- Experiment: Web Locks API
- Experiment: Animation Worklet
- Change:
- Unship: rowspan=0
- Extend Origin Trial: Disable Hardware Noise Suppression
- Remove: Appcache in non-secure contexts
- Deprecate and Remove: Throwing on unimplemented but valid keyframe-specific composite values.
-
Deprecate and Remove:
document.createTouch
anddocument.createTouchList
- Team Weekly Snippet
-
v8
-
V8 release v6.5
- https://v8project.blogspot.jp/2018/02/v8-release-65.html
- Streaming compilation for WebAssembly code
- String.prototype.indexOf 10x perf improve
- Array.prototype.reduce/reduceRight/find/findIndex/some/every inlining
-
V8 JavaScript Engine: Lazy deserialization
- https://v8project.blogspot.jp/2018/02/lazy-deserialization.html
- isolate (タブごとの領域)生成時にロードされる初期状態がどんどん増えてる
- 無駄なものも多いので、デシリアライズを遅延するようにした
- タブで消費するメモリを平均 500KB 削減
-
V8 release v6.5
-
AMP
-
AMP's New Horizons
- https://amphtml.wordpress.com/2018/02/13/amps-new-horizons/
- AMP Conf
- now over 31 million domains that have created more than 5 billion AMP pages
- AMP stories: Bringing visual storytelling to the open web
-
AMP for Email
- https://www.blog.google/products/g-suite/bringing-power-amp-gmail/
<html ⚡ 4email>
という要素なドキュメントをメールに埋め込む- 専用の MIME で attach する
- フィッシングやプライバシーの懸念があるから使える AMP タグがさらに制限される
- 「プライバシーとか言っといて Google ドメインから読み込ませるのか」など反発も
- Ads and AMP: Year in Review and Looking Ahead
- The Two Faces of AMP
- AMP for email is a terrible idea
-
AMP's New Horizons
-
Other
- Variations Safe Mode
-
Meltdown/Spectre
- https://developers.google.com/web/updates/2018/02/meltdown-spectre
- https://speakerdeck.com/sat/tu-jie-dewakaruspectretomeltdown
- まとめが出た
- 各ブラウザ開発の現場には大きな影響が出ているらしい
- 新しい機能実装などが後回しになる可能性が
- sAB が無くなって WASM のマルチスレッドが、、
-
A secure web is here to stay
- https://security.googleblog.com/2018/02/a-secure-web-is-here-to-stay.html
- https://webmaster-ja.googleblog.com/2018/02/a-secure-web-is-here-to-stay.html
- 2018/7 の Chrome 68 から HTTP の not-secure 表示を始めるよというリマインダ
- Site Isolation Status - Printing, DevTools, and more
- Winning on Mobile
Firefox 動向
- Stable: 58
-
Updates
-
Firefox 58 for developers
- https://developer.mozilla.org/en-US/Firefox/Releases/58
- font-display
Promise.prototype.finally()
Intl.PluralRules
Intl.NumberFormat.prototype.formatToParts()
- hourCycle/hc lang in Intl.DateTimeFormat
- optional catch binding
- PerformanceNavigationTiming API
- WebVR API has been enabled by default on macOS
- PerformanceResourceTiming.workerStart
- Budget-based background timeout throttling has been implemented
- HTMLMediaElement.srcObject
- worker-src CSP
- "Add to home screen" is now supported in Firefox for Android
-
Firefox 59 for developers
- https://developer.mozilla.org/en-US/Firefox/Releases/59
- autocomplete in
<textarea>
- overscroll-behavior
- PointerEvents have been enabled in Firefox Desktop
- The EventTarget() constructor has been implemented
- Top-level navigation to data: URIs has been blocked
- position sticky is now supported on appropriate HTML table parts (e.g.
<th>
elements)
-
Firefox 60 for developers
- https://developer.mozilla.org/en-US/Firefox/Releases/60
- Stylo enabled in Firefox for Android
Array.prototype.values()
added (again)
- These Weeks in Firefox: Issue 31
- These Weeks in Firefox: Issue 32
-
Firefox 58 for developers
-
Intents
- Ship: Array.prototype.values
- Ship: CSS paint-order for HTML text
- Ship: Module scripts (ES6 modules)
-
(start) Ship(ping) (sorta): WebMIDI
-
https://groups.google.com/forum/#!msg/mozilla.dev.platform/DfWTpH8w9uI/UymJa6p2CgAJ
- 現時点では DOM インターフェースのみ実装するらしい
- ship というよりは implement な intent
-
https://groups.google.com/forum/#!msg/mozilla.dev.platform/DfWTpH8w9uI/UymJa6p2CgAJ
- Ship: macOS sandbox filesystem write restrictions
-
Ship experimental Mixed Content upgrading (Nightly only)
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/xjZQq0kEauM/w8OKXv7EAQAJ
- Passive Mixed Contents を HTTPS に自動で upgrade
- Ship: setting keyCode value of punctuation keys (if US keyboard layout) to non-zero
- Implement & Ship: navigator.webdriver
- Implement:
- Experiment:
- Change:
- Unship: registerProtocolHandler() over insecure contexts
- Unship: Legacy -moz-transform syntax.
- Unship: -moz-user-input: disabled / enabled
- Unship: ::-moz-math-anonymous.
- Remove: nsIDOMWindowUtils.sendKeyEvent()/nsIFrameLoader.sendCrossProcessKeyEvent()
-
Remove: Throttling of timeouts from tracking scripts
- https://groups.google.com/forum/#!msg/mozilla.dev.platform/7KYOHivQCug/sErrjJ1vCgAJ
- トラッキング系スクリプトのタイマーにスロットリングをかけるのを検討してた
- バックグラウンドだけを目的としてたけが、フォアグラウンドも実験
- 結果ページのインタラクションを阻害するケースが見つかった(詳細不明)
- 並行して、バックグラウンドのタイマーすべてをスロットリングする実装が行われた
- トラッキング系に限定する必要はないし、フォアグラウンドでそれをすると悪影響が出るとわかったので、トラッキング系スクリプトだけに提供されるこの機能が必要ないと判断、削除へ
- Intent to stop dispatching "keypress" event for non-printable keys and key combinations in Nightly and early Beta
-
Intent to enable
<div>
as default paragraph separator of contenteditable/designMode editor by default
-
Site Compat
- Support for application cache on insecure sites has been deprecated
-
Array.prototype.values()
is now enabled again -
Support for
registerProtocolHandler()
on insecure sites has been deprecated -
Rich text editor's newline behaviour has been changed, now generates
<div>
instead of<br>
-
-moz-user-input:enabled
anddisabled
are no longer supported -
<script>
with version parameter will no longer be loaded (Affecting)
-
Other
- MDN browser compatibility data: Taking the guesswork out of web compatibility
-
Forging Better Tools for the Web
-
https://hacks.mozilla.org/2018/02/forging-better-tools-for-the-web/
- Firefox DevTools のこれまでとこれから
- レイアウトやデザイン: Grid や Flexbox インスペクタなど
- JS フレームワーク: アイデアはあると書いただけで、とくに具体的な言及なし
- よい UI: https://twitter.com/violasong/status/928361002462093312
-
https://hacks.mozilla.org/2018/02/forging-better-tools-for-the-web/
-
A Perspective: Firefox Quantum's Tracking Protection Gives Users The Right To Be Curious
- https://blog.mozilla.org/blog/2018/02/14/a-perspective-firefox-quantum-tracking-protection-gives-users-the-right-to-be-curious/
- US では 40% のユーザが Ad Blocker を使ってる
- Firefox Quantum で Tracking Protection on にして使うといいよっていうアピール
- Mozilla v FCC: Mozilla Re-files Suit Against FCC to Protect Net Neutrality
Safari 動向
-
Release Notes for Safari Technology Preview 49
- https://webkit.org/blog/8088/release-notes-for-safari-technology-preview-49/
- Implemented trimStart and trimEnd
- Relaxed line terminators in String to make JSON subset of JavaScript
- 細かめ
-
Release Notes for Safari Technology Preview 50
- https://webkit.org/blog/8121/release-notes-for-safari-technology-preview-50/
- Added support for cache storage of blob responses
- Implemented
createImageBitmap(HTMLVideoElement)
- 細かめ
-
Workers at Your Service
- https://webkit.org/blog/8090/workers-at-your-service/
- Service Worker 周りの紹介
- ITP との関連や、 API Quota などについて
-
Introducing Storage Access API
- https://webkit.org/blog/8124/introducing-storage-access-api/
- ITP により 3rd Party は Cookie が別領域に格納(double keying)される
- First Party Cookie には 24h しかアクセスできない
- そもそも、 Cookie ヘッダが自動的に付与される場合はトラックに使える
- ユーザがインタラクションをしてればページ上だろう。
- first child iframe だったらアクセスも許可できようという緩和手段
- 一旦は prompt は無しで様子見
Edge 動向
- Status Updates
-
Update
- Welcoming Progressive Web Apps to Microsoft Edge and Windows 10
- Announcing Windows 10 Insider Preview Build 17093 for PC - Windows Experience BlogWindows Experience Blog
-
ショートカット キーの抑止について
- https://blogs.technet.microsoft.com/jpieblog/2018/02/09/ie11-shortcut-key/
- 「ショートカットキーを抑止したい」という要望に対するアンサー
- onkeydown の e.keycode が readonly という標準に準拠している
- IE でショートカットキーを抑止できなくなる
- "昨今では各ベンダーより様々なブラウザーが開発され、ユーザーが利用するブラウザーの大半が Internet Explorer だという時代は残念ながら過ぎ去ってしまっています。このような背景から、最近では Web サイトにおいても「相互運用性」という点が非常に重要になってきました。「相互運用性」とは、どのブラウザーで閲覧しても、同じように表示する、同じように動作する、同じような体験ができる、というようなことを言います。"
-
Build Changelog
- Microsoft Edge build 17074 changelog - Microsoft Edge Development
-
ChakraCore
- https://github.com/Microsoft/ChakraCore/wiki/Roadmap#v181
- securityupdates include spector
-
Other
-
An Update on Office 365 Requiring TLS 1.2
- https://blogs.technet.microsoft.com/exchange/2018/02/09/an-update-on-office-365-requiring-tls-1-2/
- TLS 1.0 / TLS 1.1 のサポート終了を 2018/3/1 から 2018/10/31 に延期
- 先月話したやつ。やっぱりダメだった。
-
An Update on Office 365 Requiring TLS 1.2
WHATWG/W3C 動向
-
Recommendation
- HTML Media Capture
-
Proposed Recommendation
- TTML Profiles for Internet Media Subtitles and Captions 1.0.1 (IMSC1)
-
Candidate Recommendation
-
Vehicle Information Service
- https://www.w3.org/blog/news/archives/6833
- WebSocket で車の情報をとる
- Vehicle Information Service (VIS)
- get, set, subscribe and unsubscribe to vehicle signals
-
Vehicle Information Service
-
Working Draft
- New WD for HTML5.3
- Updated WD of Selectors Level 4
-
First Public Working Draft
- CSS Grid Layout Level 2
- Personalization Semantics Content Module 1.0
- WebAssembly
- Text Layout Requirements for the Arabic Script
-
Chartering
- Second Screen Working Group re-chartered
- [wbs] response to 'Call for Review: Web Payments Working Group Charter'
- Work in Progress on Web Real-Time Communications Working Group Charter (Advance Notice)
-
Other
- Patent Advisory Group Recommends Continuing Work on Web Payments Specifications
- Welcome new Editor: Scott O'Hara
-
WebRTC developer survey
- https://docs.google.com/forms/d/1YVKqVU_ziCYtp8RGGnwB8WcQWDhkXe-mOmaSkFTdJm8/viewanalytics
- WebRTC のデプロイ状況についてのアンケート
- 母数が少ないが集計結果がおもしろい
- https://docs.google.com/forms/d/1YVKqVU_ziCYtp8RGGnwB8WcQWDhkXe-mOmaSkFTdJm8/viewanalytics
- Q: API が変更できるとしたら、どうなって欲しいですか?
- A: 複雑になってもいいから小さく細かい API が欲しい
- CFC: Incorporate Custom Elements in HTML
-
text-decoration-skip-ink auto should continue past behavior - 30+ years of underline behavior changed by latest CSS draft
- https://lists.w3.org/Archives/Public/www-style/2018Feb/0020.html
- https://medium.com/@iamhiwelo/improving-text-readability-for-dyslexic-users-with-skip-ink-underlines-bf52a2f3426b
- text-decoration-skip-ink のデフォルト挙動が変わったことについて想像通りの混乱
-
騒いでる人をなだめているだけ
- Apple はもとからいろんなところで下線をスキップするようにできていた
- 挙動は新しいものではない。 Mac 版 Mosaic でさえそんな挙動を取っていた
- https://history-computer.com/Internet/Conquering/Mosaic.html
- ただ喚き散らしてるのでみんな苦慮している
- Chrome の挙動が変わって、またその実装があまりよくなかったのでみんなが気にし始めた
- 一部挙動を修正中
-
underline を離す方法
- text-underline-position
- text-underline-offset
-
Summary of "What would you like to see in WebRTC next?"
- https://lists.w3.org/Archives/Public/public-webrtc/2018Feb/0060.html
- WebRTC NV での次の話について集めた要望のサマリ
- おおよそ予想通りのユースケースと、既出でカバーできる API 要望だった
- このまま粛々とやりそう
-
Add heading-focused outlines and :heading by annevk
- https://github.com/whatwg/html/pull/3499
- これまで実装されてなかったアウトラインアルゴリズムをなんとかする
-
見出しにフォーカス
- h2-h6 はそのまま、 h1 だけ hgroup やネストしたセクション系要素の数で変動
TC39 動向
- rwaldron/tc39-notes
- Feature watch: ECMAScript 2019
-
Proposals Diff
- https://github.com/tc39/proposals/compare/master@{2018-02-01}...master{2018-03-01}
- 0->1: N/A
- 1->2: N/A
- 2->3: N/A
- 3->4: N/A
-
New Proposals
-
New Set methods
- https://github.com/Ginden/set-methods
- Set.prototype.intersect(iterable)
- Set.prototype.union(iterable)
- Set.prototype.difference(iterable)
- Set.prototype.symmetricDifference(iterable)
- Set.prototype.isSubsetOf(otherSet)
- Set.prototype.isSupersetOf(iterable)
- Static Set.union(...iterables)
- Set.intersect(...iterables)
-
New collections (Set and Map) methods
- https://github.com/Ginden/collection-methods
- Set.prototype.filter(predicate, thisArg)
- Set.prototype.map(fn, thisArg)
- Set.prototype.find(fn, thisArg)
- Set.prototype.reduce(fn, initialValue)
- Set.prototype.join(separator)
- Set.prototype.some(predicate, thisArg)
- Set.prototype.every(predicate, thisArg)
- Set.prototype.addAll(...elements)
- Set.prototype.deleteAll(...elements)
- Map.prototype.filter(predicate, thisArg)
- Map.prototype.mapValues(fn, thisArg)
- Map.prototype.mapKeys(fn, thisArg)
- Map.prototype.merge(iterable)
- Map.groupBy -
- Map.keyBy -
-
Richer keys
- https://docs.google.com/presentation/d/1q3CGeXqskL1gHTATH_VE9Dhj0VGTIAOzJ1cR0dYqDBk/edit#slide=id.p
- 複合オブジェクトをキーにして value を紐づけたい??
-
Logical Operators and Assignment Expressions
- https://github.com/jridgewell/proposal-logical-assignment
a ||= b
,a &&= b
etc- default 引数は undefined だけなので、他の falsy でも代入できるようにしたい
-
support for sequence properties in Unicode property escapes
- https://github.com/mathiasbynens/proposal-regexp-unicode-sequence-properties
- Unicode Property を
\p
で使えるようにする提案 (/\p{Script=Greek}/u).regexGreekSymbol.test('π')
-
reifying module identity
- https://github.com/mikesamuel/tc39-module-keys
- 悪意のある 3rd Party Module にデータを抜かれないように暗号化する API
- public/private key を作って box/unbox する
- box してライブラリに渡せば、抜かれないという用途
- tl;dr;
-
New Set methods
IETF 動向
-
IETF101(3/17~23)
- https://datatracker.ietf.org/meeting/101/agenda.html
-
httpwg/wg-materials
- https://github.com/httpwg/wg-materials/blob/gh-pages/ietf101/agenda.md
- BCP56bis
- Bootstrapping WebSockets
- Secondary Certificates
- Expect-CT
- Header Common Structure
- Cache Digests for HTTP/2
- Client Hints
- RFC6265bis: Cookies
- Signed HTTP Exchanges
- HTTPter
- The "SNI" Alt-Svc Parameter / HTTP Alternative Services via DNS
- Variants
-
RFC
- RFC 8312 - CUBIC for Fast Long-Distance Networks (INFORMATIONAL)
- IETF Last Call
-
WG Last Call
- The Transport Layer Security (TLS) Protocol Version 1.3
- Call for Adoption
- I-D Action
-
Draft
- Identifier groups
- Captive Portal API
- Priority Placeholders in HTTP/2
- QUIC-LB: Using Load Balancers to Generate QUIC Connection IDs
- Performance Metrics Subprotocol for QUIC
- TCP option "request IPv6 connection"
- Header Compression for HTTP over QUIC
- Other
周辺動向
-
12 best practices for user account, authorization and password management
- https://cloudplatform.googleblog.com/2018/01/12-best-practices-for-user-account.html
- サービスで認証を行う場合のパスワードの扱いなど 12 のプラクティス
- 1, パスワードはハッシュ化
- 2, 3rd Party ID provider をサポート
- 3, user identity と user account を分けて考える
- 4, 1 つのユーザ複数の ID をサポート
- 5, 長くて複雑な password を許す
- 6, Username に余計なルールを設けない
- 7, Username の変更をサポートする
- 8, アカウントを削除可能にする
- 9, Session の長さに気をつける
- 10, 2 段階認証を使う
- 11, ID を Case Insensitive にする
- 12, secure な 認証システムを作る
-
Let's talk about usernames
- https://www.b-list.org/weblog/2018/feb/11/usernames/
- こちらはユーザ名の話で、良い記事だった
- Username で一意性の確保や事故防止が難しいという話
-
Third party CSS is not safe - JakeArchibald.com
- https://jakearchibald.com/2018/third-party-css-is-not-safe/
- 3rd Party CSS はキーロガーを作ったり色々できる可能性があるという話
- SRI や CSP connect to などが有効だが、基本ログイン画面などでは使わない方が良い
- Let's Encrypt Hits 50 Million Active Certificates and Counting
- Introducing HTTP/2 Server Push with NGINX 1.13.9
-
Weak cryptographic standards removed
- https://github.com/blog/2507-weak-cryptographic-standards-removed
- github が TLS1/1.1 を切る
イベント
-
2 月
- 13: AMP Conf
-
3 月
- 17-23: IETF 101 London