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

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

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.

INIT conference

September 28, 2022
Tweet

More Decks by INIT conference

Other Decks in Programming

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