Whats New in Web Platform from Google I/O 2022

What’s new in UI / UX
What’s new in Privacy / Security
What’s new in Web App Capabilities
What’s new in JavaScript

Transcript

2. GDG Ahmedabad Agenda • What’s new in UI / UX • What’s new in Privacy / Security • What’s new in Web App Capabilities • What’s new in JavaScript
3. Major improvements in CSS and Layout primitives What’s New In UI / UX
4. GDG Ahmedabad accent-color css property Customise theme of UI form controls So far a developer has to rewrite DOM to have different theme for UI controls such as checkbox, radio buttons. Now supported in all major browsers, Chromium, Edge, Safari, Firefox, Samsung browser
5. GDG Ahmedabad :root { color-scheme: light dark; accent-color: red; } input { accent-color: red; } input[type=checkbox] { accent-color: red; }
6. GDG Ahmedabad <dialog> element Out of the box modals So far a developer has to depend on third party libraries for adding modal popups . Now supported in all major browsers, Chromium, Edge, Safari, Firefox, Mobile browsers
7. GDG Ahmedabad <dialog class=”my-dialog”> Hello, this is a Modal Popup </dialog> <script> // Mostly in button click const myDialog = document.querySelector(“.my-dialog”); myDialog.showModal(); </script>
8. GDG Ahmedabad datetime-local input New input type to get date and time So far a developer has to depend on third party libraries adding controls for the date time input. Now supported in all major browsers, Chromium, Edge, Safari, Firefox, Mobile browsers
9. GDG Ahmedabad <input type="datetime-local" name="dateTime">
10. GDG Ahmedabad COLRv1 Improved color gradient vector font An evolution of the COLRv0 font format intended to make color fonts widespread by adding gradients, compositing and blending, and improved internal shape reuse for crisp and compact font files that compress well. Now supported in all major browsers, Chromium, Edge
11. GDG Ahmedabad <style> @import url(https://fonts.googleapis.com/css2?family=Noto+Color+Emoji); .emoji { font-family: "Noto Color Emoji", sans-serif; } </style> <span class="emoji">🙂</span>
12. GDG Ahmedabad aspect-ratio Maintain aspect ratio for all the elements Earlier it was only for images now it’s available for all the elements Now supported in all major browsers, Chromium, Edge, Safari, Firefox, Mobile browsers
13. GDG Ahmedabad .anySelector { aspect-ratio : 16 / 9; }
14. GDG Ahmedabad There is more…. • containment css • img loading lazy / iframe loading lazy • bfcache • Priority hints fetch priority hints • size-adjust for typography • SIMD • Interaction to next print INP
15. Major improvements in privacy & security primitives What’s New In Privacy & Security
16. GDG Ahmedabad CHIPS Cookies having independent partitioned state A partitioned third-party cookie is tied to the top-level site where it's initially set and cannot be accessed from elsewhere. The aim is to allow cookies to be set by a third-party service, but only read within the context of the top-level site where they were initially set. This is to prevent cross site tracking At experiment stage in, Chromium,
17. GDG Ahmedabad Set-Cookie: __Host-example=34d8g; SameSite=None; Secure; Path=/; Partitioned;
18. GDG Ahmedabad Topics API Share relevant topics with privacy Enable interest-based advertising, without having to resort to tracking the sites a user visits. At experiment stage in, Chromium,
19. GDG Ahmedabad // Get the array of top topics for this user. const topics = await document.browsingTopics(); value: a number identifying the topic in the taxonomy taxonomyVersion: a string identifying the set of topics currently in use by the browser classifierVersion: a string identifying the machine-learning classifier used to infer site topics from hostnames
20. GDG Ahmedabad There is more…. • User Agent Clients API • WebAuthn
21. Major improvements in web app capabilities What’s New In Web App Capabilities
22. GDG Ahmedabad MediaSession API MediaSession API to control media via OS and Devices Developers can customize media notifications and playback controls with the Media Session API Now supported in all major browsers, Chromium, Edge, Safari, Samsung browser
23. GDG Ahmedabad await document.querySelector("video").play(); if ("mediaSession" in navigator) { navigator.mediaSession.metadata = new MediaMetadata({ title: 'Album Title', artist: 'Album Artist', album: 'Album name' }); }
24. GDG Ahmedabad Windows Control Overlay More control, just like installed app Developers can put the content in the windows title Now supported in all major browsers, Chromium, Edge
25. GDG Ahmedabad Navigation API The makeover of history API Developers can customize media notifications and playback controls with the Media Session API Now supported in all major browsers, Chromium, Edge
26. GDG Ahmedabad navigation.addEventListener('navigate', navigateEvent => { switch (navigateEvent.destination.url) { case 'https://example.com/': navigateEvent.transitionWhile(loadIndexPage()); break; case 'https://example.com/cats': navigateEvent.transitionWhile(loadCatsPage()); break; } });
27. GDG Ahmedabad Virtual Keyboard API Control virtual keyboard Developers can control virtual keyboard for user text input through styling and scripting Now supported in all major browsers, Chromium, Edge
28. GDG Ahmedabad Page transition API Simplified transition between pages Developers can add smooth animated page transition experience with this API. Now supported in all major browsers, Chromium, Edge
29. GDG Ahmedabad There is more… • Color scheme in web app manifest / web app color scheme • Eyedropper API
30. Major improvements in JavaScript primitives What’s New In JavaScript
31. GDG Ahmedabad structuredClone Simplified way of cloning JavaScript Object Instead of deep cloning, use structuredClone Now supported in all major browsers, Chromium, Edge, Safari, Firefox, Samsung browser
32. GDG Ahmedabad // old way const clone = JSON.parse(JSON.stringify(obj)); //new way const clone = structuredClone(obj);
33. GDG Ahmedabad createImageBitmap Easy way to load the image Avoid memory leak and all with this new API Now supported in all major browsers, Chromium, Edge, Safari, Firefox, Samsung browser
34. GDG Ahmedabad // old way const blobToImage = (blob) => { return new Promise(resolve => { const url = URL.createObjectURL(blob) let img = new Image() img.onload = () => { URL.revokeObjectURL(url) resolve(img) } img.src = url }) }
35. GDG Ahmedabad // new way const blobToImage = (blob) => createImageBitmap(blob)
36. GDG Ahmedabad There is more… • Top level await • Private properties and methods in classes • Array at method • SharedArrayBuffer • URLPattern • Web Codecs API • Cascade layers
37. Thank You!