DEV Community

loading...
Cover image for 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!?โ‰๐Ÿ˜ฑ

InHuOfficial
Specialising in accessibility and website load speed / performance. If you have a question about [accessibility] or [page-speed-insights] ask away and I will help any way I can!
ใƒป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 @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!

Discussion (44)

Collapse
inhuofficial profile image
InHuOfficial Author • Edited

p.s. if you can't access the page and or don't have FireFox, here is what the page should look like:

Big thanks to @afif for his CSS powers once again to make this example better, what takes him 20 seconds would take me 20 minutes! โค

Collapse
urielbitton profile image
Uriel Bitton • Edited

I thought you said no css...so unimpressive tsk

Collapse
inhuofficial profile image
InHuOfficial Author • Edited

Didn't have enough space in the title to say "no CSS in the network request tab" so it wasn't a false title sadly ๐Ÿ˜ฅ, I try my best to write "clickbaity" titles that turn out to be true!

Still a fun one to get your head around in Firefox as it looks like magic for a second or two!

Sorry to be the source of "much disappoint" ๐Ÿคฃ

Collapse
iamschulz profile image
I am Schulz

Aside your impressive demo - that fiddle looks hilarious on a mobile screen

Collapse
inhuofficial profile image
InHuOfficial Author • Edited

Yeah I got @afif to fiddle it as he is my go to CSS guru! But he didn't spot the mobile screen doesn't work and I thought it hilarious, so I left it as I love the idea of a 3:27 screen ratio laptop!

The main example, although not responsive, should look a lot more normal even if you make your browser mobile sized!

Thread Thread
afif profile image
Temani Afif

The mobile version does work. It was my intention to squish the laptop and make it smaller on mobile devices.

Thread Thread
inhuofficial profile image
InHuOfficial Author

My apologies then, I thought it was an unintended and funny accident!

Thread Thread
iamschulz profile image
I am Schulz

Have you tried pitching that to the fruit company? That's an iPhone I would buy.

Collapse
inhuofficial profile image
InHuOfficial Author

@afif I summon you to work your CSS magic.

I have seen what you can do with one element, technically with this technique you have two elements to work with html and body!!

See if you can do something better than my butchered job bud!

Collapse
afif profile image
Temani Afif

some responsive and better formatted text : jsfiddle.net/zae3h50y/3/ ๐Ÿ˜‰

Collapse
inhuofficial profile image
InHuOfficial Author

Thanks, used in the fiddle below, I knew summoning the CSS guru was a good idea, saved me about 20 minutes working out what I can and can't do with :before and :after placement wise!!!!

Collapse
yoursunny profile image
Junxiao Shi

The truth:

debian@bbb:~$ curl -I https://inhu.co/demos/no-byte-website/
HTTP/2 200 
content-type: text/html; charset=UTF-8
date: Fri, 07 May 2021 22:18:41 GMT
server: LiteSpeed
vary: User-Agent
link: <shh.css>;rel=stylesheet;media=all
alt-svc: quic=":443"; ma=2592000; v="43,46", h3-Q043=":443"; ma=2592000, h3-Q046=":443"; ma=2592000, h3-Q050=":443"; ma=2592000, h3-25=":443"; ma=2592000, h3-27=":443"; ma=2592000
Enter fullscreen mode Exit fullscreen mode
Collapse
inhuofficial profile image
InHuOfficial Author • Edited

"and the truth shall set you free" from the film Liar Liar

I should have called the file shhhh-dont-give-spoilers.css Instead of just shh ๐Ÿ˜œ

Collapse
ekafyi profile image
Eka • Edited

Awesome! I use Firefox Incognito to open new/unknown links (cache disabled by default) so initially didn't get what it's about ๐Ÿ˜† but glad to learn about developer.mozilla.org/en-US/docs/W... from the comments.

Collapse
andreidascalu profile image
Andrei Dascalu

I don't think you used stenography though

Collapse
inhuofficial profile image
InHuOfficial Author

Thank you, it was a typo, it is steganography - I do it every time!

Collapse
andreidascalu profile image
Andrei Dascalu

Although you have to admit that if someone would find a way to encode a ping pong game by using word shorthands on a typewriter that would blow everyone's mind simultaneously.

Thread Thread
inhuofficial profile image
InHuOfficial Author

In the famous words of Barney...โ€challenge....accepted!โ€ ๐Ÿ˜œ๐Ÿคฃ

Collapse
alexandervladimirov9090 profile image
Alexander Vladimirov

I'll just post this link:
developer.mozilla.org/en-US/docs/W...

And this looks funny when load page like that.
inhu.co/demos/no-byte-website/shh.css

Collapse
inhuofficial profile image
InHuOfficial Author

I just realised this was a "unicorn comment", 3 comments in 3 years and I got one of them on one of my silly meme posts!

I feel honoured ๐Ÿ˜‹

Collapse
alexandervladimirov9090 profile image
Alexander Vladimirov

I mostly read the article and rearly comment.

Collapse
inhuofficial profile image
InHuOfficial Author

Spoilers again! ๐Ÿ˜‹๐Ÿ˜‚

Collapse
inhuofficial profile image
InHuOfficial Author

@ryansolid I hope you don't mind the "tongue-in-cheek" use of your blog title! ๐Ÿ˜‹

Collapse
ryansolid profile image
Ryan Carniato

All good. My title wasn't serious either.

In any case nice demo as I haven't seen this used in the wild very much. For some reason I thought this was implemented in Chrome already too. Neat trick!

Collapse
inhuofficial profile image
InHuOfficial Author

Oh nobody should use this in the wild - it is kind of a recurring theme with my posts at the moment...."here is something interesting....don't ever use it!" ๐Ÿ˜‹๐Ÿคฃ

Collapse
koas profile image
Koas

Hats off to you! This series just keep getting better!

Collapse
inhuofficial profile image
InHuOfficial Author

Yeah the problem is where we go from here......๐Ÿ˜‰

Thank you very much, I am glad you are enjoying it!

Collapse
calag4n profile image
calag4n

You maybe are insane

Collapse
inhuofficial profile image
InHuOfficial Author

๐Ÿคฃ๐Ÿคฃ

Collapse
ryencode profile image
Ryan Brown

I ๐Ÿ‘€ what you did there...

Collapse
inhuofficial profile image
InHuOfficial Author

shh ๐Ÿคซ, don't tell anyone my dirty little secrets ๐Ÿคฃ๐Ÿ˜‹.

Glad you sussed it out though, took me longer than I like to admit to work it out!

Such a shame it doesn't work everywhere, I could really abuse it then!

Collapse
mafee6 profile image
MAFEE7

I am kinda scared (no js)

Collapse
zilti profile image
Daniel Ziltener

Tbf I find your "abuse" of the web way more harmless than the js framework abominations :)

Collapse
inhuofficial profile image
InHuOfficial Author

No no I won't bite. I will not get on my soap box and start preaching about frameworks being over used and abused......no I must not....arrrrggghhhh ๐Ÿคฃ

getting down from soap box crude hand drawn animation

Collapse
mafee6 profile image
Collapse
mafee6 profile image
MAFEE7

omg it works

Collapse
jonrandy profile image
Jon Randy

Took all of 1 minute to figure it out... developer.mozilla.org/en-US/docs/W...

Collapse
inhuofficial profile image
InHuOfficial Author • Edited

Spoilers Jon!

Plus some of us arenโ€™t as quick as you (points at self) ๐Ÿ˜œ

I hope it did at least make you smile even if it didnโ€™t challenge you!

Collapse
theowlsden profile image
Shaquil Maria

I'll lose sleep over this๐Ÿคฃ๐Ÿคฃ๐Ÿคฃ

Collapse
inhuofficial profile image
InHuOfficial Author

Don't worry, there is nothing there so how can it possibly hurt you? ๐Ÿคฃ๐Ÿคฃ๐Ÿ˜‹

Collapse
mafee6 profile image
MAFEE7

my nightmare comes true

Collapse
inhuofficial profile image
InHuOfficial Author

hehe, enjoyed seeing the comments you made unfold in my notifications feed! ๐Ÿ˜‹

Collapse
inhuofficial profile image
InHuOfficial Author

@pandaquests loved your CSS "one div" macbook! I hope you don't mind that I butchered it for this demonstration! ๐Ÿคฃ

Collapse
karthi1786 profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
karthi1786
Forem Open with the Forem app