Devlog #3: Onboarding and Eliminating FOUC

Before shipping the WebOS 1 project and moving on to WebOS 2 project, I needed to implement an Onboarding/Welcome Screen to introduce users to the OS environment. This required a full-screen dark overlay.

this is what i did:

1. Z-index mismatch
   Because my custom Drag Engine automatically increments the zIndex of any .window it touches, the moment I clicked the Welcome Screen, the engine overwrote its god-tier Z-Index (99999). This caused an immediate Z-Index collapse, burying the modal underneath the desktop icons and the dark overlay.
   The Fix: I had to implement a strict exception in the JavaScript mousedown event listener to protect the Welcome Screen’s ID from being overwritten.
   DOM Reordering: To guarantee that the Welcome Screen will be at the very top,, I moved the Welcome Screen to the absolute bottom of the document. This means it will naturally sit on top of the other elements.

2. Eliminating the FOUC
   I used the localStorage API so users could check a “Don’t show this again” box, saving their preference to the hard drive. However, this caused a massive FOUC bug.
   The Problem: HTML renders faster than JavaScript executes. On boot, the browser would instantly paint the Welcome Screen to the monitor. A few milliseconds later, JavaScript would read the hard drive, realize the user disabled the screen, and violently delete it—causing an ugly flicker.
   Fix: I basically just inverted the rendering logic. I hardcoded ‘display: none;’ directly into the HTML so the modal is completely invisible by default. Now, the browser paints nothing. JavaScript checks the hard drive, and only turns the welcome screen on if it confirms the user actually wants to see it. Now it’s much better.

Ig this is the end of my WebOS 1 project. I will be shipping this project and then moving on to WebOS 2 where I’ll be implementing File Management, In-browser-browser?, and maybe some other built in tools. That’s the plan for now.