5 ms·

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 ha

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
danielbarla 5y ago
This kind of came up for me in a recent discussion, as my team is converting a trusty desktop application to a web-based system. The existing app is fairly complex, and is aimed at expert users who spend a significant amount of time in this app as their primary workplace. They enjoy the kind of flexibility that resizing, rearranging panels can bring. Additionally, they love the current ability to grab a panel, tear it loose from the app window into a new window, which they can move to their 2nd monitor. So basically, think of how an IDE tends to allow you to customise its UI to suit whatever task you're thinking of. Clearly, we can and will ensure that the main use cases have a compelling equivalent in the web version, but it's fairly intimidating to think that there's no easy way to offer these kind of expected features on the web.
- rzzzt 5y ago
  Try searching for "docking layout" with a dash of "Visual Studio" (the drop target hints presented by the original, non-Code version are quite good at letting the user figure out exactly where the dragged window will attach). One example is https://github.com/node-projects/dock-spawn-ts https://github.com/node-projects/dock-spawn-ts , but there are many more. Maybe you can also tease out the layout logic from VS Code or Theia (or even better, someone else might have done the work).
  - danielbarla 5y ago
    Cool, thanks! It makes sense that VS Code would have this down already.
- chestervonwinch 5y ago
  Have you considered the WASM build of Qt? https://www.qt.io/qt-examples-for-webassembly https://www.qt.io/qt-examples-for-webassembly
  - danielbarla 5y ago
    That's an interesting direction, and I'll keep an eye on it. Unfortunately in this case though, it's probably too far off the company's beaten track to use, as we have to integrate with plenty of other teams' work, which would be vanilla web+js stuff. While I'm sure it's surmountable, I'm not sure a hybrid is worth it.
string 5y ago
Another example in the retro style: https://based.gg https://based.gg
- ta988 5y ago
  Thats surprisingly easier to use than most clothing shops websites.
- gibspaulding 5y ago
  I'm surprised I haven't seen anyone mention https://poolside.fm/ https://poolside.fm/
rerx 5y ago
When instant messengers like AIM, ICQ, Jabber, or MSN were in heavy use, there was a very popular web based client for those services. It used the same type of UI quite effectively. Here's a screenshot from 15 years ago: http://googlesystem.blogspot.com/2006/06/meebo-all-in-one-online-instant.html http://googlesystem.blogspot.com/2006/06/meebo-all-in-one-on... Meebo was acquired by Google and killed off in 2012, when its utility was waning anyway.
- rzzzt 5y ago
  Franz is still in this space, although it uses tabbed views for each service: https://meetfranz.com/ https://meetfranz.com/
- ChrisArchitect 5y ago
  wow yeah, meebo blast from past
forgotpwd16 5y ago
@gwern's site[0] has tooltip popups, basically Wikipedia-like page previews on the rocks, that employ this paradigm. If you check some of their articles, they're very dense in content and sources/links meaning that having a quick way to check them works good. [0]: https://www.gwern.net/About https://www.gwern.net/About
dugmartin 5y ago
MDIs (multiple document interfaces - https://en.wikipedia.org/wiki/Multiple-document_interface https://en.wikipedia.org/wiki/Multiple-document_interface) are great for some desktop apps but they don't translate very well to the web mainly because you can't deep link to a window set unless you use something like a persistent session id that keeps track of the window state on the server.
ta988 5y ago
One I can think of are scientific data searching tools. Where you need to compare things. Tabs make that somewhat complicated especially with JS heavy pages where links are just "javascript:..." so you can't open to a new page
BuildTheRobots 5y ago
It'd be lovely if Jitsi or other video conferencing systems let me move and resize other people's screens and cameras. I find a lot of the current layouts extremely suboptimal, expecially if a couple of people in the group don't have video or if you don't want to see yourself with the same prominence as everyone else.

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

danielbarla 5y ago

This kind of came up for me in a recent discussion, as my team is converting a trusty desktop application to a web-based system. The existing app is fairly complex, and is aimed at expert users who spend a significant amount of time in this app as their primary workplace. They enjoy the kind of flexibility that resizing, rearranging panels can bring. Additionally, they love the current ability to grab a panel, tear it loose from the app window into a new window, which they can move to their 2nd monitor. So basically, think of how an IDE tends to allow you to customise its UI to suit whatever task you're thinking of. Clearly, we can and will ensure that the main use cases have a compelling equivalent in the web version, but it's fairly intimidating to think that there's no easy way to offer these kind of expected features on the web.

rzzzt 5y ago
Try searching for "docking layout" with a dash of "Visual Studio" (the drop target hints presented by the original, non-Code version are quite good at letting the user figure out exactly where the dragged window will attach). One example is https://github.com/node-projects/dock-spawn-ts https://github.com/node-projects/dock-spawn-ts , but there are many more. Maybe you can also tease out the layout logic from VS Code or Theia (or even better, someone else might have done the work).
- danielbarla 5y ago
  Cool, thanks! It makes sense that VS Code would have this down already.
chestervonwinch 5y ago
Have you considered the WASM build of Qt? https://www.qt.io/qt-examples-for-webassembly https://www.qt.io/qt-examples-for-webassembly
- danielbarla 5y ago
  That's an interesting direction, and I'll keep an eye on it. Unfortunately in this case though, it's probably too far off the company's beaten track to use, as we have to integrate with plenty of other teams' work, which would be vanilla web+js stuff. While I'm sure it's surmountable, I'm not sure a hybrid is worth it.

string 5y ago

Another example in the retro style: https://based.gg https://based.gg

ta988 5y ago
Thats surprisingly easier to use than most clothing shops websites.
gibspaulding 5y ago
I'm surprised I haven't seen anyone mention https://poolside.fm/ https://poolside.fm/

rerx 5y ago

When instant messengers like AIM, ICQ, Jabber, or MSN were in heavy use, there was a very popular web based client for those services. It used the same type of UI quite effectively. Here's a screenshot from 15 years ago: http://googlesystem.blogspot.com/2006/06/meebo-all-in-one-online-instant.html http://googlesystem.blogspot.com/2006/06/meebo-all-in-one-on... Meebo was acquired by Google and killed off in 2012, when its utility was waning anyway.

rzzzt 5y ago
Franz is still in this space, although it uses tabbed views for each service: https://meetfranz.com/ https://meetfranz.com/
ChrisArchitect 5y ago
wow yeah, meebo blast from past

forgotpwd16 5y ago

@gwern's site[0] has tooltip popups, basically Wikipedia-like page previews on the rocks, that employ this paradigm. If you check some of their articles, they're very dense in content and sources/links meaning that having a quick way to check them works good. [0]: https://www.gwern.net/About https://www.gwern.net/About

dugmartin 5y ago

MDIs (multiple document interfaces - https://en.wikipedia.org/wiki/Multiple-document_interface https://en.wikipedia.org/wiki/Multiple-document_interface) are great for some desktop apps but they don't translate very well to the web mainly because you can't deep link to a window set unless you use something like a persistent session id that keeps track of the window state on the server.

ta988 5y ago

One I can think of are scientific data searching tools. Where you need to compare things. Tabs make that somewhat complicated especially with JS heavy pages where links are just "javascript:..." so you can't open to a new page

BuildTheRobots 5y ago

It'd be lovely if Jitsi or other video conferencing systems let me move and resize other people's screens and cameras. I find a lot of the current layouts extremely suboptimal, expecially if a couple of people in the group don't have video or if you don't want to see yourself with the same prominence as everyone else.