DEV Community

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!?⁉😱

GrahamTheDev on May 07, 2021

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 i...
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

:(

Collapse
 
mafee6 profile image
Mafee7

I am kinda scared (no js)

Collapse
 
koas profile image
Koas

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

Collapse
 
grahamthedev profile image
GrahamTheDev

Yeah the problem is where we go from here......😉

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

Collapse
 
zilti_500 profile image
Daniel Ziltener

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

Collapse
 
grahamthedev profile image
GrahamTheDev

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
 
jonrandy profile image
Jon Randy 🎖️

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

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

Don't worry, there is nothing there so how can it possibly hurt you? 🤣🤣😋

Collapse
 
calag4n profile image
calag4n

You maybe are insane

Collapse
 
grahamthedev profile image
GrahamTheDev

🤣🤣

Collapse
 
ryencode profile image
Ryan Brown

I 👀 what you did there...

Collapse
 
grahamthedev profile image
GrahamTheDev

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

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