Wisps, a touch of whimsy

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.

Latest Posts

Video - Livebook, trying it out

Last friday I did my second live stream. A lot of nice people stopped by and I spent the time showing and getting more familiar with the newly released Livebook....

Read More

Lumen - Statically compiled Erlang for x86

The Lumen Project is an ambitious compiler development effort to create a complimentary set of compilers and tools that allow developers to get the power of the Erlang VM, The BEAM, in places it does not traditionally fit. Such as the browser. Currently the project is at an early released stage as covered in Luke's ElixirConf talk. It does not yet implement all of Erlang OTP and as such won't handle most Erlang/Elixir you could throw at it. I want to show something that it does do. And while the project is a complicated compiler project you do not need to know that stuff to try it out. This should be achievable for most developers and to ensure that I wasn't talking out of my rear I had my assistant developer follow the instructions without my input and it worked out well....

Read More

A Telegram Bot in Elixir feat. LiveView

I asked my network about noting ideas quickly and got a lot of good responses. One mentioned saving them in Telegram. I don't think I want to do specifically that but I do want a minimum friction way of noting ideas for later review and refinement. And sending them to a Telegram chat would be quite nice. So I started on the path of something like a note-taking system using Telegram for ingesting quick notes. And I want to share the satisfaction I felt with seeing the near real-time way that it works....

Read More
Read All Posts →