I’ve received a lot of emails asking about the technology stack of Instant.fm, so I thought I’d share this publicly.

Update: The source code for Instant.fm is now on Github!

First, what features did we want to build?

Playlist Creation

  • No login required.
  • Build your playlist on site, or upload a .m3u, .txt, or .pls file from iTunes, Windows Media Player, or WinAmp.
  • Each playlist gets a unique, shareable, short URL.
  • Allow background image uploading. (TODO)

Playlist Editing

  • Drag and drop to re-order songs.
  • Buttons to Move To Top, and Kill Song.
  • Change playlist name/title with an inline edit (no refresh).

Playlist Viewing

  • Use YouTube as audio source.
  • Shuffle, repeat, show/hide video.
  • Suggest songs to be added to playlist. (TODO)
  • Keyboard shortcuts for power users.

Social Features

  • Share playlist on Facebook, Twitter.
  • See what your friends are listening to. (TODO)

Mini-browser

  • Pane which behaves like an iOS navigation view, with a stack of ‘views’.
  • Allows searching and browsing artist/album information without stopping the music.
  • Clicking links doesn’t cause user’s browser to leave the page.
  • Uses fancy animations, which look great.

Non-stop Music

  • On most music sites, clicking something stops the music (very jarring).
  • On Instant.fm, everything is AJAX, so nothing stops the music.
  • Even logging in/out works without a page refresh (the correct playlist edit tools are shown/hidden).

Browser Support

  • All modern browsers.
  • Internet Explorer 8. (TODO)

How We Built It

HTML5 Boilerplate

  • Rock-solid default for HTML5 websites.
  • Build script for minifying and hyper-optimizing JS, CSS, and HTML.
  • CSS reset, base styles, cross-browser normalization, non-semantic helper classes.
  • Server side optimization to reduce total page weight.

CSS3

  • 1430 lines of hand-written CSS.
  • CSS3 hotness (transitions, box-shadow, border-radius, gradient, box-reflect, text-shadow).
  • Degrades gracefully in older browsers (…most of the time).

JavaScript Libraries

jQuery 1.6

  • The best.

jQuery UI 1.8

  • The only feature we used was the excellent “sortable” module.

Modernizr

  • HTML5 feature detection in JS and CSS.
  • HTML5 shiv so semantic elements like <header> and <footer> work in IE.

YepNope

  • Conditional JS resource loader for polyfills.
  • Asynchronous script loading.

Backend Stuff

Tornado Web Server

  • Asynchronous non-blocking Python web server.
  • Modules (tornado.database, tornado.httpserver, tornado.web, tornado.auth, tornado.ioloop).

Nginx web server

  • We run 4 Tornado processes, and use nginx to load balance between them.

Supervisor

  • Process control system used to daemonize the Tornado server instances.

SQL Alchemy

  • We were doing raw SQL for a while, then we got tired of that and decided to go with an ORM.

Python

  • Server-side image resizing.
  • Playlist file (.m3u, .txt., .pls) parsing after upload.

Apache Ant

  • Custom build script to deploy new code.
  • Currently, the site goes offline for about 30 seconds whenever we deploy (we think this is acceptable).

Web APIs

Last.fm API

  • Artist, song, album information (summaries + pictures).
  • Powers our search results.
  • Uses HTML5 Local Storage to cache search results.

Facebook API

  • Facebook Connect.
  • Social plugins (Like button, Comments widget).

YouTube API

  • Search API.
  • Embedded player JavaScript API.

jQuery Plugins

jQuery Templates

  • Render data into a template and insert into DOM.
  • Officially supported plugin.

JSizes

  • Adds support for querying and setting additional CSS properties.
  • Min-width, min-height, max-width, max-height, border-*-width, margin, padding.

Jeditable

  • Adds Edit-in-place functionality to forms (no page refresh).

Auto Expanding Text Area

  • A la Facebook and Quora.

ColorBox

  • Light-weight, customizable lightbox.

Graphics

Helveticons

  • High quality commercial icon package.

Photoshop

  • All other images, icons, logo, custom missing album/artist images are ours.

Misc Notes

InstantFM.com

  • .com TLD redirects to our main .fm site, in case users get confused with the .fm extension.
  • Purchased from a domain squatting company (BuyDomains).

Git

  • Commit early, commit often.
  • 686 commits so far.
  • We used GitHub.

Conclusion

As you can see, we built Instant.fm upon a solid foundation of awesome. Most of our tools are free software with great documentation and easily hackable code. Jake and I used a bunch of different tech on this project, since we wanted to try out some new things. Plus, playing with new frameworks and libraries is always fun.

We learned a ton during this project. I hope that this information has helped you. If you found this useful, leave a note in the comments.

(If you liked this, you might like How To Set Up Your Linode For Maximum Awesomeness.)

Discussion, links, and tweets RSS Feed Icon

Feross Aboukhadijeh Hey, thanks for reading! I'm Feross Aboukhadijeh, a programmer, designer, teacher, and mad scientist. I am currently building WebTorrent, a streaming BitTorrent client for the browser, powered by WebRTC. In my free time, I work on StudyNotes, a website to help students study better and get into college.

If you enjoyed this article, you should follow me on Twitter or sign up to get an email whenever I write something new:

Share this article with your friends: