Devlog 3! Return of the killer Adblocker!

This session was basically split into two parts: the weather card and the media card. The weather card was pretty simple, the media card absolutely was not.
I started with the weather card as a bit of a warm up. I used the OpenWeather API to grab the data and then spent most of my time getting everything to display nicely. The one thing I wasn’t expecting was how annoying SVGs are in plain HTML. I ended up making one massive lookup table full of SVG markup so I could swap icons depending on the weather. Is it elegant? No. Did it work? Yep.
After that I moved onto the main boss fight of this devlog: the media card.
Unlike the weather card, this one actually needed the frontend and backend to communicate. That meant learning Flask for the first time. Surprisingly, Flask was really enjoyable to work with. Setting up routes and returning JSON was much easier than I expected.
Then came AppleScript.
Honestly, AppleScript wasn’t nearly as bad as I’d heard. It’s probably one of the most readable programming languages I’ve used. I used it to grab information from the Music app like the current song, artist, duration and playback position, then passed all of that through Flask so the browser could fetch it as JSON.
Of course, nothing ever works the first time.
One thing that really annoyed me was discovering that my ad blocker was blocking the HTTP requests to my own local Flask server. Good on it for doing its job, but it made debugging miserable. I downloaded another browser to test it… only to realise it also had a built-in ad blocker. In the end I gave up and switched to Safari. I didn’t even know Safari had DevTools, but they’re actually pretty decent.
Once the backend was working I started designing the actual card. I tried a bunch of layouts before settling on one with the song title, artist, progress bar and a little animated equalizer. I also wanted playback controls and album art, but they just made the card feel cramped, so I scrapped both ideas.
The JavaScript was honestly the hardest part. Nothing was particularly difficult, it was just lots of connecting everything together and trying not to confuse myself with variable names. I split everything into smaller functions so I could update different parts of the card independently, and I also got to experiment with try and catch for error handling.
The rest of the session was mostly bug fixing, CSS animations and fighting JavaScript every step of the way.
Overall this felt like a pretty big milestone. Glancer isn’t just displaying static information anymore. It’s actually talking to my Mac in real time, which makes it feel a lot more like a real application than just another webpage.