😲 ZERO CSS and just a single image to build a fully interactive SPA???!!?? 😱 Abusing the internet once more! [Extreme SSR!]
Tags: javascript, webdev, showdev, html
Published: 2021-05-21 16:28:02



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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ceu1nrfg1hmf5hr2x1zf.gif)

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)](https://inhu.co/demos/single-image-spa/) < < < <

---

## 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!**
62%

**Quite silly, [being rick rolled by ASCII text](https://dev.to/inhuofficial/animations-without-js-or-css-or-images-pure-html-animation-45di) was sillier though!**
20%

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

---       
        
        
### 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!

<a name=comments></a>
## 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!!!!

---

**Ahmed Magdy** - 14:35 31/12/2021
Hey bud how is it

---

**This is a test** - 11:52 14/01/2022
This website is too damn slow

---

**** - 08:57 22/02/2022


---

**** - 12:37 22/02/2022


---

**** - 17:49 22/02/2022


---

**** - 17:49 22/02/2022
Your Message Has Been Sent! Go back to the article after 1 minute and refresh the page to see your comment within the article!

---

**** - 17:49 22/02/2022
Your Message Has Been Sent! Go back to the article after 1 minute and refresh the page to see your comment within the article!

---

**125** - 19:45 22/02/2022
22515

---

**hmmm** - 03:25 23/02/2022
oh my god you implemented navigating the inputs with tab thats ridiculous I love it

---

**** - 03:35 23/02/2022


---

**** - 03:35 23/02/2022
Your Message Has Been Sent! Go back to the article after 1 minute and refresh the page to see your comment within the article!

---

**** - 07:24 23/02/2022


---

**inhu** - 08:13 23/02/2022
Hey testing

---

**qwe** - 13:01 23/02/2022
qweqweqw

---

**u** - 13:21 23/02/2022
u

---

**** - 16:27 23/02/2022


---

**!!!!@@S** - 17:16 23/02/2022
!!!!SQ@S@SW@@S@W@ @

---

**** - 20:23 23/02/2022


---

**** - 05:48 24/02/2022


---

**** - 08:31 25/02/2022


---

**** - 08:31 25/02/2022
Your Message Has Been Sent! Go back to the article after 1 minute and refresh the page to see your comment within the article!

---

**** - 11:30 25/02/2022


---

**** - 23:24 25/02/2022


---

**nmfdhdfgh** - 14:20 28/02/2022
dgfddfff

---

**** - 22:06 28/02/2022


---

**** - 13:27 01/03/2022


---

**sex** - 12:29 02/03/2022
sex sex sex sex sex sxe

---

**sex** - 12:29 02/03/2022
sex sex sex sex sex sxe

---

**lkjll** - 12:48 03/03/2022
kjljljlmkjmlj

---

**** - 12:48 03/03/2022
Your Message Has Been Sent! Go back to the article after 1 minute and refresh the page to see your comment within the article!

---

**** - 21:30 03/03/2022


---

**wow** - 03:43 04/03/2022
This is incredible

---

**kijiihu** - 10:12 04/03/2022
uyigyg

---

**CapitaineToinon** - 14:11 17/03/2022
Anime is trash and so am I

---

**the picific ocean** - 23:21 04/06/2022
locean picifique

---

**** - 23:22 04/06/2022
Your Message Has Been Sent! Go back to the article after 1 minute and refresh the page to see your comment within the article!

---

**** - 23:22 04/06/2022
Your Message Has Been Sent! Go back to the article after 1 minute and refresh the page to see your comment within the article!

---

**gdxg** - 11:09 27/06/2022
fff

---

**Vercte** - 00:50 05/10/2022
hi i found this after a while it is neat and very not laggy

---

**** - 21:47 14/03/2023


---

**** - 21:47 14/03/2023
Your Message Has Been Sent! Go back to the article after 1 minute and refresh the page to see your comment within the article!

---

**** - 04:01 17/03/2023


---

**GrahamTheDev** - 22:26 26/04/2023
Still works

---

**Hello** - 22:34 26/04/2023
World!



---        
        
        
## 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 😋!)

---