QuackOS banner

QuackOS

6 devlogs
14h 47m 35s

My own WebOS, my take for a simple, but beautiful and modular webos.

This project uses AI

Github Copilot line completion / Gemini assistance for the Paint and Grapher app

Demo Repository

Loading README...

jonas.gaden

Shipped this project!

Hours: 7.34
Cookies: 🍪 133
Multiplier: 18.11 cookies/hr

I launched the Settings app featuring custom background support powered by a newly integrated Pixabay API search function.
The drawing app received a layout overhaul alongside critical fixes for canvas resizing and boundary detection glitches.
I upgraded the dice roller to support five dice and added visual icons to the Games Hub selection window.
A new Home window now replaces the About Me section to provide deeper project documentation and direct GitHub access.
The Games Hub expanded to include Blackjack and Tic-tac-toe for a more robust built-in entertainment suite.
System-wide window management now supports maximizing and automatically adapts to your preferred light or dark color scheme.
Finally, the graphing utility was refined to be color-sensitive, ensuring it maintains a cohesive design language across QuackOS.

jonas.gaden

I added the Settings app and a much wanted feature: Finally you are able to load your own background images into QuackOS. Because just pasting an img URL would be way to easy, there is more: I integrated the Pixabay API (after searching for 10 minutes straight where on earth to get the needed api key) to implement a search function which provides useful meta data and has a higher rate limit than e.g. Unsplash. As another small QoL change, I introduced a new layout for the drawing app. Whilst i am not entirely happy how it turned out, its a great improvement compared to before. Especially a few bugs were resolved, such as the app crashing when minimizing or resizing (this was due to missing guardrails allowing the canvas size to go to 0 * 0) and some weird glitches when leaving the drawing area and then coming back in.

Attachment
0
jonas.gaden

In this latest update, I refined the dice roller by improving its layout and expanding its functionality to support up to five dice simultaneously. To enhance the visual navigation of the Games Hub, I integrated icons into the game selection window, creating a more polished experience. The most significant change involves replacing the original About Me window with a Home window, which serves as a information hub. This new interface provides users with a more detailed overview of the project, including direct access to Github and specific documentation/tutorial regarding the desktop, taskbar, and application architecture to ensure a more transparent and informative user experience when trying my project.

Attachment
0
jonas.gaden

A lot of small QoL changes and a few little gimmicks such as a Games Hub, which currently includes classic additions like Blackjack and Tic-tac-toe, alongside a functional dice roller. Beyond the new applications, I improved the core window management system to support maximizing windows and integrated the prefers-color-scheme media query, allowing the entire interface to adapt seamlessly to the user’s system-wide theme. To ensure visual harmony across the desktop, the graphing utility has been updated to be color-sensitive, ensuring its interface and visualizations better align with the overall color schema and maintain the cohesive design language established in previous updates.

Attachment
Attachment
0
jonas.gaden

Shipped this project!

Hours: 7.46
Cookies: 🍪 142
Multiplier: 19.05 cookies/hr

QuackOS is a desktop-in-the-browser that turns a web page into a small operating system.
It includes a window manager, taskbar, and a set of built-in apps that run in draggable windows. The project is written in TypeScript and built with Bun, keeping the codebase fast and hackable. Apps are modular, so you can add new ones by creating an app module and registering it at startup.
The result is a fun, lightweight OS-like UI you can run locally or ship as a static site (as provided in the Demo).

jonas.gaden

I added a new app for graphing functions and unified the icons layout by creating app icons that fit my style guide. The grapher supports basic mathematical functions and provides a clean interface for visualization. Additionally, I standardized all desktop icons to follow consistent design patterns, making the overall UI feel more cohesive. The new icons were created using the Apple Icon Composer and Google Material Icons.

Changelog

Attachment
Attachment
0
jonas.gaden

I implemented new apps, such as a new Browser, Google Maps, a Calculator and a Paint app in additon to finishing the taskbar, which now features a smooth, macOS-inspired hover animation. I also built in window management logic so that clicking an app icon toggles the visibility of all associated windows, effectively hiding or showing them with a single action.
Regarding the architecture, while the Rick Roll and Google Maps features function as IframeWindows, the Calculator, Web Browser, and Paint applications are built with their own custom logic and unique internal structures (by extending BasicWindow). To ensure visual consistency, the styling is handled through an internal basic library. This allows the applications to remain fully responsive and look polished immediately, simply by organizing the underlying HTML code without the need for manual CSS overrides for every new feature.

Attachment
Attachment
Attachment
1

Comments

aloyak
aloyak 7 days ago

probably the last place i thought id get rickrolled

jonas.gaden

I am building a highly modular system where adding new apps is essentially just a matter of extending the base app class. The core logic is separated into three dedicated managers: DesktopManager, WindowManager, and TaskbarManager.

The DesktopManager is responsible for the desktop surface itself - it handles icon placement, desktop interactions, background rendering, and overall workspace coordination. It manages the representation of available applications and acts as the primary interface for launching and holding new app instances.

The WindowManager controls all window-related behavior, including creation and destruction, focus handling, z-index ordering, dragging, resizing, minimizing, maximizing, and state persistence. Each window represents a running application instance, and the WindowManager ensures correct lifecycle management as well as smooth user interaction.

The TaskbarManager manages the taskbar at the bottom of the screen, displaying running applications, enabling quick switching between them, providing visual feedback for active windows, and handling the dock-style launcher for pinned apps. It effectively serves as the central hub for fast access to both active and favorite applications.

Attachment
0