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 @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)
@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
htmlandbody!!See if you can do something better than my butchered job bud!
some responsive and better formatted text : jsfiddle.net/zae3h50y/3/ 😉
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
:beforeand:afterplacement wise!!!!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! ❤
I thought you said no css...so unimpressive tsk
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" 🤣
Aside your impressive demo - that fiddle looks hilarious on a mobile screen
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!
The mobile version does work. It was my intention to squish the laptop and make it smaller on mobile devices.
My apologies then, I thought it was an unintended and funny accident!
Have you tried pitching that to the fruit company? That's an iPhone I would buy.
The truth:
I should have called the file
shhhh-dont-give-spoilers.cssInstead of justshh😜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.
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
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 😋
I mostly read the article and rearly comment.
Spoilers again! 😋😂
@ryansolid I hope you don't mind the "tongue-in-cheek" use of your blog title! 😋
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!
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!" 😋🤣
I don't think you used stenography though
Thank you, it was a typo, it is steganography - I do it every time!
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.
In the famous words of Barney...”challenge....accepted!” 😜🤣
my nightmare comes true
hehe, enjoyed seeing the comments you made unfold in my notifications feed! 😋
omg it works
:(
I am kinda scared (no js)
Hats off to you! This series just keep getting better!
Yeah the problem is where we go from here......😉
Thank you very much, I am glad you are enjoying it!
Tbf I find your "abuse" of the web way more harmless than the js framework abominations :)
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 🤣
Took all of 1 minute to figure it out... developer.mozilla.org/en-US/docs/W...
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!
I'll lose sleep over this🤣🤣🤣
Don't worry, there is nothing there so how can it possibly hurt you? 🤣🤣😋
Some comments may only be visible to logged-in visitors. Sign in to view all comments.