It was a huge week at bit.ly. At the beginning of the week Google and Facebook launched URL shorteners at the same time we were launching bit.ly pro. As if that wasn’t exciting enough, I also launched my first product experience for bit.ly known as bitly.tv.
The response to bitly.tv has been very exciting and positive. It launched as part of labs.bit.ly, where I hope to be involved in many future experiments with bit.ly data. The bitly.tv User Interface is very fun and extremely different from anything I have built in the last few years, I had the opportunity to really flex my AJAX application skills.
The app uses quite a few of my favorite libraries and JavaScript projects, including jQuery, SWF Address, SWF Object and a few plugins I wrote specifically for bitly.tv. I also got my first taste of writing Python for a production level project as well as using the Tornado framework. In addition, I got the opportunity to finally use the new Google Closure Compiler. All in all, I think all of these technologies are excellent and make writing apps fun.
I also learned some extremely valuable lessons about the jQuery animation code and DOM interface. During the prototyping phase of bitly.tv, I noticed that jQuery was consuming a considerable about of memory because my architecture was not caching references to DOM elements. Essentially, I was crawling the DOM looking for the correct rows and columns to transition on every mouse over and mouse out. This was very slow in FireFox, but not very noticeable from a user experience point of view in Chrome and Safari. To help alleviate this issue, I began storing the references to each row and column in an array then did a simple jQuery.inArray(); check to skip the DOM API completely. This reduced the number of internal jQuery calls from around 32,000 to around 4,000.
In addition to the above, I also helped speed up the jQuery animation code by skipping the standard jQuery().animate(); and going directly to jQuery.fx();, which also had a considerable impact on the number of internal calls jQuery needed to make. I don’t recommend doing this, however, as it could cause compatibly issues with future releases of jQuery.
Take a few minutes and check out bitly.tv. We are already planning bitly.tv 2.0, and I would love to include your feedback.
