HTML Email Countdown

Now I must admit I don’t get excited about HTML emails very often. After years (and years) of having to painstakingly build them, and weeping over the horrible quirks of email rendering engines (Lotus Notes anyone?), it is easy to understand why. But an email landed in my email account the other day that I was quite impressed with.

A large company here in the UK sent me an email promoting one of its soon to be released products. All perfectly normal, but then over to the right hand side I saw an animated clock that was counting down the number of days until launch. This was intriguing to say the least as HTML emails are very primitive beasts. Usually laid out using tables, CSS support has its quirks, and JavaScript… not a chance! So how exactly was the countdown clock working?

After a minute or so digging around in DevTools I could quickly see what they were doing. Using their server (via a proxy) running PHP they were passing a set of URL parameters, which in turn was generating an animated gif on the fly, and serving it back to the email inside an image src attribute. Very interesting technique, as it actually produces an accurate countdown clock every time you reload the email. Here’s an example of the URL they were using:

https://www.foo-bar.co.uk/clock/index.php?time=2016-06-13+23:00&width=400&bg=f00000&shadow=f00000&font=000

The parameters being sent are pretty self-explanatory. The fact that the company can change the date and the colours means they can use the same technique over and over again for different products with different email designs. It got me thinking; I wonder if I can create something similar using node.js? After a little bit of research I found a few tools I could use to mock something up:

Moment.js is the go-to library if you want to do any form of date / time manipulation in JavaScript. Super simple API, very well tested, and comes with an excellent set of documentation. Node-canvas is a canvas implementation in node, using Cairo. It allows us to draw whatever we like to the canvas and use it as a frame in our Gif animation. The final piece of the puzzle is GifEncoder. It takes our canvas frames, ties them all together as an animation and encodes them into a Gif image we can view. Setup was all quite simple. I only ran into one issue where my version Cairo was out-of-date leading to all the characters being squashed together. After updating to the latest version using homebrew, and a quick npm install everything worked as expected.

Below you can see the final result of what I wrote. A simple animated countdown gif generated on the fly using node.js.

Animated countdown gif using node.js.

It is worth noting that as we are generating and manipulating raw pixel data, the more pixels you have, the slower it is to create the gif files. Larger gifs with more frames can take over 2 seconds to generate, which isn’t great in terms of performance. But it does the job, and I enjoyed building it so win-win.

You can view the code on GitHub, and see a live demo on Heroku. The GitHub readme file has an explanation as to what options are available, as well as the methods of how to retrieve the generated gif.

Note: I am on the free Heroku plan which shuts down after 30 minutes of inactivity, so it may take a second or so to spin back up once requested.

Loading

Webmentions