Wisps, a touch of whimsy

Underjord is a tiny, wholesome team doing Elixir consulting and contract work. If you like the writing you should really try the code. See our services for more information.

This has been the most fun I’ve had with JavaScript in some time. A spiritual successor to the stupid solution which allowed both me and my visitors to see the number of concurrent readers. It is also a piece of whimsy I’ve wanted to do for a while to add more magic and life to the site. The animations default to off to preserve CPU but do turn on the magic switch in the top right if you can and want to see the visuals. This is arguably less stupid.

What is it? Well, a live number of my readership for the entire site for one. If you turn on the magic you should also see the rough positions of other readers on the site that are on the same page as a small hovering geometric shape. I call them wisps.

It’s not often that you can see the footfalls of other people on the web unless they write a comment or something. I don’t want to expose my readers to one another in any privacy-sensitive way or in any fashion that requires moderation. This simply gives a rough indication of activity on the site and whether people are reading the same thing as you. And it moves around in fun ways.

Anyway, I enjoy it and I hope you will too. So how is this done? A small backend in Phoenix using Channels (basically just WebSockets), a small amount of Javascript to render new elements and update positions based on the state updates from the backend. The idle hovering of the symbols is CSS Animation and moving from area to area as the reader reads on is done via CSS Transitions.

I was hoping to default to on, but as I’ve found out with my sweet animated gradient lines, CSS animation can get CPU intensive. Right now my gradient lines pause after a period of inactivity and only run if there is activity. They hit 12% or so on my CPU which is dumb. A better fix to make them more lightweight is on the way, the idle-handling is a mitigation. So for these I wanted to avoid a big performance hit. They perform okay right now from my tests, they use the cheap-to-animate transforms so there’s nothing too heavy. But also, there’s not a known upper bound on the potential number of wisps active at the same time and if that scales poorly on some browsers I don’t want to default to setting someone’s phone on fire.

The number is available regardless since that doesn’t animate. I think showing this sort of thing is a fair way of both measuring concurrent visitors and sharing that with the visitor. I can see it, you can see it. I’ve also been considering a 90’s web visitor counter that is actually live. Could be fun. Just gotta find the right aesthetic.

I like this way of extending my site. I guess in a JAMStack fashion. The site is static but I can build small interactive parts and back them with minimal backends which for stateful applications Elixir does exceedingly well. If these backends go down the site will still work. All the important stuff is there. The fun stuff degrades to a connection error in the console.

Let me know how you like it, I do get and read responses to my posts and I appreciate when y’all reach out so try that via lars@underjord.io or @ me on Twitter @lawik. If you want more writing, sign up for the newsletter further down the page.

Underjord is a 4 people team doing Elixir consulting and contract work. If you like the writing you should really try the code. See our services for more information.

Note: Or try the videos on the YouTube channel.