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!