TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Show HN: I saw this mind-blowing experiment, so I made a simple version of it

403 点作者 momciloo超过 1 年前
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&#x2F;Y position - (window.screenX, window.screenY)<p>...or whichever calculation works best for you.<p>The original work by Bjorn Staal <a href="https:&#x2F;&#x2F;twitter.com&#x2F;_nonfigurativ_&#x2F;status&#x2F;172732259457002734" rel="nofollow noreferrer">https:&#x2F;&#x2F;twitter.com&#x2F;_nonfigurativ_&#x2F;status&#x2F;172732259457002734</a> used localStorage, but I found sockets more fun, because if tweaked a bit, this can be shared with friends.<p>Here&#x27;s a demo of how it works and the codebase: <a href="https:&#x2F;&#x2F;github.com&#x2F;Momciloo&#x2F;fun-with-sockets&#x2F;">https:&#x2F;&#x2F;github.com&#x2F;Momciloo&#x2F;fun-with-sockets&#x2F;</a>

40 条评论

vunderba超过 1 年前
That&#x27;s a great demo! I&#x27;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.
评论 #38418203 未加载
评论 #38423556 未加载
itronitron超过 1 年前
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.
aylmao超过 1 年前
I&#x27;m old enough to remember a bunch of demos using window position&#x2F;dimensions from back in the day. I remember one with a physics simulation. I can&#x27;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&#x27;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&#x2F;windows are isolated from one another) which might make a local-only version easy to implement too.
评论 #38419388 未加载
Simran-B超过 1 年前
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:&#x2F;&#x2F;youtu.be&#x2F;7iP68FZWVxM" rel="nofollow noreferrer">https:&#x2F;&#x2F;youtu.be&#x2F;7iP68FZWVxM</a>
heavyset_go超过 1 年前
&gt; <i>The original work by Bjorn Staal <a href="https:&#x2F;&#x2F;twitter.com&#x2F;_nonfigurativ_&#x2F;status&#x2F;172732259457002734" rel="nofollow noreferrer">https:&#x2F;&#x2F;twitter.com&#x2F;_nonfigurativ_&#x2F;status&#x2F;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.
评论 #38420069 未加载
评论 #38419950 未加载
sshh12超过 1 年前
Reminds me of a cool demo of this for playing pong with browser windows <a href="http:&#x2F;&#x2F;stewd.io&#x2F;pong&#x2F;" rel="nofollow noreferrer">http:&#x2F;&#x2F;stewd.io&#x2F;pong&#x2F;</a>
Agingcoder超过 1 年前
Could 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.
评论 #38418410 未加载
评论 #38417961 未加载
doctorhandshake超过 1 年前
Cool! Feels like whichever window has focus, that window’s rectangle should draw on top.
评论 #38417002 未加载
Filligree超过 1 年前
But… why does it lag? Shouldn’t this be trivial enough to be instant?
评论 #38424713 未加载
评论 #38419880 未加载
评论 #38417588 未加载
评论 #38419207 未加载
评论 #38418098 未加载
ww520超过 1 年前
That&#x27;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.
评论 #38418199 未加载
nikeee超过 1 年前
You can use a BroadcastChannel to send messages between the Windows directly. This should reduce latency when working locally.
评论 #38429202 未加载
oniony超过 1 年前
I love stollen. It&#x27;s one of the few aspects of Christmas I actually look forward to.
hot_gril超过 1 年前
This reminds me of a project I did in school, a multi-user web browser. You could both control the same window&#x27;s size, scroll position, and other state on each other&#x27;s screens. The intended usage was having 2+ windows side by side.
account42超过 1 年前
None of these screen properties should be available to websites.
评论 #38438765 未加载
jocaal超过 1 年前
The available API&#x27;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:&#x2F;&#x2F;theannoyingsite.com&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;theannoyingsite.com&#x2F;</a>
评论 #38416177 未加载
评论 #38417856 未加载
评论 #38419326 未加载
评论 #38419152 未加载
orobinson超过 1 年前
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:&#x2F;&#x2F;www.huddlelamp.org&#x2F;#tech-video" rel="nofollow noreferrer">http:&#x2F;&#x2F;www.huddlelamp.org&#x2F;#tech-video</a>
hoosieree超过 1 年前
what fresh pop-up&#x2F;pop-under hell even is this?!? I specifically asked for <i>not that</i>
mholt超过 1 年前
More like this:<p>- <a href="https:&#x2F;&#x2F;twitter.com&#x2F;steveruizok&#x2F;status&#x2F;1727625036159234555" rel="nofollow noreferrer">https:&#x2F;&#x2F;twitter.com&#x2F;steveruizok&#x2F;status&#x2F;1727625036159234555</a><p>- <a href="https:&#x2F;&#x2F;twitter.com&#x2F;_nonfigurativ_&#x2F;status&#x2F;1727322594570027343" rel="nofollow noreferrer">https:&#x2F;&#x2F;twitter.com&#x2F;_nonfigurativ_&#x2F;status&#x2F;172732259457002734...</a><p>- <a href="https:&#x2F;&#x2F;twitter.com&#x2F;wesbos&#x2F;status&#x2F;1727755227766350031" rel="nofollow noreferrer">https:&#x2F;&#x2F;twitter.com&#x2F;wesbos&#x2F;status&#x2F;1727755227766350031</a><p>- <a href="https:&#x2F;&#x2F;twitter.com&#x2F;wesbos&#x2F;status&#x2F;1727722358465523721" rel="nofollow noreferrer">https:&#x2F;&#x2F;twitter.com&#x2F;wesbos&#x2F;status&#x2F;1727722358465523721</a>
评论 #38417307 未加载
评论 #38416235 未加载
jakegmaths超过 1 年前
Here&#x27;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:&#x2F;&#x2F;cms-compsci.deno.dev&#x2F;mrgordon&#x2F;window&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;cms-compsci.deno.dev&#x2F;mrgordon&#x2F;window&#x2F;</a>
gmueckl超过 1 年前
Does this work on Wayland?
评论 #38417973 未加载
arshxyz超过 1 年前
The devs behind tldraw also played with this to create something cool - <a href="https:&#x2F;&#x2F;twitter.com&#x2F;steveruizok&#x2F;status&#x2F;1727625036159234555" rel="nofollow noreferrer">https:&#x2F;&#x2F;twitter.com&#x2F;steveruizok&#x2F;status&#x2F;1727625036159234555</a>
Zacru超过 1 年前
This and the original reminded me of this really old Chrome Experiments demo, and some others like it: <a href="https:&#x2F;&#x2F;experiments.withgoogle.com&#x2F;browser-ball" rel="nofollow noreferrer">https:&#x2F;&#x2F;experiments.withgoogle.com&#x2F;browser-ball</a>
kaycebasques超过 1 年前
Very cool. What&#x27;s the working title for this interface &#x2F; experience?
评论 #38417613 未加载
aantix超过 1 年前
Or a postMessage could be used if one tab is opened from the other.
faloppad超过 1 年前
Reminds me of <a href="http:&#x2F;&#x2F;www.thewildernessdowntown.com&#x2F;" rel="nofollow noreferrer">http:&#x2F;&#x2F;www.thewildernessdowntown.com&#x2F;</a> [desktop]
dclowd9901超过 1 年前
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.
38超过 1 年前
correct URLs:<p><a href="https:&#x2F;&#x2F;twitter.com&#x2F;_nonfigurativ_&#x2F;status&#x2F;1727322594570027343" rel="nofollow noreferrer">https:&#x2F;&#x2F;twitter.com&#x2F;_nonfigurativ_&#x2F;status&#x2F;172732259457002734...</a><p><a href="http:&#x2F;&#x2F;farside.link&#x2F;twitter.com&#x2F;_nonfigurativ_&#x2F;status&#x2F;1727322594570027343" rel="nofollow noreferrer">http:&#x2F;&#x2F;farside.link&#x2F;twitter.com&#x2F;_nonfigurativ_&#x2F;status&#x2F;172732...</a>
placebo超过 1 年前
made something similar 14 years ago...<p><a href="https:&#x2F;&#x2F;youtu.be&#x2F;bEwsuWNxdno" rel="nofollow noreferrer">https:&#x2F;&#x2F;youtu.be&#x2F;bEwsuWNxdno</a><p>domain isn&#x27;t mine anymore...
评论 #38416254 未加载
评论 #38416694 未加载
adroitboss超过 1 年前
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:&#x2F;&#x2F;youtu.be&#x2F;CY7NUHn6GQg?t=273" rel="nofollow noreferrer">https:&#x2F;&#x2F;youtu.be&#x2F;CY7NUHn6GQg?t=273</a><p>Window Kill: <a href="https:&#x2F;&#x2F;youtu.be&#x2F;7iP68FZWVxM?t=160" rel="nofollow noreferrer">https:&#x2F;&#x2F;youtu.be&#x2F;7iP68FZWVxM?t=160</a>
评论 #38417848 未加载
amelius超过 1 年前
The mind-blowing part is not that this works, but that it is secure.
bdcravens超过 1 年前
Love how simple the code is, with almost no external dependencies
butz超过 1 年前
I&#x27;m wondering about practical application of this demo...
评论 #38418512 未加载
评论 #38420160 未加载
评论 #38418167 未加载
awei超过 1 年前
I love the concept and the demo! Amazing creative work
p-nerd超过 1 年前
Really great. The web is really going forward
评论 #38419131 未加载
no_time超过 1 年前
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&#x27;s grave.<p>EDIT: privacy.resistFingerprinting set to true fixes the coords to 0
评论 #38415980 未加载
评论 #38416053 未加载
评论 #38417664 未加载
评论 #38416144 未加载
munch117超过 1 年前
Am I the only one that&#x27;s horrified that window.screenX and window.screenY exist? This is not information that I want to provide.
评论 #38415942 未加载
评论 #38415845 未加载
评论 #38416560 未加载
评论 #38415863 未加载
评论 #38416152 未加载
rtcode_io超过 1 年前
Use BroadcastChannel; you don&#x27;t need no sockets<p><a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;Broadcast_Channel_API" rel="nofollow noreferrer">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;Broadcast_C...</a>
评论 #38415724 未加载
评论 #38415553 未加载
sprobertson超过 1 年前
Might as well link to the original &#x2F; &quot;stolen from&quot; author&#x27;s equivalent demo with Three.js (open this in multiple overlapping windows) - <a href="https:&#x2F;&#x2F;bgstaal.github.io&#x2F;multipleWindow3dScene&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;bgstaal.github.io&#x2F;multipleWindow3dScene&#x2F;</a> - and repo - <a href="https:&#x2F;&#x2F;github.com&#x2F;bgstaal&#x2F;multipleWindow3dScene&#x2F;">https:&#x2F;&#x2F;github.com&#x2F;bgstaal&#x2F;multipleWindow3dScene&#x2F;</a>
评论 #38420727 未加载
评论 #38417127 未加载
andybak超过 1 年前
The original seems to be on LinkedIn. Does anyone else find it weird when geek content is posted to LinkedIn? It&#x27;s the last place I&#x27;d think to look. Am I missing out or is this an outlier?
评论 #38415892 未加载
评论 #38420306 未加载
评论 #38415890 未加载
评论 #38416149 未加载
bionhoward超过 1 年前
Wow 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!
评论 #38415673 未加载
评论 #38415470 未加载