JS for fast html (because UX)

August 2017

Every web project that I’ve made over the past year or so (where I have been in the position to decide) have been pure html and css on the frontend, or close to it.

I don’t do this because it benefits me, the developer; but because it benefits me, the user. I do it because the user experience is superior. I still remember the first time I browsed around nginx.org. It blew me away how fast it was, and I stayed for a bit, just clicking links to marvel at the speed.

I cannot understand why other designers refuse to take this seriously. They don’t have to know every detail about the topic; but I have never in my years as a developer been asked by a designer what impact on speed a certain design decision will have. Not once. My pleas for a bigger focus on speed has largely been ignored.

It’s funny though, because we know that users want speed more than anything.

Fast html is awesome

Some of the benefits I’ve experienced in focusing on this:

The js that made it

As a user of my own tools I have to admit that I have come across situations that aren’t solved optimally with simple html. I give these cases a lot of thought and experimentation especially when it comes to my personal RSS reader that I use and abuse every single day.

The following are some of the solutions requiring JavaScript to UX issues I’ve had.

Keeping scroll position

Imagine you have a list of a thousand blog post titles. Next to each there is a link where you can save that particular post for later. You scroll down the list, and somewhere down the list you find something you think looks interesting and you click on save. Your browser goes off to the endpoint where the post is saved and the browser is then redirected back to the list. Reloading the page is fast, but you end up at the top of the page and you have no easy way to find you way back to where you were in the list.

I’ve simulated it a bit with the link here (make sure you are scrolled down the page to get see what I am talking about):

Click me

The user experience is not great, and it took me quite a while to get to what I feel is the right solution.

Try this link:

Click me

If the page renders as fast for you as it does for me, then all you should see is the number go up, but if you inspect the network requests you’ll see that it is reloading the entire page.

The code to make this happen looks like this:

var pos = localStorage.getItem("scroll-position")
if (pos) {
    window.scrollTo(0, pos)
    localStorage.removeItem("scroll-position")
}

document.body.addEventListener("click", function (e) {
    if (e.target.getAttribute("data-keep-scroll-position")) {
        localStorage.setItem("scroll-position", window.scrollY)
    }
})

You then can add a data-keep-scroll-position="true" to the link and the above will hook into it and do its thing.

Toggling classes

If you want to show/hide something, then essentially what you want to do is to toggle a class. I made my own little snippet for this. It looks like this:

document.body.addEventListener("click", function (e) {
    t = e.target.getAttribute("data-toggle")
    if (!t) return
    t = t.split(":")
    var el = document.querySelector(t[0])
    if (!el) return
    el.classList.toggle(t[1])
    e.preventDefault()
})

And an example:

Some text that will have its class toggled
<button data-toggle=".foo:note">Toggle class “note”</button>
<span class="foo">Some text that will have its class toggled</span>

This isn’t rocket science, but that is exactly the point!

Keeping the page fresh

I often leave a tab hanging somewhere on the “unread posts” page of my RSS reader, but how do I keep it up to date so I don’t have to open the tab and hit refresh?

setTimeout(function () {
    window.location.reload(false)
}, 10 * 60 * 1000) // 10 min

Or in tandem with the above, it actually looks like this:

setTimeout(function () {
    localStorage.setItem("scroll-position", window.scrollY)
    window.location.reload(false)
}, 10 * 60 * 1000) // 10 min

Sending data to the server and ignoring the return

The easiest way I've found to send data to the server, is to create an img and set its src.

var a = 42 // We want to send this to the server
var img = document.createElement("img")
img.src = "/foo?a="+a

As soon as the the last line above is executed, the browser will send a request to the server with the given url.

Make it fast

It’s important to say that what makes everything fast is a constant relentless focus on UX, and by extention speed. Don’t have a header (or a footer, or a sidebar) that looks up stuff in the database. Don’t load in anything you do not need. Leave the webfonts, the bloated images, the tracking scripts to the hipsters who are so eager to use the latest and the greatest that they forget their users.

Focus down on what a particular page does, and do only that. Keep the focus tightly around what the user is trying to accomplish on that page, and make that as simple, fast, and reliable as possible. Make it work.


As a side note, it’s interesting to do this kind of coding in js. It is so basic it hurts. JavaScript makes so much sense like this.

If anything, JavaScript feels over engineered.