icon_home Created with Sketch.

Most Played Music Recap

Visit Site

What is it?

Pretty straightforward site that lists my most played songs by year.

Why?

I'm a bit of a data hound. So I've been tracking play counts with iTunes since 2009.

How did you make it?

  1. Export your iTunes playlists
  2. Convert XML to JSON
  3. Google for every album cover
  4. Fix all the missing genres
  5. Record every 30 second snippet
  6. Build a website around it.
  7. ???
  8. Profit.

The Cool Bits

Responsiveness

I didn't want two sets of code for navigation. So the side bars turn into dropdowns on phones. There's some tricky state switching based on classes. The bigger screen get the same specs regardless of classes, so it effectively ignores the dropdown behaviors.

Scrolling

Normally you just make the side bars stick to the window and maybe give them their own scrolling area. Or collapse the whole thing that the user has to open.

But that leads to quirks I don't like. One, I really dislike multiple axes of scrolling as in the user has to think about where to scroll. The second is that the side bar is a huge part of the experience. I didn't want to hide that if space was available.

So I made that responsive in of itself. It scrolls its full list regardless of the window height. As if it follows the scrolling axis. But afterwards it returns as a sticky button trigger. Where it actually sends you back to the top.

Okay, what else?

Lemme say hi to Phong.

612-643-1555
phong@phonghtran.com

Let me drive this tour.

Back to Home