JavaScript

Resource (external link)

Modernizr is a handy JavaScript library that detects the capabilities of the browser viewing your site, and then dynamically adds classes to the <html> root element on the page, based on what it detects. You can then write your CSS and jQuery selectors using these classes. An example use would be to detect support for the @font-face CSS property (I am doing that on this site). You can also use it to detect support for various HTML5 elements. I have also heard of people using it to make their sites more mobile browser-friendly.

Blog Post

This tutorial demonstrates one way of setting up an audio player for a page with multiple audio clips. The end result is the following.

Rain and thunder
Elevator door
Door handle creaking
Applause
School bell

Here's a little background on what led to this solution. Some time ago, I was asked to build a small site that included dozens of audio clips on one page. The client suggested I base this site on an existing site of hers that also had a page with dozens of audio clips. Visitors to the site could play different audio clips by clicking on a play button for each clip. The play buttons for the clips were laid out in a table similar to the one depicted below:

Table of audio clip play buttons

Portfolio Piece
  • Modified JavaScript provided by vendor that dynamically replaced Flash video players with HTML5 <video> elements. Modifications included JavaScript logic to display playlists (vendor version of script only displayed latest video from top playlist), additional CSS, and other changes.
  • Directed video producers to export video files in mobile-friendly MP4 format with H.264 compression.
Portfolio Piece
  • Served as primary technical liaison with vendor of search engine and search optimization tools.
  • Translated vendor's statements into information that non-technical business managers could understand.
  • Recommended user interface changes to vendor's proposed page designs, based on common user interface design patterns and general user experience principals.
  • Oversaw DNS and Apache mod_rewrite changes needed to integrate with vendor's product.
  • Wrote scripts to generate Media RSS (mRSS) feeds that matched vendor's detailed specifications for populating search i