Yearly Web 2019 - Speaker Deck

Slide 1

Slide 1 text

Yearly Web 2019 #DevFest19 #devfest19 2019/12/14 Jxck

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

mozaic.fm ep61: Yearly Web 2019

Slide 4

Slide 4 text

2019 年の Web を振り返る

Slide 5

Slide 5 text

Dark Mode High Contrast Mode

Slide 6

Slide 6 text

Media Queries Level 5 ● prefers-color-scheme ○ OS に設定した色を取得 ● prefers-contrast ○ コントラストを高く ● prefers-reduced-motion ○ チラつきなどの動きを抑制 ● prefers-reduced-transparency ○ 透過表現を抑制 ● inverted-colors ○ 色の反転 ● forced-colors ○ 特定の色の強制

Slide 7

Slide 7 text

Slide 8

Slide 8 text

8 ● 画面遷移を CSS でアレンジ ○ アニメーションできる ○ 先読みでシームレスに ● 展開できる iframe ○ 中身を操作はできない ○ postMessage は可能 ● まだ完成とは程遠い ○ まだバグが多い ○ 最近 History が修正 ○ 今日は Canary が Crash ○ 遊ぶにはちょうど良い

Slide 9

Slide 9 text

WASM / WASI

Slide 10

Slide 10 text

WASM/WASI 2019/3: WASI ● WASM というポータブルなバイナリ仕様ができた ● これでシステムプログラミングもしたい ● POSIX ではなくモダンな設計にしよう 2019/11: Bytecode Alliance ● WASM / WASI やってこうぜ　 ● Moziila, Fastly, Intel, Redhat etc 2019/12: WASM W3C Recommendation ● WASM はもう安心して使ってください

Slide 11

Slide 11 text

WebAuthN

Slide 12

Slide 12 text

WebAuthN ● Authenticator を使った認証 API ○ Yubikey, Touch ID, Win Hello etc ○ 二段階/二要素/パスワードレスなどが可能 ○ github, google, yahoo などが対応開始 ● ログインの選択肢が増加 ○ どう実装するのが正解かは難しい ○ ユーザも Authenticator にまだ慣れてない ○ フローやリカバリや普及などは来年以降

Slide 13

Slide 13 text

ES/JS

Slide 14

Slide 14 text

ES2019 ● Optional catch binding ● JSON superset ● Symbol.prototype.description ● Function.prototype.toString ● Object.fromEntries ● Well-formed JSON.stringify ● String.prototype.{trimStart,trimEnd} ● Array.prototype.{ﬂat,ﬂatMap}

Slide 15

Slide 15 text

Private Class Fields class Counter { // Class Field (stage 3) // Private Field (stage 3) #count = 0 }

Slide 16

Slide 16 text

Nullish Coalescing/Optional Chaining // nullish Coalescing (stage 3) // param が false/0/'' の時も上書き param = param || 'default' // param が null/undefined の時だけ上書き param = param ?? 'default' // optional chaining (stage 4) o = {a: {b: {c: 10}} // error にはならない o?.a?.b?.x // undefined

Slide 17

Slide 17 text

Promise.any/allSettled // allSettled (stage 4) // 全部完了するまで実施 Promise.allSettled([ fetch('/1'), fetch('/2'), fetch('/3') ]) // any (stage 3) // どれかが成功するまで実施 Promise.any([ fetch('/1'), fetch('/2'), fetch('/3') ])

Slide 18

Slide 18 text

Intelligent Tracking Prevention

Slide 19

Slide 19 text

ITP ● 合意の無いトラッキングはダメです ○ 3rd Party Cookie などの制限へ ● Safari だけではない ○ 2019/2: Safari ITP2.1 ○ 2019/4: Safari ITP2.2 ○ 2019/6: Edge Tracking Protection ○ 2019/9: Safari ITP2.3 ○ 2019/9: Firefox Tracking Protection ○ 2019/12: Edge Tracking Protection Update

Slide 20

Slide 20 text

Project Fugu

Slide 21

Slide 21 text

Close the Gap ● Native File System API ● Periodic Background Sync ● Contact Picker API ● SMS Receiver API ● etc etc

Slide 22

Slide 22 text

DoH

Slide 23

Slide 23 text

DNS over HTTPS/TLS ● DNS クエリも暗号化 ○ プライバシー保護 ○ 改竄の防止 ○ 1.1.1.1 や 8.8.8.8 が対応開始 ● できないことも増える ○ フィルタリング ○ ペアレンタルコントロール ○ ISP からの反対 ○ Opt-Out (canary domain)や適用範囲などの議論

Slide 24

Slide 24 text

Edge

Slide 25

Slide 25 text

MS Edge over Chromium ● 2018 に EdgeHTML の開発終了発表 ● Edge のレンダリングエンジンを Chromium に ● ロゴもでき Beta も順調？ ● 来年にはリリースされそう

Slide 26

Slide 26 text

WebPackaging

Slide 27

Slide 27 text

WebPackaging ● Signed HTTP Exchange ○ レスポンスに署名をする ○ どこから取得しても自分のドメインで表示 ○ AMP の URL 問題を解決 ● WebBundles ○ 複数のレスポンスを 1 ファイルにまとめる ○ ローカルに保存して AirDrop でサイトを共有したり ● WebPackaging ○ WebBundles + Signed HTTP Exchange

Slide 28

Slide 28 text

WebTransport WebCodecs

Slide 29

Slide 29 text

ゲームで本当に欲しかったもの ● 通信 ○ Fetch でも WebSocket でも WebRTC でもない ○ Client/Server で UDP でバイナリ送りたい ○ WebTransport ● 描画 ○ DOM でも Canvas でもない ○ Codec -> Video したい ○ WebCodecs ● ゲーム業界中心に割と盛り上がりつつある

Slide 30

Slide 30 text

WebComponents v1

Slide 31

Slide 31 text

WebComponents v0 -> v1 ● Chrome で v0 を deprecate する計画 ○ 2020/2 Chrome80 まで延期 ○ reverse origin trial ○ polyﬁll for v0 ● HTML Modules は? ○ JSON / HTML などまとめて Synthetic Modules の提案 ○ 今は問題が見つかり議論中

Slide 32

Slide 32 text

Same Site Cookie

Slide 33

Slide 33 text

Same Site Cookie Lax by default ● Same Site Cookie ○ Cookie を同じサイトでしか送られなくする ○ これまでは設定によって CSRF 対策に活用 ● by default M80 ○ Chrome 80 がデフォルトにするアナウンス ○ 安全性を優先 ○ しかし壊れるサイトが多く出る ○ 来年の 2 月までに直す必要

Slide 34

Slide 34 text

TLS1.0/1.1

Slide 35

Slide 35 text

TLS1.0/1.1 Deprecate ● TLS は 1.2 以降を使うべき ○ 1.0/1.1 は削除 ○ 各ブラウザやサービスが削除を始めている ● Chrome も UI を変更 ○ 79 (2020/1): Not Secure 表示 ○ 80 (2020/3): Block