After 1 YEAR of hard work my NEW Ultimate Web Desktop Environment is ready for launch!!!!! 🎉🎉
Tags: react, webdev, javascript, programming
Published: 2022-01-02 20:01:03

LIVE LINK: https://dustinbrett.com/

Hey everyone, thanks for checking out my article on my [passion project](https://github.com/DustinBrett/daedalOS) for the last year (and several years prior in different forms/[codebases](https://github.com/DustinBrett/daedalOS/tree/v1)).

I've recently completed [52 weekly streams](https://www.youtube.com/playlist?list=PLM88opVjBuU7xSRoHhs3hZBz3JmHHBMMN) in 2021 as I worked on coding my app, from Hello World to [what it is today](https://dustinbrett.com/).

{% youtube yzgygP7QC7c %}

Today (Jan 2nd) was the day of my [first stream](https://youtu.be/S-rF5rkhaJ0) one year ago so I felt it was a good day to do this release. I will be having a LIVE 🔴 [Release Party Stream](https://youtu.be/U9nsxgCQZjk) later *TONIGHT*, (Jan 2nd, 2022) at 9 PM PT to celebrate finally getting the [code live](https://dustinbrett.com/) 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](https://www.reddit.com/r/reactjs/comments/rugj5a/after_1_year_of_hard_work_my_new_ultimate_web/) so feel free to go over there to comment.

# Feature Summary

# System 🧠

### [File System](https://github.com/jvilk/BrowserFS)

- File Explorer
  - Back, Forward, Recent locations, Address bar
- [Drag & Drop](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) File Support (internal & external)
  - Loading progress dialog
- ZIP ([write support](https://www.npmjs.com/package/fflate)), [ZIP](https://github.com/jvilk/BrowserFS/blob/master/src/backend/ZipFS.ts)/[ISO](https://github.com/jvilk/BrowserFS/blob/master/src/backend/IsoFS.ts) read support, [RAR extract](https://www.npmjs.com/package/node-unrar-js) support
- Writes to [IndexedDb](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)
- Group selection/manipulation & drag to sort
- Dynamic and auto cached icons for [music](https://github.com/Borewit/music-metadata-browser), images & video
- Context Menus
  - Cut, Copy, Create shortcut, Delete, Rename
  - [Add file](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications), [Map directory](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API)
  - 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

- [Resizable and Draggable](https://github.com/bokuweb/react-rnd)
- Minimize, Maximize & Close
- Persists size/position/maximized states
- [Animates](https://www.framer.com/motion/) opening and closing

### Start Menu

- Expandable Sidebar
  - Apps list, Documents shortcut, Power (clears session)
- Spotlight visual effect
- Folder support
- Keyboard shortcut opens with **_SHIFT+ESC_**

### Taskbar

- [Peek](https://github.com/bubkoo/html-to-image) hover preview of windows
- Focused window indicator

### Clock

- Runs in a [web worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
- Synced to system clock on load
- Date tooltip

### Wallpaper

- [Dynamic animated wallpaper](https://www.vantajs.com/)
- Set via images (Fill, Fit, Stretch, Tile, Center)

### URL

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

# Apps 🧪

### [BoxedWine](http://www.boxedwine.org/) (**_.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](https://eruda.liriliri.io/)

- Console, Elements, Network, Resources, Sources, DOM
- Activate from Start Menu or **_SHIFT+F12_**

### [js-dos](https://js-dos.com/) (**_.exe, .jsdos, .zip_**)

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

### [Monaco Editor](https://microsoft.github.io/monaco-editor/)

- Code/text editor
- Supports all file types
- Save files via **_CTRL+S_**
- Line count, cursor position, language id
- [Prettier](https://prettier.io/) formatting
  - json, js/ts, css/sass/less, html, markdown

### [PDF](https://mozilla.github.io/pdf.js/) (**_.pdf_**)

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

### Photos

- [Supported Formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#supported_image_formats)
- Fullscreen & [Zoom](https://github.com/anvaka/panzoom)

### [Ruffle](https://ruffle.rs/) (**_.swf, .spl_**)

- Flash Player emulator

### [Terminal](https://xtermjs.org/)

- File system support
- Autocomplete & history
- Command list via `help`
- [Git support](https://isomorphic-git.org/) (checkout & clone)
- [Python support](https://pyodide.org/) (**_.py_**)
- [WebAssembly Package Manager](https://wapm.io/)
  - Examples:
    - `wapm cowsay moo` ([\#](https://wapm.io/package/cowsay))
    - `wax fortune` ([\#](https://wapm.io/package/fortune))
- [Weather information](https://wttr.in/)

### [TinyMCE](https://www.tiny.cloud/tinymce/) (**_.whtml_**)

- Read & WYSIWYG modes
- File save support

### [Virtual x86](https://copy.sh/v86/) (**_.img, .iso_**)

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

### [Video Player](https://videojs.com/)

- [Supported Formats](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Video_codecs)
- Plays [YouTube](https://github.com/videojs/videojs-youtube) videos/shortcuts

### [Webamp](https://webamp.org/) (**_.mp3, .wsz_**)

- Winamp audio player
- [Skin support](https://skins.webamp.org/)

# 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](https://www.youtube.com/c/DustinBrett/).

{% youtube U9nsxgCQZjk %}

# THANKS FOR YOUR TIME!!!