Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Yearly Web 2019
Search
Jxck
December 14, 2019
Technology
0
180
Yearly Web 2019
Looking back 2019 Web technology.
at #devfest19
https://tokyo.gdgjapan.org/devfest2019
Jxck
December 14, 2019
Tweet
Share
More Decks by Jxck
See All by Jxck
IE Graduation (IE の功績を讃える)
jxck
22
16k
IE Graduation Certificate
jxck
6
6.1k
RFC 9111: HTTP Caching
jxck
1
690
tc39_study_2
jxck
1
9.6k
IETF における ABNF とプロトコルパーサの話 / ABNF for Protocol Parser @ IETF
jxck
2
1.1k
Web Components 元年 v3 / Web Components first year v3
jxck
1
1k
Periodic Background Sync
jxck
0
570
Podcast over PWA
jxck
0
270
webbundle_study
jxck
2
630
Other Decks in Technology
See All in Technology
Aspire をカスタマイズしよう & Aspire 9.2
nenonaninu
0
380
20 Years of Domain-Driven Design: What I’ve Learned About DDD
ewolff
1
220
本当に必要なのは「QAという技術」だった!試行錯誤から生まれた、品質とデリバリーの両取りアプローチ / Turns Out, "QA as a Discipline" Was the Key!
ar_tama
9
3.5k
Part1 GitHubってなんだろう?その1
tomokusaba
3
630
Serverlessだからこそコードと設計にはこだわろう
kenichirokimura
2
670
Computer Use〜OpenAIとAnthropicの比較と将来の展望〜
pharma_x_tech
6
1k
OPENLOGI Company Profile for engineer
hr01
1
26k
Gateway H2 モジュールで スマートホーム入門
minoruinachi
0
140
問 1:以下のコンパイラを証明せよ(予告編) #kernelvm / Kernel VM Study Kansai 11th
ytaka23
3
400
AI-in-the-Enterprise|OpenAIが公開した「AI導入7つの教訓」——ChatGPTで変わる企業の未来とは?
customercloud
PRO
0
150
MySQL Indexes and Histograms – How they really speed up your queries
lefred
0
150
Microsoft の SSE の現在地
skmkzyk
0
300
Featured
See All Featured
Optimizing for Happiness
mojombo
378
70k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Writing Fast Ruby
sferik
628
61k
The Cult of Friendly URLs
andyhume
78
6.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
120
52k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Designing Experiences People Love
moore
142
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Thoughts on Productivity
jonyablonski
69
4.6k
Transcript
Yearly Web 2019 #DevFest19 #devfest19 2019/12/14 Jxck
None
mozaic.fm ep61: Yearly Web 2019
2019 年の Web を振り返る
Dark Mode High Contrast Mode
Media Queries Level 5 • prefers-color-scheme ◦ OS に設定した色を取得 •
prefers-contrast ◦ コントラストを高く • prefers-reduced-motion ◦ チラつきなどの動きを抑制 • prefers-reduced-transparency ◦ 透過表現を抑制 • inverted-colors ◦ 色の反転 • forced-colors ◦ 特定の色の強制
<portal>
<portal> 8 • 画面遷移を CSS でアレンジ ◦ アニメーションできる ◦ 先読みでシームレスに
• 展開できる iframe ◦ 中身を操作はできない ◦ postMessage は可能 • まだ完成とは程遠い ◦ まだバグが多い ◦ 最近 History が修正 ◦ 今日は Canary が Crash ◦ 遊ぶにはちょうど良い
WASM / WASI
WASM/WASI 2019/3: WASI • WASM というポータブルなバイナリ仕様ができた • これでシステムプログラミングもしたい • POSIX
ではなくモダンな設計にしよう 2019/11: Bytecode Alliance • WASM / WASI やってこうぜ • Moziila, Fastly, Intel, Redhat etc 2019/12: WASM W3C Recommendation • WASM はもう安心して使ってください
WebAuthN
WebAuthN • Authenticator を使った認証 API ◦ Yubikey, Touch ID, Win
Hello etc ◦ 二段階/二要素/パスワードレスなどが可能 ◦ github, google, yahoo などが対応開始 • ログインの選択肢が増加 ◦ どう実装するのが正解かは難しい ◦ ユーザも Authenticator にまだ慣れてない ◦ フローやリカバリや普及などは来年以降
ES/JS
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}
Private Class Fields class Counter { // Class Field (stage
3) // Private Field (stage 3) #count = 0 }
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
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') ])
Intelligent Tracking Prevention
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
Project Fugu
Close the Gap • Native File System API • Periodic
Background Sync • Contact Picker API • SMS Receiver API • etc etc
DoH
DNS over HTTPS/TLS • DNS クエリも暗号化 ◦ プライバシー保護 ◦ 改竄の防止
◦ 1.1.1.1 や 8.8.8.8 が対応開始 • できないことも増える ◦ フィルタリング ◦ ペアレンタルコントロール ◦ ISP からの反対 ◦ Opt-Out (canary domain)や適用範囲などの議論
Edge
MS Edge over Chromium • 2018 に EdgeHTML の開発終了発表 •
Edge のレンダリングエンジンを Chromium に • ロゴもでき Beta も順調? • 来年にはリリースされそう
WebPackaging
WebPackaging • Signed HTTP Exchange ◦ レスポンスに署名をする ◦ どこから取得しても自分のドメインで表示 ◦
AMP の URL 問題を解決 • WebBundles ◦ 複数のレスポンスを 1 ファイルにまとめる ◦ ローカルに保存して AirDrop でサイトを共有したり • WebPackaging ◦ WebBundles + Signed HTTP Exchange
WebTransport WebCodecs
ゲームで本当に欲しかったもの • 通信 ◦ Fetch でも WebSocket でも WebRTC でもない
◦ Client/Server で UDP でバイナリ送りたい ◦ WebTransport • 描画 ◦ DOM でも Canvas でもない ◦ Codec -> Video したい ◦ WebCodecs • ゲーム業界中心に割と盛り上がりつつある
WebComponents v1
WebComponents v0 -> v1 • Chrome で v0 を deprecate
する計画 ◦ 2020/2 Chrome80 まで延期 ◦ reverse origin trial ◦ polyfill for v0 • HTML Modules は? ◦ JSON / HTML などまとめて Synthetic Modules の提案 ◦ 今は問題が見つかり議論中
Same Site Cookie
Same Site Cookie Lax by default • Same Site Cookie
◦ Cookie を同じサイトでしか送られなくする ◦ これまでは設定によって CSRF 対策に活用 • by default M80 ◦ Chrome 80 がデフォルトにするアナウンス ◦ 安全性を優先 ◦ しかし壊れるサイトが多く出る ◦ 来年の 2 月までに直す必要
TLS1.0/1.1
TLS1.0/1.1 Deprecate • TLS は 1.2 以降を使うべき ◦ 1.0/1.1 は削除
◦ 各ブラウザやサービスが削除を始めている • Chrome も UI を変更 ◦ 79 (2020/1): Not Secure 表示 ◦ 80 (2020/3): Block
and more & more...
Jack thanks