MVC/JQuery meets X-Mas Music Project
My friend Dave and I embarked on a project a few weeks ago, initially just meant to be an audio CD for our family, that included some rockin' versions of everyone's christmas favorites. As we started to record it, we got more and more excited about how it might turn out. Being the uber code master that I am, I opted to make a website... then in a blink, a friend who is incredible at Flash offered to help. This turned out to be a great experience for all of us, and the feedback has been tremendous.
I'm very proud to share with you (make sure your speakers are on) www.metalxmas.com
The code-behind
I wanted to have a spot for friends, family, and haters to post their honest ramblings, so I decided to go with the much-loved JQuery/ASP.NET MVC combo; what a joy as always. One bug I ran into, that seems to have been noticed before me, is the ability to cache the root page of your ASP.NET MVC site using the OutputCache attribute. According to this thread, the mvc team will have a fix soon. For the time-being, I ended up caching at the repository level by just sticking the data response from disk into the HttpContext cache to ensure I only read and parse my xml file every 10 seconds.
Nothing else too interesting came up. I added some spam protection, input validation (client and server-side), and HtmlEncoding to protect any hijacks. All in all, another great experience. I would share the code, but I have a certain Oxitephobia.
Scalability
In the hopes (and delusions of grandeur) of this thing being picked up as even a semi-viral hit. I wanted to make sure the site wouldn't go down. I placed the flash file, the four mp3 files, the images, and the css file on a CDN. I initially started with Amazon S3... but at 15cents/gig compared to SimpleCDN's 6cents/gig I had to switch. I've been very happy with my experience, and they even include $15 worth of free credit when you first sign-up. A friend of mine suggested I use the YSlow plugin to analyze my site; this ended up with the following configuration:
- HTTP Compression enabled on CDN (via url configuration) and IIS (c'mon, if you haven't done this yourself already, DO IT NOW)
- Set content expiration on all files on CDN to have 10 year expiration headers (I named the files themselves with version numbers to allow for forcefully expiring if needed)
- JQuery and SWFObject scripts hosted via google
- All scripts at the bottom
- XHTML 1.0 Strict validated by W3
This ended me with an A score with YSlow. I felt accomplished.
Parting thoughts
I hope you enjoy it, it's definitely meant to be funny - so don't take it too seriously. Feel free to pass it along to your friends and family!