@stratustraipsing

HAW OS biggest updates: 2 new apps. The apps I promised you all are now here! Rabbit’s goal tracker and Piglet’s mood support are fully functioning and I think together they add a bit of originality to the OS in accordance with the theme. The mood support app (sunshine icon) as well as the library/notes app contain speech from their respective characters, owl and piglet. In my search for simple animations, I’ve become a heavy user of GIFs directly from GIPHY. Because transparent GIFs are quite rare/difficult to create, almost all of the moving elements on my page are from under the ‘stickers’ tab of that site. I even got an opportunity to practice with grid display while organizing the emotion faces.This all took a while but what was really time-consuming was debugging the JS while adding lines for details like offsetting and adding z-index to opened windows and getting distracted by the fragments of easter eggs that I had planted throughout without having connected them all yet. My typos are terrible when I rush and any issue with the difference between id or the function I’m calling just causes the whole page to get messed up. Because the OS is a little fuller now, I’ve also begun to find test subjects for it (my family and friends) who may not have advice or critiques but are great at coming up with compliments. If anybody has any ideas they’d like to see implemented here, write a comment and I’ll respond as fast as I can get to it. I suspect I will be done within a few days at my current work pace.

Each devlog I make logs more and more time. It felt wrong to make an entire video recording of my OS before there were some real differences. Weather widget, battery widget, music player, and design clean-up are all off the checklist now. The majority of my time according to the hackatime report was my css file, surprisingly.

First of all, the weather app is the most technically advanced appearing widget here. It is how I have come to learn what an API is. And it’s amazing! All the weather data comes to me live and all I have to do is get my functions straight in JS, though I did end up needed two (one for city-> coordinates, another for coordinates-> weather). I did additionally watch several youtube tutorials in order to understand how these kinds of API-features usually work out, but very few actually included a search result dropdown. There are some issues with this addition (every search leads to 5 results, some of which may be
duplicates) but I’m not really interested in wading through that mess for a long time.
More important than that, however, is that I spent over an hour
building the code for my battery widget only to discover that the two browsers I use -Firefox and Safari- do not support its API due to data
issues. Which is understandable, but I wish I had known that before I bothered. Furthermore, my first-choice font doesn’t even show on Safari?
Anyway, you can view my full OS as it should be in this recording below (taken in VSCode).

I would post a much longer devlog here but my last was deleted because of the size of my video. So here is what I have done. The owl’s library app has been set up after much pondering on whether I should have a notes app at all considering how many other notes apps exist that are much better overall. However, I am very happy with the end result. ‘Owl’s Library’ essentially encourages you to create a curated collection of your personal tastes. Through building this, I also found the best way for me to build these apps moving forward is to create a rough draft html, move on to CSS, and only lastly to JS. Any bouncing around between those ends up too confusing for me and I lose track of what’s going on. I think I will have to make a few detours to freeCodeCamp for DOM JS practice in between working on HAW. Here are my next tentative app ideas: music with pooh, weather widget, battery widget with an eeyore that appears when below 20%, terminal with storybook commands, rate your mood app with piglet’s supportive comments for wherever you are, and an app with rabbit for you to write one goal in the format of “after I finish (…) I will continue by (…)” (ex: finish biology homework –> watch an interesting yt video on genetics) as a way for you to reward yourself without sacrificing intrinsic motivation.

HAW OS is looking great: I downloaded a custom font by winnie the pooh himself (piglet’s was a little too messy for my purposes), introduced a welcome sign with a pendulum-like swing, and I have written in my html comments the vision as of this moment. This OS will make you learn how to navigate it by following an environmental puzzle. I have the first few steps in mind but I’m trying my best to keep it a secret because I want people viewing the page to have no spoilers beforehand. It’s going to be difficult. Both for me to set-up and you to solve. I spent a very long time just trying to cut down my css hover area size since I had used remove.bg on an image and the invisible area around it was just too big to let slide. Eventually I just went back in my files and cropped the image but I had already wasted a lot of time by then trying to figure out if there was an ‘easier’ way. I’ve also been experimenting with vibecoding since my JS is rusty but built-in chat is honestly not very good for a beginner that insists on understanding everything it writes for me and I fall back on youtube tutorials 9 times out of 10. It’s just not worth it in my case except for when I can ask it questions for debugging quickly, and here it does an exceptional job of helping me move on without getting too frustrated.

My Hundred Acre Woods OS is finally up after over an hour of trying to understand how VS code works (like where the run button is) and about 15 minutes of actually writing code so that my background image from Pinterest even shows up. So much time setting things up. I can’t wait to see what I can do with this, but it’s truly difficult for me to even get my priorities together at this point. I haven’t built a website in years. One of the first things I looked up for my html file was how to write a comment because I couldn’t be sure of myself and I still ended up getting something wrong by putting it above the head tag . Looking forward to actually making changes to this OS. At least the picture I found is really nice :)