Two browser windows (acting as socket clients) communicate their:<p>- Screen dimensions - (screen.width, screen.height)<p>- Window dimensions - (window.innerWidth, window.innerHeight)<p>- Window X/Y position - (window.screenX, window.screenY)<p>...or whichever calculation works best for you.<p>The original work by Bjorn Staal <a href="https://twitter.com/_nonfigurativ_/status/172732259457002734" rel="nofollow noreferrer">https://twitter.com/_nonfigurativ_/status/172732259457002734</a> used localStorage, but I found sockets more fun, because if tweaked a bit, this can be shared with friends.<p>Here's a demo of how it works and the codebase: <a href="https://github.com/Momciloo/fun-with-sockets/">https://github.com/Momciloo/fun-with-sockets/</a>
That's a great demo! I'd be curious to see how this would work with multiple monitors.<p>Also, thank you for voluntarily acknowledging that you were directly inspired by somebody else and giving them credit - the software industry could use more people like you.
This, or something similar, would be nice for managing layers in a paint program such as Krita, Inkscape, or Gimp. Could be implemented simply as tabbed panes within the encompassing application window, and whatever tab is selected is the layer that is active for the editing actions.
I'm old enough to remember a bunch of demos using window position/dimensions from back in the day. I remember one with a physics simulation. I can't remember if it was liquid or just a bunch of solids, but you could drop things from one window to the other.<p>IIRC you don't even need the sockets. One can simply use message channels between the windows. If a window opens child window, iirc it has special access over it (I say special, because usually different tabs/windows are isolated from one another) which might make a local-only version easy to implement too.
If you like this, you might also enjoy WindowKill, a video game similar to Asteroids that cleverly uses windows that can overlap and interact with each other.<p>You need to shoot at the window boundaries, too, or the window shrinks. Additional windows appear later in the game with boss enemies.<p>Gameplay video: <a href="https://youtu.be/7iP68FZWVxM" rel="nofollow noreferrer">https://youtu.be/7iP68FZWVxM</a>
> <i>The original work by Bjorn Staal <a href="https://twitter.com/_nonfigurativ_/status/172732259457002734" rel="nofollow noreferrer">https://twitter.com/_nonfigurativ_/status/172732259457002734</a> used localStorage, but I found sockets more fun, because if tweaked a bit, this can be shared with friends.</i><p>Anyone have a link to what this was? The tweet is gone.
Reminds me of a cool demo of this for playing pong with browser windows <a href="http://stewd.io/pong/" rel="nofollow noreferrer">http://stewd.io/pong/</a>
That's a fun use of LocalStorage.<p>I used the same LocalStorage sharing technique to update the target window when the setting had been changed on a separate browser window. Just listen for the storage.onChanged event for the update.
This reminds me of a project I did in school, a multi-user web browser. You could both control the same window's size, scroll position, and other state on each other's screens. The intended usage was having 2+ windows side by side.
The available API's on the web are very questionable. Feross has a web security lecture series on youtube where he showed off the following abomination. Enter at own risk.<p><a href="https://theannoyingsite.com/" rel="nofollow noreferrer">https://theannoyingsite.com/</a>
This is cool. It reminds me of a research team I worked in a few years back that had built something like this for mobile devices. It used a camera overhead to provide info about device positions, allowing all the devices to act as a single screen on a surface [0].<p>[0] <a href="http://www.huddlelamp.org/#tech-video" rel="nofollow noreferrer">http://www.huddlelamp.org/#tech-video</a>
Here's something similar I made yesterday. Just view source of the controlling page and the pop-up pages for how it works (single page with inline vanilla JavaScript and no npm install nonsense). Just uses postMessage(). <a href="https://cms-compsci.deno.dev/mrgordon/window/" rel="nofollow noreferrer">https://cms-compsci.deno.dev/mrgordon/window/</a>
The devs behind tldraw also played with this to create something cool - <a href="https://twitter.com/steveruizok/status/1727625036159234555" rel="nofollow noreferrer">https://twitter.com/steveruizok/status/1727625036159234555</a>
This and the original reminded me of this really old Chrome Experiments demo, and some others like it: <a href="https://experiments.withgoogle.com/browser-ball" rel="nofollow noreferrer">https://experiments.withgoogle.com/browser-ball</a>
Reminds me of <a href="http://www.thewildernessdowntown.com/" rel="nofollow noreferrer">http://www.thewildernessdowntown.com/</a> [desktop]
I’m kind of amazed the original version is using localstorage. Storage and retrieval are blocking operations. I’d expect render performance to be terrible.
made something similar 14 years ago...<p><a href="https://youtu.be/bEwsuWNxdno" rel="nofollow noreferrer">https://youtu.be/bEwsuWNxdno</a><p>domain isn't mine anymore...
Two more examples of multiple windows as a single unit. This time on the video game side.<p>(Ludum Dare 35 Overall Winner) WindowFrame: <a href="https://youtu.be/CY7NUHn6GQg?t=273" rel="nofollow noreferrer">https://youtu.be/CY7NUHn6GQg?t=273</a><p>Window Kill: <a href="https://youtu.be/7iP68FZWVxM?t=160" rel="nofollow noreferrer">https://youtu.be/7iP68FZWVxM?t=160</a>
W-why is window LOCATION exposed to websites? Apparently even in FF private browsing...<p>At first I thought this is an electron only thing. I get it that we gave up on fingerprinting resistance but this is like pissing on it's grave.<p>EDIT: privacy.resistFingerprinting set to true fixes the coords to 0
Use BroadcastChannel; you don't need no sockets<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_C...</a>
Might as well link to the original / "stolen from" author's equivalent demo with Three.js (open this in multiple overlapping windows) - <a href="https://bgstaal.github.io/multipleWindow3dScene/" rel="nofollow noreferrer">https://bgstaal.github.io/multipleWindow3dScene/</a> - and repo - <a href="https://github.com/bgstaal/multipleWindow3dScene/">https://github.com/bgstaal/multipleWindow3dScene/</a>
The original seems to be on LinkedIn. Does anyone else find it weird when geek content is posted to LinkedIn? It's the last place I'd think to look. Am I missing out or is this an outlier?