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
150
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
15k
IE Graduation Certificate
jxck
6
6k
RFC 9111: HTTP Caching
jxck
0
630
tc39_study_2
jxck
1
5.8k
IETF における ABNF とプロトコルパーサの話 / ABNF for Protocol Parser @ IETF
jxck
2
1k
Web Components 元年 v3 / Web Components first year v3
jxck
1
970
Periodic Background Sync
jxck
0
530
Podcast over PWA
jxck
0
230
webbundle_study
jxck
2
580
Other Decks in Technology
See All in Technology
Jetpack Composeで始めるServer Cache State
ogaclejapan
2
170
AIのコンプラは何故しんどい?
shujisado
1
190
どちらを使う?GitHub or Azure DevOps Ver. 24H2
kkamegawa
0
700
10個のフィルタをAXI4-Streamでつなげてみた
marsee101
0
160
Oracle Cloudの生成AIサービスって実際どこまで使えるの? エンジニア目線で試してみた
minorun365
PRO
4
280
AI時代のデータセンターネットワーク
lycorptech_jp
PRO
1
280
Wantedly での Datadog 活用事例
bgpat
1
430
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
31k
NW-JAWS #14 re:Invent 2024(予選落ち含)で 発表された推しアップデートについて
nagisa53
0
250
20241220_S3 tablesの使い方を検証してみた
handy
3
360
マルチプロダクト開発の現場でAWS Security Hubを1年以上運用して得た教訓
muziyoshiz
2
2.2k
生成AIをより賢く エンジニアのための RAG入門 - Oracle AI Jam Session #20
kutsushitaneko
4
220
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
44
13k
Why Our Code Smells
bkeepers
PRO
335
57k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Building an army of robots
kneath
302
44k
Building Applications with DynamoDB
mza
91
6.1k
Designing Experiences People Love
moore
138
23k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
Mobile First: as difficult as doing things right
swwweet
222
9k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Side Projects
sachag
452
42k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
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