![Cover image for ๐ Snake - rendered with 576 browser windows [warning - this WILL hurt your eyes...and PC!]](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fi2euxvroeov67ei6299m.png)
I have been quiet lately I know - but don't worry I haven't forgotten you all and how much you like seeing really stupid ideas on the web!
This one came to me after I was chatting with a colleague saying "you know you can control one browser window from another right?"
Now that was for a sensible idea around checking broken links and then confirming they work one after the other (without the issues an iFrame can introduce - there is a demo of that later in the article)...but then I realised this was one of the few parts of the web I have not yet abused!
I was trying to work out how we could build a little game with a controls window and a gameplay window and then I realised something...why limit myself to just two windows?
That has lead to this horrendous idea!
Snake - rendered with browser windows!
You may not know this, but as long as you have some user interaction and a user allow popups you have a LOT of control over browser windows.
You can define their size (with certain constraints on minimum sizes), position etc.
And you can name a window so you can always reference it in your code so you can move multiple windows around at the positions you want!
With these two things we get a lot of opportunities for chaos!
The Chaos!
Controls are arrow keys.
You must accept popups (in the URL bar) once you press "Start Game" and select "always allow popups from...".
Only tested on Chrome on Windows - good luck in other browsers / OS combinations!
Do not click anything! Only use the arrow keys.
When the game is over make sure to press "clear all windows" in the top score window, otherwise you may be sat there for a long time closing random windows! haha.
Share a screenshot of your screen and your high score when you have done in the comments!
Just in case it doesnt work for you or you are on mobile
Here is a screenshot just in case you can't try it out right now.
Ok, that was silly, lets get serious
While that was very silly, there are some very useful things you can do with this.
As I said in the intro we have a use case at work, hopefully it can serve as some inspiration for you.
We are checking for broken links in 3rd party websites.
Now the problem is some of the content is in SPAs (so we get 200 http response headers even for broken pages), some of it is behind paywalls (so we can check the page exists but can't guarantee the content behind the paywall still exists).
So we want to have a queue of items to check through, and clicking on an item in that queue opens the target page so we can check it, log in etc.
We could try and do this in a single browser window, but that would require an iframe. And, in case you didn't know, iframes can be disabled by some websites (they can block you from showing their site in an iframe on yours).
So for something more robust, we can turn to windows.
We can launch two windows, one on the left of the screen, smaller, with a list of pages to check. One on the right that we can control based on what we click in the first screen.
Click on an item on the left screen, update the URL on the right screen - no iframe magic!
And what is even better is we can resize the windows to fill the screen so they almost act like one application!
More sensible Demo
Click the items on the left window that opens, they will change the URL in the right panel.
Mark all the working and not working pages appropriately in the left panel!
What will you build?
What new ideas does this give you?
A window per tool in an editor?
Multi-screen applications (as you can also detect how many screens someone has and position things on second and third screens).
Let me know a) what score you got in snake (assuming it works) and b) what ideas this gives you!
Top comments (35)
T r u s t i t.
I saw a video of someone did something similar, but they use the WHOLE computer. The idea is the snake is made of apps on your computer. He made it if it eats System32, the computer crashes lol.
I love that! Even more chaotic! haha
Hahahaha this is crazy ๐คฉ๐คฃ
The broken-link checker case is the interesting one, and there's a failure mode lurking in it that snake doesn't expose: once you
window.opena cross-origin target on the right, you keep theWindowProxyhandle but you lose almost everything through it. You can still call.close()and reassign.location.href, but reading.location.pathname,.document, or the final resolved URL after a redirect throws on the cross-origin boundary. So for the paywall/SPA case you flagged โ where a 200 lies to you โ the opener can't actually confirm what landed. You're back to a human eyeballing it, which is fine, just worth being explicit that the window gives you a viewport, not a probe.The other sharp edge is popup grouping heuristics. Chrome treats a burst of
window.opencalls differently from one triggered directly in a user-gesture handler โ 576 windows works because you've got the always-allow grant, but the "two windows that feel like one app" demo is fragile the moment the open isn't synchronously inside the click handler. Await anything beforewindow.openand the gesture is spent, so the second window silently doesn't open. Worth opening both up front and just reassigning.locationafter, rather than opening on demand.I don't know anyone less afraid of thinking outside the box than you Graham. Try getting an AI to come up with that...
That is the scary thing now - AI lets me build the scary scary thoughts far more easily :-P
This is so chaotic in the best possible way ๐ Turning 576 browser windows into Snake is such a ridiculous idea, but I love that it somehow leads to a genuinely useful workflow for checking broken links.
The whole series is me doing really stupid things to demonstrate / learn a useful technique!
Glad you enjoyed the chaos! hahaha
This reminds me of theannoyingsite.com/ ๐
576 windows just to play Snake โ this is the kind of beautiful, completely unnecessary engineering I live for. My poor GPU fan is already spinning up just reading the title. Did the snake ever get self-conscious about being watched from 576 different angles at once? Also, genuine question: did your window manager survive, or did this take a few casualties along the way?๐๐
Surprisingly it all worked fine on my PC (but it is pretty beefy) - started to flicker a bit but still playable!
Next, have snake, but every time it eats an apple, it spawns a new window somewhere and segments the play area to include it, but you dont know which part till you see it. That way it starts as a memory game and very soon becomes near impossible to keep up with.
Hahaha, would love to see it!
I also thought that you could play a detective game where there is one window and you track where it is moved on screen and items appear, like a magic magnifying glass type thing!
Oooh that can work, if you use window coordinates, you can have the browser act as 'x-ray vision' that does a negative of the background behind it and you need to find a hidden object hiding somewhere, eg. behind an icon.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.