12 ms·

WinBox: Window manager in a web browser

250 points by khangnd 5y ago

cosmotic 5y ago
Why do you call it modern?
radicalriddler 5y ago
I don't know if OP is apart of the org, but it's frustrating that when I maximize a window, and then minimize it, and then re-open it (holy this language is inconsistent), then it sizes back to default. This doesn't occur when you resize the window manually.
- marzell 5y ago
  I believe "restore" is the proper word for what you were trying to say.
  - deleted 5y ago
    [deleted]
bckr 5y ago
I'm impressed with this and plan to try it in my current project.
Lammy 5y ago
Looks cool. Is the name a play on Blackbox/Fluxbox/Openbox? It's in a different problem domain so it's probably not a problem, but "Winbox" is also the name of Mikrotik's RouterOS configuration utility for Windows: https://help.mikrotik.com/docs/display/ROS/Winbox https://help.mikrotik.com/docs/display/ROS/Winbox
- brylie 5y ago
  IANAL but from a Trademark perspective, it might only matter that they are both software products. When we registered a trademark for our software in the EU, the application form only asked our industry (software development and consultancy).
- jve 5y ago
  Hehe, when reading title I thought: Is that a web based utility for configuring Mikrotik? But they do have Webfig that is quite similar to winbox: https://wiki.mikrotik.com/wiki/Manual:Webfig https://wiki.mikrotik.com/wiki/Manual:Webfig
TekMol 5y ago
It is a nice tool and a nice codebase. I prefer to tinker with code without a compliation step. So I made the demo work with the code in src/ to run without a compilation step. The demo is almost pure html/js/css but not completely. It uses webpack for the styles (pipes them through less) and the js. The js is plain js but the index.html expects a version that is de-modularized by webpack. But changing a few lines index.html got me to run the demo with the default styles.
benboughton1 5y ago
Very cool. I'd like to tile vertically/horizontal. Also snap to edge takes up half screen like on Windows OS.
graderjs 5y ago
This is very cool. Performance tip that I noticed on low-powered low-spec mobile devices: you maybe could try locking the text or removing it during window resize to prevent reflow, as reflow seems to be slowing down performance and stuttering the window resize animation.
- worldsayshi 5y ago
  Curious: Is there some reasonable way to guess if the device should be considered low spec?
  - deleted 5y ago
    [deleted]
  - graderjs 5y ago
    I'm not sure whether you meant guess from JS or just guess. In the second case, reasonable, and "should be" and "considered" are all value judgment words that you will decide yourself if there's a fit for you. So if you meant how can someone judge a phone, you'll have to decide for yourself, because that's the only way you'll feel satisfied with your particular definitions of reasonableness, consider, and should. If you insist on discussing it with other people I think it would be an easy way if you wanted to spend a bit of time arguing about those definitions and which one you personally feel is right, or getting even more meta you could probably try to start a long-winded argument with people by suggesting that these words have no subjective judgment definition but are in fact truly objective. But I think all that's kind of pointless so of course I wouldn't waste my time arguing any of that. ;) ;P xx If you meant, case 1, guess from JS, you can get the memory and the number of cores from the deviceMemory and hardwareConcurrency properties of the navigator global object. While i think that's probably not sufficient I think it's a start and you could always research more for yourself if you were genuinely curious about this. If it's case two you don't need to be afraid to make a choice, just look at it and make a judgment about whether you think it's low spec or not.
  - dspillett 5y ago
    Not with any reliability, as it is a subjective matter (different users will want to make the utility/performance compromises in different places) and even if you manage to smooth the subjectivity out of the equation there are other variables over time (if you test performance now and decide to use the full-fat function as the current device seems fast, heat or battery concerns might cause the device to slow right down in a few minutes time). Same for network related limits - your application could start while the device is on a wireless AP connected to a decent fibre link so have significant bandwidth and relatively low latency, then the user immediately walks next door out of range of that AP and the device resorts to whatever 4G (or worse) link is available in the area. A better approach might be to simply let the user choose. At the start either default to one version (full fat or basic), or give the user a choice up-front, and make it easy to switch later. Perhaps do a quick test and warn the user if they pick the setup intended for high performance on a device upon which it might be slow, or recommend switching down if things get problematical later.
nyanpasu64 5y ago
The title of the link says "just like Windows". It's not an operating system API like Win32, and it's not a faithful clone of Windows's window management behavior, like your title implies. I can't drag a window so it lies partly off-screen, instead the window stops moving when I keep moving the mouse, allowing the mouse to change position relative to the title bar.. I can't aero snap, nor "snap window to full height". Only minimized windows are visible at the bottom of the screen, not a taskbar of all open windows. There's some additions not present on Windows, that threw me off. There's an full-screen button in the title bars, which confused me at first (but could be useful). And each minimized window has a maximize button, which isn't present on Windows and confused me. It seems that whether a minimized window gets restored or maximized depends on whether you press the button or not, rather than being remembered like Windows does.
- parhamn 5y ago
  Or, you know, it’s little cool window panes for the web and not a clone of Windows’ window system... Does this person owe you something?
  - unicornporn 5y ago
    Are you suggesting that only positive critique should be allowed? If I was the developer I'd love to hear that user's honest take on my creation rather than the "oh, cool!" type of input.
    - parhamn 5y ago
      Surely you’re not going to make me spell out for you why comparing a little window widget in JavaScript with features of the Windows operating system, isn’t helpful just because there was a soft analogy in the title. Surely, you could’ve seen more than that dichotomy you presented me with before you made me write this. But here we are. This sort of “critique” common on HN and it’s a toxic culture. Not all critique is good critique. We should be against crappy critique like this because it’s not helpful, it’s mean spirited, and it’s anti-maker.
ugh123 5y ago
Nice dialog box library
dusted 5y ago
Yo dawg. That said, if we need to accept the browser as the new OS, then this is actually cool, it seems pretty fast.
chrismsimpson 5y ago
Very cool
smt88 5y ago
Why would I want a window manager in my browser when I already have a window manager in my OS? Who would use this and why?
- DocTomoe 5y ago
  I've seen this approach being implemented (a lot clunkier, less polished and slower) in 2010-era stock market websites like https://tradingdesk.finanzen.net https://tradingdesk.finanzen.net - essentially in highly-configurable dashboards that a user changes often (think: every few minutes.)
  - forgotpwd16 5y ago
    Indeed the website you linked to is laggy. But if it wasn't, do you think it's bad paradigm for such website? To me seems like it makes sense. How it compares to the more modern, polished, ones?
- progval 5y ago
  This looks like it's targeted at webapp developers who want to use windows within their app. It does make sense for apps with a lot of modals, like an in-browser Gimp clone for example.
  - smt88 5y ago
    I think that's assuming the Gimp UX is good, and I would disagree with that. IDEs (and a lot of web apps) work like tiling WMs, which is a far better UX. There's a good reason Gimp is one of very few apps with that frustrating, disjointed everything-is-a-window design.
- dspillett 5y ago
  Why have multiple tabs when you can have several windows open and move between them? I can see this being useful for an application in which the user needs to interact with multiple things and they don't each need a full tab/window (would in some cases be pointless in its own window). A chat application, or a monitoring system, perhaps. Or just when porting over an old desktop system to run in-browser with minimal UI changes. It is like nested virtualisation. Why would I want to run a VM in a VM in a VM when the inner VM would be more efficient run directly on the metal? The answer is two-fold: 1. Generally, I wouldn't... 2. ... but for some niche use cases the facility can be very useful
hawski 5y ago
I was hoping it is like a remote desktop, but with web front-end so instead of pushing pixels it would push text, a bit of styling and media, maybe even some JS. Something like NeWS, but in a browser. Not necessarily WebX11, but that also seems fun.
vbsteven 5y ago
This looks fun. I wonder what kind of applications could benefit from a UI paradigm like this (virtual movable windows inside a browser tab). The only ones I have seen in the wild are demos (the one with winamp and the prank winXP one) and some limited compose/chat windows in Gmail and Linkedin. This could work for things like Email clients or UI's like Owncloud/Nextcloud. Any app that wants to allow the user to juggle multiple actions at once.
- Ayesh 5y ago
  Stock trading apps use UIs like this. I work with a couple these days, and they are surpringly well built, with movable windows, fast updates (every five seconds or so), alerts, charts, etc.
- dvdkon 5y ago
  Not sure about floating windows (I don't like them much personally, so that might be why), but I've been toying with the idea of building a UI for a web-based database that would allow you to drag links onto the sides of "internal windows" or alt-click links to intelligently create a new window somewhere. Kind of like a tiling window manager, but just for one site. Since the devs would control all the UI code, they'd make sure it scales to very small sizes. The idea was to make the common action of "opening multiple links from a list in new tabs" better, where tabs are too large containers and OS windows are often unwieldy. If you wanted to look at one of the results further in a bigger window, you could then pop it out into a new tab (again, kind of like tiling WMs with desktops).
- lloydatkinson 5y ago
  Synology NAS's have a UI like this. https://lh3.googleusercontent.com/proxy/UZCuKtNMML225va5prEGPl8LeoXuj68hAT1IdUJNt5eRhEDyWlPcwYlsunI7pA7n2TqD4_Jj7M92TIQ810JvcL9AR7WkCPjZE3j2JLHwpm9PS08dVYJPO1j5 https://lh3.googleusercontent.com/proxy/UZCuKtNMML225va5prEG...
  - wongarsu 5y ago
    Same with Qnap NAS. https://www.qnap.com/en/live-demo https://www.qnap.com/en/live-demo
Aissen 5y ago
Isn't it what Synology is or was doing with ExtJS ?
fleaaaa 5y ago
There are not many floating panel lib but this works pretty smooth and nice. Great work I'd say!
pjmlp 5y ago
I fail to see what is "just like Windows". Specially when projects like Lively Kernel are already around for such long time. https://lively-kernel.org/ https://lively-kernel.org/
deleted 5y ago
[deleted]
dang 5y ago
We've changed the title from "Show HN: WinBox – just like Windows, but for the web". The "just like Windows" thing was baity and provoked complaints. Also, "Show HN" implies that the project is your own personal work. If that's the case, let us know and we'll put it back. But if it's not the case, please read https://news.ycombinator.com/showhn.html https://news.ycombinator.com/showhn.html and only put "Show HN" on your own projects.
- gwbas1c 5y ago
  [Edit:] I'd try to make sure that, in the title, it's clear this is an in-browser library. I honestly thought this was a window manager, you know, the piece of software on a desktop OS that draws the windows. IE, I thought it was a window manager that made it easier to use web applications on a desktop computer. It took me awhile to realize that this allows desktop-style windows inside of a web browser. Not really a "window manager."
  - dang 5y ago
    Ok, I've changed it from "WinBox: Modern window manager for the web" to make that clearer. We usually take the word "modern" out of titles so I've done that too.
roebk 5y ago
I've just tried to use this example and it appears that there's been zero consideration to any form of accessible features here. The show example "button" is a non-focusable div element <div class="button" onclick="window.examples['theme-modern']()">Show Example</div> Once the window is open, the minimise, maximise, full-screen and close "buttons" are spans containing no useful text. <span class="wb-min"></span> <span class="wb-max"></span> <span class="wb-full"></span> <span class="wb-close"></span> The list goes on... Sure, sometimes accessibility can be hard to get right but it's quite something for it to have been completely disregarded.
- ts-thomas 5y ago
  That's true, the good thing about Open Source software is everyone is able to apply their improvements to it :)
  - enumjorge 5y ago
    I mean I get it, but accessibility is one of those things that can be very painful to add after the fact. If this project is meant to be used in actual applications, they’ve pushed a very tedious task unto outside contributors.
    - bobthepanda 5y ago
      Yeah, retrofitting a component for accessibility can lead to weird behaviors for consumers that have to be checked against.
  - deleted 5y ago
    [deleted]
  - lucideer 5y ago
    This is a fine and good statement for many things, but a11y is more of a fundamental architectural & design consideration for projects of this variety. In my experience, a lack of a11y consideration overall is more of an indicator of the overall suitability of the product design for your needs than simply a "missing feature you can add". Open Source software is great insofar as you can contribute to it in many ways, but applying this logic to all situations is really dismissive. There are many aspects of software projects that are largely or solely dictated by the creators/maintainers of that software, that may be impossible for idle contributors to significantly affect (and even forking can be a gargantuan/unviable option in some cases). TL;DR: Open-sourcing your software should not shield you from constructive criticism, NOR should it invalidate the advice of informed people recommending against using your software.
antattack 5y ago
Winbox is also a config utility for MikroTik RouterOS devices... https://help.mikrotik.com/docs/display/ROS/Winbox https://help.mikrotik.com/docs/display/ROS/Winbox
- ahmetak 5y ago
  Hahaha same idea.
- Koiwai 5y ago
  Glad I scrolled a bit before I was gonna post exactly this.
- twobitshifter 5y ago
  I remember there also being an fluxbox/blackbox DE for Windows with this name.
bflesch 5y ago
This is amazing, well done! I'd suggest for the modal window you add that it closes (a) if you click outside the modal into the greyed-out area and (b) if you press ESC.
danellis 5y ago
What's modern about this? It doesn't seem any different to the windowed UIs people have been doing on the Web for the past 20 years.
fnord77 5y ago
running movable and resizable windows inside a browser is neat but it feels like an antipattern. the top bar just seems like wasted space on a page, and it is distracting from the actual content. split panes are good enough.
kevincox 5y ago
It would be nice to be able pop-out a window (and set pop-out to the default) so that I can use the proper window manager built into my OS. I don't think having an in-tab window manager is a bad idea. There are numerous sites that I like to keep contained in one tab, however for the heavy-interactive types of site where windows like this make the most sense I would generally rather use OS windows so that I get keyboard shortcuts, tiling, multi-monitor, snapping, always on top and all of the other features that exist in my OS.
- swiley 5y ago
  Wasn't this how windows originally did tabs?
  - noisem4ker 5y ago
    Certain programs, yes. Notably earlier Opera versions and several image editors. It's called Multi-Document Interface (MDI). https://en.wikipedia.org/wiki/Multiple-document_interface https://en.wikipedia.org/wiki/Multiple-document_interface
girishso 5y ago
May not be as featureful but I like fos [1], because it provides web components, which I can use on frameworks like Elm [1] https://github.com/victorqribeiro/fos https://github.com/victorqribeiro/fos
ComodoHacker 5y ago
I'd love to see MDI implemented in productivity web apps. Like all "cool new tech" (read "well forgotten and reinvented basic ideas") it will inevitably come into fashion in a couple of years.
srott 5y ago
Reminds me of an old project called netwindows (http://web.archive.org/web/20050701000610/http://www.netwindows.org/ http://web.archive.org/web/20050701000610/http://www.netwind...). Looked almost as intuitive and easy as WinAPI, PDF documentation has 200 pages.
bstar77 5y ago
Kind of unrelated, but I find it interesting that I've only used 'let' a handful of times over the past 4-5 years and then I see projects like this where it's the rule, not the exception. Am I in a minority that thinks 'let' is a code smell?
- fouric 5y ago
  No, quite the opposite - `let` should be used by default (due to better scoping rules (block rather than function) for most cases) and `var` only used when necessary.
  - bstar77 5y ago
    IMO, `const` should be used by default, `let` in rare instances and `var` never.
- intergalplan 5y ago
  Why would it be? A lot of JS in the wild favors putting everything in objects (maybe not explicitly, but they end up doing it a lot anyway) so gets away with a lot of "const" use that still lets them mutate the values of those objects. If you're dealing with primitives you're going to need "let" a lot more.
  - bstar77 5y ago
    That is kind of my point, I don't often work with primitives that need to be redefined. I'd rather operate on an object where I can mutate its value rather than redefine the whole thing.
- denton-scratch 5y ago
  Let is syntactic sugar. To me, the code smell is the syntax from BASIC (and later C) that goes: <code> x = y </code> I've always disliked that notation; it looks like the statement "the value of x is the same as the value of y". So "let" turns the code into something that makes sense when read aloud. I don't think syntactic sugar is a code smell.
amelius 5y ago
This is a bad idea. Window managers should not be nested. This was tried in Windows 3.1 and it wasn't a big success to say the least.
- ASalazarMX 5y ago
  In a kiosk or game this would be nice, though.
lurkerasdfh8 5y ago
completely breaks text selection for me :(

250 points by khangnd 5y ago

Why do you call it modern?

I don't know if OP is apart of the org, but it's frustrating that when I maximize a window, and then minimize it, and then re-open it (holy this language is inconsistent), then it sizes back to default. This doesn't occur when you resize the window manually.

marzell 5y ago
I believe "restore" is the proper word for what you were trying to say.
- deleted 5y ago
  [deleted]

bckr 5y ago

I'm impressed with this and plan to try it in my current project.

Lammy 5y ago

Looks cool. Is the name a play on Blackbox/Fluxbox/Openbox? It's in a different problem domain so it's probably not a problem, but "Winbox" is also the name of Mikrotik's RouterOS configuration utility for Windows: https://help.mikrotik.com/docs/display/ROS/Winbox https://help.mikrotik.com/docs/display/ROS/Winbox

brylie 5y ago
IANAL but from a Trademark perspective, it might only matter that they are both software products. When we registered a trademark for our software in the EU, the application form only asked our industry (software development and consultancy).
jve 5y ago
Hehe, when reading title I thought: Is that a web based utility for configuring Mikrotik? But they do have Webfig that is quite similar to winbox: https://wiki.mikrotik.com/wiki/Manual:Webfig https://wiki.mikrotik.com/wiki/Manual:Webfig

TekMol 5y ago

It is a nice tool and a nice codebase. I prefer to tinker with code without a compliation step. So I made the demo work with the code in src/ to run without a compilation step. The demo is almost pure html/js/css but not completely. It uses webpack for the styles (pipes them through less) and the js. The js is plain js but the index.html expects a version that is de-modularized by webpack. But changing a few lines index.html got me to run the demo with the default styles.

benboughton1 5y ago

Very cool. I'd like to tile vertically/horizontal. Also snap to edge takes up half screen like on Windows OS.

graderjs 5y ago

This is very cool. Performance tip that I noticed on low-powered low-spec mobile devices: you maybe could try locking the text or removing it during window resize to prevent reflow, as reflow seems to be slowing down performance and stuttering the window resize animation.

worldsayshi 5y ago
Curious: Is there some reasonable way to guess if the device should be considered low spec?
- deleted 5y ago
  [deleted]
- graderjs 5y ago
  I'm not sure whether you meant guess from JS or just guess. In the second case, reasonable, and "should be" and "considered" are all value judgment words that you will decide yourself if there's a fit for you. So if you meant how can someone judge a phone, you'll have to decide for yourself, because that's the only way you'll feel satisfied with your particular definitions of reasonableness, consider, and should. If you insist on discussing it with other people I think it would be an easy way if you wanted to spend a bit of time arguing about those definitions and which one you personally feel is right, or getting even more meta you could probably try to start a long-winded argument with people by suggesting that these words have no subjective judgment definition but are in fact truly objective. But I think all that's kind of pointless so of course I wouldn't waste my time arguing any of that. ;) ;P xx If you meant, case 1, guess from JS, you can get the memory and the number of cores from the deviceMemory and hardwareConcurrency properties of the navigator global object. While i think that's probably not sufficient I think it's a start and you could always research more for yourself if you were genuinely curious about this. If it's case two you don't need to be afraid to make a choice, just look at it and make a judgment about whether you think it's low spec or not.
- dspillett 5y ago
  Not with any reliability, as it is a subjective matter (different users will want to make the utility/performance compromises in different places) and even if you manage to smooth the subjectivity out of the equation there are other variables over time (if you test performance now and decide to use the full-fat function as the current device seems fast, heat or battery concerns might cause the device to slow right down in a few minutes time). Same for network related limits - your application could start while the device is on a wireless AP connected to a decent fibre link so have significant bandwidth and relatively low latency, then the user immediately walks next door out of range of that AP and the device resorts to whatever 4G (or worse) link is available in the area. A better approach might be to simply let the user choose. At the start either default to one version (full fat or basic), or give the user a choice up-front, and make it easy to switch later. Perhaps do a quick test and warn the user if they pick the setup intended for high performance on a device upon which it might be slow, or recommend switching down if things get problematical later.

nyanpasu64 5y ago

The title of the link says "just like Windows". It's not an operating system API like Win32, and it's not a faithful clone of Windows's window management behavior, like your title implies. I can't drag a window so it lies partly off-screen, instead the window stops moving when I keep moving the mouse, allowing the mouse to change position relative to the title bar.. I can't aero snap, nor "snap window to full height". Only minimized windows are visible at the bottom of the screen, not a taskbar of all open windows. There's some additions not present on Windows, that threw me off. There's an full-screen button in the title bars, which confused me at first (but could be useful). And each minimized window has a maximize button, which isn't present on Windows and confused me. It seems that whether a minimized window gets restored or maximized depends on whether you press the button or not, rather than being remembered like Windows does.

parhamn 5y ago
Or, you know, it’s little cool window panes for the web and not a clone of Windows’ window system... Does this person owe you something?
- unicornporn 5y ago
  Are you suggesting that only positive critique should be allowed? If I was the developer I'd love to hear that user's honest take on my creation rather than the "oh, cool!" type of input.
  - parhamn 5y ago
    Surely you’re not going to make me spell out for you why comparing a little window widget in JavaScript with features of the Windows operating system, isn’t helpful just because there was a soft analogy in the title. Surely, you could’ve seen more than that dichotomy you presented me with before you made me write this. But here we are. This sort of “critique” common on HN and it’s a toxic culture. Not all critique is good critique. We should be against crappy critique like this because it’s not helpful, it’s mean spirited, and it’s anti-maker.

ugh123 5y ago

Nice dialog box library

dusted 5y ago

Yo dawg. That said, if we need to accept the browser as the new OS, then this is actually cool, it seems pretty fast.

chrismsimpson 5y ago

Very cool

smt88 5y ago

Why would I want a window manager in my browser when I already have a window manager in my OS? Who would use this and why?

DocTomoe 5y ago
I've seen this approach being implemented (a lot clunkier, less polished and slower) in 2010-era stock market websites like https://tradingdesk.finanzen.net https://tradingdesk.finanzen.net - essentially in highly-configurable dashboards that a user changes often (think: every few minutes.)
- forgotpwd16 5y ago
  Indeed the website you linked to is laggy. But if it wasn't, do you think it's bad paradigm for such website? To me seems like it makes sense. How it compares to the more modern, polished, ones?
progval 5y ago
This looks like it's targeted at webapp developers who want to use windows within their app. It does make sense for apps with a lot of modals, like an in-browser Gimp clone for example.
- smt88 5y ago
  I think that's assuming the Gimp UX is good, and I would disagree with that. IDEs (and a lot of web apps) work like tiling WMs, which is a far better UX. There's a good reason Gimp is one of very few apps with that frustrating, disjointed everything-is-a-window design.
dspillett 5y ago
Why have multiple tabs when you can have several windows open and move between them? I can see this being useful for an application in which the user needs to interact with multiple things and they don't each need a full tab/window (would in some cases be pointless in its own window). A chat application, or a monitoring system, perhaps. Or just when porting over an old desktop system to run in-browser with minimal UI changes. It is like nested virtualisation. Why would I want to run a VM in a VM in a VM when the inner VM would be more efficient run directly on the metal? The answer is two-fold: 1. Generally, I wouldn't... 2. ... but for some niche use cases the facility can be very useful

hawski 5y ago

I was hoping it is like a remote desktop, but with web front-end so instead of pushing pixels it would push text, a bit of styling and media, maybe even some JS. Something like NeWS, but in a browser. Not necessarily WebX11, but that also seems fun.

vbsteven 5y ago

This looks fun. I wonder what kind of applications could benefit from a UI paradigm like this (virtual movable windows inside a browser tab). The only ones I have seen in the wild are demos (the one with winamp and the prank winXP one) and some limited compose/chat windows in Gmail and Linkedin. This could work for things like Email clients or UI's like Owncloud/Nextcloud. Any app that wants to allow the user to juggle multiple actions at once.

Ayesh 5y ago
Stock trading apps use UIs like this. I work with a couple these days, and they are surpringly well built, with movable windows, fast updates (every five seconds or so), alerts, charts, etc.
dvdkon 5y ago
Not sure about floating windows (I don't like them much personally, so that might be why), but I've been toying with the idea of building a UI for a web-based database that would allow you to drag links onto the sides of "internal windows" or alt-click links to intelligently create a new window somewhere. Kind of like a tiling window manager, but just for one site. Since the devs would control all the UI code, they'd make sure it scales to very small sizes. The idea was to make the common action of "opening multiple links from a list in new tabs" better, where tabs are too large containers and OS windows are often unwieldy. If you wanted to look at one of the results further in a bigger window, you could then pop it out into a new tab (again, kind of like tiling WMs with desktops).
lloydatkinson 5y ago
Synology NAS's have a UI like this. https://lh3.googleusercontent.com/proxy/UZCuKtNMML225va5prEGPl8LeoXuj68hAT1IdUJNt5eRhEDyWlPcwYlsunI7pA7n2TqD4_Jj7M92TIQ810JvcL9AR7WkCPjZE3j2JLHwpm9PS08dVYJPO1j5 https://lh3.googleusercontent.com/proxy/UZCuKtNMML225va5prEG...
- wongarsu 5y ago
  Same with Qnap NAS. https://www.qnap.com/en/live-demo https://www.qnap.com/en/live-demo

Aissen 5y ago

Isn't it what Synology is or was doing with ExtJS ?

fleaaaa 5y ago

There are not many floating panel lib but this works pretty smooth and nice. Great work I'd say!

pjmlp 5y ago

I fail to see what is "just like Windows". Specially when projects like Lively Kernel are already around for such long time. https://lively-kernel.org/ https://lively-kernel.org/

deleted 5y ago

[deleted]

dang 5y ago

We've changed the title from "Show HN: WinBox – just like Windows, but for the web". The "just like Windows" thing was baity and provoked complaints. Also, "Show HN" implies that the project is your own personal work. If that's the case, let us know and we'll put it back. But if it's not the case, please read https://news.ycombinator.com/showhn.html https://news.ycombinator.com/showhn.html and only put "Show HN" on your own projects.

gwbas1c 5y ago
[Edit:] I'd try to make sure that, in the title, it's clear this is an in-browser library. I honestly thought this was a window manager, you know, the piece of software on a desktop OS that draws the windows. IE, I thought it was a window manager that made it easier to use web applications on a desktop computer. It took me awhile to realize that this allows desktop-style windows inside of a web browser. Not really a "window manager."
- dang 5y ago
  Ok, I've changed it from "WinBox: Modern window manager for the web" to make that clearer. We usually take the word "modern" out of titles so I've done that too.

roebk 5y ago

I've just tried to use this example and it appears that there's been zero consideration to any form of accessible features here. The show example "button" is a non-focusable div element <div class="button" onclick="window.examples['theme-modern']()">Show Example</div> Once the window is open, the minimise, maximise, full-screen and close "buttons" are spans containing no useful text. <span class="wb-min"></span> <span class="wb-max"></span> <span class="wb-full"></span> <span class="wb-close"></span> The list goes on... Sure, sometimes accessibility can be hard to get right but it's quite something for it to have been completely disregarded.

ts-thomas 5y ago
That's true, the good thing about Open Source software is everyone is able to apply their improvements to it :)
- enumjorge 5y ago
  I mean I get it, but accessibility is one of those things that can be very painful to add after the fact. If this project is meant to be used in actual applications, they’ve pushed a very tedious task unto outside contributors.
  - bobthepanda 5y ago
    Yeah, retrofitting a component for accessibility can lead to weird behaviors for consumers that have to be checked against.
- deleted 5y ago
  [deleted]
- lucideer 5y ago
  This is a fine and good statement for many things, but a11y is more of a fundamental architectural & design consideration for projects of this variety. In my experience, a lack of a11y consideration overall is more of an indicator of the overall suitability of the product design for your needs than simply a "missing feature you can add". Open Source software is great insofar as you can contribute to it in many ways, but applying this logic to all situations is really dismissive. There are many aspects of software projects that are largely or solely dictated by the creators/maintainers of that software, that may be impossible for idle contributors to significantly affect (and even forking can be a gargantuan/unviable option in some cases). TL;DR: Open-sourcing your software should not shield you from constructive criticism, NOR should it invalidate the advice of informed people recommending against using your software.

antattack 5y ago

Winbox is also a config utility for MikroTik RouterOS devices... https://help.mikrotik.com/docs/display/ROS/Winbox https://help.mikrotik.com/docs/display/ROS/Winbox

ahmetak 5y ago
Hahaha same idea.
Koiwai 5y ago
Glad I scrolled a bit before I was gonna post exactly this.
twobitshifter 5y ago
I remember there also being an fluxbox/blackbox DE for Windows with this name.

bflesch 5y ago

This is amazing, well done! I'd suggest for the modal window you add that it closes (a) if you click outside the modal into the greyed-out area and (b) if you press ESC.

danellis 5y ago

What's modern about this? It doesn't seem any different to the windowed UIs people have been doing on the Web for the past 20 years.

fnord77 5y ago

running movable and resizable windows inside a browser is neat but it feels like an antipattern. the top bar just seems like wasted space on a page, and it is distracting from the actual content. split panes are good enough.

kevincox 5y ago

It would be nice to be able pop-out a window (and set pop-out to the default) so that I can use the proper window manager built into my OS. I don't think having an in-tab window manager is a bad idea. There are numerous sites that I like to keep contained in one tab, however for the heavy-interactive types of site where windows like this make the most sense I would generally rather use OS windows so that I get keyboard shortcuts, tiling, multi-monitor, snapping, always on top and all of the other features that exist in my OS.

swiley 5y ago
Wasn't this how windows originally did tabs?
- noisem4ker 5y ago
  Certain programs, yes. Notably earlier Opera versions and several image editors. It's called Multi-Document Interface (MDI). https://en.wikipedia.org/wiki/Multiple-document_interface https://en.wikipedia.org/wiki/Multiple-document_interface

girishso 5y ago

May not be as featureful but I like fos [1], because it provides web components, which I can use on frameworks like Elm [1] https://github.com/victorqribeiro/fos https://github.com/victorqribeiro/fos

ComodoHacker 5y ago

I'd love to see MDI implemented in productivity web apps. Like all "cool new tech" (read "well forgotten and reinvented basic ideas") it will inevitably come into fashion in a couple of years.

srott 5y ago

Reminds me of an old project called netwindows (http://web.archive.org/web/20050701000610/http://www.netwindows.org/ http://web.archive.org/web/20050701000610/http://www.netwind...). Looked almost as intuitive and easy as WinAPI, PDF documentation has 200 pages.

bstar77 5y ago

Kind of unrelated, but I find it interesting that I've only used 'let' a handful of times over the past 4-5 years and then I see projects like this where it's the rule, not the exception. Am I in a minority that thinks 'let' is a code smell?

fouric 5y ago
No, quite the opposite - `let` should be used by default (due to better scoping rules (block rather than function) for most cases) and `var` only used when necessary.
- bstar77 5y ago
  IMO, `const` should be used by default, `let` in rare instances and `var` never.
intergalplan 5y ago
Why would it be? A lot of JS in the wild favors putting everything in objects (maybe not explicitly, but they end up doing it a lot anyway) so gets away with a lot of "const" use that still lets them mutate the values of those objects. If you're dealing with primitives you're going to need "let" a lot more.
- bstar77 5y ago
  That is kind of my point, I don't often work with primitives that need to be redefined. I'd rather operate on an object where I can mutate its value rather than redefine the whole thing.
denton-scratch 5y ago
Let is syntactic sugar. To me, the code smell is the syntax from BASIC (and later C) that goes: <code> x = y </code> I've always disliked that notation; it looks like the statement "the value of x is the same as the value of y". So "let" turns the code into something that makes sense when read aloud. I don't think syntactic sugar is a code smell.

amelius 5y ago

This is a bad idea. Window managers should not be nested. This was tried in Windows 3.1 and it wasn't a big success to say the least.

ASalazarMX 5y ago
In a kiosk or game this would be nice, though.

lurkerasdfh8 5y ago

completely breaks text selection for me :(