Portfolio Teardown

Flash is amazing. For years it has allowed programmers to do what was impossible in the browser.

When it comes to games, rich media, and specifically video, it has been eating HTML and JavaScript’s lunch for years. No longer. With improvements in JavaScript speed, the creation of browser agnostic libraries to simplify development, and the wide adoption of AJAX for asynchronous communication, it would seem that JavaScript is back.

For a digital media company like Mightybytes, finding the right tool can be as involved a process as using it. Our original portfolio page was designed in early 2007 completely in Flash. While sleek and efficient, the design had a fatal flaw: the content was locked up in the Flash player, uncrawlable by the search engines. We decided to port this function into a standard language, and expose the content as HTML. JavaScript animation libraries allowed for much of the same interactive feeling that the original Flash movie provided. We couldn’t abandon Flash altogether, as we needed it to display video samples, at the very least.

We decided to create a Flash viewer, which would load video and image data, and allow the user to browse it. Viewer aside, the majority of the page was built in HTML and JavaScript, using the jQuery library. The JavaScript would use ActionScript hooks to communicate with the Flash viewer, instructing it which media to load. The Flash viewer would also communicate back to the JavaScript where necessary.

Building the JavaScript to behave like the previous interface was surprisingly intuitive. The trick to jQuery’s animations lie in the incremental adjustment of CSS rules over time. Want to slide something right? Incrementally increase it’s left margin. If your knowledge of CSS is good, you will quickly invent new ways to animate objects and containers on the page.

Once the data is in HTML it can be crawled by the search engines. All text for each entry is loaded into the page and hidden until needed. The reason we didn’t use AJAX to pull the entries in asynchronously is the same reason we pulled them out of Flash:

” ... like Flash, Ajax can make a site difficult for search engines to index if the technology is not implemented carefully.”
- Official Google Webmaster Central Blog [source]

Perhaps Google is capable of indexing this AJAX content, but Google isn’t the only search engine, and broad access to crawlers was a very high priority.

jQuery has revolutionized the way that I look at the page, much in the same way ActionScript revolutionized the way I look at the stage. All things once seemed static and mysterious under the browser’s hood, but cross-browser libraries have changed all that. Not only that, but they have sped up development time by making JavaScript write once, run anywhere. In short, JavaScript is amazing.

The new portfolio is slated for a Halloween launch.