Slide 1
Slide 1 text
Henry Lim · Web GDE · @henrylim96
Slide 2
Slide 2 text
What’s New in Web 2020
Browsers
PWA
Web Capabilities
JavaScript and V8
CSS
Tooling
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
What’s New in
Safari 14
RIP Flash
Safari Web Extensions
Picture-in-Picture API
WebShare API (Level 2)
Web Authentication
WebP image support
Slide 5
Slide 5 text
What’s New in Safari 14
WebShare API (Level 2)
Slide 6
Slide 6 text
What’s New in Safari 14
Web Authentication
Slide 7
Slide 7 text
What’s New in Safari 14
Web Authentication
Slide 8
Slide 8 text
What’s New in Safari 14
WebP image support
Slide 9
Slide 9 text
What’s New in Safari 14
WebP image support
Slide 10
Slide 10 text
What’s New in
Chrome 84
App Shortcuts
Wake Lock API
Content Indexing API
Quieter notifications UI
Same Site Cookie Policy
Idle Detection (Origin Trials)
Slide 11
Slide 11 text
What’s New in Chrome 84
App Shortcuts
Slide 12
Slide 12 text
{
"name": "Player FM",
"start_url": "https://player.fm?utm_source=homescreen",
……
"shortcuts": [
{
"name": "Open Play Later",
"short_name": "Play Later",
"description": "View the list of podcasts you saved for later",
"url": "/play-later?utm_source=homescreen",
"icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
}
]
}
What’s New in Chrome 84
App Shortcuts
Slide 13
Slide 13 text
What’s New in Chrome 84
Wake Lock API
let wakeLock = null;
// Function that attempts to request a screen wake lock.
const requestWakeLock = async () => {
try {
wakeLock = await navigator.wakeLock.request('screen');
console.log('Screen Wake Lock is active');
} catch () {}
};
// Request a screen wake lock…
await requestWakeLock();
// … and release it.
wakeLock.release();
Slide 14
Slide 14 text
What’s New in Chrome 84
Quieter notifications UI
Slide 15
Slide 15 text
What’s New in Chrome 84
Same Site Cookie Policy
Slide 16
Slide 16 text
What’s New in Web 2020
Browsers
PWA
Web Capabilities
JavaScript and V8
CSS
Tooling
Slide 17
Slide 17 text
What’s New in
PWA and Fugu
Content Indexing API
Badging API
Web OTP API
Native File System API
Notification Triggers
Slide 18
Slide 18 text
What’s New in PWA and Fugu
Badging API
Slide 19
Slide 19 text
What’s New in PWA and Fugu
Web OTP API
Slide 20
Slide 20 text
What’s New in PWA and Fugu
Native File System API
Slide 21
Slide 21 text
What’s New in PWA and Fugu
Notification Triggers
Slide 22
Slide 22 text
What’s New in PWA and Fugu
Fugu API Tracker
goo.gle/fugu-api-tracker
Slide 23
Slide 23 text
What’s New in Web 2020
Browsers
PWA
Web Capabilities
JavaScript and V8
CSS
Tooling
Slide 24
Slide 24 text
What’s New in
JavaScript and V8
Up to 4GB of memory in WASM
BigInt
Optional Chaining
Nullish coalescing
JS Timers Throttling in Background
Slide 25
Slide 25 text
const max = Number.MAX_SAFE_INTEGER;
console.log(max); // 9007199254740991
console.log(max + 1); // 9007199254740992
console.log(max + 2); // 9007199254740992 (Wth?)
console.log(max + 3); // 9007199254740994
const maxBig = BigInt(Number.MAX_SAFE_INTEGER);
console.log(maxBig) // 9007199254740991n
console.log(maxBig + 1n) // 9007199254740992n
console.log(maxBig + 2n) // 9007199254740993n (Yay!)
console.log(maxBig + 3n) // 9007199254740994n
What’s New in JavaScript and V8
BigInt
Slide 26
Slide 26 text
// Old method: Lots of &&
let nameLength;
if (db && db.user && db.user.name)
nameLength = db.user.name.length;
// New method: Shorter code, and more readable
const nameLength = db?.user?.name?.length;
What’s New in JavaScript and V8
Optional Chaining
Slide 27
Slide 27 text
const result = db?.user?.isPsyduck || true;
// If the value of isPsyduck is undefined
// Then the value of result will be true
ue; // true
What’s New in JavaScript and V8
Nullish coalescing
Slide 28
Slide 28 text
const result = db?.user?.isPsyduck || true;
// If the value of isPsyduck is false
// Then the value of result will be true
ue; // true
What’s New in JavaScript and V8
Nullish coalescing
Slide 29
Slide 29 text
// Without Nullish Coalescing
const result = db?.user?.isPsyduck || true; // true
// With Nullish Coalescing
const result = db?.user?.isPsyduck ?? true; // false
What’s New in JavaScript and V8
Nullish coalescing
Slide 30
Slide 30 text
Test A : 1 blank foreground tab (about:blank) + 36 background tabs (CNN, Facebook, Slack, Twitter, Gmail, etc.)
Test B : 1 foreground tab playing YouTube video + 36 background tabs (CNN, Facebook, Slack, Twitter, Gmail, etc.)
What’s New in JavaScript and V8
JS Timers Throttling in Background
Source: https://docs.google.com/document/d/1sd9EVERCtRWKvnJXnP3iZ83fM3FLwDbjiyfMkaKWEYk/edit
Slide 31
Slide 31 text
What’s New in Web 2020
Browsers
PWA
Web Capabilities
JavaScript and V8
CSS
Tooling
Slide 32
Slide 32 text
What’s New in
CSS
place-items
aspect-ratio
gap
Scroll-linked Animations
CSS Grid Tooling (Chrome DevTools)
Slide 33
Slide 33 text
// Flexbox Method
display: flex;
align-items: center;
justify-content: center;
// I don't know why you are using this method
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
What’s New in CSS
place-items
Slide 34
Slide 34 text
// Grid
display: grid;
place-items: center;
What’s New in CSS
place-items
Slide 35
Slide 35 text
// Padding Method (Or just copy from Stack Overflow)
padding-top: calc(9 / 16 * 100%);
overflow: hidden;
...
// New Method
aspect-ratio: 16 / 9;
What’s New in CSS
aspect-ratio
Slide 36
Slide 36 text
What’s New in CSS
gap, column-gap, row-gap
Slide 37
Slide 37 text
display: flex;
gap: 8px;
What’s New in CSS
gap
Slide 38
Slide 38 text
element.animate(
{ transform: ['rotate(0)', 'rotate(360deg)'] },
{ timeline: new ScrollTimeline(), duration: 10000 }
)
What’s New in CSS
Scroll-linked Animations
Spec: https://drafts.csswg.org/scroll-animations-1/
Polyfill: https://github.com/flackr/scroll-timeline
Slide 39
Slide 39 text
#background {
animation-name: parallax;
animation-timeline: parallax-timeline;
}
@keyframes parallax {
0% { backgroundPosition: 50% 100%; }
100% { backgroundPosition: 50% 0%; }
}
@scroll-timeline parallax-timeline {
start: selector(#background) end;
end: (#background);
}
What’s New in CSS
Scroll-linked Animations
Spec: https://drafts.csswg.org/scroll-animations-1/
Polyfill: https://github.com/flackr/scroll-timeline
Slide 40
Slide 40 text
What’s New in CSS
CSS Grid Tooling
Slide 41
Slide 41 text
What’s New in Web 2020
Browsers
PWA
Web Capabilities
Trusted Web Activity
JavaScript and V8
CSS
Tooling
Slide 42
Slide 42 text
What’s New in
Chrome DevTools
Issues Tab
Web Assembly Debugging
Color Vision Deficiency Emulation
New icons for breakpoint and logpoint
Capture node screenshot from context menu
Lighthouse 6
Slide 43
Slide 43 text
What’s New in Chrome DevTools
Issues Tab
Slide 44
Slide 44 text
What’s New in Chrome DevTools
Web Assembly Debugging
Slide 45
Slide 45 text
What’s New in Chrome DevTools
Color Vision Deficiency Emulation
Slide 46
Slide 46 text
What’s New in Chrome DevTools
New icons for breakpoint and logpoint
Slide 47
Slide 47 text
What’s New in Chrome DevTools
Capture node screenshot from context menu
Slide 48
Slide 48 text
What’s New in Chrome DevTools
Lighthouse 6.0
Slide 49
Slide 49 text
What’s New in Chrome DevTools
Lighthouse 6.0
Slide 50
Slide 50 text
New Audits
Focus on JavaScript analysis
and accessibility
unused JavaScript
aria-hidden-body
aria-hidden-focus
aria-input-field-name
aria-toggle-field-name
form-field-multiple-labels
heading-order
duplicate-id-active
duplicate-id-aria
maskable icons
charset declaration
What’s New in Chrome DevTools
Lighthouse 6.0
Slide 51
Slide 51 text
github.com/GoogleChrome/
lighthouse-ci
What’s New in Chrome DevTools
Lighthouse 6.0
Slide 52
Slide 52 text
tooling.report
Choose the best build tool for your project
Slide 53
Slide 53 text
tooling.report
● Choose the right build tool for your next
project
● Determine whether migrating to a new
build tool is worth it
● Optimize your current build tool
configuration
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
Follow me on Twitter:
@henrylim96