I like solving problems, always have, which is also why - up until I had to argue with managers and sit through useless meetings - I actually enjoyed my job for a very long time. Since I’m currently between jobs, and mostly busy in the garden (built a pond, then moved on to fiddle with the driveway), and since work hasn’t given me many creative problems to chew on lately either, I decided to cook up a little programming challenge for myself.

The goal was a small, ideally sub-1KB “website” that’s a quine - i.e. it prints out its own source code - should roughly fit in a desktop browser window, and ideally do something too.

I did something similar once before, when we “founded” my previous company where I worked, so this time I picked the logo of my next workplace as the theme.

After about 4 hours of tinkering I managed to put it together, the result (with a small tweak, more on that later) can be seen here, and the source, along with a few stages of the tinkering, is here (github).

The process⌗

A few people asked how I go about something like this, so I left a couple of intermediate versions in the progress directory, and I’ll also write a few words about it.

First I drew the logo, then placed it inside an HTML page in a <pre> tag - its content is what will become the code, which I run via onload=eval(...).

At first this seemed small, I enlarged it a bit, then added the minimal code that colors it a bit and runs a loop, which is where the animation will eventually go. For now I just plopped it below the logo - the golfing (minimizing/inlining the code) comes later.

JavaScript is quite forgiving, there are plenty of tricks to make a function call squeeze into the gaps, or to fill “unnecessary” one or two character gaps with something - I won’t go into those here.

In the first step I golfed the “static” parts into place, and once it became clear how much room I had left, I started adding the animation - which in this case swaps “full block” characters for a “fragmented” variant.

Squeezing the rest into place too, I sadly saw that there was too much free space left over. Luckily I wasn’t that fond of every block fragmenting anyway, so by making the fragmentation random too, I managed to fill up the free space - which of course meant undoing a good chunk of the golfing and redoing it, but that’s what this is all about.

I was almost happy with this version, but the latest change had ruined the distribution of the fragmented blocks. With a minimal tweak though, by reusing the position of some filler characters, I managed to fix that too, and with that - in about 4 hours - the final version was done.

Works on my machine⌗

I proudly sent it around to a few friends, who - while they acknowledged the achievement - didn’t quite get why I was so excited about it: bitnet logo, almost

The next roughly 4 hours were spent finding a fixed-width font that also supports block characters, has a suitable license, and looks similar across every platform - <3 safari - I succeeded, but I enjoyed this part rather less ;)