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

1. View Slide

2. Stop using JS for that
   Moving features from JS to
   CSS & HTML
   🙈 Hoo boy.
   

   View Slide

3. View Slide

4. I'm Kilian Valkhof
   Kilianvalkhof.com | @kilianvalkhof
   

   View Slide

5. I'm Kilian Valkhof
   Kilianvalkhof.com | @kilianvalkhof
   👴Spent the
   past 20 years
   building
   websites
   

   View Slide

6. I'm Kilian Valkhof
   Kilianvalkhof.com | @kilianvalkhof
   👴Spent the
   past 20 years
   building
   websites
   🌐Make a
   browser for
   devs called
   Polypane
   

   View Slide

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
   

   View Slide

8. I
   ❤️
   
   JS
   

   View Slide

9. I
   ❤️
   
   CSS
   

   View Slide

10. I
    ❤️
    
    
    

    View Slide

11. The rule
    of least
    power
    

    View Slide

12. View Slide

13. Choose the least powerful language
    suitable for a given purpose
    

    View Slide

14. Browser makers are
    listening
    And are implementing the stuff we built by hand
    

    View Slide

15. Lets get started
    

    View Slide

16. Custom toggles
    

    View Slide

17. My awesome feature
    
    
    
    
    My awesome feature
    
    
    

    View Slide

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);
    
    }
    

    View Slide

19. My awesome feature
    :checked {
    
    background:green;
    }
    
    :checked::before {
    
    transform:translateX(1rem)
    
    }
    

    View Slide

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
    
    }
    

    View Slide

21. My awesome feature
    Try it:
    codepen.io/Kilian/pen/YzYLprM
    

    View Slide

22. Datalist
    

    View Slide

23. 
    
    
    
    Bootstrap
    
    Tailwind CSS
    
    Foundation
    
    Bulma
    
    Skeleton
    
    
    codepen.io/Kilian/pen/vYpjgoZ
    

    View Slide

24. 
    input {
    
    color-scheme: dark;
    
    }
    

    View Slide

25. Complex page
    transitions
    

    View Slide

26. jQuery.
    
    Awesome.
    $('a[href*="#"]')
    
    .click(function() {
    
    var target = $(this.hash);
    
    $('html').animate({
    scrollTop: target.offset().top
    
    }, 1000)
    
    });
    

    View Slide

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
    

    View Slide

28. In JavaScript
    behavior: "smooth"
    window.scrollTo({
    1
    top:1000,
    2
    3
    });
    4
    

    View Slide

29. Accessibility
    @media
    
    (
    
    prefers-reduced-motion:
    
    no-preference
    
    ) {
    
    html {
    
    scroll-behavior: smooth;
    
    }
    
    }
    

    View Slide

30. Smooth
    

    View Slide

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
    

    View Slide

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
    

    View Slide

33. div {
    
    position: relative;
    
    }
    
    
    
    div > .sticky {
    
    position: sticky;
    
    top: 50%;
    
    }
    

    View Slide

34. Carousels
    🎠
    

    View Slide

35. Carousels
    🎠
    scroll-snap-*
    

    View Slide

36. 1
    
    
    1
    
    2
    
    ...
    5
    
    
    scroll-snap-type: x mandatory;
    scroll-snap-align: start;
    .scroller {
    1
    2
    }
    3
    .scroller div {
    4
    5
    }
    6
    

    View Slide

37. 1 2 3
    scroll-snap-type: x mandatory;
    scroll-snap-align: center;
    .scroller2 {
    1
    2
    }
    3
    .scroller2 div {
    4
    5
    }
    6
    

    View Slide

38. youtu.be/34zcWFLCDIc
    

    View Slide

39. Lazy Loading
    loading="lazy"
    1
    src=""
    2
    3
    alt=""
    4
    />
    5
    

    View Slide

40. Force downloads
    download
    1
    href="very-important-report.pdf"
    2
    3
    >
    4
    Very important report (pdf)
    5
    
    6
    

    View Slide

41. Accordions and
    modals
    

    View Slide

42. Here is my title
    
    
    Here is my title
    
    Here is my paragraph
    
    
    

    View Slide

43. Here is my title
    Here is my paragraph
    
    
    Here is my title
    
    Here is my paragraph
    
    
    

    View Slide

44. ➕Here is my title
    summary::marker {
    
    font-size: 1.5em;
    
    content: '
    ➕
    ';
    
    }
    
    [open] summary::marker {
    
    font-size: 1.5em;
    
    content: '
    ➖
    ';
    
    }
    

    View Slide

45. Here is my title
    summary:hover {
    
    cursor: pointer;
    
    background: deeppink;
    
    }
    

    View Slide

46. 
    

    View Slide

47. 
    
    
    
    This is a pretty dialog
    
    Close
    
    
    
    
    

    View Slide

48. Show modal
    
    
    Show the dialog
    
    
    

    View Slide

49. Show modal
    
    
    
    
    Tabs or spaces?
    
    
    Tabs
    
    
    
    
    
    Spaces
    
    
    
    
    
    
    dialog.addEventListener("close", function() {
    console.log(dialog.returnValue);
    
    // "correct"
    
    });
    

    View Slide

50. Show modal
    dialog::backdrop {
    
    background: #fff5;
    
    backdrop-filter: blur(4px);
    
    }
    

    View Slide

51. Stop using JS...
    
    🌌in the future
    🌌
    

    View Slide

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/
    

    View Slide

53. 
    
    Option 1
    
    Option 2
    
    Option 3
    
    
    Selectmenu
    Option 1
    Option 2
    Option 3
    

    View Slide

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;
    
    }
    

    View Slide

55. Option 1
    Option 2
    Option 3
    selectmenu::part(listbox) {
    
    display: grid;
    
    }
    

    View Slide

56. 👴👵
    
    The Parent Selector
    :has()
    

    View Slide

57. Which do you use?
    Bootstrap
    Chakra
    Tailwind
    Materialize
    Other
    
    
    Which do you use?
    
    Bootstrap Chakra
    
    Tailwind Materialize Other
    
    
    
    
    form #other-text {
    
    display: none;
    
    }
    
    form:has(#other:checked) #other-text {
    
    display: block;
    
    }
    

    View Slide

58. View Slide

59. https://polypane.app/where-is-has/
    

    View Slide

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/
    

    View Slide

61. No more JS needed!
    🥳
    

    View Slide

62. …I hope you love CSS
    and HTML now, too!
    ask me about Polypane
    @kilianvalkhof | kilianvalkhof.com | polypane.com
    

    View Slide