Stop using JS for that by Kilian Valkhof [INIT 2022]

Common patterns implemented with JavaScript are being replaced with 'native' CSS and HTML equivalents that end up being more performant, more accessible and more resilient. Features like accordions, auto-suggest, smooth scrolling, dialogs, parallax scrolling and more no longer need JavaScript to work. We'll walk through common JS features that now have CSS and HTML equivalents that you can use, or will soon be able to use.

About the speaker:
Kilian is a front-end developer with over 20 years of experience that switched from building websites to building apps to build websites with. He is interested in modern web development, desktop app development and new technologies, and regularly speaks about topics like responsive websites, design systems and Electron. Kilian is a frequent open source contributor.

Transcript

2. Stop using JS for that Moving features from JS to CSS & HTML 🙈 Hoo boy.
4. I'm Kilian Valkhof Kilianvalkhof.com | @kilianvalkhof
5. I'm Kilian Valkhof Kilianvalkhof.com | @kilianvalkhof 👴Spent the past 20 years building websites
6. I'm Kilian Valkhof Kilianvalkhof.com | @kilianvalkhof 👴Spent the past 20 years building websites 🌐Make a browser for devs called Polypane
7. I'm Kilian Valkhof Kilianvalkhof.com | @kilianvalkhof 👴Spent the past 20 years building websites 🌐Make a browser for devs called Polypane 🔘Part of the Electron governance team
8. I ❤️ JS
9. I ❤️ CSS
10. I ❤️ <JSX />
11. The rule of least power
13. Choose the least powerful language suitable for a given purpose
14. Browser makers are listening And are implementing the stuff we built by hand
15. Lets get started
16. Custom toggles
17. My awesome feature <label> <input type="checkbox" /> My awesome feature </label>
18. My awesome feature input { appearance: none; position:relative; display:inline-block; background:lightgrey; height:1.65rem; width:2.75rem; vertical-align:middle; border-radius:2rem; box-shadow:0px 1px 3px #0003 inset; transition: 0.25s linear background; } input::before { content: ''; display:block; width:1.25rem; height:1.25rem; background: #fff; border-radius:1.2rem; position: absolute; top:0.2rem; left:0.2rem; box-shadow:0px 1px 3px #0003; transition: 0.25s linear transform; transform:translateX(0rem); }
19. My awesome feature :checked { background:green; } :checked::before { transform:translateX(1rem) }
20. My awesome feature polypane.app/forced-colors input:focus { /* no: */ outline: none; /* yes: */ outline-color: transparent; } input:focus-visible { outline:2px solid dodgerblue; outline-offset: 2px }
21. My awesome feature Try it: codepen.io/Kilian/pen/YzYLprM
22. Datalist
23. <input list="frameworks" /> <datalist id="frameworks"> <option>Bootstrap</option> <option>Tailwind CSS</option> <option>Foundation</option> <option>Bulma</option> <option>Skeleton</option> </datalist> codepen.io/Kilian/pen/vYpjgoZ
24. <input type="color"> input { color-scheme: dark; }
25. Complex page transitions
26. jQuery. Awesome. $('a[href*="#"]') .click(function() { var target = $(this.hash); $('html').animate({ scrollTop: target.offset().top }, 1000) });
27. html { scroll-behavior: smooth; } To bottom Forage distillery enim yuccie pop-up fixie, raclette adipisicing cillum hammock cupidatat PBR&B incididunt. Man bun neutra austin est listicle, slow-carb twee incididunt brunch hexagon. Stumptown ennui banjo wolf salvia aesthetic pabst health goth tempor heirloom lorem aliquip next level street art. Flannel pour-over 3 wolf moon venmo letterpress, next level adipisicing. Dreamcatcher craft beer narwhal lomo chicharrones cupidatat four loko, meggings dolore roof party. Hella asymmetrical man bun austin meh woke vice sriracha aliqua consequat excepteur in pug keffiyeh. Sartorial tote bag leggings wolf art party humblebrag est brunch. Scenester asymmetrical quis helvetica non pok pok bespoke aute waistcoat deserunt id nulla actually semiotics pork belly. Marfa sriracha commodo edison bulb dolore la croix XOXO sed duis. Copper mug pour-over +1 cray dolore squid sriracha officia. Everyday carry green juice iceland enim. Pork belly kombucha anim slow-carb lomo vape consequat mumblecore. Seitan austin raw denim, laboris tumeric 8-bit marfa lo-fi. Art party meh adaptogen vice master cleanse duis mumblecore typewriter DIY fingerstache unicorn. Proident commodo pitchfork fugiat art party austin. Hexagon lorem hot chicken umami, authentic butcher pinterest ex food truck cardigan kale chips. Bitters narwhal 3 wolf moon, helvetica pickled flannel neutra disrupt lomo consequat lyft. Cupidatat chartreuse meditation +1 occupy shabby chic deserunt glossier plaid. Cloud bread dolor hoodie chillwave, proident live-edge enim ut pickled synth +1 unicorn hell of. Culpa taiyaki bushwick waistcoat hexagon cardigan meditation. Disrupt shaman ethical palo santo, crucifix synth post-ironic roof party cred hell of butcher. Meggings enim minim kombucha, artisan schlitz lumbersexual veniam PBR&B
28. In JavaScript behavior: "smooth" window.scrollTo({ 1 top:1000, 2 3 }); 4
29. Accessibility @media ( prefers-reduced-motion: no-preference ) { html { scroll-behavior: smooth; } }
30. Smooth
31. #my-target { scroll-margin-top: 100px; } To target Forage distillery enim yuccie pop-up fixie, raclette adipisicing cillum hammock cupidatat PBR&B incididunt. Man bun neutra austin est listicle, slow-carb twee incididunt brunch hexagon. Stumptown ennui banjo wolf salvia aesthetic pabst health goth tempor heirloom lorem aliquip next level street art. Flannel pour-over 3 wolf moon venmo letterpress, next level adipisicing. Dreamcatcher craft beer narwhal lomo chicharrones cupidatat four loko, meggings dolore roof party. Hella asymmetrical man bun austin meh woke vice sriracha aliqua consequat excepteur in pug keffiyeh. Sartorial tote bag leggings wolf art party humblebrag est brunch. Scenester asymmetrical quis helvetica non pok pok bespoke aute waistcoat deserunt id nulla actually semiotics pork belly. Marfa sriracha commodo edison bulb dolore la croix XOXO sed duis. Copper mug pour-over +1 cray dolore squid sriracha officia. Everyday carry green juice iceland enim. Pork belly kombucha anim slow-carb lomo vape consequat mumblecore. Seitan austin raw denim, laboris tumeric 8-bit marfa lo-fi. Art party meh adaptogen vice master cleanse duis mumblecore typewriter DIY fingerstache unicorn. Proident commodo pitchfork fugiat art party austin. Hexagon lorem hot chicken umami, authentic butcher pinterest ex food truck cardigan kale chips. My middle title to top Bitters narwhal 3 wolf moon, helvetica pickled flannel neutra disrupt lomo consequat lyft. Cupidatat chartreuse Header
32. #my-target:target { outline: 10px solid deeppink; transition: 1s ease-in-out outline; } To target Forage distillery enim yuccie pop-up fixie, raclette adipisicing cillum hammock cupidatat PBR&B incididunt. Man bun neutra austin est listicle, slow-carb twee incididunt brunch hexagon. Stumptown ennui banjo wolf salvia aesthetic pabst health goth tempor heirloom lorem aliquip next level street art. Flannel pour-over 3 wolf moon venmo letterpress, next level adipisicing. Dreamcatcher craft beer narwhal lomo chicharrones cupidatat four loko, meggings dolore roof party. Hella asymmetrical man bun austin meh woke vice sriracha aliqua consequat excepteur in pug keffiyeh. Sartorial tote bag leggings wolf art party humblebrag est brunch. Scenester asymmetrical quis helvetica non pok pok bespoke aute waistcoat deserunt id nulla actually semiotics pork belly. Marfa sriracha commodo edison bulb dolore la croix XOXO sed duis. Copper mug pour-over +1 cray dolore squid sriracha officia. Everyday carry green juice iceland enim. Pork belly kombucha anim slow-carb lomo vape consequat mumblecore. Seitan austin raw denim, laboris tumeric 8-bit marfa lo-fi. Art party meh adaptogen vice master cleanse duis mumblecore typewriter DIY fingerstache unicorn. Proident commodo pitchfork fugiat art party austin. Hexagon lorem hot chicken umami, authentic butcher pinterest ex food truck cardigan kale chips. My middle title Bitters narwhal 3 wolf moon, helvetica pickled flannel neutra disrupt lomo consequat lyft. Cupidatat chartreuse Header
33. div { position: relative; } div > .sticky { position: sticky; top: 50%; }
34. Carousels 🎠
35. Carousels 🎠 scroll-snap-*
36. 1 <div class="scroller"> <div class="option1">1</div> <div class="option2">2</div> ... <div class="option5">5</div> </div> scroll-snap-type: x mandatory; scroll-snap-align: start; .scroller { 1 2 } 3 .scroller div { 4 5 } 6
37. 1 2 3 scroll-snap-type: x mandatory; scroll-snap-align: center; .scroller2 { 1 2 } 3 .scroller2 div { 4 5 } 6
38. youtu.be/34zcWFLCDIc
39. Lazy Loading loading="lazy" <img 1 src="" 2 3 alt="" 4 /> 5
40. Force downloads download <a 1 href="very-important-report.pdf" 2 3 > 4 Very important report (pdf) 5 <a> 6
41. Accordions and modals
42. Here is my title <details> <summary>Here is my title</summary> <p>Here is my paragraph</p> </details>
43. Here is my title Here is my paragraph <details open> <summary>Here is my title</summary> <p>Here is my paragraph</p> </details>
44. ➕Here is my title summary::marker { font-size: 1.5em; content: ' ➕ '; } [open] summary::marker { font-size: 1.5em; content: ' ➖ '; }
45. Here is my title summary:hover { cursor: pointer; background: deeppink; }
46. <Dialog>
47. <dialog> <form method="dialog"> <h1>This is a pretty dialog</h1> <button type="submit">Close</button> </form> </dialog>
48. Show modal <button onclick="$$('dialog').showModal()"> Show the dialog </button>
49. Show modal <dialog> <form method="dialog"> <p>Tabs or spaces?</p> <button type="submit" value="wrong"> Tabs </button> <button type="submit" value="correct"> Spaces </button> </form> </dialog> dialog.addEventListener("close", function() { console.log(dialog.returnValue); // "correct" });
50. Show modal dialog::backdrop { background: #fff5; backdrop-filter: blur(4px); }
51. Stop using JS... 🌌in the future 🌌
52. grid-template-rows: masonry; .container { 1 display: grid; 2 grid-template-columns: repeat(4, 1fr); 3 4 } 5 Masonry layout smashingmagazine.com/native-css-masonry-layout-css-grid/
53. <selectmenu> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </selectmenu> Selectmenu Option 1 Option 2 Option 3
54. Option 1 Option 2 Option 3 selectmenu::part(button) { color: white; background-color: #f00; padding: 5px; border-radius: 5px; } selectmenu::part(listbox) { padding: 10px; margin-top: 5px; border: 5px solid red; border-radius: 20px; gap: 10px; width: 240px; font-size: 1rem; } selectmenu option { padding:10px; border-radius:10px; font-weight: bold; }
55. Option 1 Option 2 Option 3 selectmenu::part(listbox) { display: grid; }
56. 👴👵 The Parent Selector :has()
57. Which do you use? Bootstrap Chakra Tailwind Materialize Other <fieldset> <legend>Which do you use?</legend> <label><input type="radio"> Bootstrap</labe <label><input type="radio"> Chakra</label> <label><input type="radio"> Tailwind</label <label><input type="radio"> Materialize</la <label><input type="radio"> Other</label> <input type="text"> </fieldset> form #other-text { display: none; } form:has(#other:checked) #other-text { display: block; }
59. https://polypane.app/where-is-has/
60. Scroll linked animations Resources HTML CSS E D I T O N Result 1× 0.5× 0.25× Rerun bram.us/2021/02/23/the-future-of-css-scroll-linked-animations-part-1/
61. No more JS needed! 🥳
62. …I hope you love CSS and HTML now, too! ask me about Polypane @kilianvalkhof | kilianvalkhof.com | polypane.com