Ship
Hundred Acre Wood OS is (99%) DONE.
Three consecutive work days have passed of me working on the 8-step interactive walkthrough. The first hour after writing out the full plan on paper was extremely discouraging. I had built the welcome sign pendulum previously and so I thought it would be simply to make the click and ensuing animation by just adding another img on top and making their animations identical. Not so. Even when I finally got the keyframes of both correct without random jumping or awkward swings and visiting cubicbezier.com in search of a gravity-accurate acceleration, the two image just would not align. So I did the most obvious thing and made a new image of the two together in google slides. Once that was done, I was able to halve the css dedicated to the animation and move on with the walkthrough. From there, it was really just a lot of positioning elements correctly and setting timeouts perfectly. I was pleasantly surprised by how many elements I had that could be reused (if you explore my page, you may find all two appearances of my TV animation).
The walkthrough is designed to get the user familiar with most every feature existing there while being more entertaining and thus less skippable. One of the biggest issues I found with my desire to keep adding apps was that I knew that very few people would even discover each piece of my page. Because my OS is obviously not in competition with Windows and Mac, I wanted it to at least be entertaining. Over the next few days I hope to share this project with friends and family in order to crush any bugs or inconsistencies that may remain. I expect this process to be very little actual coding, likely less than half an hour in total. I believe however, like when writing, it is important to walk away from things you have worked on and come back with fresh eyes for increasing periods of time. There’s always a typo you just don’t see yet until someone else points it out for you.
Forgot to attach this vid on the last devlog.
I accidentally went an entire hour over the devlog 10 able to be logged
:( …but I made so much progress!
I firstly built the html for my timer and terminal, which were the last
two apps I wanted. A long time was spent after that before finishing
them when I suddenly remembered I had not committed any changes to
github for two weeks and had yet to put my site on netlify for a public
url.
The timer is not super good looking to be honest, especially compared to
how much work was put into the design of everything else, if you have
any suggestions for that please let me know, if nobody does that’s how
it’s going to stay for the unforeseeable future.
For a while as I was building the timer, I was actually thinking of
scrapping the entire terminal-app idea since I had no idea how much work
I wanted to continue putting into this project before I found a
stopping point for when I leave for college in under two weeks. I am so
happy I went for it though because I can now offer the remaining
odds-and-ends features I wasn’t sure how to incorporate otherwise. All
that finished within a day. I also learned a little more about terminals
as a whole, which was the meta-goal. Critically, the app also ties
into my final and most creative step forwards: the environmental puzzle.
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 :)
