This last month has been another fun experience in pushing the limits of browsers. As I continue to work on my desktop environment in the browser I keep finding new ideas for features to add to make it more useful.
I use my project as a way to try what is basically proof of concepts, either because of low browser support or poor performance. I have a few examples I have been working with that I wanted to share:
File System Access API
Based on an article I had read about storing directory handles and a comment from a Reddit user, I decided my app needed to be able to retain mapped directories.
It turned out to be quite easy as all I had to do was store the handle object inside IndexedDb and then get it again on load. The only real challenges were that I needed to re-request permissions if the tab is closed so I added a mechanism to query for permissions and request them on load of a mapped folder. The other challenge was how to easily write to IndexedDb, and for that I went with idb-keyval.
Audio/Video Conversion
For this I have integrated FFMpeg in WebAssembly form and added it to the terminal as a cli command and to the right click context menus of relevant file types. An example would be that I could now convert mp4 into mkv. A large downside of the approach I have had to do in order to avoid SharedArrayBuffer, is that it runs on the main thread and basically locks up everything except the wallpaper until it's done. But I hope to eventually solve this as they make improvements to the browsers ability to mitigate Spectre.
Image Conversion
I've gone with ImageMagick ported to WebAssembly to do basically the exact same things as with FFMpeg, but with a tiny bit less locking up. In the future I would like to get these things running in multithreaded Web Workers as well as have the ability to easily configure transcode settings to whatever is desired instead of the defaults as it is now.
File Search
I wanted to keep things client side as I only desire to host static files on a web server. To make this work I knew I was going to go with a prebuilt index. I created a script to go through the public directory and grab all indexable content from file names and non-binary files. This turns into a JSON file which I load as soon as the user types into the search box. To achieve this I am using a library called Lunr. As additional secret sauce, after the static index is search, results are appended for a dynamic search that is done on any content stored on the writable portion of the file system. This allows searching new content as it's changed/added.
IRC Client
And finally the IRC client. I have been wanting to do this for a while and I have to say it is 100% NOT done. Currently it is a proof of concept but I do plan to build a tabbed interface and channel lists so it can function like a proper IRC client. The idea had been going on since I read IRC v3 spec public servers were hosting WebSocket servers now that anyone could connect to. I recently say a great POC tester with code which convinced me to start making it. As it is now I can connect to the 3 public servers (irc.unrealircd.org, testnet.ergo.chat/webirc & testnet.inspircd.org) I know about and communicate directly with them using IRC commands like LIST & JOIN.
Demo
Thanks for reading my article. If you'd like to check out a demo I did of all these features during my monthly round-up video for my project, please check it out below and like/subscribe if you enjoyed it.
Top comments (1)
This will be huge.