Checkboxland

Jun 6, 2020

Checkboxland is a JavaScript library I recently built for rendering text, animations, and pretty much anything, using only HTML checkboxes.

A marquee animation, and some other demos, built with Checkboxland

I just released a new version so I wanted to take this opportunity to share a bit of the history and motivation for the project.

The Sparkbox hack-night

Last November I organized a hack-night as part of the Sparkbox company all-hands week.

As we were about to start the event, I had a conversation with Rob about a sign near our office. The sign was built with black and white “mechanical pixels” which would flip to display text and animations. Here’s a short video showing the sign:

When I realized that you could make something similar using html checkboxes, I knew I had the perfect hack-night project. After three hours, and a bunch of help from my friend Yosevu, we had a working digital clock made out of html checkboxes.

It was a fun thing to work on, but my brain wouldn’t let go. A clock is nice, but theoretically, you could build anything this way. Right?

Recurse center

In some ways, building the clock was awkward. You had all these checkboxes to manage, and it was tricky to display them correctly and consistently across various web browsers. Checkboxes weren’t exactly designed for this.

I kept thinking of all these animations you could make, but it needed to be easier. If only there was a library that could help with this…

I soon had an opportunity to spend a week at The Recurse Center, so I decided to use that time to work on it. It was funny talking to my peers there… everyone else was doing these impressive-sounding things like building a neural network or reverse-engineering a compiler. And there I was, playing with HTML checkboxes. 🙃

Anyway, that project became Checkboxland, and it has allowed me to rapidly spin up demos and see what I could make. For example, these scannable checkbox QR Codes:

“A thing that shouldn’t exist”

Elon Musk once said that “One of the biggest traps for smart engineers is optimizing a thing that shouldn’t exist.”

Well, that’s pretty much exactly what I’ve done here.

And while I’d like to tell myself that it was a good exercise in modern JavaScript or API design, the truth is that I only made it was because I couldn’t say no. It was stuck in my brain, itching to come out.

In the future, I hope to spend my time on “more valuable pursuits,” but it’s been nice having a weird and fun thing to work on. Sometimes the world needs more weird and fun things.

Comments