Is 0kb of *HTML* in your future? 🔮 A website without JS...HTML...CSS or IMAGES!?⁉😱
If you are new here then you might not have seen that I like to abuse the internet...and for those of you who know my shenanigans...you know what is coming 😋!!
In case you missed it:
first I built a countdown timer without any JS, CSS or HTML! - pfff child's play I hear you say!
Fine...I built a password generator in pure CSS - yawn!
Really, not even a smile? well what about when I managed to make animations without any CSS, JS or Images....slightly interesting.
Ok, surely you like that I managed to squeeze a game of pong into a 16px by 16px image using steganography?...mildly intriguing you say!
Well you are one tough cookie! So how about this one....
A website that has 1 network request and 0 bytes of HTML sent with that network request.
Now of course this isn't possible (I mean, of course it isn't possible, a website with a single network request and 0 bytes of HTML in that request, no CSS requests, no JS requests, no image requests, just a single file with no HTML...that just isn't going to work right....RIGHT???!??!!?!?!)
Well if you use FireFox then the answer is...it is kind of possible!
Open this page in FireFox - it looks like a website (albeit a super basic one).
Sadly it only works in FireFox so you might have to bookmark the article and come back to it when you can get to a laptop / PC!
It isn't that impressive until you open developer tools and head over to the network Tab.
And this is my second trick, I am going to read your mind...ready?
"Ok so one request for the page, wait there is no HTML like he said, how on earth, ahhh he used the <body> element, I get it he must have inlined some styles, but wait a minute where are the styles actually coming from, there is no CSS file showing in developer tools, is it a service worker (no that would show up) is it from a cookie (no but what a great idea for my next article), how the.....".
Cue stunned silence, some head scratching and then a load of fiddling until you realise the trick (p.s. it has nothing to do with the favicon, that is just configured site wide!)!
So there it is, a website with 0kb of HTML, JS, CSS or IMAGES in the network panel. Talk about performant!
I will leave it to you to explore and work out what is going on but I love the fact that I built a website without sending a single byte of HTML!
Once you have worked out how I did it, have a go yourself and see how impressive you can make a website with a single network request and 0kb of HTML!
A few thank yous!
The CSS to create the laptop is a butchered version of a codepen by @pandaquests, be sure to check out their pens and give them some love as they create some great stuff!
Also a big shout out to the origin of this (or at least the earliest article I could find on it) over at impressivewebs.com , they also explain what is happening if you didn't manage to work it out yourself!
Yes I "stole" the title from this article by Ryan Solid because I thought it was funny, go give that article some love (or "grief" depending on your view point, it was a controversial one in the comments for sure!)
Oh and a little thank you to everyone who has read my silly (and not silly) articles so far, 50k page views might not be much but it is a nice start for someone who has only been writing for 3 months so, once again, thanks to you all!