Useful resources for frontend Developers

I’m always on the lookout for new and interesting ways to improve sites I work upon, the following are in my bag now, let me know if you have any to add:

Ideal Forms

What’s Ideal Forms:

  • Ideal Forms is a small framework to build powerful and beautiful online forms.
  • It’s very easy to use and requires minimal html syntax.
  • Absolutely everything is stylable with css, no images needed.
  • Support for IE 7+, Firefox 3+, Chrome 3+, Safari 3.1+ and Opera 11+.
  • Degrades gracefully with javascript disabled. 


Ever needed to automatically track downloads in Google Analytics and sick of adding the tags manually, well no more.

Google Analytics doesn’t track file downloads automatically. This guy needed unobtrusive and framework agnostic download tracking for Google Analytics. That’s when Entourage.js was born.

Goals for Entourage.js before a single line of code was written. Entourage.js needed to embody the following:

  1. Automatic Tracking
  2. Framework Agnostic
  3. Unobtrusive JavaScript
  4. Small Footprint

Stopping client side validation and postbacks

A couple of ways to stop client side validation firing, especially when using non controls:

Set the onclick event of the image/button etc to be onclick=”return false;” then instead of using the onclick event to fire a method, use the onmouseup event instead i.e. onmouseup =”javascript:do originalmethod(this);”

This will stop the page posting back but will fire the javascript method for the control in question. This comes in useful if you have a contact form with validation and a separate control i.e. for directions where you can enter a postcode and use javascript to fire off google maps in another page.

Detecting the Safari Browser to load scripts

I needed to detect if Safari was being used as there were some issues with styling on a website I was working upon, only on Mac Safari though!!!

The following code is what I use to detect safari and load the relevant script:

<script type="text/javascript">

 		//you are using safari, or at least you CLAIM to be
		document.write('<link type="text/css" media="screen" rel="stylesheet" href="/css/safari.css" title="example" />');

Add in the tags and set the path to the correct css file you wish to load. Same concept can be used to load javascript files.