1. Better Event Management with Prototype

    August 14, 2006

    Of all of the frameworks currently available for the rejuvenated Javascript language Prototype is the most popular. The developer, Sam Stephenson has now been employed by 37Signals and has been working on integrating his framework and its spinoff effects library Scriptaculous with Ruby on Rails, the massively popular new server side language. So its going to be around for a while.

    One of the most useful features of the framework is how it allows you to easily build classes to encapsulate your code and prevent it from interfering with existing or future code. We have used it extensively at Cimex with some projects making use of three or four different classes, all running independently of each other while addressing the same DOM tree. However the implementation of events and event listeners with Prototype can seem a bit convoluted and unless you have been there before and know the tricks of the trade, can be very frustrating.

    As a quick recap on creating objects with Prototype, and as a way to start building an example, consider the following code. I've created a new class called Popups and its constructor function, (which is always called Initialize - how American). Notice how I have set internal variables, (properties) using the this keyword - its an important part of developing classes in any language to be able to self-reference a class to call internal variables and methods or functions.

    var Popups = Class.create();
      Popups.prototype = {
        initialize: function() {
        this.popupCount = 0;

    Now I can add another method, (function) to my class and reference it using the this keyword in the same way. I also want to be able to call this method on the occurrence of a particular event, such as clicking a link. It is important to be aware of a number of things when doing this. The first is that an item can observe the occurrence of more than one event if implemented correctly. The second is that I want to preserve the this keyword so that it relates to the class and not the element that observes the event, but also still be able to access the element.

    var Popups = Class.create();
      Popups.prototype = {
      initialize: function() {
        this.popupCount = 0;
        Event.observe($("clickMe"), "click",  this.onClickTalk.bindAsEventListener(this));
        Event.observe($("clickMe"), "click", this.onClickPink.bindAsEventListener(this));
      onClickTalk: function (e) {
        this.popupCount ++;
        alert("You clicked the link " + this.popupCount + " times!");
      onClickPink: function (e) {
        Event.element(e).style.color = "#C09";

    The code above illustrates almost exactly how we should be observing events with Prototype. We use the Event.observe method to get an element to observe the occurrence of an event. We then bind the parent class to the occurrence of the event with bindAsEventListener(this) so we can still access variables within the class. Notice how we can also assign multiple methods to the same event. You can also see from the example above how to reference the trigger element, (in this case an element with an ID of clickme) using the Event.element(e) method.

    initialize: function() {
      this.popupCount = 0;
      Event.observe($("clickMe"), "click", this.onClickTalk.bindAsEventListener(this));
      Event.observe($("clickMe"), "click", this.onClickPink.bindAsEventListener(this));
      $("clickMe").onclick = function() { return false; }

    As usual, browser bugs mean this isn't the final code, and as is often the case the solution is to mess with our nice clean code. In this case, some browsers, (such as Safari) do not understand the Prototype method to stop the event after we have executed our code - the only way to guarantee that the original element event will not occur, (in this case the browser following the link to its URL), is to add an old style .onclick after you have attached the Event.observe methods to your element.

    Apologies for the awkward and technical article, but this was something I spent a long time solving for Flickrshow and now I have a solution I thought others might want it too.

  2. Structuring your CSS - A Slight Revision

    June 2, 2006

    With the forthcoming release of a new version of Internet Explorer, many of the hacks and workarounds used by site developers to target individual browser flaws and serve custom CSS are going to stop working. The developers of IE 7 have themselves warned that a number of the hacks, (such as those discussed previously on this site) will no longer work and should be avoided. They're suggestion as a replacement method is to use conditional comments, something we have been implementing at Cimex for some time.

    The following is an example in using conditional comments to serve CSS files to different versions of Internet Explorer. One caveat is that Internet Explorer 5 (OS X) does not make use of these conditonal comments and, if you are still supporting it, will need to be served CSS using an alternative method.

    <link rel="stylesheet" ... href="list.css" />
    <!--[if IE 5]>
    <link rel="stylesheet" ... href="ie-5-win.css" />
    <!--[if IE 6]>
    <link rel="stylesheet" ... href="ie-6-win.css" />
    <!--[if IE 7]>
    <link rel="stylesheet" ... href="ie-7-win.css" />

    The above code provides a default “list.css” stylesheet which in my template serves a stylesheet to reset all elements to their default values and a stylesheet for the site itself. Conditional comments supplement this with a specific CSS file for each browser version under Microsoft Windows. The OS X version is served its CSS file from within the “list.css” file.

    This method has worked for my testing of the preview of IE 7 beta 2. That doesn't mean it will work in the final version.

  3. Skip past content, not to it

    April 30, 2006

    This is a reproduction of an article written for the inaugural Cimex magazine in July 2006.

    The separation of a web site into structural, presentational and behavioural layers is the key to making a usable, accessible and future proof web site, and the fact that CSS and unobtrusive Javascript allow us as developers to do this has been a major factor in the uptake of web standards. The reason this separation is so important lies in how it allows so many devices to access your data in so many ways. Mobile phones see a different version of your site to Safari, which sees a different version to JAWS yet all access the same mark-up and the same URL. Maintaining this separation intelligently is the key to allowing as many users as possible to access to your data using any means they want.

    Many web developers are still falling quite short of this separation, not because they are using tables for layout, inline styling or obtrusive javascript but because they are ordering their mark-up not by how it is used but how they want it to appear. The structural layer of a web site should focus on enriching your content semantically to provide a user with the content they need in the most accessible way possible. This doesn't just mean using suitable heading hierarchies, lists and labels but also ordering your content properly to provide suitable focus to the most important parts of the page.

    Users who visit sites with devices that support limited or no CSS, or with devices that do not display your content visually will not see your content in the organised columns and colours that the majority do – they will be browsing your site in a single column ordered as your mark-up is. This often means they first receive a long list of nav items, logos and introductory paragraphs when what they really want is the latest article, train time or number of goals Thierry has scored today.

    There seems to be a growing trend for developers to include ‘skip to content’ links as a solution to this problem. These links bypass the nav and header elements and move the user straight to the content, but users still have to move around a page instead of being served what they want straight away. This technique also fails to account for other ways in which your data is accessed; search engines indexing your pages may rank prevalent content more highly for example, and they won't use skip links to pursue the content you deem most important on the page. Although I am not an SEO expert I can't believe that important, relevant elements at the top of a page won't have more influence on a search engine in how it interprets the meaning of your site.

    There are plenty of CSS techniques that can be used to separate your page structure from appearance—the excellent methods explained at Position Is Everything for creating columns in any order on the canvas, for example. Just remember that the most important column is the one containing what the users came for.

  4. A Javascript Experiment - Movement

    April 2, 2006

    After a friday spent researching alternative interfaces, (after being challenged by James), I've developed a nice little Javascript class which allows you to re-create a popular shifting effect, used to great effect on sites such as One Digital. I've created an example of the script in action showing the London tube map being shifted around.

    Install the Javascript object using the following code. The parameters passed are the name of the div you wish to shift and the number of horizontal/vertical stops in the grid. The Javascript deals with moving the target div into the middle of the page so alternative styling can be used if Javascript is not available. It also divides the page up into a grid of ‘stops’ for navigating around.

    <script type="text/javascript" src="includes/js/prototype.js"></script>
    <script type="text/javascript" src="includes/js/movement.js"></script>
    <script type="text/javascript">
      movement = new Movement("shiftMe", 9, 6);

    The CSS is fairly self-explanatory. The target div needs to be given a width and height to be divided up but the nav can be styled however you want.

    div {
      background: transparent url("../images/bg-content.gif") 0 0 no-repeat;
      border: solid 3px #27B1E6;
      height: 2048px;
      position: absolute;
      width: 3074px;

    The script uses prototype, (as all good Javascripts do), and has been tested and works in IE 6, IE 7 Beta 2, Firefox and Safari. Download it and have a play.

  5. Developing on OS X, pt. 2

    March 27, 2006

    This article relates to installing and working with Apache, PHP and MySQL in OS X 10.4. These instructions may be out of date on later versions of OS X.

    The first part of this tutorial focused on getting Apache up and running in a way that would hopefully reflect a live server environment. This second part will explain how to get PHP and MySQL, the most popular server side language and database combination, installed on your local machine.

    Installing PHP

    Many old-schoolers would download the latest source from php.net, compile it for their machines with custom modules and install it straight to Apache in OS X. As you may have guessed, this is not my way, instead I prefer to get pre-compiled packages from Marc Liyanage that can be installed into Apache like you would any other OS X package. He has all of the latest flavours available—I use PHP 5 locally to reflect my online environment. Using Marc's excellent packages, you don't need to delve into the httpd.conf file to register file extensions or any other dirty work.

    Update: I've just upgraded my work system using the latest version of Marc's PHP packages and short tags—the preferred method of echoing data in frameworks like CodeIgniter—are not enabled by default. To enable them you need set short_open_tag = On in the php.ini file, located in usr/local/php5/lib/. The value you need to change should be around line 141 and should be changed to the above. This allows you to use <?= ?> tags in your code.

    Installing MySQL

    Since version 4.0.11, Marc's packages have been superseded by similar packages direct from MySQL—these are exactly the same in that they allow you to install the MySQL database from a one-click package file, and they also helpfully add a system preferences button to give you a bit more control and allow you to run the database at start-up and restart the MySQL server.

    Administering MySQL Users & Databases

    As well as the self-installing package, MySQL have released a number of useful tools that make running MySQL a much simpler, and less command-line driven, task.

    The first of these tools is MySQL Administrator—an application that allows you to add and remove users and database schemas. This is the easiest way to maintain your user accounts on the local database and carry out simple database design tasks. I always change my root password from here as it takes far less time than going through the terminal.

    The second tool I use extensively is MySQL Query Browser, also from MySQL. This application revolves around database design and allows you to create databases, (called Schemas), stored procedures, (if you use MySQL 5) and add/edit/delete data from your databases. This was the main method of designing and altering the CheckWithMother databases during development. I should warn you that MySQL Query Browser does suffer from sporadic quitting problems—this is being worked on by the developers but can be quite annoying.

    Another advantage of both of these tools is that they allow you to access external databases if your hosting company allows it—this is very useful as I can modify data on a live database if such a need arises.

    There are other tools of note that can be used to play with MySQL—in the past I have used both CocoaSql and YourSql, but neither support stored procedures in MySQL 5 so became less useful when Dreamhost upgraded their versions.

    That's it! You should now be able to run local domains, administer your databases and run PHP-driven sites all form your local machine. Now lets hope someone makes it just as easy to install and deploy [Ruby on Rails] locally.

  6. Developing on OS X, pt. 1

    March 19, 2006

    This article relates to installing and working with Apache, PHP and MySQL in OS X 10.4. These instructions may be out of date on later versions of OS X.

    Mac OS X comes pre-installed with possibly the most popular, secure and easy to use web server available to the modern web developer, but it does take some tweaking to get it working as a suitable testbed and prototyping environment before you move our applications over to your live servers.

    Where To Store Your Documents

    The first step in setting up your server is working out what you need to host, where to put the files in Finder and how to see it in your web browser. Apache serves its documents from /Library/Webserver/Documents/ and this is the best place to store your files. If, like me, you use various hosting companies, you'll probably want to organise your files further—I tend to reflect my set up on the live server in my development server so it looks nice and organised in Transmit.

    Setting Up Nicer Local URLs

    Once you have created your folder structure and moved your files, go to in your browser and you should see your folder structure reflected through Apache. This is nice, but in order to view your local projects you will probably end up with long, ugly and possibly broken URLs. This can be fixed by setting up ‘host names'—local URLs you add only to your machine so you can use addressing conventions more in line with those in your live environment. To add or modify these host names, you'll need to do the dirty and open the Apache configuration file—the httpd.conf file. I recommend using [Textmate], (for all text-editing, not just this), in which case you need to select 'View hidden files’ in the open dialogue to get at the configuration file. It is located in /etc/httpd/.

    In the file, (around line 1060) there is an option preceded by a hash, 'Name VirtualHost *:80'. Remove the hash to enable this option, (hashes are comments you know). You then need to add a virtual name host for each of the URLs you wish to set up, as well as a default entry for localhost, the root of your Apache server, (located at

    # Default for - it makes sure that localhost works.
    <VirtualHost *:80>
      DocumentRoot /Library/WebServer/Documents/
      ServerName localhost
    # Add new hosts here for development
    <VirtualHost *:80>
      DocumentRoot /Library/WebServer/Documents/dreamhost/beseku.com/v9/
      ServerName www.beseku.dev

    The code above creates two virtual name hosts—the first is the default entry pointing at http://localhost and the second is for http://www.beseku.dev, a development version of this very site. The first parameter is the physical location of the directory and the second is the URL you wish to use. Take care when adding addresses that you don't use a URL currently in use on the web—your machine will always go to your files instead and you won't be able to view the site!

    Setting Up Nicer Local URLs: Netinfo Manager

    That isn't quite it for the local addresses, you have told Apache where to find the files for that URL but you also need to tell OS X that the address is a local one. Open Netinfo Manager, (Applications/Utilitites) and select the ‘machines' option in the second column. This will list a number of hosts your Mac uses to reference the web server. Duplicate 'Localhost’ and replace the name value in your duplicate with that of the host you created in Apache. Save this when prompted and restart personal web sharing. You should now have a test URL set up pointing to your development files.

    Using .htaccess

    Its very Web 2.0, (don't), to have nice tidy addresses without ugly query strings in the URL. To accomplish this, you will need to make use of the .htaccess file—a kind of local configuration file for the current folder. I won't tutor on the .htaccess file because I am no expert. The reason I mention them is because in Mac OS they are disabled by default. To enable them, you will need to once again open the httpd.conf file and alter another option.

    # This controls which options the .htaccess files in directories can
    # override. Can also be "All", or any combination of "Options", "FileInfo",
    # "AuthConfig", and "Limit"
    AllowOverride None

    You need to change this to the following to enable .htaccess files on your web-server.

    # This controls which options the .htaccess files in directories can
    # override. Can also be "All", or any combination of "Options", "FileInfo",
    # "AuthConfig", and "Limit"
    AllowOverride All

    Save the file and you should now have access to all the .htaccess voodoo you want. Roberts your father's brother, you've set up Apache to work like it should!

    The second part of this tutorial will focus on getting the latest versions of PHP and MySql installed on your machine and introduce some nifty tools you can use to make it all a bit easier to play with, (and help you to avoid the terminal).

  7. Simply applying ‘hasLayout’

    March 5, 2006

    If you need to apply the hasLayout property to an element in Internet Explorer but don''t want to add height or another potentially damaging CSS property, use the proprietry zoom:1;. It is an IE only CSS property and sets the hasLayout flag to true while adding nothing visually or semantically to the element. Saved my skin more times than I care to remember.

  8. Introducing FlickrShow

    February 28, 2006

    My previous attempt at gallery software was very popular and I still get requests for the original release even though it hasn't been updated since it was released. It wasn't, however, the solution I really wanted when I set out to make a Flickr driven slide show. My inspiration was and still is Slideshow Pro which I love for it's ease of use and the way you can just drop it into a page. I wanted a Javascript solution that would be as easy to use and provide a similar service.

    The Implementation

    The result of my work is a centrally hosted slideshow that retrieves a photo-set from Flickr and displays the images in a horizontal slideshow format. It can be dropped into a page with just a line or two of script, can fit into any shape HTML DIV and is completely skinable so users can link to their own style sheets if they dislike green. It is encapsulated as a Javascript object using a stripped down version of the excellent prototype library which should reduce any problems with other scripts on the page and ensure it is as compatible and extendable as possible.

    The Challenges

    The biggest hurdle I encountered while creating a Javascript based solution was the inability of AJAX to make queries across domains, (a security feature that does make sense but is very frustrating). To overcome this problem I developed an interesting method of loading subsequent Javascript files using a combination of PHP and Javascript - the FlickrShow script writes new links to external Javascript files into the HEAD with query strings appended containing photo-set requests. Flickarray then retrieves the information from Flickr before sending a customised list of Javascript method calls back to the browser.

    Other problems were more run-of-the mill. Getting the Javascript ‘widget' to display properly across browsers is still an issue, (the IE 6 factor) and there is some inflexibility in the script which means you can currently only call one Flickrshow per page.


    Apart from solving the issues mentioned above, I want to add a play/pause function to remove the need for constant clicking. I also want to retrieve more information on the current photograph, (tags, descriptions and notes) but there are issues with loading times at the moment.

    If you want to have a play I've set up a mini site at Flickrshow.com which is running a demo complete with some stunning photography courtesy of Limonada. There is also a form to help generate the code required to install Flickrshow on your website.

  9. The dangers of customisation

    February 10, 2006

    In the past few years emerging techniques have allowed web site creators to customise their user's browsing environment to an increasing extent. Cascading style-sheets have allowed authors to modify form elements and scroll-bars to more closely match the aesthetics of their sites, javascript can be used to alter window size and shape and the behaviour of toolbars, browser buttons and mouse actions.

    This amount of control is embraced by traditional designers who enjoy maintaining strict control over every facet of their work, and who in the past have struggled with the unpredictable nature of the Internet as a medium of design, but many web developers are wary of the damage this customisation could be doing for the user experience and the effect it could have on how web sites are currently being used. Is there a point at which you can ‘design’ and control too much of the users browsing environment?

    Before the growth of the Internet, users would generally only be exposed to user interface elements that followed their platform developer's Human Interface Guidelines. These guidelines regulate the behaviour of widgets, buttons, mouse clicks and other interactive elements to achieve a level of consistency across applications, allowing a user to become familiar and efficient when using their computer.

    With the growth in usage of the Internet, and web sites that do not follow such specific guidelines, it is important to achieve as much consistency with a users native platform as possible, so that familiar interfaces are present where possible, especially for the more important tasks such as inputting data and navigating information. While it is always important to create a tight and integrated visual style when designing for the web, (or any interactive medium), the demands of the user that the interaction can occur easily and efficiently are equally important. With regards to specific elements or behaviour on the web, the user will have more experience with the elements and behaviour of their own operating system than with your site specific customised controls and mouse actions. If you want them to interact with your site more efficiently, it may be wise to let them use what they know.

  10. Updates to FlickArray

    January 3, 2006

    This version, (and in fact FlickArray as a whole), has been discontinued in favour of the Flickr library written for CodeIgniter, discussed in more detail in this article.

    While building flickrShow I also made updates to the flickArray class. I added support for photosets and have updated method and variable names to make them more readable and logical. I am in the process of rebuilding it in PHP 5 to make use of the new XML and OOP functionality, which should speed it up somewhat and allow it to be extended in a logical fashion. Download flickArray 0.2.