Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What's New in Web 2020

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)

Henry Lim

July 18, 2020
Tweet

More Decks by Henry Lim

Other Decks in Technology

Transcript

  1. What’s New in Safari 14 RIP Flash Safari Web Extensions

    Picture-in-Picture API WebShare API (Level 2) Web Authentication WebP image support
  2. 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)
  3. { "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
  4. 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();
  5. What’s New in PWA and Fugu Content Indexing API Badging

    API Web OTP API Native File System API Notification Triggers
  6. What’s New in JavaScript and V8 Up to 4GB of

    memory in WASM BigInt Optional Chaining Nullish coalescing JS Timers Throttling in Background
  7. 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
  8. // 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
  9. 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
  10. 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
  11. // 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
  12. 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
  13. // 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
  14. // 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
  15. 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
  16. #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
  17. What’s New in Web 2020 Browsers PWA Web Capabilities Trusted

    Web Activity JavaScript and V8 CSS Tooling
  18. 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
  19. 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
  20. 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