I wanted this blog post to be a lot longer, but I'm dealing with brain fog from a few sources right now, so I think I will just make this a quick writeup of the tools and flow for the project. I do definitely want to note, as I do on the webpage, that this is my first real JS project, and it's probably better to learn from people who are not me. But at the same time, I've had a hard time finding exactly this type of information so I am posting.
Note: This article uses hover text to provide more information on certain words. To see the hover text, hold your mouse over words in blue for a bit. Unfortunately, this does not work on mobile devices (I would try a better method but there's the brain fog I mentioned earlier).
1. The actual process
- A daily scheduled Github Action runs a Python script to pull yesterday's high temperature and today's forecasted high temperature from the Open-Meteo free weather API
- Those temperatures are used to update a JSON file containing high temperatures since the start of the project
- A short time later, a daily scheduled Github Action pushes my changes to my Neocities website (this is explicitly allowed by Neocities).
- A Javascript file reads and interprets the values from the JSON file, which, along with HTML and CSS, lets you look at the temperature blanket!
2. How I achieved it
I started this project by changing my files from being locally hosted to being hosted on Github, and setting up syncing between VSCode, Github, and Neocities. It was a change that had been needed for a long time, since manually updating Neocities makes me extremely discouraged from working on my website. But, that happened quite a while before the actual temperature blanket coding.
My real start was setting up a folder for the project within my website, where I created an HTML shell file and a fake JSON file. I then worked on having Javascript be able to read in and echo the values from the file. Then, I developed my temperature ranges and colors for the blanket and coded them into Javascript. I successfully had a webpage with a bunch of colored bars on it. But, I didn't think it looked enough like a temperature blanket so I stole some CSS code from stack exchange to make all my rectangles have wavy borders instead. I also set up a system where the last strip in the temperature blanket (today's date) has a corresponding screen width to how far through the day you are when the website is viewed. After some more appearance tweaking, I found a real api to get data from and created my python script. Once everything was finalized there, I set up Github Action to run the python script daily. I couldn't be sure whether this would actually work, and it actually broke while I was on vacation, since the updated JSON wasn't triggering the automatic Neocities update (it should update on push, but bot actions don't trigger that, to prevent endless loop situations). So I had to edit that today and I am mostly just hoping it works now.
Hopefully this quick overview is useful to some people! When I was growing up I used to look at a lot of websites for web artists (example: https://mrdoob.com/) and I had hoped that completing a CS degree* would help me understand how it was done. It did a bit, but I still felt like I was missing a lot of knowledge to get there, and after this project I feel like I am, while still far from anything on that level, quite a bit closer. It's way harder to do something without a roadmap, and I am hoping this can help prevent someone from facing as high of roadblocks as I faced.
*It isn't a true CS degree, but 75% of my classes were CS related. Life is complicated
