I took one (bad) computer science class in college, and I'm not a web developer. So in early 2008, when I decided I was finally going to build a web site I'd been fantasizing about for years, I was starting from scratch.
It's Back to School week here at Lifehacker, and while we've been focusing much of our attention on the college-bound, we consider education a life-long endeavor. With that in mind, here's a rundown of how I went from zero to a fully functioning, semi-successful web site in one year.
The site I had been dreaming of making ultimately became MixTape.me, a web-based music player where users can quickly create and share playlists with friends (see video above). This post isn't about how great MixTape.me is (I love it, but it's probably not the Next Big Thing), nor is it a snake oily, magic-pill-style guide to making your dreams come true. It's more about how to make something you love in your spare time, even if that means you're going to have to—*gasp*—work for it. It's also just my experience. Your mileage and preferred path may vary. So let's get started.
1. You Need a Goal and a Good Idea
Actually, rather than simply a good idea, what you really need is an idea you're passionate about. (Presumably you won't be passionate about a bad idea.) For my part, I wasn't happy with any of the online solutions for making and sharing playlists online, and I had an image of one in my head that I was in love with. I was really excited about the idea, so spending time learning, researching, and working on it in my spare time was almost always a lot of fun—even when I was banging my head against the wall trying to figure out why something wasn't working.
I had wanted to build MixTape.me years ago, and I even started a couple of times but ran out of steam. (It's not always going to be easy balancing a full-time job with a side project, no matter how excited you are about it.) By January of 2008, starting and finishing the web site was my number one long term goal for the year. Not for the month. Not for the first six months. For the year. I knew this was going to take a lot of time, and I gave myself plenty of time. (Setting a goal a year in advance is serious business, but if it's a goal that you consistently work toward through an entire year, reaching that goal by the end is seriously rewarding.)
2. Set Apart Some Time
It's not rocket science; if you don't set apart time to tackle your project, you'll never get anything done. Rather than wait for free time to show up, schedule time into your week where you know you can dedicate some time to your project. If more free time crops up, that's great—take it and use it to make a little more progress that week. Just make sure you set aside a minimum amount of time for your project every week.
3. Identify the Tools for the Job
Once I finally committed myself to this goal, I needed to choose the tools for the job. I'm not a programmer or web developer by trade, and I'd never built a web site before. I had, however, read plenty of buzz about a web development framework called Ruby on Rails over the previous few years, had read a few beginner's tutorials, and figured it was as good a starting point as any.
I knew that the site would require a lot of fancy JavaScript and AJAX, so for that I decided to stick with the Rails default, a JavaScript library called Prototype. If I were choosing all over again I'd probably go with the much more actively developed jQuery, created by the brilliant JavaScript guru John Resig, but Prototype (coupled with the Script.aculo.us effects library) is a fine choice.
Click to view
Last, I knew that to stream MP3s I'd need some sort of embedded Flash player—see embedded player above, for example—and, naturally, chose Adobe tools for this job (specifically Adobe Flex).
You'll inevitably need to pick out even more tools the further you get in the process of something like this, but you don't need to know them all off the bat. All I knew is that I'd need a good web development framework, a solid JavaScript library, and a Flash player that could play back the streaming MP3s—so those were the tools I started with.
4. Start Making Mistakes
It didn't take long to recognize that the web development aspect was going to be the most important part of the equation (I was building a web site, after all), so I started by looking at some Rails tutorials and building some sample applications. I made a lot of mistakes, did a lot of googling, and learned a lot in the process. For me, making mistakes and digging up solutions (normally using Google) was a huge part of the learning process.
5. Get Some Books
After I figured out some of the basics, I figured it was time to buy some proper books and get serious about learning. For my Rails edification I bought The Rails Way, though now I'd probably recommend the newer Agile Web Development with Rails. (These books are always going to go out of date in time.) Then I read/skimmed the book, start to finish, doing my best to get a fuller understanding of the framework as a whole.
While I did this, I paid close attention to anything that seemed particularly meaningful for the site I was hoping to build and took a few notes. Don't waste too much time poring over every detail of these books, though. You'll never learn it all just by reading. Get the basic ideas and then start applying them as soon as you can.
Note: Steps four and five, as I have them listed here, are relatively interchangeable depending on your style. I started by making mistakes until I had some idea of what was going on, then went to the books.
6. Stand On the Shoulders of Giants
Once you've finished your cursory education, it's time to recognize and appreciate what's really happening here: You're standing on the shoulders of innumerable excellent people who've gone before you. In my case, Rails is an open-source web-development framework built by the sweat of many dedicated developers. The Prototype JavaScript framework, likewise, was open source and built by a bunch of folks kind enough to let me, an inexperienced novice take advantage of all their hard work. In a nutshell, I would never have been able to finish this project in a year's worth of spare time if not for all of these generous people. Flash is really the only proprietary tool in my toolkit, and it was kind of an inevitability (though HTML 5 could eventually render the Flash player unnecessary).
Photo by Mykl Roventine.
Apart from the main players, though, you'll also take advantage of the work of countless others in the form of community-contributed plug-ins, tutorials, and even forums. You'll quickly find when you're building something from scratch that Google becomes your new best research buddy—not because Google's so smart, but again, because so many smart and magnanimous people have been there before you and were willing to share what they found so you don't make the same mistakes.
You'll continue doing this for the entire life-cycle of your work, whether you're coding your application or learning about how to build and deploy a server from scratch. (You don't necessarily need to build and deploy a server from scratch, but you're here to learn, right?) You'll work on a feature, run into a problem, and solve the problem with the help of the internet. Rinse, repeat. It's a beautiful thing.
Eventually, after hours and hours and weeks and weeks, you'll finally have something to launch. It may not take you a year—MixTape.me may have been a bit on the ambitious side for a side project—but regardless of how long it takes, if you've set aside time and plugged away at it methodically, eventually, you'll be ready to release something to the world. Your own little web baby. Be proud!
7. Profit
This is where I'd love to tell you that you'll instantly make millions off your great idea. I can't, of course, because that's not necessarily the outcome. My goal from the beginning with MixTape.me was to make enough from it that it would pay for itself.
When I launched it, I didn't have any ads—just referral links to buy MP3s on Amazon that have made very little since I launched the site. I recently added some Google AdSense ads to the site, however, and as of last month the site officially does pay for itself—something I'm very proud of.
But here's the part where I go all M. Night Shyamalan on your asses: You've been profiting from the start! (I know, corny, right?) Over the course of building something from scratch, you've learned a metric brain-ton of new things, acquired lots of new skills, exercised that mind of yours, made connections with other like-minded people, and hopefully come out with something you can be proud of. You can show it to the world and say, "Hey, I made this." And making things is a Good Thing.
What Else Is There?
I'm still working to make MixTape.me exactly the site I envisioned from the get-go. It's a long process, a lot of work, and something I still do in my spare time whenever I can. A project like this is never completely finished, and every time you get a new idea, you can build, tear down, or change what you've done before, continually creating new and exciting ways to flex your mind and abilities. (I'm eager to make mobile apps, for example, and am looking at using PhoneGap for that, but the framework doesn't seem quite ready for streaming MP3s over the internet. But I am eager and hoping that after I finish an iPhone app I'm not the victim of a bad Apple.)
I by no means think this whole thing makes me unique, and I know that there are tons of folks out there much more talented than I am at this kind of thing, so if you've ever endeavored a similar undertaking, let's hear about how you attacked it, how you went about learning something entirely new, and how it turned out for you in the comments.
Follow @mixtapeme on Twitter, and give MixTape.me a try for your music listening and sharing pleasure.