This site was built without JavaScript

Actually the title isn’t 100% truthful, there is JavaScript on only one page, maybe you’ll find it 😁.

Building a site using no JavaScript at all is surprisingly difficult, some things you’d like to do are surprisingly difficult. Take form validation for example, sometimes you’d like to do front-end form validation as well as back-end form validation. It turns out there are now HTML5 form validation options built into browsers that browsers have natively implemented. So you can get some dynamic behavior without using JavaScript.

Form Validation

Here’s what Google Chrome looks like when it renders:

Here’s what the code looks like:

<input class="u-full-width" type="email" name="email" value="username@example.com" id="email">

Specifically the type="email" is what makes this appear as an email validation form. This is something implemented in the browser so there’s less chance of us mere mortals getting email validation wrong.

But what happens if we do want something arbitrary, less complex than email but some simple rules? It turns out that browsers have also implemented arbitrary form validation via regex matching.

Here’s what it looks like:

Here’s what the code looks like:

<input class="u-full-width" pattern="[a-zA-Z0-9_]{4,15}" title="Letters, numbers, _ (underscore), less than 16 characters, more than 3" type="text" name="twitter" value="abemassry" id="twitter">

This time the pattern is what gets checked and inside the double quotes you can put a regex string. The title tells you what the pattern is in English (or insert language of choice) and is displayed in the native tooltip.

Sign Up Flow

The next part where JavaScript comes in handy is a sign up form, usually if there are many fields.

In order to reduce the cognitive overhead of many fields in a signup form only one question was asked at a time. This actually turned out to be much simpler to step through because there was only one item on the screen in focus at a single time.

The other benefit to this was each submission allows the user (prospective author) to essentially save their place in filling out the signup form and when they return they are at the exact spot they left off. There are only 4 questions though so it’s very easy to step through and sign up.

Sometimes you might find a better way by making an arbitrary constraint and it seems to be beneficial in this case.

Retro

In retrospect and retro style; JavaScript isn’t all bad, it’s used in tons of places, on the web, on the server, in microcontrollers. I really like JavaScript actually, but I wanted to see if it was possible to build a site without using it at all. In this context, a blogging and newsletter site, it is definitely beneficial because the primary response coming from the server is all text. However, some apps and websites would not be possible at all without JavaScript and I’ve written sites like this one, sites with minimal JavaScript, and sites that are JavaScript Single Page Apps (SPAs). So basically the entire range.

The final takeaway from this post is use the right tool for the job.

This post was written by Abe Massry consider subscribing for more content like this.