I recently created a countdown timer that used no JS, CSS or HTML.
Then I went one better and built a password generator in pure CSS (no JS!)
But now I have gone even more insane!
I present to you an animation that doesn't use any images....
An animation that doesn't use any CSS...
An animation that doesn't use any JavaScript....
It is all done with pure HTML!
Warning: If you experience epilepsy, motion sensitivity (vestibular disorders) or are using a screen reader, you probably shouldn't click the link....yet again this is a silly experiment that should never be used in the real world and unfortunately is not accessible!)
Click here to experience it in all of it's glory! (sorry I can't make it work on dev.to!)
Spoilers lie below so make sure you click the link and see it in action before scrolling down!
.
.
.
.
.
.
.
Spoilers in
.
.
.
.
.
.
3
.
.
.
.
.
.
2
.
.
.
.
.
.
1
.
.
.
.
.
.
Spoilers!
Yes I did just Rick Roll you with ASCII text!
I title the piece "Rick ASCII-ly" (groan) 🤣
So what is going on?
There are 44 pages each with a different "frame" of our ASCII video.
Each frame is then set to automatically load the next page using <meta http-equiv="refresh" content="0; URL = {next page URL}">
The last page then points to the first page to create an infinite loop!
1.php -> 2.php -> [...] -> 44.php -> 1.php and the loop continues.
By setting the delay to 0 on the meta refresh, and with a fast enough connection (or when all the images are cached locally), it actually performs reasonably well (in fact it is a little bit too quick!)....it is just a shame I can't play audio as well in pure HTML!
How did you create the frames?
I used an online tool (Edit: sadly it no longer exists since writing this article, but I am sure there are others) to convert a GIF to each frame of ASCII art.
Then I just copied the ASCII text into a <pre> element for each of the pages and set the redirect to the next frame programmatically.
Note that although the file extension is .php this would still work with .html files. There is no server side magic going on here, I just had the files as PHP during testing so I could run some checks and never changed it.
FireFox
If you viewed it in Chrome originally you should also view it in FireFox, they seem to try and interpret the symbols with syntax highlighting (as they are displayed within a <pre> tag) so you get some (strange) colour for free!
Compatibility
This works all the way back to Netscape Navigator 1.1 - it is the most compatible animation format in the world! - I wonder if "caniuse" will add it to their database? 😋🤣
Why?
Does it have any practical uses? no.
Did it get me locked out of my server as it triggered Mod Sec with too many requests? Absolutely!
Is it a bit of fun on a Friday? Yes
So happy weekend people, you got rick rolled with ASCII text so I win the internet for today 🤣!
Leave a comment if you hate me for this!
Oh and don't be afraid of sharing it on social media - I want to see if my server can cope with thousands of requests a second 😁 - a free stress test woohoo!
Oldest comments (42)
I don't know why I am so proud of myself for using a 15 year old meme....I think it is the sheer effort converting the video to ASCII text that did it and the hour remembering how to get past Mod Sec when I locked myself out of my server that did it.
@afif I am so sorry to do the no CSS thing to you again bud!
Haha, with gzipping I would imagine the bandwidth usage is quite low 😜🤣🤣
Hi Graham, I clicked on your link before reading the spoiler, saw the artwork and started to understand ... and had to laugh out loud! Nice surprise! no wonder it does not work on dev.to though. Have a nice weekend!
Haha thanks Ingo, I hope you have a great weekend too!
After 10 years of research we finally found the ancestor of Youtube. You should publish this as a scientific paper 😜
Haha! Brilliant, made me chuckle! Have a great weekend!
Your posts lately have been having me like...
(jk I love you)
That picture is awesome!
Glad my posts are inspiring strong feelings...they always say there is a fine line between love and hate 🤣🤣🤣🤣 lets hope I stay on the right side of that line 😜
Getting rick-rolled by ASCII text... I'm down for it!😂 Let the crazy continue! Happy weekend.
I hope you have a great weekend too! 😄
Hehe, hopefully the beautiful ASCII art makes up for the disappointment of getting Rick rolled 😜
Wow! it's surprising, funny, and extremely good. I didn't really understand it at first, then I saw how it worked and I started to laugh internally hehe ... obviously it won't run in dev.to XD
If it made you smile then job done! It’s not immediately obvious as it is abusing the hell out of my server so nobody would normally do this to themselves 🤣🤣🤣
I couldn't check it last night - it is 2.5kb per frame when gzipped for a 200 by 60 "resolution" image.
So it looks like you are right, I won't be able to roll this out as the future of video bandwidth saving ideas!
However you have given me an idea for a fun experiment for trying to write an "ASCII codec"....but that might be beyond my skills 🤣
Sure to be the next standard for web video! For some reason it reminds me of another 80s "icon" Samamtha Fox in the Commodore 64 game Samantha Fox Strip Poker. At least yours has motion.
Well I can understand how you could associate the two - Rick Astley is just that sexy that he is bound to remind you of Samantha Fox 🤣🤣🤣🤣
And I totally agree - if all video was like this on the web I am sure the world would be a better place 😋