@akira7

The Great Spaghetti Refactoring
As I started adding multiple windows and desktop icons, my JavaScript quickly turned into a scary bowl of spaghetti code. IDs were clashing, functions were repeating, and it was getting out of hand. So, I took a deep breath and did a massive refactoring. I embraced the DRY (Don’t Repeat Yourself) principle and built some magical functions using template literals. Now, initialising a brand new app only takes a couple lines of code instead of copy-pasting a mountain of text. I feel like a wizard!

Desktop Icons & The Z-Index Dance
I finally added real desktop icons! You can single-click to select them and double-click to open apps. But the real hidden challenge was the “z-index dance”. I had to teach HTMeow how to automatically bring a window to the front when you click on it. Turns out, making fake browser windows act like real OS windows requires some serious brain power!

Meowtes: The Flagship Notes App
Following the Hacker Notes guide (Part 5 of the WebOS jam), I built my very first real application. But obviously, I had to give it a cat twist, so I named it Meowtes.
I took the core logic from the guide (like loading content from an array into a dynamic sidebar) and completely overhauled the UI. I gave it a dark, sophisticated sidebar and a cream-colored text area that looks like real paper. I even made the window title update dynamically based on the note you are reading. It’s lightweight, elegant, and perfect for planning world domination.

The Tracking Glitch
My first real fight wasn’t even writing code; it was time tracking. I had this weird glitch where the tracker was logging my time under totally wrong project names instead of HTMeow. It took a bit of head-scratching to figure out how to make it point to the right folder, but we finally got it working! Oh, and I chose the MIT license for my repo. Basically it means: “You can use my code, but if your PC turns into a cat, it’s not my fault.

The CSS Boss Fight
I started by creating the UI. I wanted a clean, Linux-style topbar. Sounds easy, right? Nope. My topbar looked huge and terrible because HTML paragraphs have secret, invisible margins. Once I fixed that, I designed the main app window. Then, the real nightmare started: the minimize function. At first, I made the window “roll up” so only the top header was visible. But my header background was semi-transparent! Because of this, the text inside the window was “bleeding” through the dark header. It looked like a weird text ghost. I had to use some CSS magic to actually hide the internal elements when the window is minimized. CSS: 1, Me: 1.

Making it alive
Next, I used JavaScript to make the window draggable (honestly, dragging a fake window inside a browser is incredibly satisfying). I also built a real taskbar. Now, clicking the yellow button shrinks and fades the window, and a little button pops up on the topbar. Click it, and the window comes back to life. It took some brain power, but it works flawlessly!