DEV Community

loading...
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!]

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!
ใƒปUpdated on ใƒป5 min read

I am back at it again, abusing the internet and this one should really blow you away.

"hold onto your butts" from Jurassic Park 1

This time I really do think I have outdone myself.

I present to you:


A 3 page SPA with an interactive poll and a contact form, with no CSS and one DOM element - just a single image! (go on, inspect the page!)

I call it "Extreme Server Side Rendering (SSR)" ๐Ÿคฃ

PLEASE NOTE: - if using a mobile you cannot use the contact form, I couldn't find a way of opening the keyboard without an <input> I am afraid! Try it on PC instead!

FINAL THING: Due to the round-trip time to the server the page feels "laggy", if you are on a 3G connection it might be unusable so wait until you are on a better connection before trying it!

> > > > Try the single image SPA here! (best viewed on PC) < < < <


What can I do in the SPA?

There are some fun bits for you to try:

It kind of works with a keyboard

Well, you can Tab to elements to highlight them. You can even activate them with "Enter".

Just don't expect a smooth experience (and I have only tested it in Chrome so it may not work in other browsers!)

The home page is responsive

Yup, if you try it on your mobile the home page actually has two different versions, a mobile one and a desktop one.

On mobile you can even open and close the menu!

I sadly didn't have time to make the other two pages responsive (this silly project took ages already!).

The poll actually works!

Cast your vote on the SPA as to what you think of my silly experiments!

The current results are as follows:


This has to be the stupidest thing I have ever seen - I love it!
63%

Quite silly, being rick rolled by ASCII text was sillier though!
21%

This is silly? I thought this was what server side rendering was!
15%


The contact form "works"

It is one of if not the worst experiences you will ever have on the web, but it works!

In fact you can see the messages people have posted via the SPA in the final section!

What is actually going on here?

Oh loads!

Essentially every interaction with the page is being tracked with JavaScript and cookies.

I am then sending that to a script on my server that renders an image based on mouse position, current focused item, keys pressed and more. I then send the constructed image back so you can view it!

Needless to say I now have a much greater appreciation for browser developers as there are so many little things that I just take for granted!

To give you an idea of how difficult this is, from the X and Y coordinates of the mouse I calculate if an item is hovered. To do that I need the X, Y, width and Height of each item on the page. I also need to know what state to turn that button to.

Now if you click, I have to check if the click is within the bounds of a button and what action should be performed!

Multiply that by 3 pages worth of buttons and inputs and a few other features and there is an awful lot I had to plumb together!

Final words before the comments

As with all of my silly experiments, there is no real point to this, just a bit of fun for you on a Friday!

Have a fantastic weekend!

User comments submitted via the contact page (may be disabled if people cannot behave ๐Ÿ˜‹)

Here are a few comments that people have added via the single image SPA!


InHuOfficial - 17:11 21/05/2021
I look forward to seeing the messages you all post! Don't forget that you have to wait one minute before refreshing this page to see your comment!


asdfsadf - 17:40 21/05/2021
asdfasdfasdfasdfsaf


testt - 17:41 21/05/2021
est


55 - 18:30 21/05/2021
55


dakujem - 18:38 21/05/2021
serus


gghh - 19:08 21/05/2021


yyyyyyyy - 19:37 21/05/2021
yyyyyyyy


this is a test - 20:19 21/05/2021
wow wtf


gwdsdg - 20:25 21/05/2021
gggewgg sd mdgkgj sdkjgsodj g12 jr128 jdg sdg sdg jo sdjgojidsgdsg sodj g


gwdsdg - 20:25 21/05/2021
gggewgg sd mdgkgj sdkjgsodj g12 jr128 jdg sdg sdg jo sdjgojidsgdsg sodj g


sdg - 20:25 21/05/2021
dsgsdgsdgdgsdg


fhfjfjgjj - 21:28 21/05/2021
fgjfgjfgjfgjgj


DEVusedToBeGoodNowItSucks - 21:45 21/05/2021
This sucks What a waste of time DEV to has gone to shit in the last year


hi there - 22:46 21/05/2021
this is some text


fds - 00:56 22/05/2021
sdfhg dgdrfg dfg


Losh531 - 03:23 22/05/2021
um hello


hehe - 03:25 22/05/2021
g


kkklmmm - 04:07 22/05/2021
nnnnnn


F5 - 09:55 22/05/2021
lol this is wired as fukc but idea is fkced as well its not even fast s and no accesabiltity


Arkentias - 14:47 22/05/2021
Good job !


bingus - 16:43 22/05/2021
haha yes


dqsqsqds - 17:05 22/05/2021
qsd


dillir07 - 17:25 22/05/2021
Wow!!!


JulCzar - 18:35 22/05/2021
let tringSomthingNew eq true semicolumn while (tryingSomthingNew) learn() semicolumn


JulCzar - 18:35 22/05/2021
let tringSomthingNew eq true semicolumn while (tryingSomthingNew) learn() semicolumn


Nicolas - 21:22 22/05/2021
Test


3321321321 - 06:54 23/05/2021
321321321321321


xczxcxcvxvxvxvxcv - 07:34 23/05/2021
xcvxcvxcvxcvxcv


bcrypt - 01:51 24/05/2021
This is a work of art


**** - 04:09 24/05/2021
s


test - 10:51 24/05/2021
lolw


ffghfghfghfg - 11:13 24/05/2021
hfgh


gggggggggggggggggg - 11:48 24/05/2021
gggggggggggggggggggggggg


daadadad - 13:59 25/05/2021
asdasdasdasdasd


# Foobar - 14:38 25/05/2021
This is pretty nifty I know it says letters numbers and spacesbut what about emojis although I guess those wont work if you cant use a keyboard here


jumanji - 18:32 25/05/2021
Boop Bap!


sidchaudhary04 - 21:04 25/05/2021
Hi This is witchcraft wow


sidchaudhary04 - 21:04 25/05/2021
Hi This is witchcraft wow


sidchaudhary04 - 21:04 25/05/2021
Hi This is witchcraft wow


crycx - 07:24 26/05/2021
Love it!


piyush - 17:03 26/05/2021
Hello World


piyush - 17:03 26/05/2021
Hello World


**** - 08:09 27/05/2021
hfhfghgf


**** - 15:46 27/05/2021


**** - 16:31 27/05/2021
This works maybe


test one two three - 01:28 28/05/2021
i like chicken i like liver meow mix meow mix plz deliver


sdsdsdd232322 - 13:53 28/05/2021
ddddddd


collegewap - 15:15 28/05/2021
Hello


pelayo - 20:20 01/06/2021
That was awesome


fsdkfdskjfksdjfaksda - 10:28 11/06/2021


burger and fries!!!! - 19:23 17/09/2021
trololololo hehheheheHOhohoho i am the silly man!!!!


For the Algo!

If you enjoyed this article, give it a โค๐Ÿฆ„ and don't forget:


Leave a comment for the algorithm! (even if it is just to say how silly I am ๐Ÿ˜‹!)


Discussion (30)

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
inhuofficial profile image
InHuOfficial Author

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
inhuofficial profile image
InHuOfficial Author

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
inhuofficial profile image
InHuOfficial Author

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
Sloan, the sloth mascot
Comment deleted
Collapse
inhuofficial profile image
InHuOfficial Author • 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
inhuofficial profile image
InHuOfficial Author

I am having fun exploring gooie! Fun project!

Thread Thread
inhuofficial profile image
InHuOfficial Author

@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
inhuofficial profile image
InHuOfficial Author

It was fine, thanks for the consideration but I had no issue with it! โค๏ธ

Collapse
inhuofficial profile image
InHuOfficial Author • 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
inhuofficial profile image
InHuOfficial Author • 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
inhuofficial profile image
InHuOfficial Author • 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
inhuofficial profile image
InHuOfficial Author • 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
inhuofficial profile image
InHuOfficial Author • 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
jmau111 profile image
J.

You're silly ๐Ÿ˜

Collapse
inhuofficial profile image
InHuOfficial Author

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

I hope you enjoyed the silliness!

Collapse
jmau111 profile image
J.

๐Ÿ˜‚๐Ÿ˜‚๐Ÿ˜‚, nice post!

Collapse
nefomemes profile image
Nefomemes

This is illegal

Collapse
inhuofficial profile image
InHuOfficial Author

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
inhuofficial profile image
InHuOfficial Author

Well that is what Fridays are for ๐Ÿ˜œ

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
inhuofficial profile image
InHuOfficial Author

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 ๐Ÿ”ฅ! ๐Ÿ˜œ๐Ÿคฃ