> Icarus and Daedalus attempt to escape from Crete by means of wings that Daedalus constructed from feathers and wax. Daedalus warns Icarus first of complacency and then of hubris, instructing him to fly neither too low nor too high, lest the sea's dampness clog his wings or the sun's heat melt them. Icarus ignores Daedalus’s instructions not to fly too close to the sun, causing the wax in his wings to melt. He tumbles out of the sky, falls into the sea, and drowns. The myth gave rise to the idiom "don't fly too close to the sun".
Indeed! I liked that Wikipedia said "Daedalus was a skillful architect and craftsman, seen as a symbol of wisdom, knowledge and power". Not to suggest I am that, but the name seemed cool anyway.
my username is based on Daedalus. I wanted to make something not used by anyone so I changed the 2nd D to a G and monopolized the username. I have yet to never have it work for me, and if it's taken, it usually means I already have an account.
I like that this is useful, if you use an android system on a bigger screen and cannot open multiple browsers. This gives you multitasking in such a scenario.
A fun use I found is using it to emulate games in a browser on iOS. Doom runs surprisingly well, so long as you use Chrome and not Safari (doesn’t launch on Safari for iOS, probably due to Apple tricking the site into thinking you’re using a Mac).
Thanks! Smooth was for sure a goal of mine, although from the feedback I've seen I think Chrome+Windows is the only certain way to keep it smooth. Thanks about the streams too, I enjoyed making them and they motivated me to keep going.
Appreciated what has being put into this effort. Quite slow on macbook pro with 16gb of ram. This makes me question the usability of React. Wouldn't something like this better written in something more lightweight such as Mithril or SolidJS, Vue, etc?
I did some quick profiling and it is doing quite a lot of re-rendering, but I do not see any of the common issues you see in actual slow React apps. For me it performs well, even on 6x slowdown there is no visible lag or "stickiness" (I'm on a Macbook Air M1).
The background does take up some CPU, have you tried if it's still slow when you change it to a static picture?
Side note: it's absolutely insane that you can change the background! Amazing work, such detail.
A different framework would not make a difference per se, maybe less re-rendering could help a bit, you can easily do that in React. And btw I'm not hating on the other frameworks mentioned; absolutely legit choices, but React is as well.
There are many very performant and user friendly apps written in React, and you can easily write shitty apps in all frameworks (React included).
I'm very impressed by this app, so much functionality and details, honestly insane.
Thank you so much for this comment/analysis. I do intend to work more on performance this year but it's good to hear some people are having a performant experience as is. I actually did try and keep my React "clean" and performant, but I know there are places to improve. The wallpaper does indeed seem like the biggest issue. I may need to consider just a static if I detect performance issues, although that can be hard to detect.
Thanks for noticing the detail, I spent quite a bit of time trying to get as much details and features as I could. Now for this year I want to make it more robust and take all the feedback I've got to make it even better.
This is my usual experience with react. Also i am just not liking the code…
I really don‘t understand why it became so popular except for Facebook marketing it so much hence people bought into the hype.
And now it has the big ecosystem, which is one of the main arguments to use react for many people…
On my PinePhone, I can immediately tell whether an app is built with React.
- the app usually takes several dozens of seconds to load
- the phone becomes warm
- any text I typed is not restored after a crash or a page reload if the developers have not explicitly saved my keystrokes in the local storage.
- each key press in an input takes a good fraction of a second (if not one full second) to appear on the screen
For the last one, I feel the lag on a decent laptop too (even if the lag is shorter). I know why: it is good practice to feed back any input into the state of the React component so everything is in sync. This triggers a re-render and if the devs were not careful, a good chunk of the app is re-rendered, which does not necessarily lead to a browser re-render / a blink, but definitely makes React execute a lot of render methods and re-diff virtual DOM trees. So each key press makes the browser run some JS that makes useless computation and accesses to the DOM. It's called "controlled component" [1]. Well, this is good practice for the devs, but it is user hostile. I wish more things were designed user-first instead of dev-first.
React + React-dom alone is around 130 KiB, 42 KiB Gziped [2]. It's without counting the usual dependencies (classname, Redux, browserlist, polyfills…). It's also more than three times the size of the entire frontend of the SMS app I'm building with Svelte. The heaviness is insane.
It is probably possible-ish to build an almost lean app with React. Signal seems to be kind of an exception and feels quite fast on my laptop (can't tell on the phone). It leaks memory and gets OOM killed quite often but React might not be to blame here. But React apps usually come with a awful lot of dependencies, to add insult to the injury.
It's render and diff'ing lags, fan takeoffs and RAM exhaustion all the way down.
> I know why: it is good practice to feed back any input into the state of the React component so everything is in sync.
I used to this. A better approach is to use the onBlur event of the input field to update the text to state. The text itself can be accessed via a reference to the input field in the onBlur event (created with useRef). This makes it so that not every typing action rerenders the whole component.
Because it's amazing to develop in and if you are good at development it's not hard to make performant applications. Don't blame the framework for a lack of skill
This is breathtakingly wrong. Performance bottlenecks are notoriously hard to fix in ReactJS. Once you've exhausted memoization, hoisting, even propagating state via message passing, you have to fight tooth and nail to rip a hot path out of ReactJS' grip. It's horrible. And it's the prize you pay for using a framework everybody and their grandmother can learn reading only a 5 minute blog post (the true value proposition here).
I have Macbook Air M1 8GB, it ran smoothly on my side. The highest CPU usage I seen from that is 30%. Doom and Nuke Dukem 3D is running smooth in there as well. And my NUC (i7 8559U) have a tiny input delay but overall ran smoothly on it. I use Vivaldi for my Macbook and Firefox for my NUC.
Glad to hear it went well. I had this going on a 4th gen i7 and it also wasn't too slow, so I think it depends on a few factors as to how quick it is for others.
Quite interesting since on my mobile (OnePlus 6 with Chrome) seems kind of performant.
Edit: I wonder if its some kind of functionality causing the slow down? Perhaps Safari doing something stupid? Have you tried Chrome or another browser?
Thanks for the appreciation. In general at least for me I found it quite quick on Chrome/Windows, so at least under some scenario it can be reasonably quick. If it is slow, it's likely not React as I have quite a few other things that run slower, like the wallpaper. I haven't tested Safari much as I don't have a Mac, but I will continue to try and optimize. Thanks for feedback!
Glad to hear that, thanks for checking it out! Chrome is indeed the best case scenerio browser as it's what I developed on. For me locally and when coming from CloudFlare, I find it quite fast, but some libraries can cause slow down such as Three.js and some of the emulators.
I love 'web-desktops' so made a comprehensive Github repo listing 171 such webDesktops that people made using react, angular, electron, or simple HTML.
Thanks for the feedback. I have actually heard of other people doing this without an issue and the Browser is indeed just an iframe, so I am not sure why it didn't work for you.
I wonder if someone will eventually make a desktop OS that is entirely web-based. No GTK or WinUI - everything is a web app. Except that the DE would also be, technically speaking, a web app itself that shows other web apps. Kind of like this, except imagine if the example apps ("File Explorer") were real web apps loading into the web app desktop environment.
I think Firefox OS was the farthest that this got, but I think it has potential. Such an OS would basically just be Linux + Headless Chromium + web browser API abstractions for things like USB (WebUSB), etc.
That's what we did at Jolicloud a decade ago to make a better (different? beautiful? doomed?) OS for netbooks: https://en.wikipedia.org/wiki/Joli_OS
The OS booted ASAP to a fullscreen Chromium instance, until we added support for running Linux apps too later on. I didn't work on the windows management so can't say more about this technical side.
Not there yet, because ChromeOS's user interface is not written as a web app. (Think close, minimize, maximize, window frame, taskbar, etc.) Same for it's native user interface (Settings menu).
I'm thinking of a desktop environment where everything was truly web - there was no native toolkit.
These (online browser based) desktop environments work best when you hit F11 and go fullscreen, stripping the browser chrome away.
Either the user does that, or we signal to the browser that this is a 'fullscreen only app and you must run it fullscreen' but that would be bad user experience, since most users would struggle to exit it.
Super cool, although I would not use the Windows logo for the "Start" menu. Definitely change that and call it something else! I'd imagine Microsoft jealously defends that sort of thing.
If you look around the filesystem and find the author’s résumé in the Documents folder, you’ll find out he works for Microsoft. So I’d guess Microsoft doesn’t mind as much.
Incredible! Good Job Dustin. Now you can create a software store where you sell different tools that run on this OS and you have yourself a OSasS (Operating System As A Service).
On my test computer which is an i7 m620 and no GPU it is very slow and takes the CPU to 100% on all cores while idle. opening a window will just get stuck at "working on it". While it looks nice this has probably been the slowest and least efficient web desktop I have opened on this computer and I have looked at a lot because I am building my own.
I would hope that is because of the wallpaper or CDN misses, because in general I hadn't had such issues. Thanks for the feedback. Perhaps you could try setting an image as the wallpaper to stop the animated one which can be a hog.
I indeed coded with modern computers/browsers in mind. It's unfortunate to hear someone is siting at "Working on it...", because at least for me on Chrome+Windows at home accessing my production website, it is very quick. I have heard some people also say it's quick, but it is starting to seem like 10% or so are having issues with performance. I could see the wallpaper being an issue. Or the CDN perhaps not having it cached as my web server is slow if it needs to grab from there. Thanks for the feedback!
Thanks for the feedback. There is some performance work to be done if you are seeing "Working on it..." for File Explorer, so that could be possible for larger folders. As for apps saying that, some of them require large library files to download first so depending on internet it could be downloading 1-10MB+ if you open something bigger. I am using CloudFlare CDN but it also could be possible if you are in an area where it's not cached that it gets it from my web server at StableHost which is slow.
Thanks for checking it out anyway! I hope one day you can try it with a smoother experience because when it works, it can do a lot, although it's a lot of just messing around. :-)
I've heard a few people with no GPU accel having issues with the wallpaper. I should probably find a way to detect that and unload it. Thanks for feedback!
Incredible website! Very functional for how experimental it is and full of neat surprises. Love that a screensaver comes on after it is inactive for a while.
With all these I feel like there is an opportunity for a standardized API for client programs.
Web apps running in a frame could postMessage requests for selected services from the desktop environment. It could potentially allow for a app to easily support a large number of different environments.
I would indeed like to have something like this, for 3rd party development. I have some generic aspects but it's mostly internal to the app at the moment. So I will add this to my to do list. I am not familiar with a specific standard but maybe I can find something to base it on.
Thanks! It's a total rewrite from scratch over a year and I really wanted to improve every aspect of what I had done the first time with v1. I still have a long way to go but my aspiration one day is to have near feature parity, within the confines of what can be done in a browser. Maybe in a decade or so I can redo it again when browsers support more stuff.
Just wanted to comment again to say I have actually gone through every single link on this site as I was building mine. I am obssessed with this kind of project and loved seeing what others did and using it as inspiration.
I've always loved "desktop websites", but beyond novelty I haven't found a real use case. Maybe something like a thin client or "work anywhere" for a business?
DSM may not still be, but last time I looked it was built using Sencha ExtJS.
I'm not sure when the buyout happened, but a few years ago Sencha became the shadiest, nastiest organisation I've ever dealt with. I'm keen to see what Synology do / have done to displace it.
As someone who has to regulary switch OS for various reasons: I would love to have the same file explorer/desktop environment, that works everyway in the same way. I hate the windows file manager. I even more hate the chromeOS file manager, Mac has been too long to remember - but if I use a new system and just want to look at some files and do basic stuff - I do not want to have to figure out the various ways of doing things. I just want to do them, the way I am used to it.
So the general idea is good, but I do not like the windows clone style of this one too much, also it is very slow. But that might be different, if locally installed.
Btw. it took me some time, to find the github link
It should not be slow, sorry to hear about that. Maybe you could try it locally, indeed that is the code. I would love to hear more about "I do not like the windows clone style of this one too much" as I have tried to replicate Windows 10 and would like to know where I could improve. Thanks!
Yes, there are use cases, I too loved 'web-desktops' so made a comprehensive github repo listing 171 such webDesktops that people made.
Please have a look here, you will love it :
https://github.com/zriyans/awesome-OS
I suspect novelty is indeed the primary purpose here. I view platforms like Sandstorm.io as a web operating system, since you install apps and manage files that use those apps contained within a web UI, but there's no real reason to emulate the look of a desktop OS, especially consider how much you have to fight with the browser to make that happen.
Most of the conventions of window-based desktop UIs inside a web browser is silly because it is, itself, a window. You are likely better off using multiple browser tabs than a fake windowed UI inside a single browser tab.
Ya novelty is all over my site. For me specifically the idea was always to replace my personal site and for users to feel like they had sat at my computer and were looking through my stuff/files. I use Windows 10, so that is what I decided to replicate visually.
Reminds me of a (personal) website I saw long time ago that replicates an earlier day OSX desktop, with functional itunes player. Does anyone remember what it was called?
Thanks! I did try and polish it a bit, but with so many different features and apps, there is for sure some rough spots still. And I mostly focused on Chrome/Windows experience on Desktop.
wow, I was not expecting it to run buttery smooth on my phone of all things. it's a Pixel 6 Pro, so not old, but most JS apps work for shit regardless, this thing runs better than most native apps on my phone, amazing work. I hope you keep building and improving on this. I personally have a distaste for JS and would love to use this if it some day became a full desktop solution.
https://en.wikipedia.org/wiki/Daedalus
Father of Icarus. From https://en.wikipedia.org/wiki/Icarus
> Icarus and Daedalus attempt to escape from Crete by means of wings that Daedalus constructed from feathers and wax. Daedalus warns Icarus first of complacency and then of hubris, instructing him to fly neither too low nor too high, lest the sea's dampness clog his wings or the sun's heat melt them. Icarus ignores Daedalus’s instructions not to fly too close to the sun, causing the wax in his wings to melt. He tumbles out of the sky, falls into the sea, and drowns. The myth gave rise to the idiom "don't fly too close to the sun".