5 Insane Features in my OS in the Browser!!! 🤯
Tags: webdev, react, javascript, programming
Published: 2022-01-30 21:49:35

I released my _"[OS in the Browser](https://github.com/DustinBrett/daedalOS)"_ at the start of 2022 and have had a hugely positive reception for it online. I wanted to make an article about some of the features I consider the most **insane** and that I am most proud of. Here they are in no particular order:

## 1. File System

![File System](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qbwt4f02r0kc1qd1882y.png)

I started my file system with [BrowserFS](https://github.com/jvilk/BrowserFS) which allowed me to setup [IndexedDb](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) as the main writeable location. When in Firefox Private mode it switches to an in memory file system which does not persist. Using BrowserFS also meant I could open ZIP and ISO files as if they were folders. I create a JSON file on build that has the initial public folder directory structure which is used as the readable portion of the file system via plain HTTP GET requests. I've also added the ability to [extract RAR]((https://github.com/YuJianrong/node-unrar.js)) files, although I don't currently have it linked to File Explorer to see it's contents before extracting. I can also make and extract ZIP/ISO via [fflate](https://github.com/101arrowz/fflate).

A few months ago I decided I wanted to have more direct access to the local file system so that I could work with larger files than IndexedDb allows. To do this I had to write my own custom back-end for BrowserFS that is based on the [File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API) which is currently Chrome only. Another method of adding files which I support is the [File and Directory Entries API](https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API/Introduction) which allows directly adding a single file at a time which is written to IndexedDb. It's possible to drag/drop files into any folder from outside the browser via this same API.

## 2. Web Workers

![DevTools Sources](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqb2atgm4nq26y1c12cx.png) 

In mid-2021 I created my [useWorker](https://github.com/DustinBrett/daedalOS/blob/main/hooks/useWorker.ts) custom hook which allowed me to turn a function into a [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) thread which no longer slows down the Main thread where most of the app runs. When I made that hook I was able to use the clock as the first use-case, and as of yesterday the wallpaper is now also rendered in it's own thread via [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas). This has improved performance and also allows me to say my website is multi-threaded.

## 3. Emulators (x86, Win 16/32-bit, DOS, Flash)

![Emulators](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vs35wylzboccingp85s.png)

Adding emulators is something I always wanted to do and I have plans to add more in 2022. For 2021 I was able to add [Virtual x86](https://copy.sh/v86/) (.img/.iso), [BoxedWine](http://www.boxedwine.org/) (.exe/.zip), [JS-DOS](https://js-dos.com/) (.exe/.zip) & [Ruffle](https://ruffle.rs/) (.swf/.spl). Most of these emulators utilize [WebAssembly](https://webassembly.org/) to run non-JS code.

## 4. Terminal

![Terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2q9sjzybtrwh58v5diy9.png)

I always wanted to make a command line interface/prompt but didn't actually start it till a few months ago. I decided to go with [Xterm.js](https://xtermjs.org/) for the basic terminal interface along with a modified [local-echo](https://www.npmjs.com/package/local-echo) to add basic required functionality. Then I set about duplicating every command I could find. I was able to link the terminal directly to the file system so all commands show real information. You can run `help` to view all commands/aliases. I've also included things such as [Git](https://isomorphic-git.org/), [Python](https://pyodide.org/) & [Wapm.io](https://wapm.io/) support.

## 5. Document Editors

![File Editors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6a1ktls73rm94speyb0q.png)

On top of being able to view my blog posts in [TinyMCE](https://www.tiny.cloud/), you can also edit, create and save `.whtml` files representing these WYSYWIG documents. If you want to edit the file in a more code/text friendly format, I also have added [Monaco Editor](https://microsoft.github.io/monaco-editor/), which I consider almost like a mix between VS Code and Notepad. Monaco has language detection, line information & [Prettier](https://prettier.io/) formatting options.

# More to Come!!!

{% youtube vXEaVRG4Yv8 %}

Thanks for checking out my article about these features. I plan to keep building and adding to this project for many years to come. To follow my progress you can check me out on my [YouTube channel](https://www.youtube.com/c/DustinBrett) and also check out the [source code](https://github.com/DustinBrett/daedalOS) for this project.