Static Spotify Widgets

4 min read • 17 December, 2020.

I love music. I listen to an assortment of genres, ranging from as large as pop and rock to as niche as the smallest indie bands from foreign countries. I would never have gained this addiction for such an amazing form of entertainment had it not been for platforms like Spotfiy and Bandcamp. I decided that, with the update to my site to a Next.js instead of the old Jekyll version, I should give myself less restricitions to let myself have more fun with this.

One prime way is the new area of what I'm listening to billions of times a day. This took a lot of time and, although the source code isn't ready to be published quite yet (I still have to create it and the about page, as of writing), a nice dive into how this will look seems like fun.

Screenshot from Figma of this project

With the help of my mates Charlie and Daniel. We got to that final iteration. Here's the logic behind all of it:

With these criteria out of the way, I made the first prototypes in Figma and invited Charlie to help out on expanding them.

The first prototypes for this project

We checked a lot of the boxes with this first version: a fun option, clarity, touch friendly, and there were versions for dark and light. However, we never experimented with different artist and song/album names. It would need work. Like any good design should be, we slept on it and figured it still needed work.

I sent a message over to Daniel and he taught me about a tool I wish I knew about sooner: Auto Layout. In short, auto layout lets you prototype things that will act reactively based on another (growing to fill, shrinking to fit, etc). With this new found knowledge, I put it straight to work as he taught me, along with some of the advice for padding on the widgets themselves, and got what is now the final product.


Although this is starting as just a concept, I can't wait to create it into a real tool and share it on GitHub for others to enjoy a neat way to embed Spotify albums and songs. While working on the final widgets, it also hit me that I should make one library for Spotify widgets and more, that you can use with React. But that's a story for another day, at another time.

I usually blog twice a week, but I take breaks from time-to-time. You can subscribe via RSS.