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!
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!
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 @ryansolid 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!