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
140
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
21
15k
IE Graduation Certificate
jxck
6
5.9k
RFC 9111: HTTP Caching
jxck
0
580
tc39_study_2
jxck
1
3.1k
IETF における ABNF とプロトコルパーサの話 / ABNF for Protocol Parser @ IETF
jxck
2
950
Web Components 元年 v3 / Web Components first year v3
jxck
1
910
Periodic Background Sync
jxck
0
490
Podcast over PWA
jxck
0
220
webbundle_study
jxck
2
560
Other Decks in Technology
See All in Technology
APIのドキュメント化何使ってますか?
miu_crescent
2
160
デジタル化・DX推進あるある
y150saya
0
220
標準最高!標準はださくないぞ! at fukuoka.ts #1
yoiwamoto
0
150
なぜクラウドサービスで Web コンソールを提供するのか
shuta13
4
1.3k
Building Static Websites with Sculpin
opdavies
0
1.4k
スーパーマリオRPGのリメイク版の変更点からみるUX
nishiharatsubasa
1
110
X-Correlation Injections (or How to break server-side contexts)
fransrosen
0
360
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(1)Gitハンズオン
nomu
0
280
Dojo 20240830 COBOL to Java on Z
ichikawayasuhisa
0
240
脆弱星に導かれて
nishimunea
1
1.5k
React Aria で実現する次世代のアクセシビリティ
ryo_manba
3
290
[RSJ24] Object Segmentation from Open-Vocabulary Manipulation Instructions Based on Optimal Transport Polygon Matching with Foundation Models
keio_smilab
PRO
0
120
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1365
200k
KATA
mclloyd
27
13k
How to Ace a Technical Interview
jacobian
275
23k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.1k
Large-scale JavaScript Application Architecture
addyosmani
508
110k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Mobile First: as difficult as doing things right
swwweet
220
8.8k
4 Signs Your Business is Dying
shpigford
179
21k
Why Our Code Smells
bkeepers
PRO
333
56k
Optimizing for Happiness
mojombo
375
69k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
Building Flexible Design Systems
yeseniaperezcruz
324
37k
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