You are browsing as a guest. Sign up (or log in) to start making projects!

My very own WebOS

  • 10 Devlogs
  • 23 Total hours

This is my first OS programmed with html CSS JS and many others. It will improve after a while

Ship #3

I built WebOS, a fully functional macOS-style desktop environment that runs entirely in your browser. It’s got a full window management system, a virtual file system (Finder), a Text Editor, a working Terminal, Sticky Notes, and even a built-in web browser.
The craziest part of this project was engineering the logic of a whole “operating system” without any backend at all. Everything relies purely on the browser’s localStorage. For example, I wanted users to be able to upload custom wallpapers, but high-res images would immediately hit storage limits and crash the virtual disk. To fix this, I had to build a custom solution using the Canvas API to automatically resize and compress images on the fly before saving them.
Getting the desktop interactions to feel actually native was another huge hurdle. I spent a lot of time fine-tuning the marquee selection tool, multi-icon drag-and-drop, and making sure that dropping files straight into a desktop folder worked seamlessly without feeling clunky.
But honestly, what I’m most proud of is the underlying architecture. I managed to create and most of the new features i have implemented.

  • 3 devlogs
  • 20h
Try project → See source code →
Open comments for this post

9h 11m 11s logged

Devlog #10

We have antoher big upgrade!!!
What I have improved and fixed:

  1. Added custom wallpapers! You can now go to Settings and upload your own image (PNG, JPG, or WebP). I built a system that automatically resizes the image to a max of 1920px and compresses it so it doesn’t blow up the browser’s local storage limit. If the file is still somehow too big, I made sure it won’t crash or delete your other saved files and notes.

  2. I built a Sticky Notes feature. If you right-click on the desktop, you can now create a new post-it. Every note is fully independent, you can drag them around the screen, pick from 5 different colors, and they actually save locally so they survive if you reload the page.

  3. Drag and drop is finally here. I initially built it just for the Explorer app so you could move files between folders, but I realized dragging a file into a folder directly on the desktop wasn’t doing anything. I completely fixed that. Now, if you drag an icon (or multiple selected icons) over a desktop folder, the folder highlights in blue, and dropping it actually moves the files inside.

  4. Added a highly requested feature to the Text Editor: a Download .txt button. Now you can actually export whatever you write in the webos straight to your real computer as a standard text file.

0
0
10
Open comments for this post

8h 16m 8s logged

Devlog #09

We have big upgrades!!! I will commit them soon to github.

What I have improved and fixed:

  1. The Text Editor wasn’t actually saving files correctly. It turns out that editing a file was just updating a global temporary field instead of writing to the actual file in the webos. Worse, if you had multiple windows open, they’d overwrite each other. I’ve completely rewritten this. Every window now tracks its own fileId, and saving actually writes the file.

  2. The calculator had this bug: if you typed 5+, it would instantly yell “Error” before you could even type the next number. It now ignores incomplete states.

  3. Window buttons: now you don’t need sniper aim to close a window anymore. The clickable area for the close/minimize/maximize buttons was literally just the 13px dot. I used some CSS to bump the hitbox up to 22px. They still look exactly the same, but they’re way easier to click.

  4. Explorer Views: Grid and List views actually look different now (before they were basically identical). Grid gives you proper tiles, List gives you rows.

  5. Finally Finished Mission Control: The component I started building last time is finally up and working. Hitting F3 or clicking the new icon in the dock actually brings up the overlay now.

  6. Desktop selection & dragging: You can finally click and drag a rectangle to select multiple icons on the desktop. I had to rewrite the DesktopIcon component to handle group dragging properly, but it feels super smooth now. I also threw in Cmd/Ctrl + A to select all and the Delete key to trash selected items.

  7. Search bar: Added a working search bar to the Explorer so you can actually filter files by name.

  8. Added ↑ and ↓ arrow key support for command history (finally). I also added a sysinfo command and updated help so it actually tells you what the commands do.

  9. Passwords: Added a standard show/hide toggle (the eye icon) to the login and setup screens.

  10. New Wallpapers the UI colors were getting a bit monotonous, so I added three new vibrant gradient wallpapers (Ocean, Meadow, Spectrum).

P.S. Thanks to all the people that pointed out these issues in the shipping review process

2
0
13
Open comments for this post

17m 51s logged

Devlog #07

Added various features like a functioning browser, dnd mode, updated the bin and the most important i finally managed to make the windows snapping work with a GUI like windows 11

0
0
13
Open comments for this post

20m 18s logged

Devlog #06

Planning to add new features but i am still stuck with some bugs so it won’t be uploaded to github until fixed. Now i am going forward adding even more things

0
0
9
Open comments for this post

38m 32s logged

Devlog #05

Finally we have a big redesign inspired by macOS. I had a lot of bugs in the previous devlog but they’re all gone now (finally). I have in program to add more animations and features

0
0
10
Open comments for this post

37m 36s logged

Devlog #04

Finally fixed the infinity of bugs i had with dragging windows around. Now you can see in the picture that if you try to change the dimension of the window a small shade appears in 1 of the 4 corners

0
0
7

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…