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?
- 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)
- 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).
- Use YouTube as audio source.
- Shuffle, repeat, show/hide video.
- Suggest songs to be added to playlist. (TODO)
- Keyboard shortcuts for power users.
- Share playlist on Facebook, Twitter.
- See what your friends are listening to. (TODO)
- 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.
- 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).
- All modern browsers.
- Internet Explorer 8. (TODO)
How We Built It
- 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.
- 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).
- The best.
- The only feature we used was the excellent “sortable” module.
- HTML5 feature detection in JS and CSS.
- HTML5 shiv so semantic elements like <header> and <footer> work in IE.
- Conditional JS resource loader for polyfills.
- Asynchronous script loading.
- Asynchronous non-blocking Python web server.
- Modules (tornado.database, tornado.httpserver, tornado.web, tornado.auth, tornado.ioloop).
- We run 4 Tornado processes, and use nginx to load balance between them.
- Process control system used to daemonize the Tornado server instances.
- We were doing raw SQL for a while, then we got tired of that and decided to go with an ORM.
- Server-side image resizing.
- Playlist file (.m3u, .txt., .pls) parsing after upload.
- Custom build script to deploy new code.
- Currently, the site goes offline for about 30 seconds whenever we deploy (we think this is acceptable).
- Artist, song, album information (summaries + pictures).
- Powers our search results.
- Uses HTML5 Local Storage to cache search results.
- Facebook Connect.
- Social plugins (Like button, Comments widget).
- Search API.
- Render data into a template and insert into DOM.
- Officially supported plugin.
- Adds support for querying and setting additional CSS properties.
- Min-width, min-height, max-width, max-height, border-*-width, margin, padding.
- Adds Edit-in-place functionality to forms (no page refresh).
Auto Expanding Text Area
- A la Facebook and Quora.
- Light-weight, customizable lightbox.
- High quality commercial icon package.
- All other images, icons, logo, custom missing album/artist images are ours.
- .com TLD redirects to our main .fm site, in case users get confused with the .fm extension.
- Purchased from a domain squatting company (BuyDomains).
- Commit early, commit often.
- 686 commits so far.
- We used GitHub.
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.)