DEV Community

Cover image for 😲 ZERO CSS and just a single image to build a fully interactive SPA???!!?? 😱 Abusing the internet once more! [Extreme SSR!]

😲 ZERO CSS and just a single image to build a fully interactive SPA???!!?? 😱 Abusing the internet once more! [Extreme SSR!]

GrahamTheDev on May 21, 2021

I am back at it again, abusing the internet and this one should really blow you away. This time I really do think I have outdone myself. I pres...
Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Yeah but if you inspect your page there are hundreds of html elements inserted via JS, inspect this page there is still only one element! πŸ˜‹

Don't get my wrong, Gooie is cool but you did things properly and that is just cheating! 🀣

Collapse
 
cklek profile image
Conrad Klek

haha! I know, just for fun. I think you learn alot by experimenting with unconventional (incorrect) ways to code. Great read!

Thread Thread
 
grahamthedev profile image
GrahamTheDev

I am having fun exploring gooie! Fun project!

Thread Thread
 
grahamthedev profile image
GrahamTheDev

@cklek Did you delete your original comment?

Thread Thread
 
cklek profile image
Conrad Klek

Whoops I hoped it would delete the whole thread. I didn't want to divert attention from your cool project by plugging my own! You can keep exploring gooie via the link in my bio ☺️

Thread Thread
 
grahamthedev profile image
GrahamTheDev

It was fine, thanks for the consideration but I had no issue with it! ❀️

Collapse
 
hellonehha profile image
Neha Sharma • Edited

OMG!!.... I was laughing so hard...this is so awesome.

Instead of reading the whole thread I directly jumped to the demo. The first thing I did was inspect the element and then I was like okay...image... That means you must have used the clipping property (or slicing) well when I saw the whole JS I was like omg...this is mind-blowing.

RIP accessibility. Please do not give such ideas to developers :p

Collapse
 
grahamthedev profile image
GrahamTheDev

Accessa-what-now? It is the down side of all these silly experiments, there is no way to make them enjoyable for everyone.

I have bookmarked your accessibility interview questions for when I have chance to have a look at them and do my normal long comment 😁

Collapse
 
hellonehha profile image
Neha Sharma

haha...indeed...fun-friday-project.

Yeah, I am waiting for your comment and then I will share it in my network.

Thread Thread
 
grahamthedev profile image
GrahamTheDev

It might be tomorrow just so you know, don't hang on for me got a busy evening on!

Collapse
 
adam_cyclones profile image
Adam Crockett πŸŒ€

Such a dangerous develpoer idea, πŸ”₯burn it with fire πŸ˜‚

Collapse
 
grahamthedev profile image
GrahamTheDev

You don’t think fire is a little bit weak against such a threat? We have nukes, if they aren’t for this what are they for? πŸ˜„

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

I know I should stop - but breaking the internet is just too much fun! 🀣🀣

Let me know if you are enjoying the series (or if this is the first time you have seen an article in this series go check out the others!)!

Oh and if anyone knows a way I can make the keyboard pop up on a mobile without focusing an input (as that would then be two DOM elements πŸ˜‹) I would love to hear it so I can make it work on a mobile too!

Collapse
 
afif profile image
Temani Afif

So I can simply DDOS you by moving my mouse cursor 😜

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Haha, No that’s why it’s laggy it only requests an image every 250ms.

You could probably trigger DDOS protection by hitting that end point hard with a custom script but you would probably need several computers at once as the server is pretty monstrous and the DDOS settings are quite forgiving (I turned them right down when I did that rick roll video with ASCII text as I locked myself out when I was testing that 🀣🀣)

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Oh and I just realised I didn’t put a warning on the article that there was no CSS again, are you OK? 😜

Collapse
 
afif profile image
Temani Afif

I got used now, I take a deep breath of my CSS work before entering. 😝

Thread Thread
 
grahamthedev profile image
GrahamTheDev • Edited

🀣🀣 I do the same with your articles, I always have to remind myself that using two <div>s is sometimes OK! πŸ˜‹

Collapse
 
adam_cyclones profile image
Adam Crockett πŸŒ€

DEVusedToBeGoodNowItSucks - 21:45 21/05/2021

Uses DEV

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

I missed that comment, it is so eloquently written it is obvious that they are functioning at a higher state than us mere mortals 😜🀣🀣

The fact they had to comment that this article, part of a series on stupid experiments on the web, was a waste of time just says it all 🀣

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
grahamthedev profile image
GrahamTheDev

I see we have found the only person who follows instructions πŸ˜œπŸ˜‚.

I hope you enjoyed the silliness!

Collapse
 
joakimbeng profile image
Joakim Carlstein

Sweet! I actually thought about this once as well, as a way for supporting really old browsers πŸ˜„ It’s not more than fair that you get a slow experience when using an old browser like IE

Collapse
 
grahamthedev profile image
GrahamTheDev

You see you hit a nerve there as I advocate for supporting IE due to the number of people who use a screen reader who still rely on it. But at the same time I wish I could kill IE with πŸ”₯! 😜🀣

Collapse
 
natalia_asteria profile image
Natalia Asteria

This is illegal

Collapse
 
grahamthedev profile image
GrahamTheDev

Technically you are correct as it doesn’t pass WCAG 😜 I know that wasn’t what you meant but I thought it was funny!

Collapse
 
syaufy profile image
SYAUQIZAIDAN KHAIRAN KHALAF

Whaha you always came up with crazy idea 🀣

Collapse
 
grahamthedev profile image
GrahamTheDev

Well that is what Fridays are for 😜