What's New in Web 2020

Presented at web.dev live extended by GDG Kuala Lumpur on July 18, 2020.
Follow me on Twitter: https://twitter.com/henrylim96

References:

What's new in Safari 14
- Safari 14 Release Note (https://apple.co/2Oy7Oc0)
- Safari Web Extensions (https://apple.co/2B9Vnjw)
- Picture-in-Picture API (https://bit.ly/3heMXGO)
- WebShare API Target Level 2 (https://web.dev/web-share)
- Web Authentication (https://mzl.la/3jj8K1Z)
- WebP image support (https://web.dev/serve-images-webp)

What's new in Chrome 84
- New in Chrome 84 (https://bit.ly/2CLUdLH)
- App Shortcuts (https://web.dev/app-shortcuts)
- Wake Lock API (https://web.dev/wakelock/)
- Content Indexing API (https://web.dev/content-indexing-api/)
- Quieter notifications UI (https://bit.ly/2WwbBL8)
- Same Site Cookie Policy (https://web.dev/samesite-cookies-explained/)

What’s New in PWA and Fugu
- Badging API (https://web.dev/badging-api/)
- Web OTP API (https://web.dev/web-otp/)
- Native File System API (https://web.dev/native-file-system/)
- Notification Triggers (https://web.dev/notification-triggers/)

What’s New in JavaScript and V8
- Up to 4GB of memory in WASM (https://v8.dev/blog/4gb-wasm-memory)
- BigInt (https://v8.dev/blog/bigint)
- Optional Chaining (https://v8.dev/features/optional-chaining)
- Nullish coalescing (https://v8.dev/features/nullish-coalescing)
- JS Timers Throttling in Background (https://bit.ly/2WwbQ90)

What’s New in CSS
- place-items (https://mzl.la/3eNhU3D)
- aspect-ratio (https://css-tricks.com/a-first-look-at-aspect-ratio/)
- gap (https://bit.ly/3jhCWdS)
- Scroll-linked Animations (https://github.com/flackr/scroll-timeline)
- CSS Grid Tooling (https://bit.ly/2Cm8EGc)

What’s New in Chrome DevTools
- New in DevTools, Chrome 85 (https://bit.ly/3jeZtrH)
- Issues Tab
- Web Assembly Debugging
- Color Vision Deficiency Emulation
- New icons for breakpoint and logpoint
- Capture node screenshot from context menu
- Lighthouse 6

Other
- tooling.report (https://tooling.report)
- web.dev live (https://web.dev/live)

Transcript

1. Henry Lim · Web GDE · @henrylim96
2. What’s New in Web 2020 Browsers PWA Web Capabilities JavaScript and V8 CSS Tooling
4. What’s New in Safari 14 RIP Flash Safari Web Extensions Picture-in-Picture API WebShare API (Level 2) Web Authentication WebP image support
5. What’s New in Safari 14 WebShare API (Level 2)
6. What’s New in Safari 14 Web Authentication
7. What’s New in Safari 14 Web Authentication
8. What’s New in Safari 14 WebP image support
9. <picture> <source type="image/webp" srcset="flower.webp"> <source type="image/jpeg" srcset="flower.jpg"> <img src="flower.jpg" alt=""> </picture> What’s New in Safari 14 WebP image support
10. 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)
11. What’s New in Chrome 84 App Shortcuts
12. { "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
13. 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();
14. What’s New in Chrome 84 Quieter notifications UI
15. What’s New in Chrome 84 Same Site Cookie Policy
16. What’s New in Web 2020 Browsers PWA Web Capabilities JavaScript and V8 CSS Tooling
17. What’s New in PWA and Fugu Content Indexing API Badging API Web OTP API Native File System API Notification Triggers
18. What’s New in PWA and Fugu Badging API
19. What’s New in PWA and Fugu Web OTP API
20. What’s New in PWA and Fugu Native File System API
21. What’s New in PWA and Fugu Notification Triggers
22. What’s New in PWA and Fugu Fugu API Tracker goo.gle/fugu-api-tracker
23. What’s New in Web 2020 Browsers PWA Web Capabilities JavaScript and V8 CSS Tooling
24. What’s New in JavaScript and V8 Up to 4GB of memory in WASM BigInt Optional Chaining Nullish coalescing JS Timers Throttling in Background
25. 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
26. // 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
27. 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
28. 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
29. // 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
30. 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
31. What’s New in Web 2020 Browsers PWA Web Capabilities JavaScript and V8 CSS Tooling
32. What’s New in CSS place-items aspect-ratio gap Scroll-linked Animations CSS Grid Tooling (Chrome DevTools)
33. // 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
34. // Grid display: grid; place-items: center; What’s New in CSS place-items
35. // 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
36. What’s New in CSS gap, column-gap, row-gap
37. display: flex; gap: 8px; What’s New in CSS gap
38. 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
39. #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
40. What’s New in CSS CSS Grid Tooling
41. What’s New in Web 2020 Browsers PWA Web Capabilities Trusted Web Activity JavaScript and V8 CSS Tooling
42. 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
43. What’s New in Chrome DevTools Issues Tab
44. What’s New in Chrome DevTools Web Assembly Debugging
45. What’s New in Chrome DevTools Color Vision Deficiency Emulation
46. What’s New in Chrome DevTools New icons for breakpoint and logpoint
47. What’s New in Chrome DevTools Capture node screenshot from context menu
48. What’s New in Chrome DevTools Lighthouse 6.0
49. What’s New in Chrome DevTools Lighthouse 6.0
50. 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
51. github.com/GoogleChrome/ lighthouse-ci What’s New in Chrome DevTools Lighthouse 6.0
52. tooling.report Choose the best build tool for your project
53. 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
61. Follow me on Twitter: @henrylim96