DEV Community

Cover image for After 1 YEAR of hard work my NEW Ultimate Web Desktop Environment is ready for launch!!!!! πŸŽ‰πŸŽ‰
Dustin Brett
Dustin Brett

Posted on

After 1 YEAR of hard work my NEW Ultimate Web Desktop Environment is ready for launch!!!!! πŸŽ‰πŸŽ‰

LIVE LINK: https://dustinbrett.com/

Hey everyone, thanks for checking out my article on my passion project for the last year (and several years prior in different forms/codebases).

I've recently completed 52 weekly streams in 2021 as I worked on coding my app, from Hello World to what it is today.

Today (Jan 2nd) was the day of my first stream one year ago so I felt it was a good day to do this release. I will be having a LIVE πŸ”΄ Release Party Stream later TONIGHT, (Jan 2nd, 2022) at 9 PM PT to celebrate finally getting the code live and also to answer any questions or comments anyone may have.

I'm also going to be answering questions throughout the 1st week of 2022 as I will post on several sub reddits that may find this project interesting. Today I have posted on /r/reactjs so feel free to go over there to comment.

Feature Summary

System 🧠

File System

  • File Explorer
    • Back, Forward, Recent locations, Address bar
  • Drag & Drop File Support (internal & external)
    • Loading progress dialog
  • ZIP (write support), ZIP/ISO read support, RAR extract support
  • Writes to IndexedDb
  • Group selection/manipulation & drag to sort
  • Dynamic and auto cached icons for music, images & video
  • Context Menus
    • Cut, Copy, Create shortcut, Delete, Rename
    • Add file, Map directory
    • Open with, Open file/folder location, Open in new window
    • Download, Add to archive, Extract here, Set as wallpaper
    • Sort by, New Folder, New Text Document
  • Keyboard Shortcuts
    • CTRL+C, CTRL+V, CTRL+X, CTRL+A, Delete
    • F2, F5, Backspace, Arrows, Enter
  • File information tooltips
  • Allow sorting by name, date, type or extension
    • Persists states

Windows

Start Menu

  • Expandable Sidebar
    • Apps list, Documents shortcut, Power (clears session)
  • Spotlight visual effect
  • Folder support
  • Keyboard shortcut opens with SHIFT+ESC

Taskbar

  • Peek hover preview of windows
  • Focused window indicator

Clock

  • Runs in a web worker
  • Synced to system clock on load
  • Date tooltip

Wallpaper

URL

  • Query parameter loading
    • Examples:
    • /?url=/favicon.ico
    • /?app=TinyMCE

Apps πŸ§ͺ

BoxedWine (.exe, .zip)

  • Runs 16/32-bit Windows applications

Browser (.htm, .html)

  • Loads websites (w/HTTP header support)
  • Bookmark bar
  • Favicon support
  • Back/Forward & Reload
  • Google search via Address bar

DevTools

  • Console, Elements, Network, Resources, Sources, DOM
  • Activate from Start Menu or SHIFT+F12

js-dos (.exe, .jsdos, .zip)

  • DOS emulator
  • Automatic save states on close
    • /Users/Public/Snapshots
  • Automatic window resize

Monaco Editor

  • Code/text editor
  • Supports all file types
  • Save files via CTRL+S
  • Line count, cursor position, language id
  • Prettier formatting
    • json, js/ts, css/sass/less, html, markdown

PDF (.pdf)

  • Renders PDF's
  • Page current/count & Zoom

Photos

Ruffle (.swf, .spl)

  • Flash Player emulator

Terminal

TinyMCE (.whtml)

  • Read & WYSIWYG modes
  • File save support

Virtual x86 (.img, .iso)

  • x86 emulator
  • Automatic save states on close
    • /Users/Public/Snapshots
  • Automatic window resize

Video Player

Webamp (.mp3, .wsz)

To Do πŸ”¨

ASAP

  • Add custom session.json for sort orders
  • File search in Terminal & File Explorer
  • Status bar button to save Monaco on mobile
  • PDF change page/zoom inputs
  • IRC Client

Soon

  • Add 96x96 icons for higher dpi devices
  • Make desktop icons draggable around grid
  • Window Menu Bar
  • Open/Save File Dialog
  • File Explorer Column View
  • File Properties Dialog
  • NES/SNES Emulator
  • Light theme
  • FFMpeg Support
  • ImageMagik Support
  • System Tray

Eventually

  • Event Viewer
  • Task Manager
  • Run Dialog
  • Drag/Drop Taskbar Entries
  • Wapm I/O
  • Terminal piping
  • Virtual Assistant
  • Calendar
  • Spreadsheet Viewer
  • Browser Tabs
  • Fancy Zones
  • Service Worker

Bugs πŸ›

General

  • Initial sort order is not based on session
  • Layout shifts when text is untruncated
  • Closing File Manager too quickly causes memory leak
  • Monaco breaks Vanta is loaded via url query
  • Space Cadet loads too big if BoxedWine is loaded

Mobile

  • Titlebar menu/clicking doesn't work properly when draggable

Safari Mobile

  • Drag image is black
  • V86 not working
  • Eruda is missing titlebar

Firefox

  • TinyMCE styling is reset on 2nd load
  • Webamp stays in front during File Explorer drags

Thank you very much for checking out my project and please feel free to leave me feedback in whatever forum you desire. I plan to be focusing my YouTube efforts on coding and various topics about my project throughout 2022 so feel free to check those out and subscribe to my channel.

THANKS FOR YOUR TIME!!!

Discussion (49)

Collapse
ben profile image
Ben Halpern

Congrats!

Collapse
cedricmatthewverdida profile image
Cedric Matthew Verdida

😍

Collapse
dustinbrett profile image
Dustin Brett Author

Thank you!

Collapse
rxliuli profile image
rxliuli

I’m creating a similar thing recently, but the underlying technology stack is completely different, based on web worker to implement the main thread and iframe to implement the window

webos.rxliuli.com/

Collapse
dustinbrett profile image
Dustin Brett Author

Nice! Looks good. I love the idea of web workers and iframes actually in certain cases. I have an iframe for the Browser app and a worker for the clock, but I don't use workers as much as I would like. I will keep improving on this hopefully.

Collapse
rxliuli profile image
rxliuli

In fact, this is mainly for the convenience of third-party developers and security considerations, because it is obviously impossible to require all application developers to use the same technology stack, and it is impossible to guarantee that third-party code can run on the same thread as the system without happening. Any problems (even malicious code). I mainly draw on the existing web-based plug-in systems such as vscode for web, figma, applets, electron, etc. They all use a multi-threaded model and provide all system APIs to the main thread.

Thread Thread
rxliuli profile image
rxliuli

I wrote an article before about the js sandbox attempt. At present, I have established an EventEmitter-based sandbox interface, and implemented two runtime sandboxes, web worker and quickjs virtual machine, and then implemented the system API and Added various applications to enrich the system.

blog.rxliuli.com/p/bafce41b0e68409...

Thread Thread
rxliuli profile image
rxliuli

Another key point of using multi-threading is performance. We may have some large applications, such as maps or 3D content. If multi-threading is not used, it is very difficult to run all functions normally without stalling. . .

Thread Thread
dustinbrett profile image
Dustin Brett Author

Ya I also have 3rd party app support on my list of to do's. I was thinking of a type of controlled iframe with an api using post messages or a broadcast channel or something. It's fun stuff anyway. I tried to keep most of the code self contained for the existing apps.

Thread Thread
dustinbrett profile image
Dustin Brett Author

Thanks! I will check this out. Performance is my focus for 2022 in regards to my app improvements.

Collapse
anthonyjdella profile image
Anthony Dellavecchia

Very cool!
Would theming this be possible? Is it simply done with CSS? If so, I'm interested in doing a mac theme.

Collapse
dustinbrett profile image
Dustin Brett Author

Thanks! Ya you could totally theme it! I have a theme called defaultTheme but you could make another one with your own sizes/colors/etc. I think it would require some adjustment and moving things into the theme that I was too lazy to do, but in general it was built to support theming. I'd say 75% of the sizes/colors are centralized in one folder, the rest is inside Styled Components closer to their usage, but eventually it should all be extracted into the theme.

github.com/DustinBrett/daedalOS/tr...

Collapse
anthonyjdella profile image
Anthony Dellavecchia

Nice! What if I wanted to go beyond applying theming (colors, etc) and wanted to make it more of a Mac clone? Because theming wouldn't be enough, i.e, the MS start button doesn't really align with anything Mac related; re-positioning the clock; etc.

Thread Thread
dustinbrett profile image
Dustin Brett Author

Ya that's totally possible! You could remove the Taskbar component from the main index file (github.com/DustinBrett/daedalOS/bl...) and then make your own desktop environment components to work with existing hooks/contexts.

Thread Thread
anthonyjdella profile image
Anthony Dellavecchia

Thanks! Might look into this!

Collapse
ioannisnoukakis profile image
Ioannis Noukakis

It even has a running doom in it ^^ what a feat!

Collapse
dustinbrett profile image
Dustin Brett Author

Thanks! It has a few DOS Shareware games.

Collapse
lakincoder profile image
Lakin Mohapatra

This is awesome

Collapse
dustinbrett profile image
Dustin Brett Author

Thank you!

Collapse
robergwillian profile image
robergwillian

awesome job!!!

Collapse
dustinbrett profile image
Dustin Brett Author

Thanks!

Collapse
orbitturner profile image
Orbit Turner

This is really MIND BLOWING MAN πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯AMAZING✨

Collapse
dustinbrett profile image
Dustin Brett Author

Thanks! I'm glad I blew your mind :-)

Collapse
henryong92 profile image
Dumb Down Demistifying Dev

That is a lot of hardwork!
Congratulations!

Collapse
dustinbrett profile image
Dustin Brett Author

Thanks!

Collapse
virendrakhorwal profile image
Virendra Khorwal

This is awesome.

Collapse
dustinbrett profile image
Dustin Brett Author

Thank you!

Collapse
yufengwang profile image
LadiesMan217

Bravo

Collapse
dustinbrett profile image
Dustin Brett Author

Thank you!

Collapse
sonnenhohl profile image
Artur Sonnenhohl

Great Work! Adding Doom was such a nice touch!

Collapse
dustinbrett profile image
Dustin Brett Author

Thanks! Ya I always gotta have Doom. I recall as a kid trying to get it running all the time on "old" computers.

Collapse
dkoczka profile image
David Koczka

This is insane, good job! 🀘🏻

Collapse
dustinbrett profile image
Dustin Brett Author

Thank you!

Collapse
aptlyundecided profile image
Alex

My god this is amazing.

Collapse
dustinbrett profile image
Dustin Brett Author

Thank you very much!

Collapse
kwijibo82 profile image
Bender_the_offender

Amazing!

Collapse
dustinbrett profile image
Dustin Brett Author

Thank you!

Collapse
seven_77 profile image
Seven

Amazing!

Collapse
dustinbrett profile image
Dustin Brett Author

Thank you!

Collapse
haritamil profile image
haritamil

CongratsπŸŽ‰πŸŽŠ

Collapse
dustinbrett profile image
Dustin Brett Author

Thanks!

Collapse
shubham_ingale profile image
ShGI

Perfectly done βœ…

Collapse
dustinbrett profile image
Dustin Brett Author

Thanks!

Collapse
killianfrappartdev profile image
Killian Frappart

This is the coolest thing I have seen in a while

Collapse
dustinbrett profile image
Dustin Brett Author

Thanks!

Collapse
amirdev profile image
amirhossein

Great but this is Windows 10 when Windows 11 is gonna come?

Collapse
dustinbrett profile image
Dustin Brett Author

Haha thanks! I will theme it to Windows 11 once I myself upgrade. I'm not ready yet. :-)

Collapse
mohammadsahragard profile image
MohammadSahragard

Good job broo very nice. Amazing. Good luck forever.πŸ‘ŒπŸ‘ŒπŸ‘ŒπŸ‘πŸ‘

Collapse
dustinbrett profile image
Dustin Brett Author

Thanks, much appreciated!