Is 0kb of *HTML* in your future? ๐Ÿ”ฎ A website without JS...HTML...CSS or IMAGES!?โ‰๐Ÿ˜ฑ

Is 0kb of *HTML* in your future? ๐Ÿ”ฎ A website without JS...HTML...CSS or IMAGES!?โ‰๐Ÿ˜ฑ

ยท

3 min read

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 ๐Ÿ˜‹!!

joker saying "here, we go" from The Dark Knight

In case you missed it:

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.

FireFox network tab showing a 0KB HTML file

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!

ย