For the rebuild of the photographer Nick Fleming’s website, I was pleased to discover this treasure chest of incredible tools which have come about in recent years.  The site employs many modern front-end web development techniques such as responsive design via media queries, font embedding, the HTML5 History API, HTML5 elements, and many CSS3 techniques (a more thorough overview here).

Thanks to the front-end web development tools below I was able to get away with quite a bit and end up with a fairly compatible and future proof website. Slowly but surely we’re approaching that utopian time where we are truly liberated from the shackles of browsers past!

HTML5 Boilerplate

The first time I came across this I thought “overkill!” and didn’t really give it a chance.  Now, I realise the error of my ways.  Understanding the code and tools they’ve put together is the single best crash course for best practices in front-end web development.

It includes an HTML5-updated and not overly aggressive CSS reset, .htaccess tweaks, tricks to streamline mobile viewing and much much more.   It’s not a plug and play solution for the lazy.  Spend half a day getting to grips with all that it does. It’s worth it.

Modernizr + Polyfills

Modernizr is a javascript library which primary allows you to test browsers for certain features and perform custom actions and script loadings depending on whether they are supported. Perhaps even more usefully, the custom builds on their website also allow you to include many other useful tools such as HTML5Shim which allows HTML5 elements to be used and styled in older versions of IE, respond.js which allows Media Queries (custom CSS for certain view-port size conditions)in IE.  It also includes a port of yepnope.js for rapid parallel javascript downloading (faster than concatenation in some cases).

Polyfills are code tools, usually javascript, which allow for modern HTML/CSS functionality in older browsers.  Modernizr maintains this handy list for your convenience.  Some work better than others though for the most part I’ve had great results (be easy on the flex-box polyfill).  More on the ones I used below…

One quick note, the development version doesn’t seem to include the “Extras”.  Stick with a production version unless you have reason to do otherwise.  Also, know that the more you include, the more demand is placed on the browser at DomReady time.  I found the CSS column to be pretty safe to include everything.  Be more selective in the HTML5 and Misc columns though.

CssCrush - Where have you been all my life?

• Minifies and concatenate’s @import’ed stylesheets into one single CSS file.  Uses PHP + caching.
• Expands and adds prefixes for browser dependent CSS (eg. box-shadow => -moz-box-shadow, etc.) so you only need type/change one
• Supports CSS variables and other bleeding-edge, potential future functionality

Now you finally may break apart your CSS files, as you would any other long and complex code base, without any optimisation losses.  If the PHP thing hits your performance panic button then you can simply use CssCrush manually and link directly to the consistently named output file.

FontSquirrel FontFace Generator

Now that  even IE loads the correct font from the CSS3 font-face hacks, self-served web typography has become practical.  They are include a list of royalty free fonts.

Polyfill: CSSPie

CSS3 compliant box shadow, text shadow, gradient, multiple background-images, border radius and several more properties in IE6-9.

Polyfill: Transformie

CSS3 transformations such as rotation and animation in IE.

Polyfill: Selectivizr

CSS pseudo-selectors such as “:last-child” in older IE browsers.

Polyfill: History.js

With HTML5 you can update the URL and the history without reloading the page or resorting to “hash-bang” urls.  This JS polyfill gracefully supports the HTML5 History API with optional fallback to hash tags for HTML4-only browsers.

CSS Browser Selector (Original JS version - my fork of the php version)

Similar to Modernizr but allows detection of different browsers and environments such as iPhone, Blackberry, iPad, webkit, etc. Useful, for instance, in adjusting for the discrepancy of how webkit and mozilla render custom fonts’ baselines.

Google Analytics (duh!) and Server Side Google Analytics (ooh?)

SSGA is a class for generating  Google Analytics tracking events via PHP.  It requires the Zend Library, but I was able to get it working with only a small subset of Zend (more info upon request).  I’ve used it to track downloads initiations and completions as well as download times.

jPlayer / CirclePlayer

HTML5, iPhone Compatible Audio Player plus a nice skin.

jQuery Tools (Overlay)

A set of high quality, extensible UI tools from the makers of FlowPlayer.  They include tabs, lightbox style overlays, tooltips, mousewheel and other utilities and more.

FancyBox

The popular photo lightbox plugin.  Simple and graphically self-contained – I used it for the “Behind the Lens” photos on the bottom of the site.

showAfterN

A soon-to-be-released jQuery plugin which easily allows custom actions to take place after a visitor has viewed N pages and/or been on the site for T time.  It’s a solution to the annoying problem of signup popups smacking you in the face the first instant you discover the website.  Instead we patiently wait until visitors get to know us first :)

Chrome Frame

Runs Chrome inside of IE6+.  Prompts the user on the page load and installs without admin privileges.  I took the decision to use it for IE8 and less on NickFleming.com.  Don’t be shy, you can do the same!

Front-end Design & Testing Tools

Bookmarklets and little web apps to make CSS3 and JS development  much easier…

• ReCSS - Bookmarklet to reload CSS without reloading the page
• FontStack Tester - Bookmarklet to let you dynamically “remove” a font from a stack to see what fallbacks look like
• CSS3Please.com - Tool for visually styling cross-browser CSS3 elements
• Border Image Generator - Tool for visually creating border image CSS3 from an uploaded graphic
• Gradient Scanner - Tool for creating gradient multiple background CSS3 from a reference image
• CSS3 Tricks Button Maker - Tool for designing/generating lush CSS3 buttons
• FlexieJS - Tool for testing and generating CSS3 Flex Box code.   I didn’t have much luck with the respective IE polyfill so I abandoned them in the end but neat tool nonetheless.
• JSFiddle - Javascript +  Framework (jQuery,Moo and many more) online sandbox
• TypeTester - A nifty tool for working out font stacks, sizes, spacings