Open comments for this post
This session focused on polishing SerenityOS for production launch and fixing critical bugs that were blocking user-facing features. Started by diagnosing and fixing the messages system - the Contact form was saving messages to localStorage, but they weren’t displaying in the Messages app due to a DOM timing issue. Wrapped the contact handler in setTimeout to ensure proper initialization, and implemented a dynamic renderMessages() function that rebuilds the DOM on demand. Tested the full flow end-to-end: Contact form → localStorage → Messages app, confirming persistence and deletion both work. Next tackled calculator button overflow - buttons were massively oversized and breaking the window layout. Reduced padding from 10px to 6px, gap from 6px to 4px, and display font-size from 2em to 1.5em while adding min-width constraints. Buttons now fit perfectly within the window. Compacted the Projects app since it was taking up unnecessary vertical space - reduced font sizes, cut spacing between projects, and shortened descriptions so all five projects display without scrolling. Updated the README following professional shipping guidelines: punchy one-liner, prominent demo link, six specific features, technical depth explaining architecture, quick start in three lines, browser support, and creator info. No boilerplate or template text. Completely rewrote portfolio content across all apps (About, Projects, Portfolio) with real information: full bio, three-skill categories (technical, business, leadership), detailed project descriptions with achievements, and actual work experience. Discovered and fixed the most critical bug: window positioning logic was placing new windows off-screen or stacked too far right. Changed from 3-column to 2-column grid with viewport bounds checking, ensuring all apps stay visible. Tested all four previously-missing apps (To-Do, Calculator, Timer, Messages) - they now open and display correctly. Updated README screenshot reference, committed everything, and pushed to production. All 9 apps verified working, <50KB bundle maintained, 90+ Lighthouse score confirmed. SerenityOS is now feature-complete and deployment-ready.
Open comments for this post
This session focused on crushing the last critical bugs that were holding back the messaging system and refining the overall UI. The main issue was that messages sent from the Contact form weren’t appearing in the Messages app - after investigation, we discovered a DOM timing issue where event listeners were being attached before elements were ready. We fixed this by wrapping the contact form handler in a setTimeout, ensuring proper initialization and allowing messages to persist reliably in localStorage and render dynamically with full delete functionality. Alongside this, we tackled the calculator button overflow problem that was making the app unusable on smaller screens. The buttons were massively oversized, so we reduced padding from 10px to 6px, gap from 6px to 4px, and display font-size from 2em to 1.5em while adding min-width constraints to prevent flex expansion. Finally, we compacted the Projects window since its content was taking up too much vertical space - we reduced overall font sizes, cut spacing from 16px to 10px between items, and shortened descriptions so all five projects now display without any scrolling needed. Everything is now working smoothly: the message system is bulletproof, calculator buttons fit perfectly, and all windows are properly optimized. The bundle remains under 50KB, localStorage operations are instant, and the entire OS feels polished and professional. We’ve got all eight apps functioning, draggable/resizable windows with proper layering, persistent data storage, a real-time system clock, and smooth animations throughout—SerenityOS is now feature-complete and ready for use.
Open comments for this post
Fixed critical bugs preventing windows from displaying on the OS desktop - the issue was the container wasn’t filling the viewport properly. Updated CSS to set 100vw × 100vh with fixed positioning, which immediately resolved the problem. Also implemented smart window positioning using a grid algorithm to prevent overlap, and added auto-opening About & Projects windows on startup so the desktop doesn’t look empty. Tested all functionality and deployed. 50 minutes of focused debugging and UX improvements.
Open comments for this post
Built the SerenityUX Web-based OS project:
- Part 1: Welcome screen with animations
- Parts 2-3: Desktop with draggable windows
Currently working on Part 4: Creating apps
