Primary Unit

For some reason, the other day I was thinking about Junior Senior. I knew they had a pop hit something like 10 years ago but I just couldn’t place it at all: what it was called, what it sounded like, who they were, nothing.

Until this morning, when I looked them up and ended up watching the video for Move Your Feet on YouTube — and that was it, that video. It’s so good.

There’s just something about that super-happy, pixel art craziness. The dancing toast really clicked in my brain for some reason. I had to share — click the image below to load the gif.

Since 100 words about a 12-year-old pop track with an amusing video feels like I’m cheating you, dear reader, here’s some technical stuff about doing easy click-to-start gifs.

I wanted to share that toast clip but after reading Jacques Mattheij’s post The Fastest Blog in the World I was a little wary about dumping a 150KB image onto my front page just for a bit of whimsy. That attitude’s quite silly when you consider that the weight of the Primary Unit front page before this post went up was a full 883kB — nearly three-quarters of which is Tumblr’s crap that is out of my control. But anyway.

Here’s the code:

 1<img src="data:image/png;base64,
 2… base64 data …
 3" alt="The first frame of the gif." id="toast">
 4
 5<script>
 6var toast_img = document.getElementById('toast');
 7var data_uri = toast_img.src;
 8var gif_url = '/images/2015-08-05_Junior-Senior-Yeah.gif';
 9document.getElementById('toast').addEventListener('click', function (ev) {
10  var target = ev.target;
11  if (target.src.match(/^data:image/)) {
12      target.src = gif_url;
13  } else {
14      target.src = data_uri;
15  }
16});
17</script>
18<noscript>
19  <p>
20    Sorry, you don’t have JavaScript enabled.
21    Here’s <a href="/images/2015…gif">a link to the gif</a>.
22  </p>
23</noscript>

I grabbed the first frame and saved it as a png. At 1.5kB it wasn’t worth the extra request or bothering uploading the file, so I turned it into a base64 data URI and put it in-line (note the placeholder on line 2). From the command line:

uuencode -m infile remotename

The remotename just gets included in the header line, which you ditch, but you have to give something to the command.

Next we’ve got a little in-line JavaScript which grabs the img by its ID. It registers an event handler so that, when the image is clicked, if the src attribute is anything but the gif URL, it swaps it out and saves the old src. Click the image again and it restores the old src — in this case stopping the gif by substituting back in the data URI, but you could use it to swap two images or similar.