This presents a problem as I would like to achieve backwards compatibility too. A simple solution for the bind method is:

var binder = $.fn.on ? "on": "bind";
$(this)[binder]("click", handler);

But I’ve also put together this more generic solution (this is completely untested, but something like this should work)

if(!$.fn.on) {
   $.fn.on = function(events, selector, data, handler) {
       if(typeof selector == "function") {
           return $.fn.bind.call(this, selector);
       } else if(typeof selector == "object"){
           return $.fn.bind.call(this, selector, data)
       } else {
           return $.fn.delegate.call(this, selector, data, handler)
       }
   }

   $.fn.off = function(events, selector, handler) {
       if(typeof selector == "function") {
           return $.fn.unbind.call(this, selector);
       } else {
           return $.fn.undelegate.call(this, selector, handler)
       }
   }
}

As of a few days ago, my campsite listing website has some new features. And not just any new features – these are (to the best of my knowledge) unique new features. The already pretty handy map of campsites now lets you…

• Filter campsites based on what facilities they have – you can either specify that your ideal campsite must have a certain feature, or definitely must not have it. Ideal for finding a campsite that allows campfires but no pesky caravans.
• View only those campsites that are open during the month you’re planning on holidaying.

There are one or two additional features hopefully to go live later this month, but for now please take a look and let me knnow if you have any feedback.

setTimeout (and setInterval too perhaps?) accepts a third parameter, an array of parameters to pass in to your callback function, so

setTimeout(function() {

myFunction(need, to, pass, these, in);

}, 200);

Can far more efficiently be written

setTimeout(myFunction, 200, [need,to,pass,these,in]);

Firebug’s console still works when you’re at a breakpoint (and can be very useful for debugging jQuery)

When debugging using firebug  and you set a breakpoint, when your code stops at that breakpoint

• you can still use firebug’s console to run any code you like
• “this” in firebug’s console is always set to what “this” is set to in your code

This means that you can play around with your variables at will at any given point in your code. It may be that I was a dunce for not knowing this, but I’ve never seen anybody I work with take advantage of these facts, so maybe it’s news to more people than just me…. and it’s bloody useful so I feel no shame in shouting about it.

For instance jQuery, for all its benefits, can be a pain to debug due to the fact that so much work is done by a single string (your selector) and on a single line of code (using chaining), and that jQuery often doesn’t give very helpful error messages. This means if you wnat to debug a certain line you have to either a) keep stepping in and out of the murky world of jQuery’s inner methods in order to find out where and why the unexpected bug is happening; or b) add temporary lines to your code which carry out only part of the single jQuery line, then reload the page to observe if they succeed or fail.

Not so if you set a breakpoint and then use the console. For instance, say a fairly complex line of jQuery misfires.

$(">p input:focus", myContainer).css("height", adjustHeight).children(".shrinker").remove().end().wrapAll("<div class=\"done\">");

By setting a breakpoint in my code on this line, and then copying the line into the console and running it, I can progressively remove/tweak bits until the error no longer appears; I never have to step through jQuery’s code and I never have to reload the page. Easy peasy.

You see, I’m not really that much of a geek – I own very few gadgets (quite possibly none, unless a mandolin counts) and find playing around with computers tedious (one reason I’m drawn to front-end development is it’s far removed from the confusing and arcane inner-workings of the computer). My family didn’t own a computer back in the 80s, when typing in commands at the prompt was the norm, so the whole experience is alien to me.

But, as of today, I’ve lost my fear… thanks to the humble batch file.

For anyone who doesn’t know what a batch file is, it’s a file which runs a series of command line statements. It has a .BAT file extension, and basic ones are very easy to write – the syntax is exactly the same as typing into the DOS command line itself… except you’re typing in a nice text editor so trivial things such as using ctrl+v to paste, using the cursor keys to move anywhere, and clicking and dragging to select text work. And, best of all, you only need type your commands once, into the batch file, and then just click on it (or a shortcut) next time you want to run it.

So, for example, every time I wanted to minify CSS and JS on one of my localhost sites before an upload to the live server I used to spend 5-10 minutes typing, making mistakes, swearing and crying. Now I just click an icon, and don’t feel the need to swear or cry half as much.

• Basic batch file tutorial (ignore the bit about autoexec – in modern windows you can run a batch file by just double clicking an icon)
• More comprehensive guide to commands and syntax

I also learned that if I use a “Today I learned…”,  terse but link intensive format to write blog posts I’m more likely to bother to share something useful (at least this once). So more brief but bountiful posts to follow… maybe.

As an example, previously I was always saving references to objects that a given object might need to interact with, e.g.

function Obj1() {
   this.container = $("#container");
   this.child = new Obj2(this);

   this.method = function() {
         //do something
   }
}();

function Obj2(parent) {
   var that = this;
   this.parent = parent;
   this.container = $("#childContainer");
   $(this.container).click(function(){
       that.alter();
   });

   this.alter = function() {
      this.altered = true;
      this.parent.method();
   }
}

var obj1 = new Obj1();

So what’s wrong with this? It’s difficult to say, but it always jarred with me that you had to pass in “this” as a parameter in order to make it easy to track back to the parent. And there will be circumstances where you’re creating an object that has to interact with lots of other objects and you have to either pass in lots of parameters when creating the object or do some on the fly processing to find the objects that need to be affected.

Now, here’s the same thing achieved using custom events

function Obj1() {
   var that = this;
   this.container = $("#container");
   this.child = new Obj2();
   $("#childContainer").altered(function(){
       that.method();
   });
   this.method = function() {
         //do something
   }
};

function Obj2() {
   var that = this;
   this.container = $("#childContainer");
   $(this.container).click(function(){
      that.alter();
   });

   this.alter = function() {
      this.altered = true;
      this.container.trigger("altered");
   }
}

var obj1 = new Obj1();

Ok, so what’s so good about this? It may even use more lines of code. But crucially it gets rid of having to store references to objects, freeing you up to create ever more complicated applications without having to create a web of dependencies that is difficult to maintain*. A good analogy I think is to think of an object triggering an event as a child shouting. If the child shouts when it needs something then it doesn’t have to constantly hold its parent’s hand; it’s parent comes to it on hearing the shout. And this gives the child freedom to explore the world on its own terms, and develop into a more rounded, unstifled human being… but I think I’m straying off the point.

So to sum up, javascript/jQuery custom events are a very useful feature.

And don’t smother your progeny.

*I’ve just re-read the API and found out that you can attach all manner of data to the event as extra parameters, which will also be very useful for this.

I used Zend framework for the back-end of the site and first time around I had a very rudimentary grasp of how to use it, but no real in depth understanding of its finer points. I’m now finding that I did a lot of things the long way round (eg typing out JSONs by hand  rather than using the Zend_JSON class to build them automatically). One major bugbear I had was that I was adding all my javascript and css files individually to the document head, and that the syntax for doing so in Zend wasn’t really any more concise than just hard coding <link rel=”stylesheet” ….

So now I’m revisiting Zend the first thing I’ve done is write a couple of view helpers to batch add javascript and css files, which I thought I’d share here.

<?php

class Zend_View_Helper_IncludeStyles extends Zend_View_Helper_Abstract {

   public function includeStyles($folder)
   {
     $results = array();
     $handler = opendir(getenv("DOCUMENT_ROOT") . "/css/" . $folder);
     while ($file = readdir($handler)) {
       if ($file != "." && $file != "..") {
         $this->view->headLink()->appendStylesheet('/css/' . $folder . '/' . $file);
       }
     }
     closedir($handler);
   }
}

<?php

class Zend_View_Helper_IncludeScripts extends Zend_View_Helper_Abstract {

  public function includeScripts($folder)
  {
    $results = array();
    $handler = opendir(getenv("DOCUMENT_ROOT") . "/js/" . $folder);
    while ($file = readdir($handler)) {
      if ($file != "." && $file != "..") {
        $this->view->headScript()->appendFile('/js/' . $folder . '/' . $file);
      }
    }
    closedir($handler);
  }
}

I am of course talking about my new website, of which version 1 is now released

ukcampingmap.co.uk

It’s seems like an obvious idea, and I for one can’t believe no-one else has done it yet (particularly as I’ve been ruminating over it for the past two years): All the UK’s campsites plotted on a google map. So much easier than trawling through directories of campsites available elsewhere on the internet, that have only rudimentary or difficult to use tools for finding a campsite in the location you want one.

It has a search (for postcodes, towns, villages, tourist attractions) and also has easy navigation for viewing a single region, county or tourist area (eg Snowdonia).

There’s plenty more work to do on it, but for the first time, after a few weeks of intense work*, I have something fairly stable which is, while still very basic, still a lot easier to use than other campsite directories.

Enjoy.

Oh, and God help us now the  Tories are in!

*well, maybe an hour a day

1. There’s so damn many of them
2. There’s no relation between names and appearance (as opposed to, say, #f60283 being guessable as a garish pink, closer to red than to mauve)
3. They’re difficult to preview and compare

So in the interests of productivity, quality and, dare I say it, working smarter, not harder, I’ve devoted some time to sorting out how I choose fonts, reduced to the following four steps:

1. Organise your fonts in themed folders
2. Find a good stand alone font previewer i.e. don’t rely on photoshop and windows’ poor tools
3. Narrow down to a short list
4. Use javascript to make quick comparisons easy

Read on if your curiosity is piqued.

1. Organising the fonts

Windows’s default font collection (and, I imagine, Apple’s too) and the collection of 2000 fonts I also use are organised alphabetically which is rubbish. Unless you have web design OCD you’re unlikely to want to narrow down your choice of font by it’s first-letter. But, on the other hand, it is difficult to categorise fonts; I’m yet to see a website do it effectively, and I’m not entirely happy with my choice. But in the end I plumped for the following: serif, sans-serif, script, stylised, symbol, stencil.

Stencil could easily fall within stylised, and stylised could easily be split into subfolders (Art Deco, Gothic, Celtic …), and I realised part way through that I should have a subfolder within symbol for fonts depicting alphabets other than Roman, but I think a minimal folder system would be serif, sans-serif and other. In the serif and sans-serif folders I included only sensible fonts you could print a book not aimed at children in, which I think is a useful distinction to make; often the hardest task when picking fonts is to find the one which is subtly different to other ordinary fonts, but somehow suits the design better than almost indistinguishable alternatives. Cutting out all the fancy fonts makes this task a lot easier.

So once you have all these folders put a copy of each font you have in one of them, and you’re ready for the next step. You don’t need to bother with installing them yet.

2. Previewing your fonts

My criteria for a good font-previewer are:

1. Choice of text to use for the preview
2. Choice of text-size and colour
3. Ability to organise fonts how you want them organised
4. Speed and ease of switching between one font and another
5. Ease of installing a font

Windows’ control panel fails to meet conditions 1 and 2, and Photoshop’s built-in font selector fails to meet 3 and 4, and they both force you to install a font before using it. The best free solution I’ve come across for Windows which meets all 5 conditions is Fast Font Preview.

3. Short-listing

Once you’ve got Fast Font Preview installed you can start picking your shortlist. Simply browse to your organised font folders, click on settings to type in your sample text, adjust the font-size to what you want, and double click on any contenders. Once the font is opened you can install with one click. While the font is open you’ll also want to jot down its official font name.

4. Use javascript to make comparisons

This is where I stop being pedantic and hopefully can be of some use. Insert the following script into the head of your web-page-in-need-of-a-font, substitute your list of font names and the id/tag name of the elements to be affected and, hey presto, a handy font-switcher should appear, making choosing exactly the right font much easier. If your web page already uses javascript then add the body of the function to your existing onload event. (NOTE: It tends to work better in Google Chrome than other browsers as Google Chrome seems to be a bit more forgiving when it comes to font names).

window.onload = function() {
 var body = document.getElementsByTagName('body')[0];
 var id = '';
 var tagName = '';
 var fonts = 'Comma,separated,list,of font,names';
 fonts = fonts.split(',');
 var elements = (id)      ? [document.getElementById(id)] :
                (tagName) ? document.getElementsByTagName(tagName):
                            [body];
 var switcher = document.createElement('DIV');
 switcher.setAttribute('style','position:absolute;top:0;right:0;background:white;z-index:200;padding:10px;');
 for(var i=0, il = fonts.length;i<il;i++){
   createButton(i);
 }
 body.appendChild(switcher);
 var buttons = switcher.childNodes
 loadFont(0);

 function createButton(pos) {
   var button = document.createElement('a');
   button.innerHTML = fonts[pos];
   button.setAttribute('style','display:block;padding:2px;');
   button.setAttribute('href','#');
   button.onclick = function() {loadFont(pos);};
   switcher.appendChild(button);
 }

 function loadFont(pos) {
   for (var i=0,il=elements.length;i<il;i++)
   {
     elements[i].style.fontFamily = fonts[pos];
   }
   for (var j=0,jl=buttons.length;j<jl;j++) {
     buttons[j].style.backgroundColor='';
   }
   buttons[pos].style.backgroundColor='yellow';
   return false;
 };
};

Fast forward to yesterday and I decided to finally bite the bull by the horns. The back-end of my latest educational endeavour was, I guessed, suffering in speed due to the fact that I made no use of JOIN on my MySQL tables; each time I wanted to get records related to records in another table I would use nested loops in php to get the related records for each row.

In my defence, I largely chose this approach due to another 3 major flaws in  Zend Framework\’s documentation:

1. It doesn’t explicitly mention that when you build a Zend_Db_Select query based on a Zend_Db_Table class (ie a Model) the FROM clause of the query is automatically filled in. Attempting to fill it in yourself causes an error.
2. It doesn’t mention anywhere that in order to use JOIN within a Zend_Db_Select query based on a Zend_Db_Table class you need to use the ->setIntegrityCheck(false) method. Without this all manner of confusing errors occur.
3. This wording: “You can not specify columns from a JOINed tabled to be returned in a row/rowset. Doing so will trigger a PHP error” , coupled with the fact I was getting lots of errors led me to believe that Zend had neglected to add JOIN functionality to its models, so I dropped that line of attack. (In fact, all that quote means is that you cannot change the default behaviour, which is to fetch all columns).

But now I have of course overcome all this, and have managed to eg reduce about 30 lines of code (get a teacher’s classes, then get these classes’ assignments, then get all the attempts at these assignments, and for each of these get the individual puzzle solutions submitted) to a single line using 3 RIGHT JOINs and one INNER JOIN. It’s much neater, and I can only guess at the vast improvements in speed it brings; my guess is “oodles”.

As well as improving my application, learning about Zend_Db_Select (the documentation to this is remarkably well written, considering the surroundings), via the __toString() method, has increased my understanding of the underlying SQL to the point where for the first time I can write non-trivial queries from scratch – eg updating a field based on a join with another table – , which is a great addition to my programming armoury.