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!
Top 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!
loving your clickbait, I'm sure they attract the best possible audiences
The title might have the clickbait style but it isn't clickbait if you tell the truth and deliver on your promise surely? 😋😂
As for attracting the best audiences, you are here so I would say I most certainly do attract the best people 😉❤
you could have just gotten the cue btw but this just proves to show you know EXACTLY what you are doing.
You should perhaps check out the other items in the series, there is only one where the title is a little bit misleading and that was due to character count and I expand upon that in the first paragraph (dev.to/inhuofficial/is-0kb-of-html...).
As for knowing what I was doing I cannot tell if you are being ironic or not in writing so I gave you the benefit of the doubt.
The only clickbait titles I have are the two recent ones on listicles, and I am sure if you like irony and silliness you would love them as they are pure sarcasm!
I was ironic, it's not HTML it's PHP ... hence the clickbait.
It is just a .php extension - check the outputted HTML it is indeed just a load of HTML, it would work equally well with a
.htmlextension.It uses
<meta http-equiv="refresh" content="0;url={next frame}" />meta tag to request the next frame (which is stored on an individual URL), then after a certain amount of frames it just requests the first frame again ([...]1.php).Each frame is just HTML. If you open it on a PC you will see the URL changes rapidly. No PHP trickery I promise!
SVG SMIL it's animation without CSS or JavaScript
SVG is an image format...so that would be animation without CSS or JS - in which case I could also have just used a GIF 😋
The article was pure HTML animation!
SVG is made of XML so is html so by the transit of properties 🤔 we are all winning here
That is XHTML if we are going to try and squeeze it in (which never quite took off). I could make the document HTML 4 and then get away with it, but HTML != XML due to the fact you can declare a void element like this
<br>or<hr>- that would break XML as it isn't self-closed!SVG is also a separate spec to HTML so I don't think I could get away with it without it being clickbait!
However using SVG SMIL is going to be another part of this series of silly experiments with "clickbait" titles that turn out to not be clickbait! 😉.
On the subject of clickbait titles.
Do X in Y time
X things you wouldn't Y
That's the magic right there 🤣
I am practicing my clickbait titles - see if you like any of these (these are actual articles I am working on, just made the titles pure clickbait for you! 🤣)
<HEAD>(preloading etc.)A couple of them might be a little too far 🤣🤣
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!
I like to be rickrolled this way! 😉
btw: for developers, the words "ASCII" or "plain text" will never sound backward or retarded - as they do for the hipsters - but they will always feel like "the real thing".
As long as it brought a smile to your face then it did it’s job! 😄
It is one of those projects where you “do it badly” and then see how many clever algorithms etc a real codec uses and learn loads....added it for about 3 posts from now as I think it would be fun!
Thanks for the idea 😄
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 😜
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 🤣
Haha, with gzipping I would imagine the bandwidth usage is quite low 😜🤣🤣
How long did it take to you to make every single frame? And how did you get enough patience? Just... wow!!!
I automated it - you can split a gif easily online into frames. Then I just used canvas to turn the frame grey and apply letters depending on the lightness / darkness of a square.
The only manual part was copying the text into a page as I couldn’t think of a way to automate that quicker than just copy and pasting.
Did you apply each letter by hand? Or did you make a program to detect that...
Oh god know - the program had 8 characters to choose from that represented different darknesses for pixels. So a # is darker than a ( for example. It then just spit out a 200 by 60 string that I could copy and paste into a
<pre>tag so it was evenly spaced