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
680
tc39_study_2
jxck
1
9.2k
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
560
Podcast over PWA
jxck
0
260
webbundle_study
jxck
2
620
Other Decks in Technology
See All in Technology
React ABC Questions
hirotomoyamada
0
140
ElixirがHW化され、最新CPU/GPU/NWを過去のものとする数万倍、高速+超省電力化されたWeb/動画配信/AIが動く日
piacerex
0
140
開発視点でAWS Signerを考えてみよう!! ~コード署名のその先へ~
masakiokuda
3
170
AI AgentOps LT大会(2025/04/16) Algomatic伊藤発表資料
kosukeito
0
140
AIコーディングの最前線 〜活用のコツと課題〜
pharma_x_tech
3
1.4k
Webアプリを Lambdaで動かすまでに考えること / How to implement monolithic Lambda Web Application
_kensh
7
1.3k
AI Agentを「期待通り」に動かすために:設計アプローチの模索と現在地
kworkdev
PRO
2
450
SDカードフォレンジック
su3158
1
610
AIと開発者の共創: エージェント時代におけるAIフレンドリーなDevOpsの実践
bicstone
1
310
クォータ監視、AWS Organizations環境でも楽勝です✌️
iwamot
PRO
1
310
ここはMCPの夜明けまえ
nwiizo
8
4.7k
PicoRabbit: a Tiny Presentation Device Powered by Ruby
harukasan
PRO
2
210
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
The Cost Of JavaScript in 2023
addyosmani
49
7.7k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Measuring & Analyzing Core Web Vitals
bluesmoon
7
390
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Producing Creativity
orderedlist
PRO
344
40k
Building Flexible Design Systems
yeseniaperezcruz
329
38k
Java REST API Framework Comparison - PWX 2021
mraible
30
8.5k
The Pragmatic Product Professional
lauravandoore
33
6.5k
How to train your dragon (web standard)
notwaldorf
90
6k
Optimizing for Happiness
mojombo
377
70k
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