Introducing Ovrture

See what I did there? I’d like to announce Ovrture, a music utility I built with Andy McMillan. Ovrture aims to introduce you to music you might like by taking recommendations from your profile and playing one popular song per artist. If you are an Rdio subscriber of any level, you have the option to add the songs you like to a private Rdio playlist.

Go to Ovrture →

If you agree with’s recommendations and wish their radio stations functioned a little better (and with Rdio integration), you might enjoy Ovrture. Ovrture uses the EchoNest API to find the artist’s most popular song that is also available on Rdio, which is how the music is ultimately played.

If I alluded to a music project in conversation in the past six months, this is not it. Ovrture was built on a dreary Sunday afternoon when I got too drunk at brunch to work on the bigger music project I’m working on. It took a little over six weeks to be developed to this point, but I couldn’t have done it on my own. Andy, who is a very talented designer, director and lover, introduced the concept to me and provided some very essential design direction. All I did was write a bunch of things inside curly braces.

Ovrture has no back-end architecture, and uses the, EchoNest and Rdio APIs to fetch and play music. I also make responsible use of HTML5 Storage to keep tabs on all y’alls. All icons are svg via The Noun Project and I used Filament Group’s grunticon to deliver them, which means I got to integrate Grunt into my workflow (and pass the performance savings on to you!). If you agonize over writing lean code because you care about performance and because you’re afraid someone is going to see your work and lose professional respect for you, Grunt is the best because it provides a way for you to optimize further without putting your brain in a blender and keep people in the dark about your shameful practices by obscuring anything you’ve written badly through concatenation and minification.

The part of Ovrture I’m most proud of is that the album artwork, which is only featured for devices that have the screen space to display it, is only loaded for those devices. That is to say, it is not simply hidden, but smaller-screen devices never actually request the images, saving http requests and bandwidth. This could have been done with the AJAX Include Pattern which wasn’t working in my production environment because reasons, so I kicked it old school with the Conditional Content pattern instead. Ovrture is the first thing I’ve written using object literal notation it’s made me ashamed of all the javascript I’ve written before this moment.

I also (forced myself to) use CSS3’s Flexible Box Model for layout, which I highly recommend if you want to feel like an idiot again. This is embarrassing but layout does not come naturally to me. It took me years to understand tables for layout because of all the damn nesting, and it took me the better part of last decade to understand CSS for layout because understanding a box model is actually a really weird skill when you think about it. Everyone is enthralled with flexbox because it was developed FOR layout and isn’t a hack like tables or even CSS as we know it, but, predictably, it’s not coming naturally to me because the elements behave in a way I’m not used to, and in part because the new properties are muddled by vendor prefixes and the syntax keeps evolving. I used Flexy Boxes as training wheels to help generate layout and I fear that I will never understand it and I’ll spend the rest of my career writing HTML emails.