22 ms·
Show HN: I saw this mind-blowing experiment, so I made a simple version of it
Two browser windows (acting as socket clients) communicate their:
- Screen dimensions - (screen.width, screen.height)
- Window dimensions - (window.innerWidth, window.innerHeight)
- Window X/Y position - (window.screenX, window.screenY)
...or whichever calculation works best for you.
The original work by Bjorn Staal https://twitter.com/_nonfigurativ_/status/172732259457002734 https://twitter.com/_nonfigurativ_/status/172732259457002734 used localStorage, but I found sockets more fun, because if tweaked a bit, this can be shared with friends.
Here's a demo of how it works and the codebase: https://github.com/Momciloo/fun-with-sockets/ https://github.com/Momciloo/fun-with-sockets/
- 38 3y agocorrect URLs: https://twitter.com/_nonfigurativ_/status/1727322594570027343 https://twitter.com/_nonfigurativ_/status/172732259457002734... http://farside.link/twitter.com/_nonfigurativ_/status/1727322594570027343 http://farside.link/twitter.com/_nonfigurativ_/status/172732...
- doctorhandshake 3y agoCool! Feels like whichever window has focus, that window’s rectangle should draw on top.
- benj111 3y agoIsn't that just to illustrate that it isn't just transparency?
- mholt 3y agoMore like this: - https://twitter.com/steveruizok/status/1727625036159234555 https://twitter.com/steveruizok/status/1727625036159234555 - https://twitter.com/_nonfigurativ_/status/1727322594570027343 https://twitter.com/_nonfigurativ_/status/172732259457002734... - https://twitter.com/wesbos/status/1727755227766350031 https://twitter.com/wesbos/status/1727755227766350031 - https://twitter.com/wesbos/status/1727722358465523721 https://twitter.com/wesbos/status/1727722358465523721
- Kiro 3y agoVideo of last one: https://youtube.com/watch?v=3Hye_47c0Pc https://youtube.com/watch?v=3Hye_47c0Pc
- burcs 3y agoI had some fun doing some SQL joins with this: https://twitter.com/burcs/status/1728081692273823863 https://twitter.com/burcs/status/1728081692273823863
- worldsayshi 3y agoOkay this one is actually cool. I'm hoping it's not totally one-off scripted but it's fun either way. :)
- bionhoward 3y agoWow this seems profound, I didn’t even know you could do that, that could be the future of augmented reality if you think about it, layers! Great job!
- simbolit 3y agoCould you please expand on your "if you think about it"?
- Takennickname 3y agoSpoiler: he didn't.
- bionhoward 3y agosure, if you think about the long term usage of augmented reality then we will need to have multiple layers of content {rationale=because we need to focus on one thing in the context of multitasking, because we want to reskin the environment while still maintaining the content, and to avoid unsafely obscuring the field of view during ambulation and manipulation tasks}
- jonhohle 3y agoIs it really different from any multiplayer game? Two view ports, shared coordinates, independent renderers. The “trick” is that the view ports are overlapping, but I would imagine sendMessage might be faster and not require any server round trip.
- bionhoward 3y agoI was just trying to be nice, sheesh. happy holidays
- aantix 3y agoOr a postMessage could be used if one tab is opened from the other.
- rtcode_io 3y agoUse BroadcastChannel; you don't need no sockets https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_C...
- deleted 3y ago[deleted]
- bigyikes 3y agoNice, my first thought was to use LocalStorage. Didn't know about BroadcastChannel. Sounds like OP wanted to use sockets for fun though. >The original work by Bjorn Staal used localStorage, but I found sockets more fun, because if tweaked a bit, this can be shared with friends. Who among us hasn't overcomplicated things for fun? :)
- kaycebasques 3y agoVery cool. What's the working title for this interface / experience?
- system2 3y agoLocalStorage API.
- placebo 3y agomade something similar 14 years ago... https://youtu.be/bEwsuWNxdno https://youtu.be/bEwsuWNxdno domain isn't mine anymore...
- HatchedLake721 3y agoOh wow, from December 2008. Here's to no one trying to patent it now!
- whenlambo 3y agoWhat API allowed that back then?
- placebo 3y agoIt was an API I developed using ActiveX on Microsoft's Internet explorer and NPAPI on other browsers
- worldsayshi 3y agoI don't see what is technically new about this? What API has been missing to do this? Tcp and window.screenTop and screenLeft should get you there right? Hmm, yeah, 2008 is a long time ago though..
- munch117 3y agoAm I the only one that's horrified that window.screenX and window.screenY exist? This is not information that I want to provide.
- progbits 3y agoUsing the demo in https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenX https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/... it seems Firefox pretends the window is always at (0,0). So that's nice.
- Cyphase 3y agoYou likely have `privacy.resistFingerprinting` set to true.
- deleted 3y ago[deleted]
- fyokdrigd 3y agoas everyone should! people forget lesson from recent past. i don't know when google strong armed w3c to include this back... but we had this since ie4 days and then disabled everywhere since it was abused left and right for click jacking attacks.
- account42 3y ago> as everyone should! Not until Mozilla stops telling websites that I want a light color scheme if I turn it on. privacy.resistFingerprinting does too many things and you shouldn't need to use that sledgehammer to prevent the browser from leaking information that no website should know.
- xeckr 3y agoI just checked, it is possible to override them, which causes them to stop updating when you change the your window's location on the screen.
- adroitboss 3y agoTwo more examples of multiple windows as a single unit. This time on the video game side. (Ludum Dare 35 Overall Winner) WindowFrame: https://youtu.be/CY7NUHn6GQg?t=273 https://youtu.be/CY7NUHn6GQg?t=273 Window Kill: https://youtu.be/7iP68FZWVxM?t=160 https://youtu.be/7iP68FZWVxM?t=160
- throwaway7679 3y agoMetal Marines, a 1993 game with multiple windows that interact with each other: https://youtu.be/KiiAUP1fG14?t=297 https://youtu.be/KiiAUP1fG14?t=297
- adroitboss 3y agoThanks! I am adding this one to my list!
- no_time 3y agoW-why is window LOCATION exposed to websites? Apparently even in FF private browsing... 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. EDIT: privacy.resistFingerprinting set to true fixes the coords to 0
- a_wild_dandan 3y agoI thought you meant literal `window.location` and was confused, but yeah `window.screenX/Y` is a pretty suspect feature, now that you mention it.
- crazygringo 3y agoI'm as surprised as well. I'm trying to guess why, and can only imagine that at some point the idea was to support multi-window webapps, like maybe you'd have separate windows for documents and different tool palettes, and they'd want to know each other's locations to try to prevent overlaps? I mean, back in the day, framesets were another idea that experienced some popularity before being totally eclipsed by <iframes> -- all of this back in the era when everything was based on the multiple-windows paradigm rather than the multiple-tabs paradigm. Window.screenLeft apparently originated in IE [1]. Just a guess though. Very curious if there's any legitimate reason for it to continue to exist, or whether W3 ought to deprecate it. [1] https://developer.mozilla.org/en-US/docs/Web/API/Window/screenX https://developer.mozilla.org/en-US/docs/Web/API/Window/scre...
- deleted 3y ago[deleted]
- thayne 3y agoOn Wayland, a native window can't even get that information. At least not in a way that works across composiotors.
- andybak 3y agoThe 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?
- cpach 3y agoFor sure. It’s approximately the first time I’ve seen something like that on LinkedIn.
- zerojames 3y agoI work in computer vision and like hearing about the latest thing. I have been finding LinkedIn increasingly useful as a way to learn about machine learning. There are _a lot_ of posts that I have to scroll through of little to no value, but every so often I see a post by Yann LeCun or the lead developer advocate at TensorFlow or a paper someone has liked that catches my eye or a new model release. "Machine learning LinkedIn", as it were, is a real thing; not sure whether this applies to other disciplines.
- Geee 3y agoYann posts mostly on X.
- deleted 3y ago[deleted]
- pixel8account 3y agoI've recently started posting my content on LinkedIn (usually just linking to my blog or publication with a short explanation). Main reason is that I'm a bit unhappy with the new Twitter (a place where I used to share the most), approximately nobody reads Mastodon so I can't stop there, and all least I already have LinkedIn so it's low cost to share there.
- jocaal 3y agoThe 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. https://theannoyingsite.com/ https://theannoyingsite.com/
- lgats 3y agowarning, this is really annoying. imagine you're infected with a ton of adware in the early 2000s you will be logged out of many accounts here's someone testing it out on Windows a few years ago, but I assure you even in the latest chrome on mac, it's at least as bad https://youtu.be/estvbRSj4LU?si=gq6-l4pWLC9yXqap&t=109 https://youtu.be/estvbRSj4LU?si=gq6-l4pWLC9yXqap&t=109
- dylan604 3y agoWhy would you keep minimizing things instead of closing them? The video just looks like one of those meant to frustrate the viewer into wanting to do it themselves. I blame the creator of that video as much as the site itself. The site itself served a purpose. The person running that video has a much less clear motive
- b112 3y agoI think if you close a window, another pops up. Or two. You should go to this site and test this.
- dylan604 3y agoIt spawned an app outside of the browser. That's the window being minimized that I meant. I'm not an unawares person to the site's purpose. You're being a bit disingenuous with your reading of my comment
- PakG1 3y agoI tried it on Safari private window. It was absolutely horrible. I hesitate to guess what would have happened if I didn't keep clicking cancel whenever it asked if I wanted to allow downloads, etc.
- gmueckl 3y agoDoes this work on Wayland?
- HellsMaddy 3y agoTested on Sway with both Firefox and Chromium. Resizing works (no surprise) but the position doesn't work. window.screenX/Y always return 0.
- account42 3y agoGood. Websites have no business knowing anything of the world outside the viewport.
- itronitron 3y agoThis, 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.
- hot_gril 3y agoThis 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.
- butz 3y agoI'm wondering about practical application of this demo...
- worldsayshi 3y agoMaybe making colour mixing ven diagrams?
- sntran 3y agoI have always been fascinated by those sci-fi movies in which a person would swipe up on their tablet, and the current window would fly to another monitor. This maybe be something that can achieve that.
- bartvk 3y agoIt would not surprise me if the original practical application is long gone, but it's now used to fingerprint browsers for ad serving purposes.
- deleted 3y ago[deleted]
- ww520 3y agoThat's a fun use of LocalStorage. 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.
- abid786 3y agoI don’t think this is using local storage. There’s a web sockets based server that is sending clients the location of the other boxes as they are moving
- sprobertson 3y agoMight as well link to the original / "stolen from" author's equivalent demo with Three.js (open this in multiple overlapping windows) - https://bgstaal.github.io/multipleWindow3dScene/ https://bgstaal.github.io/multipleWindow3dScene/ - and repo - https://github.com/bgstaal/multipleWindow3dScene/ https://github.com/bgstaal/multipleWindow3dScene/
- deleted 3y ago[deleted]
- jdthedisciple 3y ago3 days old, twitter one seems 4 days old, who stole from who? Anyway nice repo, thanks for sharing!
- sprobertson 3y agoThe links I posted are from the original Twitter guy but a simplified version he made to open source it
- sshh12 3y agoReminds me of a cool demo of this for playing pong with browser windows http://stewd.io/pong/ http://stewd.io/pong/
- vunderba 3y agoThat's a great demo! I'd be curious to see how this would work with multiple monitors. 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.
- stavros 3y agoWhat, thieves? Make your stuff from zero, like the rest of us!
- zxexz 3y agoPretty sure this is tongue-in-cheek, given the commenter (pretty high profile dev who creates a lot of cool stuff and does not shy away from using other open source code!) :)
- kh0st 3y agothat was super cool of you. Before letting people make the incorrect assumption, you hit em off at the pass. good people right there
- stavros 3y agoAw I thought it would be obvious :( Thanks for clarifying, of course nobody makes anything without being inspired from something that already existed, at least to a degree. I guess it's hard to accurately convey sarcasm online, thanks again!
- Sirizarry 3y agoNo worries, it was pretty obvious to me
- bipson 3y agoStanding on the shoulders of giants
- freilanzer 3y ago
- p-nerd 3y agoReally great. The web is really going forward
- bottled_poe 3y agoSeems like this was all possible 10+ years ago with existing APIs at that time. I don’t see what’s so special tbh.
- Filligree 3y agoBut… why does it lag? Shouldn’t this be trivial enough to be instant?
- bawolff 3y agoI wonder if it would be more instant if they used postMessage api instead of going over network.
- 4death4 3y agoAny local network usage should be nearly instantaneous. My personal theory about the lag is that positioning the window is not synchronized to the JS thread, so the window moves before the JS thread is aware, which means you see the square move after the window has already moved.
- bawolff 3y agoAh, my bad. I didn't read the code and just assumed there was a far away server.
- rco8786 3y agoGoing over local network is more or less instant
- crabmusket 3y agoI assume you mean BroadcastChannel? https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel https://developer.mozilla.org/en-US/docs/Web/API/BroadcastCh...
- taberiand 3y agoProbably because of websocket network lag and also, in my anecdotal experience, window position updates are sometimes strangely jittery
- mrits 3y ago
- Agingcoder 3y agoCould someone explain what this means ? ( I’m not even sure I understand the gif on the GitHub page ) I just see windows seemingly sharing data.
- NL807 3y agoI think it's some kind of multiple client, single server setup. The windows are the individual clients, which pass screen geometry info to the server. The server then serves content to clients with different layout that makes content appear as a single object across multiple windows.
- deleted 3y ago[deleted]
- et-al 3y agoThe core of the trick isn't the window-window communication as much as using browser APIs to expose the window coordinates.
- awei 3y agoI love the concept and the demo! Amazing creative work
- hoosieree 3y agowhat fresh pop-up/pop-under hell even is this?!? I specifically asked for not that
- nikeee 3y agoYou can use a BroadcastChannel to send messages between the Windows directly. This should reduce latency when working locally.
- staticBr 3y agoYes exactly, using web socket is kind of over-engineering. See: https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_C...
- bdcravens 3y agoLove how simple the code is, with almost no external dependencies
- aylmao 3y agoI'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. 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.
- deleted 3y ago[deleted]
- faloppad 3y agoReminds me of http://www.thewildernessdowntown.com/ http://www.thewildernessdowntown.com/ [desktop]
- jakegmaths 3y agoHere'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(). https://cms-compsci.deno.dev/mrgordon/window/ https://cms-compsci.deno.dev/mrgordon/window/
- heavyset_go 3y ago> The original work by Bjorn Staal https://twitter.com/_nonfigurativ_/status/172732259457002734 https://twitter.com/_nonfigurativ_/status/172732259457002734 used localStorage, but I found sockets more fun, because if tweaked a bit, this can be shared with friends. Anyone have a link to what this was? The tweet is gone.
- kpandit 3y agoHe gives the link on GitHub but here it is (video) https://www.linkedin.com/feed/update/urn:li:activity:7133171531567816705/ https://www.linkedin.com/feed/update/urn:li:activity:7133171...
- heavyset_go 3y agoThanks
- iamateapot 3y agoIt's missing a digit at the end, original tweet: https://twitter.com/_nonfigurativ_/status/1727322594570027343 https://twitter.com/_nonfigurativ_/status/172732259457002734... / https://nitter.net/_nonfigurativ_/status/1727322594570027343 https://nitter.net/_nonfigurativ_/status/1727322594570027343
- heavyset_go 3y agoThanks
- arshxyz 3y agoThe devs behind tldraw also played with this to create something cool - https://twitter.com/steveruizok/status/1727625036159234555 https://twitter.com/steveruizok/status/1727625036159234555
- Simran-B 3y agoIf 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. You need to shoot at the window boundaries, too, or the window shrinks. Additional windows appear later in the game with boss enemies. Gameplay video: https://youtu.be/7iP68FZWVxM https://youtu.be/7iP68FZWVxM
- oniony 3y agoI love stollen. It's one of the few aspects of Christmas I actually look forward to.
- amelius 3y agoThe mind-blowing part is not that this works, but that it is secure.
- Zacru 3y agoThis and the original reminded me of this really old Chrome Experiments demo, and some others like it: https://experiments.withgoogle.com/browser-ball https://experiments.withgoogle.com/browser-ball
- dclowd9901 3y agoI’m kind of amazed the original version is using localstorage. Storage and retrieval are blocking operations. I’d expect render performance to be terrible.
- orobinson 3y agoThis 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]. [0] http://www.huddlelamp.org/#tech-video http://www.huddlelamp.org/#tech-video
- account42 3y agoNone of these screen properties should be available to websites.