Save 37% off PRO during our Black Friday Sale! »

Yearly Web 2019

1ff811939fd0923df8321ec6d8bf9d4b?s=47 Jxck
December 14, 2019

Yearly Web 2019

Looking back 2019 Web technology.
at #devfest19 https://tokyo.gdgjapan.org/devfest2019

1ff811939fd0923df8321ec6d8bf9d4b?s=128

Jxck

December 14, 2019
Tweet

Transcript

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

  2. None
  3. mozaic.fm ep61: Yearly Web 2019

  4. 2019 年の Web を振り返る

  5. Dark Mode High Contrast Mode

  6. Media Queries Level 5 • prefers-color-scheme ◦ OS に設定した色を取得 •

    prefers-contrast ◦ コントラストを高く • prefers-reduced-motion ◦ チラつきなどの動きを抑制 • prefers-reduced-transparency ◦ 透過表現を抑制 • inverted-colors ◦ 色の反転 • forced-colors ◦ 特定の色の強制
  7. <portal>

  8. <portal> 8 • 画面遷移を CSS でアレンジ ◦ アニメーションできる ◦ 先読みでシームレスに

    • 展開できる iframe ◦ 中身を操作はできない ◦ postMessage は可能 • まだ完成とは程遠い ◦ まだバグが多い ◦ 最近 History が修正 ◦ 今日は Canary が Crash ◦ 遊ぶにはちょうど良い
  9. WASM / WASI

  10. WASM/WASI 2019/3: WASI • WASM というポータブルなバイナリ仕様ができた • これでシステムプログラミングもしたい • POSIX

    ではなくモダンな設計にしよう 2019/11: Bytecode Alliance • WASM / WASI やってこうぜ  • Moziila, Fastly, Intel, Redhat etc 2019/12: WASM W3C Recommendation • WASM はもう安心して使ってください
  11. WebAuthN

  12. WebAuthN • Authenticator を使った認証 API ◦ Yubikey, Touch ID, Win

    Hello etc ◦ 二段階/二要素/パスワードレスなどが可能 ◦ github, google, yahoo などが対応開始 • ログインの選択肢が増加 ◦ どう実装するのが正解かは難しい ◦ ユーザも Authenticator にまだ慣れてない ◦ フローやリカバリや普及などは来年以降
  13. ES/JS

  14. ES2019 • Optional catch binding • JSON superset • Symbol.prototype.description

    • Function.prototype.toString • Object.fromEntries • Well-formed JSON.stringify • String.prototype.{trimStart,trimEnd} • Array.prototype.{flat,flatMap}
  15. Private Class Fields class Counter { // Class Field (stage

    3) // Private Field (stage 3) #count = 0 }
  16. 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
  17. 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') ])
  18. Intelligent Tracking Prevention

  19. 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
  20. Project Fugu

  21. Close the Gap • Native File System API • Periodic

    Background Sync • Contact Picker API • SMS Receiver API • etc etc
  22. DoH

  23. DNS over HTTPS/TLS • DNS クエリも暗号化 ◦ プライバシー保護 ◦ 改竄の防止

    ◦ 1.1.1.1 や 8.8.8.8 が対応開始 • できないことも増える ◦ フィルタリング ◦ ペアレンタルコントロール ◦ ISP からの反対 ◦ Opt-Out (canary domain)や適用範囲などの議論
  24. Edge

  25. MS Edge over Chromium • 2018 に EdgeHTML の開発終了発表 •

    Edge のレンダリングエンジンを Chromium に • ロゴもでき Beta も順調? • 来年にはリリースされそう
  26. WebPackaging

  27. WebPackaging • Signed HTTP Exchange ◦ レスポンスに署名をする ◦ どこから取得しても自分のドメインで表示 ◦

    AMP の URL 問題を解決 • WebBundles ◦ 複数のレスポンスを 1 ファイルにまとめる ◦ ローカルに保存して AirDrop でサイトを共有したり • WebPackaging ◦ WebBundles + Signed HTTP Exchange
  28. WebTransport WebCodecs

  29. ゲームで本当に欲しかったもの • 通信 ◦ Fetch でも WebSocket でも WebRTC でもない

    ◦ Client/Server で UDP でバイナリ送りたい ◦ WebTransport • 描画 ◦ DOM でも Canvas でもない ◦ Codec -> Video したい ◦ WebCodecs • ゲーム業界中心に割と盛り上がりつつある
  30. WebComponents v1

  31. WebComponents v0 -> v1 • Chrome で v0 を deprecate

    する計画 ◦ 2020/2 Chrome80 まで延期 ◦ reverse origin trial ◦ polyfill for v0 • HTML Modules は? ◦ JSON / HTML などまとめて Synthetic Modules の提案 ◦ 今は問題が見つかり議論中
  32. Same Site Cookie

  33. Same Site Cookie Lax by default • Same Site Cookie

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

  35. TLS1.0/1.1 Deprecate • TLS は 1.2 以降を使うべき ◦ 1.0/1.1 は削除

    ◦ 各ブラウザやサービスが削除を始めている • Chrome も UI を変更 ◦ 79 (2020/1): Not Secure 表示 ◦ 80 (2020/3): Block
  36. and more & more...

  37. Jack thanks