DEV Community

Cover image for I built a countdown timer without using any JS...or CSS...or HTML 😲?? [tutorial on dynamic GIFs for email marketing]

I built a countdown timer without using any JS...or CSS...or HTML 😲?? [tutorial on dynamic GIFs for email marketing]

GrahamTheDev on April 10, 2021

The GIF below is counting down to the 3rd January 2022 at 09:00. (GMT) If the GIF doesn't load you can view an old version of the GIF here....
Collapse
 
grahamthedev profile image
GrahamTheDev •

Oh and the very eagle eyed among you might have noticed the font I pass in is called inhu.ttf - if anyone is interested in how I made my own font then let me know and I will write an article on that.

And if animated GIFs are your thing maybe check out this article I wrote on hacking together an animated profile picture for dev.to in less than 30 minutes...things don't always have to be done "the right way" 🤣:

Collapse
 
yashj9 profile image
yashj9 •

Yes! font also please

Collapse
 
grahamthedev profile image
GrahamTheDev •

No problem, it will be a couple of weeks but I will drop you a DM when I write it! ❤

Collapse
 
baboon12 profile image
Bhavya Sura •

Too much effort and code for countdown timer 😢😢
But Appreciate your work🔥❤️

Collapse
 
grahamthedev profile image
GrahamTheDev •

I agree to an extent but as I said in the section on practical applications it is the only way you could do a countdown timer in emails.

For websites the effort is the least of your worries as the countdown timer weighs in at 4mb for each 1 minute countdown!

Plus the idea is you learn how to write text dynamically to an image - I might put something at the start to explain this to people to avoid confusion! ❤️

Collapse
 
grahamthedev profile image
GrahamTheDev • • Edited

Added a disclaimer to the beginning and even changed the title slightly to explain the use case, thanks for pointing out that as I don't want people adding this to their website!! 🤣🤣

Collapse
 
afif profile image
Temani Afif •

Where is the CSS? where is the CSS ??! I can't breathe ... 😵

Collapse
 
grahamthedev profile image
GrahamTheDev •

Oh no, I am so sorry, I completely forgot to put a health warning on it for CSS addicts / ninjas! 😜

Collapse
 
nikhilmwarrier profile image
nikhilmwarrier •

You nearly killed me with underCSSization!

Thread Thread
 
grahamthedev profile image
GrahamTheDev •

🤣🤣 adding “underCSSisation” to my vocabulary (I’m UK so we spell things “properly” over here 😜 hehe.) ❤️

Collapse
 
posandu profile image
Posandu •

WOW this is insane !! Great work !

Collapse
 
micahlt profile image
Micah Lindley •

Interesting! I'd love to see an implementation of something like this in Node or Deno 😊

Collapse
 
calag4n profile image
calag4n •

You are barely insane.

Collapse
 
grahamthedev profile image
GrahamTheDev •

Barely insane or barely sane? 😋

I think to be fair at this point you can remove the "barely" part and just call me "completely"...insane. 🤣