Things that don't need javascript

The web browser’s support for Javascript allows web developers to embed small (or large) programs into their websites. This can of course be a good thing that enhances the user interaction for the site, but over the past decade we have seen that Javascript has been used to replace existing functionality in the web browser.

Moreover, the number of websites that require that you download and run these javascript programs to even function is growing. This is not a good thing.

I’m not sure what the cause of this is, incompetence from the web developers side, or just that they think they can do it better than the built in functionality of the web browser. In either case, here’s a few things that the web browser does better, more efficient and more consistently than what you can do in Javascript. I also highly recommend Drew DeVault’s excellent post You can’t capture the nuance of my form fields.

Hyperlinking

This is probably the one I see the most often. Some web developers obviously think that it would be cool if they could embed links on their page that would send the site’s visitor to another page when they click it.

And I agree. It’s just that the web browser already knows how to do this.

Here’s an example:

<a href="https://volse.net/~haraldei">Link to my homepage</a>.

This rather simple code tells the web browser all that it needs to render the link appropriately, and where the user should be taken when the link is clicked.

In addition it may offer further functionality, like revealing the actual destination address when hovering above the link with the mouse, or allowing the web browser to list all the links on a page in a menu to make it easier for a visitor to select the right one.

Some browsers may even provide alternative rendering for links, for example an auditory browser could read it with a slightly different intonation, or accentuate it with an audible signal to let the listener know it is a link.

All of this disappeard when links are implemented using a generic html element and custom JavaScript. I’ve seem people use <span>, <div>, and even <p> elements with special css classes or data attributes to create links. Some creative souls even have used the <a> element, but without the href attribute that tells the browser where the link destination should be.

Please stop doing this! The browser already knows how to deal with links, how to render them, and what to do when we interact with them.

The same goes for buttons, of course.

Submitting a form

The web browser has first class support for forms, and this includes submitting them in a number of ways. Still I regularly stumble upon forms that require that I download and execute javascript programs to allow me to submit a specific form.

This is completely unneccessary, so please stop!

Here’s an example of how to submit a form without resorting to Javascript:

<form action="/process-form" method="POST">
  <input type="text" name="my-form-field">
  <input type="submit" name="Submit form">
</form>

That’s it. No need to download or run any extra code at all.

Redrecting to another page

Again, this one is rather common. There’s many reasons you may need to redirect your visitor to another page on your site. For example to log back in if the visitors session has expired. The people who wrote the HTTP protocol recognized this, and baked it in directly at the protocol layer.

Just return a response like this to the web browser or client, and it is already taken care of:

HTTP/1.1 302 Found
location: https://new-url.com

There’s absolutely no need to force me to download and run a Javascript program just to redirect my browser to another page on your site.

Conclusion

These examples are by no means extensive, but are some of the issues that I see with a lot of websites. There’s also another class of issues that you should not do, like changing the behaviour of the web browser by overriding default keybindings etc. That’s not what I wanted to cover in this quick post though.

There’s really no advantages to implement any of the above things yourself instead of relying on the web browsers default implementation. Web browser may be different and implement things differently, and there’s no way you can capture all of that in your custom implementation using Javascript. Also it’s just plain wasted work. Let the web browsers do what they do best, and if you feel the need to add custom code for enhancing something let it just be that—an optionsl enhancement.

Updated July 10, 2023: Spelling, and added more examples.