DEV Community

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

Posted on

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

joker saying

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!

Top comments (44)

Collapse
 
grahamthedev profile image
GrahamTheDev

@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
 
grahamthedev profile image
GrahamTheDev

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
 
grahamthedev profile image
GrahamTheDev • 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
 
grahamthedev profile image
GrahamTheDev • 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
Daniel Schulz

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

Collapse
 
grahamthedev profile image
GrahamTheDev • 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
 
grahamthedev profile image
GrahamTheDev

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

Thread Thread
 
iamschulz profile image
Daniel Schulz

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

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
 
grahamthedev profile image
GrahamTheDev • 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
 
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
 
grahamthedev profile image
GrahamTheDev

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
 
grahamthedev profile image
GrahamTheDev

Spoilers again! ๐Ÿ˜‹๐Ÿ˜‚

Collapse
 
grahamthedev profile image
GrahamTheDev

@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
 
grahamthedev profile image
GrahamTheDev

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
 
andreidascalu profile image
Andrei Dascalu

I don't think you used stenography though

Collapse
 
grahamthedev profile image
GrahamTheDev

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
 
grahamthedev profile image
GrahamTheDev

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

Collapse
 
mafee6 profile image
Mafee7

my nightmare comes true

Collapse
 
grahamthedev profile image
GrahamTheDev

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

Collapse
 
mafee6 profile image
Mafee7

omg it works

Collapse
 
mafee6 profile image
Mafee7

:(

Some comments may only be visible to logged-in visitors. Sign in to view all comments.