This content originally appeared on DEV Community and was authored by Dustin Brett
I released my "OS in the Browser" 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
I started my file system with BrowserFS which allowed me to setup IndexedDb 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 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.
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 which is currently Chrome only. Another method of adding files which I support is the File and Directory Entries API 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
In mid-2021 I created my useWorker custom hook which allowed me to turn a function into a Web Worker 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. This has improved performance and also allows me to say my website is multi-threaded.
3. Emulators (x86, Win 16/32-bit, DOS, Flash)
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 (.img/.iso), BoxedWine (.exe/.zip), JS-DOS (.exe/.zip) & Ruffle (.swf/.spl). Most of these emulators utilize WebAssembly to run non-JS code.
4. Terminal
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 for the basic terminal interface along with a modified 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, Python & Wapm.io support.
5. Document Editors
On top of being able to view my blog posts in TinyMCE, 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, which I consider almost like a mix between VS Code and Notepad. Monaco has language detection, line information & Prettier formatting options.
More to Come!!!
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 and also check out the source code for this project.
This content originally appeared on DEV Community and was authored by Dustin Brett
Dustin Brett | Sciencx (2022-01-30T21:49:35+00:00) 5 Insane Features in my OS in the Browser!!! 🤯. Retrieved from https://www.scien.cx/2022/01/30/5-insane-features-in-my-os-in-the-browser-%f0%9f%a4%af/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.