桜.dev I just wanted to talk a little bit about the last.fm component I made for the site and how and why I designed it the way I did. If you just want to use it on your site, all you really need to read is right here.
Since this component was written in svelte, it is easy to drop the RecentTracks.svelte component into any existing svelte project. It is also easy to use with a static site generator such as Astro, which supports svelte components with little effort. My readme goes into detail about that too.
Little projects like this bring me a lot of joy, especially when I just want to make something function in a specific way with as little dependencies as possible. A lot of times I just can’t find what I want in the wild, so I make it myself. Also, because a lot of package managers have been poisoned with bad actors.
I know there are sites out there that have their own way of displaying their last.fm tracks, but I like mine because it’s dynamic in that it shows the currently playing song, and when nothing is being played, it shows that nothing is currently playing. A manual page refresh isn’t even required to show the latest state of songs. It updates on focus automatically, which I think is done so commonly by users that its safe to use just that as the update mechanism. Basically, if a user was to focus on a different window, tab, or literally anything else than the website, the songs will update upon going back to the site again!
I also used this method because it doesn’t require much logic (thanks to svelte), and I didn’t want the list to update in the background, which is kinda pointless for this. Updating the song list only matters if the site is in focus, meaning someone is actively browsing it.
Fortunately, svelte is very thoughtful about this with their <svelte:window> element. The element saves a bit of logic to write, because updating the songs manually would require making an event listener and then destroying it afterwards, which <svelte:window> does for you. I leveraged this element with on:focus and used it to call a function that would wait a minimum of 30 seconds before re-focus on the window would update the last.fm songs.
Now, without that function, each focus on the site would trigger a refresh which could be abused or just make unnecessary api calls. Of course it’s not lost on me that if the site is out of focus, it will probably be out of focus for a period of time, but still: the default behavior of window focus is not ideal if it is calling an API.
Another little touch I added was replacing last.fm’s default fallback album art, which is boring and lame. And since the component uses the album art to simulate a spinning record (not seen on this site), I decided that whenever the fallback image is found to be used, or if there is no fallback image, that I would make it use a vinyl record instead.
Anyway, that’s the interesting stuff I wanted to talk about, as its also my first project using svelte. I did make a similar component in react some time ago, but since I used svelte this time around, I don’t think I could go back to react unless I was being paid. It’s just a very well thought out framework.
If this is something you use and enjoy and/or have feature requests for, or just need help with, reach out.