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 Freedom of Speech on the Internet.)

Thanks for reading! RSS Feed Icon

Feross Aboukhadijeh I'm Feross, a programmer, entrepreneur, open sorcerer, and mad scientist.

I build WebTorrent, a torrent library for the web, WebTorrent Desktop, the best desktop torrent app, and Standard, a JavaScript linter. In my free time, I build Play, a music video app and NodeFoo, a Node.js documentation site.

I also maintain 100+ packages on npm. All my code is freely accessible on my GitHub page. If you like my work, support me on Patreon. Thanks to all my awesome supporters!

Lastly, I run Study Notes, a site to help students study better and get into college, and have done that since I was in high school myself.

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: