Stop Writing JavaScript!

Or; how to use plain HTML and CSS to impress your friends and vanquish your enemies!

Eddie Antonio Santos

🔗 EddieAntonio.ca
🐦 @_EddieAntonio

JavaScript is misused on the web

Web standards nerds!

What are some examples of web content / user interface patterns that you've seen implemented with JavaScript, when they could have been done more simply & accessibly with HTML + CSS?

Asking for an @_EddieAntonio, who's working on a talk.
— Amelia Bellamy-Royds (@AmeliasBrain) April 21, 2021

Thanks, Amelia!

What is this talk about?

Create a simple webpage…
…with zero JavaScript!
Compare misuse of JS with HTML/CSS alternative

We will be creating this app:

with zero JavaScript

Why use HTML/CSS instead of JavaScript?

less error-prone
(usually) more accessible
additional JavaScript becomes simpler
less JavaScript === better performance

Let's get started!

Let's make a search field!

…that submits when I click the search button
…that submits when I press enter
…that disallows an empty input

Making a search field

Basic markup:


            
              
              Search

How to submit without JavaScript?

Use <form> and <button> elements!

Will do a GET request to /search?q=user+input

<button type="submit"> is all that's need to submit a form on click on enter!

Do not submit if empty


            <form class="search-bar" action="/search">
              <input name="search" type="search" required>
              <button type="submit">Search!</button>
            </form>

add the required attribute to the input!

Check MDN for a list of validation!

Always sanitize+validate on the backend!

Let's style the submit button!

…when the input is focused
…let it be red when the input is empty
…let it be okay when the input is valid

Basic markup


            <form class="search-bar" action="/search">
              <input id="search" name="search" type="search" required>
              <button id="button" type="submit">Search!</button>
            </form>


            $("#search").on("mouseenter", () => {
              $("#button").css("background-color", "blue")
            })
            $("#search").on("mouseleave", () => {
              $("#button").css("background-color", "white")
            })

(there are many ways to do this)

CSS pseudo-classes to the rescue!

(examples over simplified for demonstration)


            <form class="search-bar" action="/search">
              <input name="search" type="search" required>
              <button type="submit">Search!</button>
            </form>


            .search-bar:focus-within button[type=submit] {
              background-color: grey;
            }
            .search-bar button:hover,
            .search-bar button:active,
            .search-bar button:focus {
              background-color: blue;
            }

Combine with sibling selectors to style invalid inputs!

(examples over simplified for demonstration)


            <form class="search-bar" action="/search">
              <input name="search" type="search" required>
              <button type="submit">Search!</button>
            </form>


            input[type=search]:invalid + button[type=submit] {
              cursor: not-allowed;
            }
            input[type=search]:invalid + button[type=submit]:hover,
            input[type=search]:invalid + button[type=submit]:focus {
              background-color: red;
            }

Let's add some advanced options

…that are initially hidden
…that the user can choose to open
…that has a nice transition

Basic markup


             Advanced Options 
            …


            $("#open-advanced-options").click((event) => {
              event.preventDefault();
              $("#advanced-options").show();
            })

(there are many ways to do this)

Builtin HTML tags to do this!

<details> and <summary>


            
               Advanced options 
              (advanced options go here…)

<details> has open attribute that you can use in CSS and JavaScript!


            details > .content {
              opacity: 0;
              /* fade in when open: */
              transition: opacity .25s;
            }

            details[open] > .content {
              opacity: 1;
            }

Complete example

Source code available on my GitHub!

with zero JavaScript

Takeaways

Buttons and forms

Instead of…

registering a click event handler for <a href="#">

consider:


                <form action="/search">
                  <button type="submit">
                      Search!
                  </button>
                </form>

Hover and status effects

Instead of…

registering a mouseenter, mouseleave, etc. event handlers

consider:

use CSS pseudo-classes

:hover
:focus
:focus-within

Accordion/Disclosure widget

Instead of…

Using JavaScript to show/hide content

consider:


                
                  Title
                   (content goes here)

Ask me questions!

🔗 EddieAntonio.ca
🐦 @_EddieAntonio