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.
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:
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:
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.
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.