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.

Related posts:

1. Eric Ries’s Lean Startup – Tech Talk

This was my second time attending Distant Worlds (I also went last year), and it was even better than I remembered. Nobuo Uematsu was in attendance again, and as expected, the crowd gave him an extremely warm welcome. At the end of the concert, Uematsu got a 4-minute standing ovation from everyone in the Final Fantasy fan-filled hall.

Here’s my favorite song from their CD:

Zanarkand (Final Fantasy X)

Here was the evening’s setlist:

• Opening~Bombing Mission (FINAL FANTASY VII)
• Don’t be Afraid (FINAL FANTASY VIII)
• Memoro de la Stono (FINAL FANTASY XI)
• Medley 2002 (FINAL FANTASY I-III)
• Main Theme of Final Fantasy VII (FINAL FANTASY VII)
• Prima Vista Orchestra (FINAL FANTASY IX)
• Kiss Me Goodbye (FINAL FANTASY XII)
• Zanarkand (FINAL FANTASY X)
• FINAL FANTASY series: Main Theme
• The Man with the Machine Gun (FINAL FANTASY VIII)
• Theme of Love (FINAL FANTASY IV)
• JENOVA (FINAL FANTASY VII)
• Ronfaure (FINAL FANTASY XI)
• FINAL FANTASY XIII medley
• FINAL FANTASY XIV medley
• Opera “Maria and Draco” (FINAL FANTASY VI)
• Terra’s Theme (FINAL FANTASY VI)

Hammock – Breathturn from David Altobelli on Vimeo.

Related posts:

1. Outside the Box
2. Big Bang Big Boom

However, artists shouldn’t chase down and sue every adolescent who copies their work without advance permission. The job of artists is to create stuff — and for that they should be compensated. They should not necessarily be compensated for the distribution of their work, especially when computers and the Internet make it trivial to distribute bits at a near-zero cost.

At the end of the day, artists should be paid when they make stuff. Mozilla is a great example of a company that understands this. Let’s say that software engineers are artists for the sake of this example (in many ways, we are artists). So, Mozilla engineers get paid when they’re designing, programming, and submitting patches for Firefox, Thunderbird, and SeaMonkey. Yet, when the time comes for the software to be distributed, Mozilla engineers are not paid anything. All Mozilla software is free (as in freedom) and open source, as governed by the Mozilla Public License.

I can copy Firefox onto a CD, give it to my friend, and he can install Firefox on his computer — all without permission from or payment to Mozilla. In this model, it’s the actual act of authoring a new work that is compensated, and not the mere distribution.

Why am I ranting about this? Well, I just stumbled upon an awesome little song by Nina Paley about copying being different from theft which made me think about the differences between authoring something (a creative process) and distributing it (a very non-creative process).

Here’s the song:

Nina Paley singing “Copying isn’t theft”

And there’s a cute little cartoon that goes along with it.

The original animated short

Unsurprisingly, there have been a ton of people who have remixed this cartoon, adding their own creativity to the original author’s work to create something new and different. This is an awesome example of the good that can come from the freedom to remix copyrighted works (although in this case, Nina released her work under a Creative Commons license).

Punk remix

Jazz remix

Piano arrangement

8-bit remix

Ragtime version

In french!

Indian remix

Subhi & Gurpreet’s version of “Copying is not theft”

UPDATE: I found another cool version of the song:

Nerdcore! Aww yeah!

Last Tuesday, I got to hang out with “the world’s 579th greatest rapper,” MC Frontalot, before and after he performed at a Stanford concert! He is best-known for coining the term nerdcore and basically defining the whole nerdcore hip-hop musical genre. As you can tell by picture above, I dressed appropriately for the occasion.

When a visiting Stanford graduate student contacted me with his plans to host an MC Frontalot concert at Stanford, I was ecstatic! I pledged $300 on behalf of the Stanford ACM to help pay for the concert costs (MC Frontalot’s price was very reasonable). Nerdcore culture is computer science related, right?

A bunch of other Stanford clubs also made contributions, including the IEEE, GSPB, CCRMA, Audio Engineering Society, and Hip Hop Congress.

“MC Frontalot is the nerdcorest of the core.” Just a sampling:

We deliver the hits that give the kids with the spectacles spectacular fits!
I seen one nerd foam at the mouth in his glee.
(It was me, in the mirror, rhyming, brushing my teeth.)
And now the heezy we’s off don’t babble 300 baud.
I get no error while compiling my rhyme.

Related posts:

1. Immortal Technique Comes to Stanford
2. DragonForce Concert!

Getting Immortal Technique's autograph for my brother.

Immortal Technique

Second famous rapper I’ve met this week: Immortal Technique — most famous for his political activism and political rap music. This guys’s a real rapper (unlike Chamillionaire, who is a commercial hip-hop artist sellout).

Immortal Technique is legit — he’s turned down half-million dollar offers to sign to major music labels like Sony and Def Jam because he doesn’t want to lose control over the content of his music. He’s often been criticized for the content of his music (listen to some and you’ll see why), but there’s more than a grain of truth to what he raps about.

I don’t have time right now to write a long blog post (I have 2 CS assignments due soon, 1 test on Monday, and 20 CS assignments to grade), so I’ll leave it at that. But, I encourage you to take a look at Technique if you haven’t heard of him before — he’s quite interesting.

Related posts:

1. MC Frontalot comes to Stanford!
2. Microsoft CEO, Steve Ballmer, is coming to Stanford

Ridin' Dirty with Chamillionaire

I just saw Chamillionaire and Quincy Jones III talk about entrepreneurship at Stanford!

Chamillionaire is most famous for his single Ridin’ Dirty and the Weird Al parody that followed it. Unfortunately, he didn’t rap for us — instead, he gave us a bit of hustlin advice. Ahhhh YEEEAH…

My favorite part of the event was when Stanford president John Hennessey asked the audience “How can we change the world?” and someone in the audience yelled “By ridin’ dirty!” Anonymity for the win.

Quotes from Chamillionaire and Quincy Jones III

Here are some quotes I found amusing from the event:

“All the other rappers called me a nerd for using the Internet.” — Chamillionaire (on promoting his music online)

“I hope that someone in this room wins the Entrepreneurship Innovation Contest …so then I can steal their idea.” — Chamillionaire (when asked to give some motivational advice to the students)

“My job was a lot easier before I was a boss.” — Chamillionaire (on becoming a manager at Chamillitary Entertainment)

“Why would I want to sell something with my face? I wouldn’t even wear something with my face” — Chamillionaire (on selling merchandise)

“It’s crazy… I’m in the business of making money. But not every dollar is a good one – sometimes it’s about values & authenticity” — Chamillionaire

“eHustling is available to everybody” — Quincy Jones III (on the power of YouTube as a way to go directly to customers)

Related posts:

1. Immortal Technique Comes to Stanford

AP Study Notes

I’m planning to completely rehaul my AP notes site, APstudynotes.org, and rebuild it from the ground up. Right now, it has a bunch of awesome notes for 3 popular AP classes (US history, US government, and English Language/Literature), but it’s still lacking in quite a few areas. The site is still in development, and I’ve got a lot of work to do on it, but it’s already been extraordinarily popular. Right now, it’s getting 1,200,000 page views and 520,000 unique visitors annually! I haven’t advertised it at all, but the feedback has been overwhelming. I get emails every week from thankful students, and even some from eager students asking why the notes for a particular AP class aren’t posted yet!

My goal was to keep adding new notes (my own or purchased/donated notes from other students), and over time, slowly build up a huge database of quality notes. At some point in this process, I realized that this method simply doesn’t scale very well. There are simply too many classes, too many textbooks, and too many types of notes (outlines, vocabulary, unit summaries, practice quizzes, etc.) for me to create and format all by myself. So, I stopped updating the site for a while.

My goal in re-hauling the site is to allow users to add their own notes to the site, and let the community decide what the good stuff is. My hope is that the good stuff will float to the top.

I have a a bunch of really neat ideas (I think!) that will make this the best AP notes site on the net. I don’t want to divulge too much here, but I believe that when it’s finished, it will be an invaluable resource to high school students taking AP classes.

Music site

My second project is still in the planning phase. But, for now, just imagine one website that will satisfy ALL of your musical needs: MP3 downloads, online streaming, concert tickets, music videos, album art, lyrics, music suggestions, and social features. I have a vision for an awesome online music experience, and I can’t wait to start working on this one.

I know that there are plenty of great music sites out there right now, like Lala.com, Last.fm, iMeem.com, iLike.com, Pandora, and others, but I believe that I can build something unique that brings plenty of new ideas to the table. Plus, I think this will be a great way to practice a whole slew of important web dev skills: Javascript, web crawling, data mining, large-scale database management, and more. I can’t wait to see where this idea goes!

Blog might not be updated for a while…

I’ll try to keep you guys updated as I work on these projects. If you don’t hear from me for a while, now you’ll know why: I’m coding like a madman!

If you have any ideas or suggestions for me, please let me know in the comments! Thanks a ton for your support!

If you’re not familiar with DragonForce, they’re an awesome power metal band from London, known for their over the top (oftentimes cheesy) fantasy lyrics. They have the fastest guitar solos I’ve ever heard and they’ve even been featured in Guitar Hero 3.

If you’re unfamiliar with DragonForce, go enjoy some of their music:

Through the Fire and the Flames (music video)
Operation Ground and Pound (music video)
Valley of the Damned (Live)
Heroes of Our Time (music video from their newest album)

And just for fun…
Through the Fire and the Flames on Mario Paint