Devlog #5

It’s been a while since my last devlog. Most of the time was spent trying to fix a bunch of bugs in the javascript code.

Bug Fixes

Spent 2 hours trying to fix bug where you could drag windows out of frame and never see them back. Trying to limit the drag based on viewport was very confusing.
I fixed this bug by creating a new function clampWindowPos() that would determine the max x and y offset that the windows could have in order to stay in the viewport. The function calculates this by calculating half of the width and height of the window (since the window has transform: translate(-50%, -50%); which causes the center to be at half the width/height). Then, it calculates the minimum left value and the maximum left value that the window could move to and did the same for the top value. Finally the function return those values.

Added a feature where clicking on the desktop window deselects the currently selected app by letting the body listen for a mouse down event and deselecting the icon if the mouse-down location is not on an app icon.

Added poseidon.md, my first app!

It took a whole 3 hours to style and get the app to function. Chrome dev tools was my best friend 🤩. It helped me spot few typos in variable names and find out javascript code that wasn’t working.
- I first started by trying out the javascript code show in the hack club workshop. It didn’t really work so I browsed through other WebOS shipped projects to see how they made the app. A really useful project I found was Blackbird OS, which I took inspiration from for coding my poseidon.md notes app.
- I began by implementing a local storage that didn’t really work so I left it for last and went to work on the other features like adding, deleting, and editing notes.
- After finishing these features, I came back to fix the local storage bug. The issue was that I directly accessed the storedNotes object in my Javascript functions instead of the note objects stored in the local browser. To fix this, I created a variable content and set it to equal loadNotes() so that this new variable would be an updated object with all of the saved notes.

I’m going to polish poseidon.md’s UI a bit and then start working on more apps for the WebOS.