Web's new Swag - Google IO Extended 2023

This talk focused around the latest developments and enhancements available to use in Web Development Technologies like HTML, CSS and JavaScript. In this talk we discuss about those features that everyone should be aware of and can use to make their day to day work easier.

Transcript

1. Web’s new Swag Dialogs, Popovers & Some Magical Tricks You Never Knew…✨ Simar Preet Singh Community Organiser Software Engineer @programmersingh Web
2. Simar Preet Singh Community Organiser Software Engineer @programmersingh ਜੀ ਆਇਆਂ ਨੂੰ Welcome
3. Simar Preet Singh Community Organiser Software Engineer @programmersingh Introduction ~/: whoami_ 1. MEAN & MERN Stack Developer with more than 5 years of experience. 2. Software Engineer at Redaptive Inc. 3. Community Organiser at GDG Jalandhar 4. Worked with several international clients. 5. Develops Hybrid Apps with Ionic, Capacitor and Firebase. 6. Love to contribute to Dev Community.
4. Agenda What’s There For you? New features in: 01 HTML 02 CSS 03 JavaScript 04 Browser
5. Chaliye shuru karte hain
6. What’s new in HTML? Section 01
7. Did someone say modals?
8. HTML Dialogs No more wrestling with JavaScript for Modals Now HTML has its own Modern, built-in, accessible dialogs.
9. <dialog id="d"> <form> <input type="text" name="name" placeholder="Name" required /> <input type="email" name="email" placeholder="Email" required /> <input type="submit" value="Submit" /> <button type="button" onclick="d.close()">Cancel</button> </form> </dialog> <button onclick="d.showModal()">Subscribe</button>
10. HTML Popovers - Experimental No more wrestling with JavaScript for Popovers Now HTML has its own Little, built-in and user friendly popovers
11. <button popovertarget="popoverdemo">Open Popover</button> <div id="popoverdemo" popover> <div> <h3>Popover Demo</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, quibusdam, voluptates, quia quae voluptate quos exercitationem quod voluptatibus quas doloribus. Quisquam voluptatum, quibusdam, voluptates, quia quae voluptate quos exercitationem quod voluptatibus quas doloribus. </p> </div> </div>
12. What’s new in CSS? Section 02
13. Container Queries
14. <div class="post"> <div class="card"> <h2>Card title</h2> <p>Card content</p> </div> </div> .post { container-type: inline-size; } .card h2 { font-size: 1em; } @container (min-width: 700px) { .card h2 { font-size: 2em; } }
15. color-mix() - shipping in Chrome 111 No need of mixing tray to mix colors just some css code. color-mix(in srgb, blue, white); color-mix(in srgb-linear, blue, white); color-mix(in lch, blue, white); color-mix(in oklch, blue, white); color-mix(in lab, blue, white); color-mix(in oklab, blue, white); color-mix(in xyz, blue, white); https://developer.chrome.com/blog/css-color-mix/
16. CSS Nesting - shipping in Chrome 112 Define styles for an element within the context of another selector.
17. <div class="parent"> <div class="child"></div> </div> .parent { height: 500px; width: 500px; background-color: #EC5E4F; } .parent .child { height: 250px; width: 250px; background-color: #65B867; }
18. .parent { height: 500px; width: 500px; background-color: #EC5E4F; .child { height: 250px; width: 250px; background-color: #65B867; } } .parent { height: 500px; width: 500px; background-color: #EC5E4F; } .parent .child { height: 250px; width: 250px; background-color: #65B867; } Before After
19. What’s new in Javascript? Section 03
20. Array.at() - access elements with ease var arr = [2,4,6,8,10,12,14]; var thirdElem = arr.at(2); // just like indexes console.log(thirdElem) // 6 //finding last element of array var lastElem = arr[arr.length - 1]; // old method lastElem = arr.at(-1); // new method console.log(lastElem); // 14
21. structuredClone() Make deep copy of Objects and Arrays var person = { name: “john doe”, address: { line1: “543B - Parklane Street”, city: “New York”, } }; var personClone = person; //this will copy references var personClone = JSON.parse(JSON.stringify(person)); // old method var personClone = structuredClone(person) // new and easy method
22. Examples are available at: https://github.com/programmer-singh/io-extended-2023-demo
23. Let’s Connect