Yesterday, I got an email from Memrise, a popular language learning tool.
The email had an animated countdown clock in it, which unfortunately I didn't think to capture with a screen recorder. Nevertheless, here is what it looks like now:
Having worked on HTML emails in the past, I was impressed.
Email is the Wild West of web development. Best practices for email would make most of us cry. You can never use javascript, you have to do layouts with tables, and most of your fancy CSS just won't work.
I wanted to know how they did this countdown magic.
First, I notice that the countdown clock was an image. Duh. It had to be!
So then I followed the source of the image and saw it was a url without a file extension. I.e., there was no .png or .jpeg at the end of the url. It was just https://gen.sendtric.com/countdown/zkihae5gaj.
I opened this url and inspected the headers to see what was going on:
HTTP/1.1 200 OK
Pragma: no-cache
Content-Type: image/gif
Transfer-Encoding: Identity
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0, max-age=0
ETag: 14126387014612041038
Date: Tue, 10 Mar 2020 08:51:54 GMT
Content-Encoding: gzip
Expires: -1
Vary: Accept-Encoding
Right! It's a gif.
But... how'd they get the gif to work like a countdown?
This part is just guesswork, but I'd imagine that this endpoint programmatically sends back a non-looping gif depending on the server time.
That is, the server calculates how many seconds are left until Memrise's sale finishes, then it sends back a gif that animates a new frame every second, starting from the time until sale expires and finishing at 00:00:00:00.
Now, when I download and inspect the gif, it is only one frame, 00:00:00:00.
I wish I had time to try to recreate this... but unfortunately, I just got to work!
If you have an alternative theory about how this magical countdown clock works, I'd love to hear it in the comments 😀
Top comments (0)