There are several things we constantly do on websites as standard, sitemaps, contact forms and similar. By themselves they aren’t very big jobs, but they eat in to project time.

We’ve now made the most common tasks into wildfire (v6+ only) friendly plugins:

Search

Most sites have a similar site search, so this is no abstracted in to a plugin (wildfire.search) and all you need to do is create the views for it.

Sitemap

A plugin (wildfire.sitemap) with built in google xml sitemap view automatically generated from the cms content is included (just need to create a sitemap page in the cms) along with a recursive html version that you can include where needed on the site. Obviously it doesn’t do the verification / signup for you so you’ll still need to do that in google webmaster tools.

Basket

Many recent sites have a basket of some kind, be it a lightbox, job basket, pdf download etc so here is a wildfire based one that can be plugged in with ease, just setup the config and your done. This only provides basket tracking, not payments etc, that will be a different plugin later on.

Dynamic content

An interesting stop gap until php gets traits fully stable. With several plugins needing to extend the content model and be used at the same time this model allows for fields and scopes to be added dynamically by other plugins, so no need keep extending models.

Advertising

Lots of sites like to have and sell advertising space on to others and this gives wildfire cms a basic module that allows adding and tracking of different types of adverts based on the sites needs. Provides the backend code, front end views will need to be created.

Forms

Covering off the most common types of forms used on websites: contact form, quick callback and email subscription. Provides cms modules and notification email hooks for each.

Competitions

A common request on sites is a standard competition forms. Generally requested as either multiple choice or free text, so this plugin makes use of the dynamic content plugin to create the ability to do either on any cms page. Entries are recorded with a module in the cms to view them.

Events

A standard events section for a website, hooks in to the dynamic content model and adds relevant fields and extra scopes. Provides a calendar partial and an ics view.

In between other projects I’ll try to make more of these so using a wildfire site is super easy.

It’s simple to include on your site and provides free postcode to address lookups in return for your sharing of similar data.

Installing is easy, a Google Analytics style javascript snippet gets you up and running immediately and there’s an API too for more in depth usage.

All the data is free for any use under the Creative Commons license.

Read more about freeing UK postcode data.

If you are looking for postcode to coordinate data you can find it on a mirror here.

As part of Bloor Homes project we’ve now launched the mobile site to suit those users who are on flakey 3G and don’t want to load up large images etc.

As your typical development has hundreds of plots, sometimes even thousands, one of the key factors to address is the laborious task of adding information for each of these plots. As you can imagine this data is very important to the people visiting but if you had to do it by hand it would take hours.

Obviously, we needed to automate this process; SVG’s to the rescue.

SVG import

All development layouts are already generated within Illustrator, so getting that data to a SVG is easy (that’s why we picked them). Before the original files are exported to SVG some extra data is added via attributes (plot number, number of rooms, house style etc) and each plot is grouped together. That file is then exported and uploaded to the cms.

Once on the cms the code reads and parses the SVG file creating or updating plots and matching them up with styles. This means your typical development is now ready to go in a few minutes.

Front end SVG usage

As the development now has an SVG attached to it, its time to do some cool front end things with it. All zooming & panning are built in SVG features, so thats great, but not very useful.

To give the layouts something extra they have some nice javascript interactions:

• Hovering on the plot listings highlights the matching area on the layout
• Hovering on the layout displays plot information
• The on hover details can be automatically opened via the url

Along with loots of other nice bits.

Vanilla Iterators

At the very start of wax we started to use the slightly documented RecursiveDirectoryIterator with the RecursiveIteratorIterator like this:

$dir = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($directory), true);

However, this gave us a big old problem with hidden files. The iterators themselves only ignore . & .. directories, everything else it will recurse into, including .git folders.

As wax has been around for a while with lost of changes using that iterator setup meant we were scanning over thousands of git files that we didn’t need to.

We improved this slightly by checking the file name inside the loop that traverses the $dir variable, but that had knock on effect of now having to fetch the file name of all the files, even when they aren’t php ones.

Custom Iterator

To try and combat the extra invocations and reduce the number of the iterations $dir causes we created a custom recursive iterator, WaxRecursiveDirectoryIterator, this is a simple extension of a standard RecursiveDirectoryIterator that overrides the hasChildren method:

class WaxRecursiveDirectoryIterator extends RecursiveDirectoryIterator {

}


This worked well, it reduced iteration count substantially by ignoring any folder starting with . (therefore ignoring everything in .git). The downside of this is invocation of getFilename & the performance drop of leaving the raw c class.

Keeping Standard

Recently we’ve started looking at some performance and functionality changes and as every page runs though the autoloader, it is very important to get it as quick and light as possible. The majority of the self cost was still the recursive looping.

After looking around for new ways of doing this, I found the RecursiveRegexIterator. As one of the more obscure iterators, there just isn’t much in the way of documentation or examples or how it works,

With some playing around we found the right order to use:

$dir = new RecursiveIteratorIterator(new RecursiveRegexIterator(new RecursiveDirectoryIterator($d, RecursiveDirectoryIterator::FOLLOW_SYMLINKS), $PATTERN), true);

Doing it this way allow for recursive scanning of the directories (so all files are found), matched against the regex pattern, and then a recursive iterator to go over the results.

While testing we found that the regex pattern used must be able to match files and directories (so it recurses) and this is the solution:

$dir = new RecursiveIteratorIterator(new RecursiveRegexIterator(new RecursiveDirectoryIterator($d, RecursiveDirectoryIterator::FOLLOW_SYMLINKS), '#(?<!/)\.php$|^[^\.]*$#i'), true);

The common problem, I can never remember them and end up redoing them each time, so I’m listing some here.

As most of these include /‘s & similar I normally use # as the pattern delimiter so I don’t have to back slash them and as I work mostly in PHP, the code will be PHP code.

URLs in plain text

With everyone wanting their latest tweet on their websites this is a pretty common case. You can use the plain text version of the tweet from the persons RSS feed (no need for oauth) and replace and urls with a working anchor tag:

$tweet = preg_replace('#(https?://([-\w\.]+)+(:\d+)?(/([\w/_\.]*(\?\S+)?)?)?)#i', '<a href="$1">$1</a>', $tweet);

Find date & time

Sometimes you need to pull out a date & time from a block of copy (like an email) in an automated way.

preg_match_all('#([0-9-]{4}-[0-9]{2}-[0-9]{2}\s{1}[0-9]{2}:[0-9]{2}:[0-9]{2}|[0-9-]{4}-[0-9]{2}-[0-9]{2})#i', $copy, $matches);

Roughly check for a postcode

Several of our sites have geo-location based services (like finding your nearest dealer for example) and like to incorporate those into the main search facility.

We take what you entered and use a regex to guess if what you typed conforms to a postcode.

preg_match('#^([A-z]{1,3}[0-9]{1,2})+#i', $search_string)

If it matches, then we look for a dealer nearby.

Previously all the areas had their own individual websites, domains, admin area and were totally separated. With this new site we have merged all of the previous sites under the single domain, so each share a common identity, layout, structure and functionality.

Since the original design (on the right) we have added some illustrated cityscapes matching the section of the you are viewing; so the bullring shows up for the west midlands, desperate dan for dundee etc.

To go with these we have also got a mobile version of the website coming out very soon.

Tech used

In previous posts I’ve mentioned changes like swapping apache for nginx and the improvements to the framework, well those are all in use on national express and working nicely.

Combining both layout cache with partial cache mechanism also means that (unless the cache is cleared) all pages are served from the cache with load times and size being tiny.

YSlow gives the site between 89 and 93 out of 100, depending on the page. Pretty good performance!

Layout Cache

The biggest gains come from using layout cache; almost the entire framework is circumvented with only the required files being loaded and ignoring the auto loader stage.

Layout cache currently supports both memcache and flat files, so if you have minimal memory you can use disk and vice-versa.

On each page load (when active) the cache engine is called, a unique identifier is created for the page (based on url, request data, session values etc) and then checked to see if it exists.

When it does, the time is then checked to make sure it is valid and then data is returned. This is were the big change is; traditionally if the data was no longer valid (too old etc) then nothing would be returned and everything would have to be recreated.

On larger sites this can lead to slow page loads every time a page gets beyond its lifetimes, and on sites with short lifetimes, that’s not a good thing.

In the Background

The updated version takes a different approach, as long as the cache exists it will always be returned, even if its out of date. This means that the user will always get the cached page, making for a faster experience.

However, you now have a site that is displaying old and out of date information; which isn’t good.

To get around this we still check the cache for validity, return it even if it’s no longer valid, but at this point a background process is created which allows the main code execution to continue, so there is no delay to the user.

The new process is a self contained script that excepts some meta data about the page in question so it can then go an retrieve the page with all the same information that was used to create it along with a flag to ensure that no cached values are used.

Results from this process are then used to overwrite the existing cache entry so the next time its called the new data will be present.

Partial Cache

Ideally it would be great to be able to recreate a cached partial in the same way we do for the layouts, but this currently isn’t working.

Instead, I find mixing in partial cache with layout cache is very effective and something I have in use on our current big projects.

Generalisation

Will soon be making a generic Curl class that adopts the same approach.

Nginx takes over

Normally you would have Apache listening on port 80, passing everything though to your cgi environment/scripts (php, python etc), but with all of those mod files & shared objects loaded an Apache thread can have quite a large footprint.

To avoid this we put Nginx on to port 80 in a very minimal config, then create a host file (similar to Apache, but different syntax). This is then the clever bit, you can check to see if the url being requested is a file, if it isn’t you use proxy pass to send the request to Apache.

It doesn’t sound like much, but if you have 3 style sheets (core, css3 fancy bits and one for old IE) a few images, some javascript files (tabs, sliders, all those other pretty ui bits) you end up with in the region 10-15 files per page that you no longer need to bother Apache about.

Considering the reduction in requests going to Apache, thats a whole lot of RAM being saved.

Apache sees double

With the proxy pass in place on nginx Apache still needs to be running to handle the heavy lifting side of things, so move it over to another available port (typically 8080) and make sure your vhost for the site is listening to the local host (127.0.0.1) as well as the system ip.

Once you’ve done that you good to go.

Theres a good (informative & accurate) – but ugly – guide on doing this at Debian Administration and sure plenty of other just as good (but less ugly) guides to be found via the magic of google.

Still not fast enough?

Say you have a really data intensive part of a site, say listing all the prices, specs, features, accessories & images for a car (yet another Subaru example..) and your doing the kind of processing and display of that data which would melt your cpu if you had to do on every page load. Well, cache is your friend.

Without sounding too much like a RoR programmer, throw hardware at it; in this case RAM.

By adding a little bit of abstraction to the code, memcache can be used to reduce database load, circumvent heavy looping algorithms and much more.

Lets say you have part of page that queries, loops and displays 3k features/specs; the database query running that would be a significant drain on resources, so lets avoid doing it. In fact, avoid doing the loop as well. We can run this query once, store the results with a unique id into memcache and you never have to worry about it again.

Memcache isn’t the only tool out there that does this kind of job, but it was one of the earliest and has the most features. You even go as far as sticking something like Reddis as a front end to your normal SQL queries as long as you have enough RAM free that is.

Last time I checked, the response time for the initial page response on Subaru was down to between 50 & 80 ms (average time to blink is about 300 ms).

I’ve used a cross between a 2 existing python code bases (neither of which I can remember at the moment, will find them and include links later). The first was a memcache cut down version of the torrent protocal, the second was a fully fledged gql version. I’ve mixed the 2 together to make a full torrent server based on memcache.

Have a look at my github project page for the code base.

As soon as I get round to finishing it I will write a more detailed post!

Personally, I don’t any linux server admins that run windows on their machine, but it could happen. With that in mind (and making the code easier) I changed it over so they are now designed to run on the server itself and I try to keep things like the admin password out of the history.

So far the new shell scripts do user admin (including mysql), apache vhost creation, git checkouts and a work in progress ubuntu 10.04 LTS configuration script.

User Admin

The user.sh bash script has create and delete options only. As these commands can be damaging, there is also an echo only option, By using -e the commands are simply printed out and not actually run.

To try and keep the admin passwords out of the limelight and the history, the first thing the script does is request the root password (you can use another user other than root if you want), at this point it copies to an internal variable which is piped in to other commands along the way.

The process is very similar to that of the previous scripts after that point.

Creating a user

By using the -c flag you signify your desire to make a new user; the command would look something like this:

./user.sh -c USERNAME PASSWORD

With USERNAME being the name of the user you want to create and PASSWORD is the password for that user. As leaving the password in the history isn’t such a good idea, you can exclude that from the command and the script will ask you for it. This way, the command would look like this:

./user.sh -c USERNAME

By default the scripts use root as the user to do the mysql setup, this can be changed by using the -r flag:

./user.sh -c USERNAME -r

Once -r is set it will ask you an alternative user account to use. If you’re not sure about what will happen with any of the commands, just pass along the -e flag:

./user.sh -c USERNAME -r -e

All the commands will be echo’d out instead of being ran

The creation process makes a new group (via groupadd), then a new user (with useradd), creates a mysql database (matching the users name) and then finally generates an ssh key file.

Deleting a user

Deletion basically reverses everything the creation side of the script did. It’s quick and easy to run:

./user.sh -d USERNAME

By default this leaves the database and mysql alone (as you don’t want to accidentally wipe all your data!), but you can force it to with -k:

./user.sh -d USERNAME -k

Then you can kiss goodbye to your database and the user permissions along with the normal user deletion.

As with the creation -e will echo it out and not run

Vhosts

As these are normally web servers, this is a quick way to make a vhost for your newly created user. Again, create and delete options.

Creating a vhost

Very simple:

./vhost -c WEBSITE USERNAME

As you might of guessed, WEBSITE is the full server name – google.com – for example, and USERNAME is (if you hadn’t guessed) the user name.

It comes with a couple of extra options, -i can be handy. This changes the ip address used on the vhost from * to the servers ip address (via hostname -i):

./vhost -c WEBSITE USERNAME -i

If your running something like ubuntu and your vhost path is not the normal /etc/http2/conf.d/ you can change that as well:

./vhost -c WEBSITE USERNAME -i --vhost_dir PATH_VHOSTS

Where PATH_VHOSTS is the full path to the folder (with the trailing /), so something like /etc/apache2/conf.d/

If you are happy and want to make that vhost live, you can use --restart to restart apache:

./vhost -c WEBSITE USERNAME --restart

The file created is WEBSITE-apache-vhost.conf

Deleting a vhost

Just use the -d:

./vhost -d WEBSITE

Again, you can make use of --restart if you are sure about it.

GiT setup

Most occasions you need to deploy your site to your newly created user, this lets you pull in from a git repo, but does presume that in the case of private repos you’ve given the new user access to the repo.

Once you have, just run this to set it up:

./git USERNAME ORIGIN BRANCH

Can you guess what USERNAME is? That’s right, the user you want to fetch the git repo with. The script makes use of su -c to run the git setup.

ORIGIN is a bit complicated, its the web accessible path that git can fetch the repo from, something like git://website.com/user/project.git, see the git docs for more info.

BRANCH is the git branch you want to checkout to; in the case of these scripts it would be on-server

There is also an optional parameter that you can pass in to place the repo in a sub-folder of the user, rather than directly on the users home. For example, if you are using public as the base of your project you can run:

./git USERNAME ORIGIN BRANCH public/

That will checkout your repo into public subfolder..

./git USERNAME ORIGIN BRANCH public/more/depth/

The bash makes use of mkdir -p, so go as deep as you like.

Ubuntu setup

To speed things along, I threw together most of the commands used for setting up a Ubuntu 10.04 LTS for running a typical LAMP stack.

The Files

All these scripts are sitting over on my github project page

Green fingered experts handling everything from patchy grass to forested glens. A husband and wife team founded in 2000 now grown in to a quality specialists in tree care and grounds maintenance (domestic, business and local authority).

One of very few websites that is running on our framework, but not making use of our cms. Mostly due to the extremely custom layouts of each page, but also the budget!

Really nice design, put together by Helen Williams with a helping hand from Gareth Brown.

It has some nice fading between images on the home page (jQuery for the win!) and good visual touches like the custom bullet point images.

This time, the client is handling the hosting and further work themselves, so its been built on software they request; umbraco. Not a bad cms, but .net is still overly complicated.

Doing simple things like recursive and nested navigations take more time than can believe, but on the whole the interface is reasonable, updated regularly and pretty stable.

The end result is good, the new version of the website is up and looking good!

More concerning, with changes coming thick and fast how do you make sure everyone has the most recent files?

Existing Tech

Any tech that can be used needs to be evaluated based on a few, simple, criteria. The “granny factor”, technical viability and cost.

The “granny factor” is simple: would your 70 year old grandma be able to do it without supervision.

From the geek side of things it needs to be pain free (no one wants to spend hours answering emails about it), capable of handling large quantity of files, massive individual sizes and be as fast as possible.

The Contenders

Email

The simplest (scores very high in the granny side of things, once setup), but not capable of handling the load; most providers have 2-5Mb limits.

Ftp

Technically good, simple for your bog standard server admin to setup and no maintenance problems, but have you ever tried to explain to your non-techy gran how to upload something using it? Yeah, not going to happen…

How about a comprise, something simple and something technically sound… How about a recent startup favourite..

Dropbox

Not the simplest to setup; a guide & instructions are going to be needed to get your granny going, but once it is installed it checks most of the boxes.

It’s easy to use on a daily basis; just drop it the files and it sync them for you to all the other relevant people.

Version control is supported, so if you delete the wrong file you can retrieve it without any problems. But that doesn’t make it perfect…

Firstly, size problems. The base level account is way too small (5Gb), the last campaign had 19 images and weighed in at 2.8Gb. What would you do if you had 3 going at once? You’d have to upgrade…

The largest size available is 100Gb, so thats not quite 20 campaigns…

Of course that size account is not free; it’s $19.99 a month; and thats the second problem, budget.

Access is also troubling. Without getting each client to create their own dropbox account and share folders with your account there is no way to limit access, not so good.

Torrents (peer 2 peer)

Yes, it’s a dirty word, synonymous with pirating; but lets look at this objectively and not though the eyes of the media / RIAA / Disney etc.

Simplicity is the key to the spread of torrents. If a 12 year old can use it to download the latest top 10 it’s a good bet your gran can handle it too.

When it comes to creating a new torrent it’s not quite as easy as downloading, but if you’re using something like utorrent there is a simple step-by-step wizard that takes care of it for you.

Like drop box, it high scores on the technical side. Setting up a torrent tracker is simple (and dozens of free / open trackers exist already), the network traffic can be shaped and throttled (your isp probably does that already) and (if you believe the RIAA figures) almost everyone will have the software installed and know how to use it.

As widely used as email, as simple as dropbox and without any charges… Sounds good..

If you need some level of access control you can; just email the torrent file to the correct people.

The only serious draw back is whoever created the torrent needs to be online long enough for someone else to download it.

Where Next?

As the assets we tend to handle are copyrighted artwork, unreleased advertising (on and offline), large data sets and such like a private tracker is the ideal solution.

I’ve made a start on creating a super-fast memcache based tracker running off google app engine (again free at a certain level) which is working nicely and once it fully complies with the torrent protocol I’ll be blogging about it here!

Until it’s all sorted out we’ll be sticking with dropbox, but the way forward (especially in web side of things) really is though distribution.

After everything is up and running on the main Subaru site we will pushing it out to all the dealer sites we run; so it wont be long till you can pester your nearest dealership about trying one.

EDIT (07/05/2010): Now we have some approved images we’ve added a gallery section to the Cosworth page

EDIT (01/05/2010): The Cosworth Impreza is now live and ready for you to buy! More details see the main site

The new, improved and re-written website for GBR (now GBR Phoenix Beard) is alive and kicking!

The New

Making use of css3 and html5 the new version is faster and slicker than ever (as long as you’re using a good browser).

All the pretty rounded corners, gradients and of course the drop shadows (inset shadows as well) the like are now all done via css3, with some nasty old school images for the Internet Explorer users out there (sorry, but you should use a better browser).

While I was at it, I also upgrade the site to run from the latest stable branch of both the cms and php wax framework to take advantage of some nice new improvements (I will back port them soon, honest!).

One of the handy features is a new helper function to figure out the sha1 one of the git repo and store it in a config var. Great to append on the end of stylesheet, javascript and the like to avoid pesky caching issues with clients!

Replaced

The code has been updated to be faster and leaner, maps (now using v3 of googles api), searching, property listing and of course the entire html.

With the short list announced for the inaugural UK City of Culture we’re happy to say that Birmingham made the list! The other contenders are Londonderry, Norwich and Sheffield.

We’ve put the website live, so get on there and get posting why you think Birmingham should win. You can also have a look at the advocates section for inspiration from one of the dozens of locals backing the bid.

About the site

The lions share of the work was done by Sheldon Els, I occasionally gave a helping hand when needed.

The site is running from the latest and greatest versions of our php framework and CMS, with some custom modules to control the cultural facts and the like.

Info

With something as large scale as a national bid to be the cultural centre of the country, there is lots and lots of information about the process. Very dry and boring, but the site has to contain that information, so theres plenty of copy and keywords at least.

Not all of the fact and figures are boring, there are plenty of tit-bits about Birmingham mixed in to keep it interesting and of course quotes and stories from the local celebrities backing the bid.

Joining In

If you don’t agree with their options, you can have your own say in the Join the Big Conversation section.

If you want to see Birmingham crowned the City of Culture for 2013 you can help out by uploading images and movies (to flickr and vimeo respectively) to the Share segment of the website.

Mash-tastic

The interactive side of things I’ve mentioned are mostly provided by external services at the back end with our cms pulling it together on the front.

The Big Conversation section makes use of Disqus masquerading as a very basic forum system. With the threaded nature of their comments and uniqueness based on the URL it works very nicely!

With this kind of high profile site the number of people uploading videos and photos could quite easily reach large numbers, that can cause performance problems and in worst case even take down servers. To avoid this kind of mess we make use of vimeo for videos (re-encoding is heavy work and these guys do it well), and flickr for photos. Both are sync’d with our cms to give a seamless appearance.

EDIT (Jul 30 2010): Well, Birmingham didn’t win, the City of Culture for 2013 is Londonderry, such a shame, but here’s hoping we get it next time!

As of yesterday (13/01/2010) this new version went live!

Most of the One Black Bear team have been working on the the Subaru UK project in some form. A large amount of my work for the project was spent adding functionality and content to the existing API, in particular adding all of the accessories information.

The accessories are currently being limited to the most recent models, but are quite extensive in what they cover with almost everything you could expect to see on a Subaru being shown.

As well as the accessories back end I also developed the accessories section with a pretty new interface allowing filtering, searching, baskets and generating requests to your local dealership.

Some of my favourite features of the new site is the 360 images and the range selector.

Since then my jQuery foo has improved a lot, so I thought it was about time to re make it. It should be much faster and handle larger datasets than before, it’s pretty straight forward to use, and this is how.

Working Example

All you have to do is include the jQuery and the plugin file:

<script src='http://www.google.com/jsapi'  type='text/javascript'></script>
<script type='text/javascript'>
  google.load('jquery', '1.3');
</script>
<script src='/path/to/plugin/file.js'  type='text/javascript'></script>

Once thats loaded in you then need to use the plugin on the table of your choice; in this case the id is exampletableone so using the default classes, all you do is this:

<script type='text/javascript'>
	jQuery('#exampletableone').tablehighlight();
</script>	

In order for the plugin to visibly change you need to do some styling (with the default classes) something like this:

<style>
.active_column_header, .active_row_header{background:#A3A9E1;}
.active_row_data{background:#B7BEFC;}
tr.row td.active_position{background:black;color:white;}
</style>

That’s all you need to do!

Customisation

There are several options you can change and configure so the plugin works the way you need it to; these options are passed as normal.

Options

You pass in an object, which by default has these values, each item has a comment explaining it:

{
//selectors are the jquery selectors used to find things
"selectors":{ 
 "headings":'.heading', //this is the row containing the main headers
 'column_header': '.column_header', //the actual column header
 'rows': '.row',  //rows containing the actual data
 'row_header': '.row_header', //part of the data row that acts as the header for that row
 'row_data': '.row_data' //parts of the row that are data
 },
"active_classes":{
 "all": "active", //applied to all active elements
 "column_header":"active_column_header", //applied to the currently active column header
 "rows":"active_row", //applied to the currently active row
 "row_header": "active_row_header", //the currently active row header
 "row_data": "active_row_data", //the data elements within the active row
 "current_hover": "active_position" //the element where you are hovering over
 }
};	

The Files

All the files that are used…

Summary

Browser compatibility is an on going issue, this is only guaranteed to work in Firefox 3.2 at the moment, working on rest!

Street view is one the most outstanding features of not just google maps, but any google project. Just think how many photos are needed, and then how do you stitch them together?

Then you have to blur peoples faces, watch out for public displays of nudity and a whole bunch of other checks.

Unsurprisingly enough getting street view on your google map isn’t any easy task. It has got a lot better recently, with more functions making life easier but nothing to match to complexity or the features of the main google maps site.

What’s Missing

In order to replicate the googles own maps there are certain key features that don’t exist by default, so I’ve had to copy it as close as possible.

The Little Man

The big one, that little man just above the zoom. There simply isn’t an API feature for that. This is why you don’t see any demos that have that man, it’s a Google only interface item.

At a guess, this is a heavily customised GControl with a GMarker mixed in to provide the draggable ability. Not something that can be replicated quickly.

Instead, the comprise is to use a GControl (to find the correct position) and a GMarker (to do all the hard work). The GMarker triggers the turning on of GStreetviewOverlay, loading of the GStreetviewPanorama and a few others.

Although in the example the little man never seems to move, but it does. It’s position is reset on the map move event.

Closing

One thing you notice when your using the API based street view is the lack of a little x.

Strangely enough, it is on the google maps one. With a bit of reverse engineering that problem was overcome (big thanks to Sheldon Els for sorting that part out).

Demo

Enough talk, here is the working demo.

It’s also easy to use..

Using Street View

To make it easy to use I’ve made a jQuery plugin wrapper for the custom SVC prototype object (which handles the grunt work).

First and foremost, make sure you are using v2 of google maps API (no street view yet in v3) and a recent version of jQuery. I tend to use google.load() for kind of thing.

<script type='text/javascript'>
  google.load('jquery', '1.3');
  google.load('maps', '2', {"other_params":"sensor=true&key=YOUR_GOOGLE_KEY"});
</script>

Make sure you have set up your markup to something sensible

<div class='example' id="map_street_view">
  <div id="gmap" class='gmap'></div>
</div>

As always, style the google map

#gmap{
  width:100%;
  height:350px;
}

Make a new instance of a google map

<script>
var MAP = new GMap2(document.getElementById("gmap"));
</script>

Configure the defaults for map, position, zoom etc.

<script>
var latlng = new google.maps.LatLng(52.502625,-1.893997),
    opts = {zoom: 12, center: latlng}
    ;
MAP.setCenter(opts.center, opts.zoom);
MAP.setUIToDefault();
</script>

Triggering street view at this point is easy, in fact, it’s one line

<script>
jQuery('#gmap').streetview({map:MAP, icon_image: "path/to/man-marker"});
</script>

All you have to do is pass in the GMap2 you just made and the path to the image file for the man.

Configurable Options

Say you don’t want to use the default ids that the plugin makes use of, well thats ok, you can just change them.

These are the default settings:

map:false,
icon_image: "street-view.png",
control:false,
selector_ids:{
  map_container:false,
  control_container:"sv_control",
  control_ui:"sv_ui",
  control_text:"sv_text",
  street_view: "gstreetview"
  }

What they mean…

• map – this is the GMap2 object
• icon_image – path to the image for the marker
• control – the custom SVC (and extended GControl) object
• selector_ids
• map_container – auto generated by called map.getContainer().parent
• control_container – id of container for the custom control (if the selector isn’t there the markup is inserted)
• control_ui – id of container for part of the custom control
• control_text – id of container for part of the custom control
• street_view – the id of the container for the street view flash object (if the selector isn’t there the markup is inserted)

The Files

All the files that are used…

I’m coming from a mostly PHP scripting background, so I might be missing something, but I will go over what I think is happening…

Raw Tools in App Engine

So you can get hold of simple data easily enough, you can query the request object thats attached to self, like this:

class Home(webapp.RequestHandler):
  def get(self):
    self.response.get('x')

For most cases, that works. However, I have a cases that don’t… The main one being multi-dimensional arrays as get data. My query string looks a bit like this:

?names[0][firstname]=foo&names[0][surname]=bar&names[1][firstname]=first&names[1][surname]=last

With PHP you would simply do $names = $_REQUEST['names'] and PHP works out the array for you. Not so in Python. Calling self.request.get('names') returns an error, saying that index doesn’t exist.

Python does have other helpers which are more useful, like self.request.GET.items(), that lets you loop over the entire GET data set, and if you enumerate it you get key value pairs:

for key,value in enumerate(self.request.GET.items()):
  print key
  print value
  

Success, or so you’d think… However, the key is not very useful, it comes out as the full thing. So, the first key is [0][firstname] which is about as useful as a chocolate tea pot when I’m trying to make a multi-dimensional array.

In the end, I couldn’t find a way to handle incoming data structured like that. Instead I had to revert to using single names like this:

?firstname=foo&surname=bar&firstname=first&surname=last

This is not something I like. What do you do if some of the fields are blank? Or if the order is jumbled, with the second surname belonging to the first firstname.. It doesn’t handle it..

The best I could do to take care of this and get a nicely formatted array of data was to parse it based on the keys I want and use self.request.get_all in a nested loop.

The Python Class

#class to handle parsing of post/get data in to multi arrays
class ParamSort():
  def __init__(self, structure, request_obj):
    self.structure = structure
    self.request = request_obj
    self.results = []

  def sort(self):
    grouped = {}
    lengths = []
    results=[]
    #convert the post data to key based array
    for i, v in enumerate(self.structure):
      grouped[v]=[]
      lengths.insert(i,0)
      for f in self.request.get_all(v):
        grouped[v].append(f)
        lengths[i] += 1
    #convert the grouped to a multi dimensional
    for x in range(max(lengths)):
      tmp = {}
      for f in self.structure:
        if len(grouped[f]) > x :
          tmp[f] = grouped[f][x]
      #if everything mapped properly, save this sucker
      if len(tmp) == len(self.structure):
        results.append(tmp)
    return results

Example use:

dbkeys = ['firstname', 'lastname']
sorter = ParamSort(dbkeys, request)
res = sorter.sort()

As I’m fairly new to Python, I might be totally wrong and missing something that everyone else knows… Please tell me if I am!

The Files

All the files that are used…

EDIT (08/06/2010): It seems I was indeed wrong, there is a utility for this built in to the cgi module (and in 2.6 the urlparse module) called parse_qs that does this for query strings (GET data). I’ll presume there is something similar that does the same for post data.

With more people using the API I’ve started to receive requests for an up to date schema, so time to automate that as well…

Thankfully I found a very useful website that you can feed a url of some valid xml and it will give you a schema so all that need to be done was write some code to post data to the form and parse the result.

Now every time the API is updated new examples and schema are automatically downloaded!

The Code

The code reads a yaml array (from a local config file), posts the url for the xml file to the website, and saves the schema to a relative folder called ‘schema’.

Config

key: "api-key"
base_url: "http://api-key.api.co.uk"
schema_pages:
  news:
    url: "/news/limit/4.xml"
    filename: "news.xml"
  events:
    url: "/events/limit/4.xml"
    filename: "events.xml"
  offers:
    url: "/offers/limit/4.xml"
    filename: "offers.xml"
  cars:
    url: "/cars/all/limit/4.xml"
    filename: "cars.xml"  

Ruby Script

#!/usr/bin/ruby

require "yaml"
require "open-uri"
require "net/http"
require "CGI"


def get_schemas(schemas, baseurl, basefolder)
  generator_url = "http://www.xmlforasp.net/CodeBank/System_Xml_Schema/BuildSchema/BuildXMLSchema.aspx"
  schemas.each do |name, info |
    xurl = "#{baseurl}#{info['url']}"
    puts "  #{name}\n"
    result = post_schema(generator_url, xurl)
    if result
      writeOut = open("#{basefolder}#{info['filename']}", "wb")
      writeOut.write(CGI.unescapeHTML(result))
      writeOut.close
    else
      puts "!! ERROR - #{name} !!\n"
    end
  end
end

def post_schema(form_url, xml_url)
  #the __VIEWSTATE & __EVENTVALIDATION might change, not sure
  params = {'txtXML' => xml_url, 
            'rdoList'=>0,
            'btnGenerateSchema' => 'Generate Schema',
            '__VIEWSTATE' => '/wEPDwULLTE0NDc4ODY1NjZkZD8xIV1mw4aDZAU2p55EgLM0Vbe0',
            '__EVENTVALIDATION' => '/wEWBgKyvaD5BQKj+/r1AwKM1c/8AwKkyPGDAQK7yPGDAQK0p9vtDZZo8t55cXeilmxwatAyFeQD0njY'

            }
  uri = URI.parse(form_url)
  req = Net::HTTP::Post.new(form_url)
  req.set_form_data(params)
  res = Net::HTTP.new(uri.host, uri.port).start { |http| http.request(req) }
  raw = res.body
  if res.body =~ /<textarea name="txtSchema"[^>]*>(.*?)<\/textarea>/im
  	return $1
  else
  	return false;
  end
end

#MAIN
config = YAML::load_file("./example_config.yml");
schemas = config['schema_pages'].sort
puts "-- generating schema\n"
get_schemas(schemas, config['base_url'],"./schema/")
puts "-- done\n"

It won’t make the directories for you, and will fail if it doesn’t have permission to write to that folder.

The Files

All the files that are used…

Firstly, I’m using yaml because the documentation site is running on github pages and I can therefore use a global _config.yml file and have access to the same data within the actual pages.

This makes it easier for me, as I can just reference the config array within the site pages; so no need to remember the paths etc.

Normally for such a script I would write it in bash shell, but I needed to do it quickly and a commonly used language with built in yaml parsing would be needed. Python came close, but the library isn’t install by default, where as the Ruby equivalent does; so I’m using Ruby for it.

The Code

The code is fairly basic, but hopefully others might find it useful. The Ruby file reads in a local _config.yml file and uses the resulting config array to fetch and save files to relative directories.

The Config

Just to keep the page short, I’ve only put a couple of pages to fetch, but you can use as many as you want.

key: "1234567890"
base_url: "http://1234567890.api.co.uk/"
pages:
  news:
    url: "/news/all.xml"
    filename: "news.xml"
  offers:
    url: "/offers/all.xml"
    filename: "offers.xml"

The Ruby

The files that are downloaded are saved within a local folder called results; as this was a quick script I left it hard coded, feel free to change it.

#!/usr/bin/ruby

require "yaml"
require "open-uri"

def fetch(xmlfile, localname, replace)
  writeOut = open(localname, "wb")
  writeOut.write(open(xmlfile).read)
  writeOut.close
end

def download(examples, base_url, replace)
  examples.each do |name, info|
    puts "  #{name} \n"
    fetch("#{base_url}#{info['url']}", "./results/#{info['filename']}", replace)
  end
end


config = YAML::load_file("./_config.yml");
examples = config['pages'].sort

puts "-- fetching examples\n"
download(examples, config['base_url'], config['key'])
puts "-- done\n"  

The Files

All the files that are used…

The new features don’t stop with just the website though; 360 photography and accessory data are all running from the IM Group API sitting there for anyone authenticated person to use.

When I’ve not been doing that I’ve been working on the new Isuzu dealer websites which uses some lovely css3 features to do gradients and nice touches like that.

I’ve gone for recycling per region during 2005/2006 in 1000s of tonnes and plugged in a few different chart types. When I get a bit more time will improve this.

All the javascript is inline (I know, very naughty..) so feel free to use whatever you want; although some backlinks would be nice!

Summary

Working Example

Using the plugin is straight forward enough. Once you have a form, like the one above, you need to load in the google language API, this plugin and on document ready call the translator plugin.

You should end up with something a bit like this:

<script src='http://www.google.com/jsapi'  type='text/javascript'></script>	
<script type='text/javascript'>                      
  google.load("language", "1");
</script>
<script src="http://github.com/charlesmarshall/jQuery-Translator/raw/master/jquery.translator.js" 
  type="text/javascript" charset="utf-8"></script>
<script type='text/javascript'>
jQuery(document).ready(function(){
  jQuery('#translation_form').translator({
    "origin": '#translate',
    "origin_language": '#from_lang',
    "result": '#result',
    "result_language": '#to_lang'
  });
});
</script>  

For a list of all supported languages have a look at googles languages enum

Plugin Events and Triggers

The plugin should be called on the parent form as it captures the form submit event and runs the translate. It also runs the a translation call on the following events:

• Form submit
• Pressing space or enter within the origin field
• Changing either the source or result language (these should both be drop downs)

Language Sniffing

As part of the google API you can leave the origin language blank and it will try and figure it for itself. It’s very simple to do with this plugin, just don’t make a selector for it!

To do this, you just need to modify the call to translator to have an empty origin_language parameter:

jQuery('#auto_translation_form').translator({
  "origin": '#translate_from',
  "origin_language": '',
  "result": '#auto_result',
  "result_language": '#dest_lang'
});

The only issue that does sometimes come up is with using UTF-8 characters and how they are displayed in text areas and the like.

Translating Page Content With a Fixed Language

If you want to translate a static segment or an entire page, this plugin can do that also. Again, all you need to do is modify the call to translator plugin. Here is an example:

Hello, my name is Charles.

Here I change the selectors and manually pass in the language codes to translate between as such:

jQuery(document).translator({
  "origin": '#my_english_version',
  "origin_language": 'en',
  "result": '#my_french_result',
  "result_language": 'fr'
});

Translating Blocks of Markup

As the google API supports and preserves markup with the string that is passed along, it is pretty straight forward. In this example the outer containers contents is translated from English to Spanish and maintains all markup.

And it works in exactly the same way as the static selector with just one change:

jQuery(window).translator({
   "origin": '#preserve-markup',
   "origin_language": 'en',
   "result": '#preserve-markup',
   "result_language": 'es',
   "after_translate": track
 });	

As you can see, the origin and the result parameters are the same selector, resulting in a replacement.

NOTE: I update the plugin to do this due to a request from Parthiban , hope this works for you!

Translating Page Content With a Selectable Language

You can also mix and match the two methods, having static content but swapping between languages like below:

Translation is the name of the game!

This is achieved very easily by switching the result_language parameter to a selector while keeping the origin_language as ‘en’

jQuery('#static_content_translation_form').translator({
  "origin": '#static_english_version',
  "origin_language": 'en',
  "result": '#dynamic_result',
  "result_language": '#trans_to'
});  

Hooks

The plugin gives the ability to add a post hook on a successful translation. On this site for example I track (via google analytics page events) what is translated from each query.

In normal jQuery style you can pass in a function as a parameter to be run like this:

jQuery('#static_content_translation_form').translator({
  "origin": '#static_english_version',
  "origin_language": 'en',
  "result": '#dynamic_result',
  "result_language": '#trans_to',
  "after_translate": function(original, translation){alert('translated!');}
});

Both the original text and the translated text is passed in to the function.

Notes

The only issue that I know is that the plugin works only once per selector, so you can’t use it on jQuery(document) more than once for example.

Download

Grab the plugin here

Having a scan over it the main problem I see is that instead of storing diffs between the versions of file they are storing the entire file again as a new object. As storage on s3 is insanely cheap anyway, you wouldn’t think its that big a deal, but think about it for a second.

If you are editing a high res video and storing it on s3, you could see your bills sky rocket. Lets say the video is 1gb, and you need to make lots of amends and get client approval for each one. With normal version control (something like dropbox I think is a suitable comparison here) you’d only be saving the changes between the original file and the current one. With s3 it’s an entire new file.

That is where you could easily end up using 10gb of storage by just amending a single file a few times. I can understand why, storing entire copies is easier then trying to figure out a diff engine capable of handling obscene file sizes.

Notifications – aka Spam Galore

Every time any of my friends or groups did anything you can bet your life I’d get a notification about it. I don’t care if you’ve just bought 5 more sheep or got a full house, I’m not interested!!

You can turn most of the email about these off, but every time you log back in you’ll get dozens of them in your face with each application wanting you to join up.

This is only a minor annoyance when you log in regularly, but when you only use the site once a week you can imagine the amount of spam have to wade though before can find anything useful.

Eventually facebook introduced a blocking ability, so you can stop those annoying apps slightly, but some still make it though :|

Applications and the Zynga Saga

This was probably the final nail in the coffin for my account. The amazingly bad practices that one of the largest facebook app providers admit to is shocking. Everything from selling on user data to trying to push scam offers!

When you add an application to your account, you gave them permission to do what the hell they liked with your personal data. Combining that with Zyngas ploy to make money by scamming users enough was enough.

Techcrunch covered this far better than I ever could, so have a read of what Zynga thinks about you really:

• I Did Every Horrible Thing In The Book Just To Get Revenues
• Zynga Scamville

Sadly, these practices were known about by facebook, and they didn’t (and still don’t) care. Why? Because the make a small fortune from advertising on those games.

The Almighty Dollar

This is what facebook guys really want, above all else. They don’t care about you, or how they make their money as long as they are rolling in it they are happy.

The most recent and worrying one would have to be Harman Bajwa and his vanity url that was nicely sold to a corporation…

Delete and be Happy!

Stop spending hours on end on that nightmare of a website and get out more! Follow the instructions on this facebook group (as they like to make it hard for you to leave) or use the amusing web suicide machine for a laugh.

Unsuitable and One Black Bear have got involved in setting up and launching a company to help people better manage their money and educate school kids on money matters, so we hopefully don’t see the financial meltdown again that we’re just going through.

A new website is on the way but in the meantime we’re trying to build up a social side to it.

If you’d like to get involved as a Beta tester once the site goes live, you can sign up here

WAA used to have a reasonable website (I didn’t like all the pink). It was, most importantly, a valid XHTML site with only a single bit of flash. This version of their site had plenty of content, was updated regularly (until Chris Tomlinson left) with a really good page rank in google (If memory serves it was a 6).

What replaced it (not long after I left) was an abortion of a flash website, which I have already berated in an earlier post. Flash websites can still do well, if content is exposed properly. Theirs wasn’t. The number of times it was updated you could count on a single hand and they had removed pretty much every single article that had ever been written for that site. This is old ground; I’ve already moaned about it many times.

Towards the end of last year (2009) they launched a new website; and it wasn’t flash! Instead it is a good quality html website with some fresh content. A positive move for a change; lets see what happens.

Site is set up and running on the quick & simple github pages and I’m slowly adding content as I get it. Hopefully it will help get off the ground.

Git hub pages have now become my choice for any simple project website (just like my little front end to google’s closure optimiser) and to that end I’ve found a whole bunch of useful resources which will hopefully save digging around in the future.

• Guide to liquid
• Standard template variables
• Basic functions

So now I know how to use them well; just need to make a better design for this blog!

Google have released their internal javascript library (no, this isn’t about GWT, that is something different) and called it Closure. Odd name and one that is already heavily in use

• Closure – the first-class function
• Clojure – the lisp dialect
• Clozure – another lisp implementation
• Closure – a shutdown tool for X windows
• Closure – a web browser
• and a whole load more ..

Naming issues aside, the library offers a whole host of functions (like all the other major libraries) for dom manipulation, event handling, asynchronous calls etc. There are a couple of nice extras that it does have over other libraries.

Require and Provide

Instead of loading the entire library in (which would be huge) you can just load the bits you need using the require call. Nice start, but it gets better.

If you load part of the library that requires another part of the library google sorts that out for you and loads in for you; now that is smart.

It does this using the .require & .provide methods included in the base closure file.

In the closure files the first thing each one does is tell you what it does and then what it needs…

goog.provide('goog.math');
goog.require('goog.array');

No more missing dependancies!

Compression

As part of the closure library google they also made a lovely compressor to shrink their code to tiny size and then made it into an API. It has a few settings related to how much it compresses the code by (compilation_level).

• WHITESPACE_ONLY
• SIMPLE_OPTIMIZATIONS
• ADVANCED_OPTIMIZATIONS

WHITESPACE_ONLY does what you might think, it removes all the whitespace from your js like any other minifying tool. SIMPLE_OPTIMIZATIONS is where it starts to get interesting; white space is gone and local variable names get renamed. Now, when you set it ADVANCED_OPTIMIZATIONS the really clever stuff starts to happen.

There are still a few things you need to watch out for when using ADVANCED_OPTIMIZATIONS, mostly to do with consistency and string literals.

The most obvious one is of course external files using the now compiled javascript will struggle as function names have changed and name spaces might no longer be the same (I need to test this out in detail).

As the google complier page isn’t exactly friendly I knocked up a quick site to handle the most common queries and called it closure optimiser

echo $SHELL

If it returns something like

/bin/bash

Then you are. There are alternatives to bash; C Shell (csh) and Bourne Shell (sh) being popular ones.

Anyway, getting to the point …

Scripting

I wrote some bash scripts to help with setting up websites; I know the current trend is to use Capistrano but not everyone wants to install all of it’s dependancies.

Currently, there is one main script called sitecreate.sh, this takes in an bunch of arguments and then goes off and calls utility scripts in the same directory. As long as you get the command right, the following happens:

user.sh

• Shell in to remote server
• Create group for user
• Create user & home directory
• Add user to group
• Setup users password

vhost.sh

• Reads in and parses a vhost skeleton file
• Saves parsed vhost to apache directory

mysql.sh

• Create mysql user
• Create mysql database
• Give user permissions to the db

checkout.sh

• Checks out the projects GiT repository

Once all of those are done, it then restarts apache. The scripts aren’t fully tested yet, but feel free to grab them over at github

No matter what element of computer work you’re in (web, c++, java etc) you need to be using version control of some form. You do one update, say change a logo or adjust the number of centroids for your k-means algorithm, what do you if 3 days later you find out it was the wrong decision? If you’re not using version control its going to be a painful experience and heavy reliance on your memory; after 3 days you might remember it, but what if it was 3 weeks, or months or even years? There is no way you will remember that far back!

This where good version control steps in. In the old old days you had CVS ; please forgot this existed (even though it did pave the way). In 2000 the Subversion open source project was born.

Subversion

It was fast and handled binary files very well; which is why it is the base for such things as Dropbox. However, it does have draw backs. It’s branching and tagging truly are a nightmare to use and it relies on a central point for a repository.

What this means is that you will need to be online in order to make commits; this is not ideal, how do you do work on a train or plane? You can’t.

Subversions biggest weakness (in my opinion) is its problems with renaming things. Instead of marking your rename as a rename it adds the file again under its new name and deletes the old one… Leaving lots of opportunity to lose changes. Say I made some changes in the a random project file, renamed it, and then checked it in. Those changes would show in the new file, but not the old one….

Reverting back to a previous commit isn’t exactly a barrel of laughs. However the difficulty you have to endure when working on the same project as someone else is the straw that broke this programmers back.

Lets say Bob is editing a large library file on Project X, say one that handles all file operations and makes several amends, but at the same time Jon made a whole bunch of amends to the same file. Checking those changes in is going to be interesting.

At best you will have to resolve conflicts with a merging utility and hope you got it right. At worst, they will have changed the same areas of the file and who knows what will get checked in.

A better solution was needed… Just like buses you spend ages waiting for one then 3 turn up at once!

Distribution FTW

Instead of a centralised, upstream only repository you have a local repository to call your own. You can make your changes, commit them locally, revise your commits if you want and then push to whatever other repository you fancy. Working with version control offline is now possible!

Distributed version control systems come in many flavours, but the current favourites are:

• GiT
• Bazaar
• Mercurial

GiT is my DVCS of choice. The main reason for originally selecting GiT was its backwards compatibility with Subversion; git svn basically allows your upstream origin to be a Subversion repository but keeping your local repository running on GiT!

Working With GiT

First off, installing GiT is super simple:

• Windows has the ever wonderful Tortoise (TortoiseGiT)
• Linux is easy, as GiT was made by Linus, so in most distros its a single command to install
• OS X is based on FreeBSD and there is now a dmg install image

That should take you about 5 minutes. Once you’re done you need to get used to the command set. Many people (Mercurial & Bazaar uses, wonder why?) always complain about the number of commands Git has, but lets be honest here, in daily usage you use 6 commands:

• git init
• git checkout
• git add
• git commit
• git pull
• git push

How hard is that? GiT is simple to use for ever day tasks and wins hands down when it comes to smart merging of conflicts etc. You can learn all 100+ commands, or you can be sensible and google for them when you need to use them!

Simplicity

Although I am a programmer and treat the command line like a second home, GUIs such as GitX makes some of those complicated things much easier. For example the latest build of GitX allows you to commit changes on specific lines, line at a time! Doing a command line alternative to this would be horrific.

All they need to do is add a button to do a push command …

Couple that with the very handy Capistrano and deploying becomes easier.

Negatives…

GiT is not perfect… Just google and I’m sure you’ll find dozens of people slagging it off (documentation is for wimps :P ).

After searching around for a while I found the rather cool abstract vector image (sitting on the left ) over at pink moustache – strange name, cool image.

Mainly just something to break the whiteness and introduce the colour scheme used to signify categories.

I think this is about the 5th iteration of my site, switching platforms and designs along the way. My site is now sitting over on github – just need to add an external comments system …

EDIT (January 24 2010): Well that version was short lived, it was very ugly so changed it this weekend! Much better this way.

At the start of this year a group of like minded people from various companies ‘in the business’ got together and decided to do something about the migration of new talent from the midlands to rival cities such as London & Manchester.

An idea was born. B-Hive.

The B-Hive scheme has been developed to give students from the city’s universities and colleges the opportunity to get a foot on the career ladder by winning paid work placements at some of the region’s leading companies.

We have just relaunched the B-Hive site ready for next years entries, it is now much bigger than before with news sections, advice, and much more.

If you are curious, you can still see the 2009 version here.

This was previously Free to Freelance but has now undergone some design changes and new content.

The new name and font are obvious but there is now a testimonials section along with a more detailed information page.

Switching to italic georgia for headings has given the site that little bit extra visual appeal and looks much closer to the new branding.

If you ever need any creative things (logos, company branding etc) then Miss Jones is the lady you want!

Recently launched the new version on this site; with everything from client logins, google maps, payment systems there are plenty of features making this site quite extensive.

IM Group asked us to take a look at the dealer websites and see what kind of package we can put together to replace the Portfolio rubbish they use now.

It’s not as glamourous as the main site, but a good, stable client base and an opportunity to show what can be done. I’ve covered the dealer sites themselves in a separate post this one is more techy and is focused on the technology that they use; the IM Group API

Goals

When coding the API I always had a few goals in mind:

• K.I.S.S – Keep It Simple Stupid, a trusted old adage that’s relevant in pretty much every aspect of development, but in this case referring to the code base
• Easy access – it should not require anything more flashy than curl to talk to the API
• Synchronising – both push & pull should be supported

Some areas are a bit more complicated than I would like, as access has to be limited and tracked, but on a whole I’m happy with it. Makes handling all the dealer sites much easier.

Data

The API itself sits on imwww.co.uk but you won’t be able to see it unless you have a valid authentication token. If you know one, you will find the API has data on pretty much everything Subaru does (Isuzu data isn’t in there yet). It covers

• News
• Events
• Offers
• Cars

The news, events & offers are mostly just content, a few images and some dates (start, end etc). However, the car section contains lots of information. It tells you the colours every model is available in, every variation the model has, the prices, insurance details, features, dimensions, extensive range of photography and anything else you would ever want to know about a car (even how loud it is…).

Contents

The large amounts of data that are flying around meant that finding exact data you want could be tricky… So I made it simple by using a RESTful architecture.

If you want only the latest 5 news items; then just ask:

imwww.co.uk/news/limit/5

Just want a single offer you know the name of, thats easy:

imwww.co.uk/offers/details/555-campaign

Want to do something more complicated? How about paginating the results, so you want page 5, with 10 per page and everything running in reverse order.. Simple:

imwww.co.uk/events/page/5/per_page/10/order/date desc

How about fetch data for only a single model, like the impreza:

imwww.co.uk/cars/model/impreza

To much data in your results? Only need the real basics; then you need the minimal flag…

imwww.co.uk/cars/model/impreza/minimal

Instead of fetching everything, just returns the basics, like names & prices (depends on what you apply the flag to of course).

Formats for Everyone

Are you an XML fiend? a JSON lover? A PHP code monkey? The API supports them all, just change the file extension:

• XML – .xml
• JSON – .json
• SPHP – .sphp
• HTML – .html

Practical Use?

Lots of them! At the moment the API is powering every new dealer website, the vehicle data on the main Subaru site, all up coming Isuzu dealer websites, dealer locators, news feeds and much more to come.

Push and Pull

With some of the systems mentioned above polling is of course the way to do it; as replicating databases all over the place would make things very messy very quickly. Instead services like dealership locators use pull queries to API urls to fetch data.

This isn’t really an option for something as complicated as a dealer website. How slow would a website be if everything on that page had to be fetched from an API call? Dealer sites make use of the push notification system.

If content is edited on the master API – say a price change on the Outback – then the API sends out a notification to registered sites that there has been an update.

The site picks up on this notification and has a look at what has changed. If the data is relevant to the site, it updates its information. Much nicer!

Installing a Dealer Site

As I mentioned above, the API only talks to registered sites. The site is registered with the API during its own install process; it sends off a little bit of data about itself and the API updates its records.

The rest of the install also queries the the API, so within a couple of minutes all the latest details for everything Subaru is setup for that dealer.

Speed

From nothing (not even a domain name) to a fully working (out of the box) dealer site takes about 40 mins, most of that is setting up a new branch on the repo, making google accounts (gmail, analytics, maps) and DNS, but thats still pretty fast!

The API itself is sitting on a small server, so to keep it going fast basic caching is used (the API wipes the relevant cache files on updates, of course).

As this is a monster of a post, I blogged about the actual dealer sites in another post

Most of their content was in iframes being pulled from somewhere else and every other bad practice that you can think of was pretty much in regular use.

While those issues have not been addressed yet, we now have the opportunity to sort out the dealers websites. Their current package (via Portfolio) is just as bad the main site.

Design

First thing, getting a design done & approved.

The design was done by Jon Roobottom and is spot on. Clean, simple and modern. Approval was rapid, the new design was a winner.

A few minor changes were brought up during a focus group with leading dealers from around the country.

Focus for Success

To make sure what we had in mind was what the dealers wanted Subaru put us in touch with some dealers and arranged a meeting.

We presented the new site designs, layout and ours ideas for the site. With a few minors amends, such as more offers on the home page it was warmly received.

Build

Build it and they will come. So I did, and so did they. You can have a look at the first dealer, Crossroads, to go live here

The site is doing well, with a couple of hundred hits per day. The great domain name does help!

The Crossroads site differs from the standard, such as Slip End Garages but customisation is simple due to lovely GiT.

GiT in Action

I started with a single branch, for the base level work. Keeping everything nice and tidy with some good old version control for all the designs ann common code.

Once that first branch was ready all other Subaru dealers get a branch for themselves. Any amends are done on their own branch, so changes to layouts images etc only effect them.

Deployment

Deployment of the site is easy, checkout the right branch of the project, run the automated installer and your done. Of course that excludes all the google account gubbins and DNS setup, but on the whole, install from nothing is fast; sub hour for out of the box site.

The dealer sites would be a lot more work if it wasn’t for the API they run on (I wrote that too!).

Not a site I can take credit for, Ross Riley built this one, but it’s just around the corner so well worth a mention.

We’ve just finished and pushed live an over hauled and revamped version of their website, but not on our CMS.

As this site will be maintained internally by their IT department it’s being built using activeedition instead. I’m not a fan.

With wining the “digital” work for Isuzu the first thing on the list was a new website… So here it is

It uses Jekyll and renders textile, markdown or good old html. For more details you can have a look at the official page or a really nice blog post I found talking about how to use them as a blog

Clarke and Strong are a family run supplier of funeral goods and have been in the business for over 100 years!

The site itself was a rather morbid project to work, but some nice functionality. Body bags on a roll … really? Apparently so

I particularly like live filtering on the product listing pages and of course there are a couple of hidden easter eggs ;)

Great way to start a Monday!

MySQL

For the early versions of Leopard you had to compile from source, not very pretty and can prove troublesome for people not used to that kind of thing. Well not any more! MySQL themselves have released a package for 5.1 which works nicely and has a companion guide to get you set up.

If you are on your local machine and getting fed up of having to type a password to connect, you can also blank the password by running this command:

mysqladmin -p -u username password ''

Where username is the user account you want to blank the password for.

You should take a look at Sequel Pro for a nice native interface to connect and manipulate databases.

PHP

Although there isn’t an official release for OS X, there is however, a link hidden away on the side navigation for all in one package that will take you to a guide with a download link. This download is another package installer so you just click and follow instructions.

You may want to alter your php.ini file a little to have short tags enabled but otherwise it was spot on. The only issue with this package is making the command line version the same as the shared object used by apache. For an experienced user this is no problem, symlinks are your friends.

Make a backup of your current php bin file and then symlink this new one to that location, so now your path should follow the symlink to the correct version of php!

Apache

As we haven’t built anything from source this time we no longer need to tell apache what architecture it’s using, so no need to make any amends. If you are making sites with the same structure all the time I would say put this into your vhosts file:

For ease you can use a vhost declaration like:

<VirtualHost *:80>
    VirtualDocumentRoot /path/to/websites/%1/public
    <Directory "/path/to/websites/%1/public">
      Options FollowSymLinks
          AllowOverride None
    </Directory>
</VirtualHost>

This way you no longer need to make a vhost per site. If only you could this with /etc/hosts file!

If you are getting 403 errors then make sure your directory declaration is correct and looks something like:

<Directory />
    Options FollowSymLinks
    AllowOverride All
</Directory>

GiT

Version control is an import part of our jobs, so we use a distributed system called git, hopefully you’ve heard of it. There is now a very nice and easy package file for OS X so again you can skip out all the command line stuff and just click to install it.

It comes with an extra script file, if you run this you can then take full advantage of software like GitX and OpenItInGit (a Finder plugin) to do git with a gui!

If you use text mate as an editor you can also get hold of a git bundle for text mate called gitorious, which is installed via git.

Ruby Gems

If you are using gems such as capistrano you will need to do an update as the ones in Leopard are somewhat out of date! It is very straight forward but does require using the command line:

sudo gem update --system

This will get your version of gems updated and sudo gem update will update any gems installed to the latest versions.

ImageMagick

If you need ImageMagick for your php framework this section’s for you. They now have a ImageMagick binary install for OS X Leopard available. Download this and extract it to /usr/local. To allow your php scripts to execute ImageMagick you’ll need to set some environment variables for the apache process. To do this edit the file /System/Library/LaunchDaemons/org.apache.httpd.plist to add something like the following (additions highlighted):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" 
  "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>Label</key>
    <string>org.apache.httpd</string>
    <key>OnDemand</key>
    <false/>
    <key>ProgramArguments</key>
    <array>
        <string>/usr/sbin/httpd</string>
        <string>-D</string>
        <string>FOREGROUND</string>
    </array>
    <key>SHAuthorizationRight</key>
    <string>system.preferences</string>
    <key>EnvironmentVariables</key>
    <dict>
      <key>DYLD_LIBRARY_PATH</key>
      <string>/usr/local/ImageMagick-6.5.3/lib</string>
      <key>MAGICK_HOME</key>
      <string>/usr/local/ImageMagick-6.5.3</string>
      <key>PATH</key>
      <string>
        /usr/local/ImageMagick-6.5.3/bin:/usr/bin:/bin:/usr/sbin:/sbin
      </string>
    </dict>
  </dict>
</plist>

The Big Bonus!

Using this method means that although you’ll have to start off altering your system paths a bit, in the future whenever you do a OS X update your setup will not get wiped (with the exception of the php symlink). Much nicer than having to reinstall every time.

NOTE: I originally wrote this post for the One Black Bear website after formatting and experimenting with new setup on my laptop. It is very handy for reference so I included it on my site as well.

EDIT (Sept 30 2009): Even better! with Snow Leopard you no longer have to install a custom version of PHP; the built in version is up to date and comes with everything.

Mums in football – this is your website (although anyone who wants to make a positive contribution is welcome too). Share your thoughts, ideas, successes and anything else with other footy mums. If you’ve a disappointment or frustration you want to share go right ahead and shout about it here!

Markup Dictates doctype

If you are planning on using on using <footer>, <article>, <section>, type='date' or any of the other new parts of HTML 5, then yes, you are using HTML 5.However your site won’t be working too well in most browsers.

In this case I have no issue with you, your problems are more serious than semantic nit-picking. You should go back to hacking away with some javascript to make it work properly…

My complaint is with those using essentially HTML 4, but with a HTML 5 doctype. My big question…

Why?

By using HTML 5 in this manner, you are pretty much using HTML 4 with a loose doc type; so why not stop pretending!

Lets be honest, browsers aren’t going to be dropping support for HTML 4, so why are you doing it?

The Truth

Your doing it for one of these reasons:

• You want to sound ‘cool’, ‘hip’ and part of the ‘cutting edge’ in your press releases
• You have bought in to the hype far too much, far too soon
• You don’t understand the differences and simply using it because that’s what you last read about

Unfortunately, if you fall in to one of those you are likely to not care about the point I’m making, which is sad.

Some Exclusions do Apply

Some of the new HTML 5 doctype is useable now; the new input types. As browsers default to type='text' when they don’t recognise what you mean allows new tags to work on browsers that can handle them.

This is simple enough for something like the for date pickers. If the browser doesn’t support type='date', you can use a jQuery UI plugin instead of the browser built in one.

Not all of these types are so simple to degrade.. like the search input, or the url field.

As neither IE 8 or IE 9 are going to support HTML 5, heres hoping for a fast release for IE 10!

Having recently completed an upgrade of the Subaru and Isuzu national website Dealer locator I thought I’d tell you a bit about it.

The locators, originally run off Multimap, now use the Google maps system. The project required a fast turnaround and was completed for both brands within two weeks of receiving the brief.

By using Google maps IM Group (Subaru UK and Isuzu UK’s parent company) has saved over £20,000 and improved their service to site visitors.

The new system is faster, allowing for live information, filtering of sales, servicing & parts dealers and the re-designed interface makes finding a dealer even simpler.

Looking at the tech….

As mentioned above this new dealer locator is faster and smoother than before. Speed kills; if a page is slow to load then people are going to give up and assume it’s not working.

With a map system of this nature, large amounts of data are flying around the place doing everything possible to make the site slow. To keep the speed in check we use many things from boring old compression to new fangeled ajax loads, but there has to be a balance.

We load the primary map components and wait until the page has loaded before going and fetching all the dealer data. As a nice little visual cue an obligatory loading box appears.

Now all the data is in, we’re good to go! The searching is kept nice and accurate using the google search API on top of their map API to ensure a greater level accuracy. Couple this with some clever bounding calculations and an appropriate coordinate and zoom level is found to show the user some dealers and a marker of the search point.

To help you choose the right dealer, the list is reordered according to proximity, so your nearest dealer is on top. You can get some directions, view their used car range or read more about them right on this page.

The directions are pretty close to exact, with it taking you to the stored co-ordinates of the dealer you selected and with google’s system there is now a print option, so no way to get lost on the way (hopefully)!

If you don’t fancy a drive, the used car stock is just a click away; the same loading box appears to let you know we are checking their website, if we can get it, we then show you their details right there. This should mean that comparing what your local dealers have in stock just got a whole bunch easier.

When you find a dealer you like the look of you can have a quick read about them by clicking the more details.

This new version of the dealer locator should help users of both websites; with more features to come.

EDIT (Aug 02 2009): Due to an increasing number of dealers the map is starting to chug a little bit in older javascript engines (yes, I’m looking at you IE). I will re-write the javascript to make it smarter and have a lower memory footprint, speeding up its performance.

Easy answer, make my own… Here it is. By the way, the minimised version in under 2k with a tiny 1k stylesheet.

It works for images and other containing elements. Here are the examples:

Show on body load…

This is the really, really annoying type of modal box that loads as the page does. It also runs of this link.

  <script type="text/javascript">
  jQuery(document).ready(function() {  
    jQuery('a.on_load_modal').smart_modal();
    jQuery('a.on_load_modal').smart_modal_show();
  });
  </script>

Simple Image Modals

Click on an image to get a pop up bigger version of it.

This is about as simple as it gets; give the anchor tag a href for the bigger version of the image and it just works.

With the a tag having a title attribute this is then used by the modal pop up as the title of the big image.

  <script type="text/javascript">
  jQuery(document).ready(function() {  
    jQuery('a.modal1').smart_modal();
  });
  </script>

Div Modal

Instead of clicking on an anchor tag, click on the div below and you get a modal box containing the same html.

  <script type="text/javascript">
  jQuery(document).ready(function() {  
    jQuery('.modal2').smart_modal();
  });
  </script>

Using the rel Attribute

  <script type="text/javascript">
  jQuery(document).ready(function() {  
    jQuery('.modal3').smart_modal();
  });
  </script>

Show and Hide Functions

  <script type="text/javascript">
  jQuery(document).ready(function() {  
    jQuery('.modal4').smart_modal({
      show:function(){alert('This happens on show!');}, 
      hide:function(){alert('On Hide!');} 
    });
  });
  </script>

Custom Close Links

The extra close link inside the modal will also close the box. This done by simply giving it a class of ‘sm_close’ as the plugin looks for clicks on .smart_modal_close inside the overlay to close it.

  <script type="text/javascript">
  jQuery(document).ready(function() {  
    jQuery('.modal5').smart_modal();
  });
  </script>

More Close Links

Within this text you will see another close link; this time it uses the show function to add a trigger to close the modal link.

  <script type="text/javascript">
  jQuery(document).ready(function() {  
    jQuery('.modal6').smart_modal({show:function(){
  			jQuery('a.custom_modal_close').click(function(){
  				alert('You clicked a custom close link!');
  				jQuery('.modal6').smart_modal_hide();
  				return false;
  			});
  	}});
  });
  </script>

Disabling the Overlay Click to close

As with all modal boxes you get a blackened background known as an ‘overlay’, normally clicking on that will also close the modal. But not in this example! Now you can only click on the x (or any other element with class of ‘modal_close’) to close it.

  <script type="text/javascript">
  jQuery(document).ready(function() {  
    jQuery('.modal7').smart_modal({hide_on_overlay_click:false});	
  });
  </script>

Updated

If you take a look at the code you will notice that smart modal has totally changed; hopefully for the better.

For those of an adventurous nature there are now two new functions you can call manually – .smart_modal_hide() & .smart_modal_show().

Once you have instantiated the link using .smart_modal() you can call either of those to show or hide it.

Files

All the files that are used…

Some months back I created a very handy little site called tiny js ; it’s all about small but powerful javascript plugins for libraries such as jQuery. I only just noticed that I didn’t blog about it on here, very bad of me!

Last weekend I did a nice update so all projects utilise version control and are based over at github.

It makes the visible content area tiny, and clearly restricts the size of the page so in my opinion it’s mostly pointless. However, still better than using flash!

It does take some options, but I can’t remember what they all do, it’s been too long since I wrote it! Have a look at the project on git hub- or download the source, in a zip file instead.

Triggering the script is easy enough:

  <script type="text/javascript">
  jQuery(document).ready(function(){
  	jQuery('#diagonal_madness').diagonalaccordion();
  });
  </script>  

The plugin will automatically create a set of controls that associates with the scrolling elements, letting you move between each one.

Standard, Auto Generated Controls

This first one uses the 5 divs as ‘pages’ and converts them into scroller elements which react to the on click of the ul.

This one is as simple to setup as it gets:

<script type="text/javascript">
jQuery(document).ready(function() {
	jQuery('#container1').contentscroller({pages:'.cexample'});
});
</script>

As the plugins default setup looks for DOM elements with the class of ‘page’, in this case the example is using an alternative class. We just pass in the alternative selector and it all works.

Auto Generated Controls With Hooks

If you want to alter things, or trigger events when a new ‘page’ loads or something similar there are two hooks you can use; before and after.

In this example I’m keeping it simple by just running an alert for both; but you can pass something to run for both.

Setup for that is:

<script type="text/javascript">
jQuery(document).ready(function() {
	jQuery('#container2').contentscroller({pages:'.cexample',
	                                      controller:'#controls2',
	                                      before:"alert('before')",
	                                      after:"alert('after')"});
});
</script>

Both the before and after values are eval’d with the javascript, this is very naughty and I really need to change that to take a normal function.

NOTE: As the controls are auto generated and use a unique id, the second time we add a scroller to the page we have to force a new id. This is done by just setting the ‘controller’ option when creating it. (I really need to fix that…)

Styling

The examples here use a stylesheet, which looks like:

#container1, #container2{width:100%;}
.cexample{width:100%;float:left;}
ul#controls li, ul#controls2 li{float:left;margin:0 5px 0 0;list-style-type:none;}
#example1,#example2{overflow:hidden;}

The Files

All the files that are used…

Yes, you to can own a laminated copy of any website you want! Simply fill in the address box and click ‘laminate’. If you want us to print it out and send you over a copy then we can do that for you, at a small cost.

If you’re just being nosey then you can see what other sites have been laminated by going to the portfolio section

If the site is being slow, we’re very sorry, it turns out the site has been feature on tech crunch, the new york times and several others.

Just too add fuel to the fire for today only both my personal site, Tiny JS and One Black Bear are sending all the traffic to Laminatr

Now, what shall I do next year?

I built a simple single page website with lots of imagery and even a how to video filmed by the creator herself.

The site itself uses a little bit of jQuery to do some nice transition effects.

This site was using HTML 4.01 and all the stylesheet links had a title attribute, this trigged an obscure issue I had never encounted before. According in the HTML 4 spec setting a title attribute converts the stylesheet to a preferred stylesheets and only one of these can be loaded in at any time. This meant a whole bunch of styling would disappear even though its clearly visible in firebug etc. For more information take a look at this article.

They keep preaching about avoiding data repetition and storing things once. These 5th normal form lovers have clearly only read text books and never worked on any kind of application that has to be fast. Yes, 5th normal form means you only store the data once, but to get to it you have to go through numerous joins, from 3 upwards. Being a practical kind of person lets use the typical example of a customer and order in both 3rd and 5th normal form to show my point.

Fetching Customer Name and Order Date From Order Reference:

5th Normal Find order reference > go to join table and find order id > go to order table > store date > go to order customer join table > go to customer table > store customer name.

3rd Normal Find order reference > store date > go to order customer join > go to customer table > store customer name

Even in a simple example of something that any ecommerce site would do hundreds of times a day, using 5th normal form introduces several extra steps (and in that example I’m being kind, 5th normalisation could easy add a join between customers and names).

In the current world of computers data in the same table can be handled with great speed and efficiency providing you do the standard optimisations like adding indexes and keys on the columns; however table joins are still slow in comparison

In this example you would end up with an extreme amount of left joins (assuming mysql here – sorry M$ lovers but MSSQL is not worth the money or hassle), causing a whole bunch of extra table scanning and locking so not only slowing down this query but every other one on the same server

Nice idea, but in practice 5th normalised form is a wasted effort. Instead of spending hours doing that any decent programmer should be busy playing Sauerbraten ;)

I was wrong, no sign of omnipotent beings at all, just a big banner which said something like “A touch from The King will cure all addictions!”… Yes, thats right, Elvis worshipers! Even worse than bible bashers!

I quietly sniggered to myself, kept my distance and thought to myself ’Don’t Be Cruel’ as ’You’ll Never Walk Alone’ ‘In the Ghetto’ and I didn’t want to get attacked by that ‘Hard Headed Woman’ with the megaphone nevermind the ‘Big Boss Man’ as I value my ‘Life’.

Having never heard of them and just going by the cached version of their website it looks like a small time flash company from the middle of nowhere (at least according to the phone area code).

This spell of buying companies for specific clients seems to suggest WAA are trying bulk out their client list again after several clients leaving them. After a bout of redundancies and now speculative purchases, maybe the future isn’t so bright in Sutton Coldfield.

Although there was no visual change the underpinnings were completely re-written onto the phpwax framework & wildfire cms. While we were at it we also re ddi all the html, tidying it up and making it standards compliant.

As part of installing the CMS we developed an import module that utilises the exported data from their internal system. Unfortunately, their internal system only does an FTP export, so the import relies on a successful dump onto our server. From this point we read the csv file and match all records against the photos and move everything over in to our file system. After checking for errors the process finishes and then the new properties are ready to be sent out in emails.

When we took over the site we added an improved newsletter signup, using Campaign Monitor, we segment the data by what they are looking for and send out relevant properties.

EDIT (2009 Jul 20): The site has now had a complete redesign… have a look and see what you think…

Instead of the primary section links loading in a new page the webpage simply slides to the left or right. This effect is done with a container hiding all the pages and some clever javascript to show the correct chunk. The plugin I created for this page was inspired by the original jQuery.ScrollTo, but instead of having to pass in pixal values etc my plugin takes the strain of the math and you just need to tell it what chunk number to go to.

In a bid to keep it small and simple the options are very limited (as it only does one thing – like all good plugins) so in total the minimised version comes in at under 3k!

Abstract have some extra bits for sub page loading via ajax and nice visual effects on the image galleries.

I mildly berated them in a previous post regarding the appalling flash site they launched that replaced a nicely marked up (if somewhat overly pink) site. Since the relaunch of www.waa.co.uk their google site index has dropped from over 5000 pages to just over 600! All of the old content they had (mostly articles by Chris Tomlinson) has been removed, nothing new has been added. At least the people they had in web were smart enough to be using open source tech and support the open source community. Looks like that’s about to end.

WAA have recently bought a new web company, MarketingNet. A java and .net based company. Guess all the remaining good points about WAAs web department are about to be replaced by a huge chunk of paper work, administration and bureaucracy. No longer can they claim to be agile or cutting edge when your using tech like that.

However, this is not the worst part about the new company. That honour goes to their own website; which doesn’t work properly and generally looks like something a first year uni student would knock up in dreamweaver. Large parts of the navigation are relative links which have then been copied and pasted in to the other pages, meaning that the home link that goes to index.html doesn’t take to the home page most of the time; when you’re in a sub section such as ‘about us’ if your not careful you can end up going to /aboutus/aboutus/aboutus/index.html. Of course that page doesn’t exist.

I just hope they got a bargain basement deal on these guys as the quality of work is just plain shocking; reminds me of the early 90s before anyone web person had heard of quality control.

Don’t get me wrong, I think raising awareness about eating properly, exercise etc is needed. Apparently 10% of parents thought jaffa cakes counted towards your daily recommended amount of fruit, how scary is that! Lack of knowledge, apathy, social groups and non stop junk food advertising probably contributed to this sorry state of affairs, but thats for another time. What annoys me in this advert is the fact they show humans killing a dinosaur! Two species separated by over 60 million years!

Somehow this managed to go unnoticed and has been airing regularly since the beginning of the year. Apparently ASA have no issue reenforcing a popular misconception

If that isn’t bad enough the current PC World sale advertising fails at basic math; printer for half price, really? I could of sworn half of 129.98 was 64.99, however the advert tells me it’s 59.99. The wording says half price, not less than half price. Again, shouldn’t ASA be pointing these things out and getting them corrected?

You might say that it’s only an advert, but how many people are watching that advert? What if your child / nephew / niece etc gave that answer on a math test? Would you say then it doesn’t matter then?

In the current social climate most children spend almost as much time in front of the tv as they spend at school, so surely the prime time viewing should at least be accurate?

This piece of jQuery inserts a nicely styled compliant ul with li’s into the container specified (if it’s not there already) and sets some trigger events for the a tags.

Now when you click on the plus or minus the background image is switched out for a larger version (passed in to the declaration).

The more images you pass in the more bars appear in the zoom control.

To make it work you need to set up some css and pass in the ‘target_div’ parameter in to the js with an array on image paths; and thats it, everything else is worked out for you.

Simple Image Zoom

Here is a container with 4 images, nice and simple. In this case I have already entered the ul code, so the js won’t insert it.

Files

All the files that are used…

You can also find this project over at the main jQuery plugins website.

Time to make a new one….

Simple Resizable Div

If you click and drag inside the red box below it will grow until you let go.

  <script type="text/javascript">
  jQuery(document).ready(function() {
  	jQuery('#resizer').resize();
  });  
  </script>

Resizable Div With Max Limits

If you click and drag inside the red box below it will grow until it reaches a max width and height.

  <script type="text/javascript">
  jQuery(document).ready(function() {
  	jQuery('#resizer_maxed').resize({x:450, y:300});
  });  
  </script>

Resizable Div With Max and Min Limits

If you click and drag inside the red box below it will grow until it reaches a max width and height.

It will not resize below a certain amount.

  <script type="text/javascript">
  jQuery(document).ready(function() {
  	jQuery('#resizer_min_max').resize({x:450,min_width:190, y:300, min_height:90});
  });  
  </script>

Resizable Div – Turning Off A Direction

By passing in false you can turn of expansion in either direction

  <script type="text/javascript">
  jQuery(document).ready(function() {
  	jQuery('#resize_no_x').resize({x:false});	
  	jQuery('#resize_no_y').resize({y:false});
  });  
  </script>

Resizable Div – Targets

If you use a target then the resize is based on where you drag the trigger element.

  <script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('#resize_bar').resize({target:'#resizer_area'});
  });  
  </script>

Other Resizable Elements

Can be used on things other then divs…

Files

All the files that are used…

Currently, most draggable image plugins use an inline image with absolute positioning and a surrounding clipping area, which in most cases is fine, but in this case it would be a real issue as the zoom plugin uses an absolute positioned container. To get around this I decided to convert the image inside the container to the background image.

For all those people who don’t have javascript turned on you just see a clipped image, but those with javascript can move the background image around as if they are dragging it.

Simple Image Dragging

Files

All the files that are used…

Large images (800 × 600) dominate the website with a cool little jQuery image switcher. Based on PHP-WAX and Wildfire CMS its smart & simple to use.

EDIT (Oct 14 2009): The site has now had a visual update; in return for some carrot cake, see Miss Jones for more info.

EDIT (May 20 2009): Bit of a rebrand, the sites primary domain is now nataliefayejones.co.uk

I’ve always had an issue with Flash being used in such a fashion. Yes, google can now index some of it, but only if it’s been coded properly and in a search engine friendly way. During a recent project (for the Impreza S microsite) we had several discussions about how best to present the creative we had for this site

In the end flash won, but with lots of consideration towards how google et al. Firstly, not all of the site is in Flash (yey!) the navigation is HTML and interacts with the flash. A few other things like sitemaps help the site to be friendly. p. The reason for our decission to go with Flash is mainly due to the colour changer. Regardless of how good the ajax libraries are (jQuery in particular) they currently don’t handle image switching quite so smoothly. The final reason was the page transition; I still find it somewhat unusual and a bit disorienting, but a good effect.

On the whole I feel the site is nicely done (good job Sheldon!) and considering the timeline for it, it is a sterling example of how flash sites should be handled.

On the other hand, some flash sites worry me. Certain so called ‘creative’ agencies who decide that just because they’re creative they need their site to be ‘creative’ – which to them means Flash. In most of these cases you will find that the reason for the entire site being flash is something stupid like ‘we want our logo to be animated and interesting’

There are many such sites out there, you just have to look for them. When you find them ask this question: ‘Is that silly little logo / animated character / smooth page transition / custom font worth the issues with accessibility, maintenance, readability etc’

EDIT (Jan 01 2009): I’ve removed the link to the website as the client has changed the website and it is now of such a low standard I would never want any one to think I made it.

A really nice jQuery switcher on the home page to flick between featured articles and a jQuery based estimation enquiry form ensures this site stands out from its rivals while offering improved usability.

One Black Bear have created a new site aimed at wannabe sweeney todds everywhere.

The Shave Doctor is a site offering courses via his shave school and also a host of associated shaving products.

Interested shaving experts in waiting can check availability of course dates and learn the silky smooth skills that have made The Shave Doctor the renowned expert he is today. More and more men are opting for a traditional, cut-throat shave with the warm towels and super close finish you only get with a proper barber shop shave.

Make a sharp beeline for shavedoctor.co.uk and learn the art of a traditional shave.

Having trouble with spots? Dry, flaky skin and an aversion to sunlight? You’re in luck!

We’ve just let loose a top notch ecommerce site for all your male grooming needs! Not only does it stock hundreds of products but it offers a great advice section & video guides.

We decided to try out something new with Mensgroom’s payment system. In our experience most checkout process tend to become clunky and arkward when it comes to address details; adding several new steps and more pages for you to wade though, not very friendly at all!

EDIT (August 25 2009): The number of people actually going to view a product has dropped significantly while bounces on the welcome/splash page has risen to a new high… No shock there then.

EDIT (June 30 2009): So far the people getting though to the real home page from the splash page is less than 50%, not good…

EDIT (March 20 2009): At the clients request the is now a splash page as the first thing on the website; so it no longer looks like a shop… Wait and see how that works out.

One of the nicest designs I’ve worked on recently, take a look at made-schools.org and see what you think.

Basically this means that you can install a piece of software of your machine that lets you emulate another operating system. Most of the established solutions cost money, not much (around £40), but still more than nothing.

After trying both VMware and parallels found them to be very very useful, but at the same time memory and processor hungry. For example, say I have the infamous double margin IE display bug and I’m trying to find the right container to add the display attribute to. I Have textmate open, photoshop (as I’m still working on the design), firefox, safari and VMware; switching to and from applications becomes sluggish.. There is a better way..

VirtualBox, developed by Sun, is faster and smoother than the others I have used and has an OpenSource version! Goodbye VMware!

The only draw back is that the free download doesn’t have support for wireless cards on macs, but otherwise it’s brilliant. Supports lots of operating systems (almost every flavour of linux I can think of) and is very fast. Great example of this, full reboot of plain windows xp (with service pack 2) in under 1 minute…

Anyway, to mark the release they are planning to break the world record for most downloads of a single piece of software in one day. Good luck, I for one will be downloading it, lets just hope their servers can cope!

Take a look at Spread Firefox website for more details.

As previously the event is aimed at geeks and their families with the day being split in to two; the afternoon picnic and the evening talk

The afternoon picnic last time was a resounding success with lots of people from all over the country coming down to point and laugh at us trying to play football… The only downside being a lost Frisbee and an almost lost ball (this time we’ll try not to play by the river, honest!). Thanks again to the rowers for rescuing the ball

This years evening talk is aimed at being a bit more interactive and we should have some great speakers (once its all confirmed). So keep an eye on the website and come on over for some geek fun in the sun (hopefully!).

Firstly decide what suffix your going to use for your local machine, be sensible and use something meaningful like .local or .dev. Dig out your apache vhost file (httpd-vhosts.conf) and set up the file.

You will need a line such as “NameVirtualHost *:80” to make sure any web connections are picked up. Now create you first virtual host a bit like this:

<VirtualHost *:80>
    DocumentRoot /Users/username/Sites/sitename/docroot
    ServerName mysite.local
    <Directory “/Users/username/Sites/sitename/docroot”>
        AllowOverride All
        Options All
    </Directory>
</VirtualHost>

Once you have saved this file (root/admin privilleges are required) you will need to restart Apache so it reloads you config files. You can do this by starting up terminal and typing “sudo apachectl graceful” and entering the root/admin password.

Now type mysite.local in to your browser of choice and see what happens…. Nothing is the answer. At this point Apache knows it should be looking for a request a site called mysite.local but your machine has no idea what .local means.

To fix this you have to edit you /etc/hosts file (again root/admin needed) and tell it what mysite.local means. Crack open the file and add this line:

127.0.0.1 mysite.local.

Save the file and refresh your browser. Bingo, its working (asuming the directory your pointing at exists of course).

If your like me and your containing folder is called the same thing as the server name and you have lots and lots of sites you can save yourself some effort and make use of Apache’s VirtualDocumentRoot (bearing in mind you will have to ensure mod_vhost_alias is enabled) and set your config file to have something like this:

<VirtualHost *:80>
    VirtualDocumentRoot /Users/username/Sites/%1/docroot
    ServerName %0.local
    <Directory “/Users/username/Sites/%1/docroot”>
        AllowOverride All
        Options All
    </Directory>
</VirtualHost>

First lets go over what an ISP should do. When it sells you a 4mb line, you get a 4mb connection to the internet almost all the time; I can accept network outages and local hub upgrades etc. Their advertising should reflect the reality of the situation, so when it says £20 per month gets you a 4mb line then thats what you should get. This is not what happens..

When selling you a 4mb line, you don’t get a 4mb line. What you actually get is a 4mb limited connection to a bigger line, say 100mb. When this line is quiet thats fine, you get 4mb. However, when you sell 100 4mb connections all connecting to that same 100mb pipe then you will get issues.

Lets say that out of those 100 people a quarter of them start to download large files; linux distros and albumns off iTunes for example, this creates a huge demand on the main 100mb line. Lets say those 25 people max out their limited connections, 25 × 4 = 100… What are the other 75 people meant to do for network connections?

Those other 75 people are just trying to surf the net, so using say (75 × 0.5mb) 37.5mb, so far that 137.5mb on a 100mb line, whops! Can someone say over selling??

As 137.5mb doesn’t fit in to a 100mb pipe, everyone gets slowed down; so that 4mb limit on your line just dropped to about 3mb. This is what is called network contention and it sucks!

Recently certain ISPs have decided that because they have oversold their main pipes in that fashion that the service causing this spike should pay towards the ISP upgrading their network to cope! What a joke! My favourite so far is Simon Gunter from Tiscali who claims the BBC should pay Tiscali money because they can’t cope with demand on their network!

Lets get this straight, the ISPs oversold their main lines, all those people heard about the iPlayer, started using it, created more then 100% traffic peaks becuse of the overselling. Then the ISP tells the BBC to cough up so it can upgrade that main line to actually be able to cope with the demand? Does that seem right to you? Sounds like an idiot to me.

Why can’t we just get what we pay for.. If you plan on selling 100 4mb connections, lay a 400mb main line in the first place! When I go to a supermarket and buy 4 oranges, I get 4 oranges. If I didn’t the supermarket would be in trouble. Yet these ISPs get away with it because of that fine print in the contract that mentions network contention. 

I hope now with the BBC on the side of the gamers and geeks we can finally get rid of that network contention open ended clause and replacing with something closer to an SLA; where the company has to promise a certain percentage of that 4% will be available at all times. That way we can all make a more informed choice. I would much rather have a gaurented 99% of 3mb than 70% of 4mb..

Until this is sorted I would highly recommend everyone downloading every possible show via the iPlayer, just to ram this home to the stupid ISPs!!

For more a details, and less ranting, about the issue between ISPs and the BBC take a look at the full article here.

• BBCs Flying Penguins!
• YouTube rick rolling everyone
• Google goes to outer space
• Tux makes a new friend.
• WoWs new hero class – The Bard
• Gmail’s time travelling emails
• New WoW expansion pack – Molton Core
• Search the future with Google Austrialia

Before we start, LAMP = Linux, Apache, MySQL and PHP and yes I know Macs aren’t Linux based, but FreeBSD is a flavour of Unix so it’s close enough!

Having recently received my lovely new work Macbook Pro and have been setting it up for some serious PHP and MySQL development. Some of these stages were seriously difficult to find and it took myself and Sheldon Els (also on his shiny new Macbook Pro) a while to figure out; so we thought we would share..

As both of us work with a php framework (php-wax) we have to create custom installs of php, mysql and apache; mainly because the installed version of php does not support PDO or PEAR. Of course soon as you recompile php it generates a Darwin version of the shared object that Apache uses meaning Apache has to be re compiled also.

• Firstly, wipe and reinstall your version of Leopard and remove all of those extra printer drivers and languages to save yourself over 5gb.
• Do all of the software updates so any changes you do to the default locations are not over written by a security update.
• I recommend creating a src folder within your user in to keep all of your source files.
• Get your hands on the latest version of xcode and install it. This is needed by everything, as it has all the gcc utils required for compiling anything!

While xcode is downloading from the Apple Dev Center install all your standard applications (Quicksilver, Adium, Textmate etc).

As mentioned above some security updates will over write files in default system locations; meaning your custom setup will be lost. This guide will try to avoid such things and install to custom locations.

Anyway, time to get to work so crack open a terminal window and lets begin.

MySQL

Download the latest stable release for your machine (please make sure you download the right version!).

Unpackage and change in to the new MySQL directory and then run these on your command line

• ./configure —prefix=/usr/local/mysql_dev —with-extra-charsets=complex —enable-thread-safe-client —enable-local-infile —enable-shared
• make
• sudo make install
• cd /usr/local/mysql_dev
• sudo ./bin/mysql_install_db —user=mysql —basedir=/usr/local/mysql_dev (make a note of the password commands needed to set a root user)
• sudo chown -R mysql ./var
• sudo /usr/local/mysql_dev/bin/mysqld_safe & (this starts the mysql daemon)

use the commands from above to set your root password.

That is MySQL setup and running, but to get it to start on boot you will need to copy the text below and save it to /Library/LaunchDaemons/com.mysql.mysqld.plistp.

Now run these commands to get MySQL to start at boot:

sudo chown root /Library/LaunchDaemons/com.mysql.mysqld.plistsudo
launchctl load -w /Library/LaunchDaemons/com.mysql.mysqld.plist

Also add the below line to you ~/.profile

export PATH=“/usr/local/bin:/usr/local/sbin:/usr/local/mysql_dev/bin:$PATH”

That is it! MySQL is sorted… NEXT!

PHP

Download the latest stable release in to your source folder

Unpackage and change in to the new php directory

• ./configure —prefix=/usr —without-iconv —with-mysql=/usr/local/mysql_dev —with-pdo-mysql=/usr/local/mysql_dev —with-apxs2=/usr/sbin/apxs —with-curl=/opt/local/bin/curl —with-zlib —with-bz2
• make
• sudo make install

From your source unpacked directory copy the shared object:

• sudo cp ./libs/libphp5.so /usr/libexec/apache2/libphp5_dev.so

Check in /usr/bin for your php binary and rename it properly:

• ls /usr/bin/php*
• sudo mv /usr/bin/php.dSYM /usr/bin/php

Fix your pear install directory

cd /usr/lib/php
sudo pear config-set php_dir /usr/lib/php

PHP done and dusted… Almost finished..

Apache

Download the latest stable version into your source folder

Unpackage it and guess what, change into the httpd directory

• ./configure -enable-layout=Darwin -enable-mods-shared=all
• make
• sudo make install

comment out the old php library load and add a new one in your /etc/apache2/httpd.conf

LoadModule php5_module libexec/apache2/libphp5_dev
#LoadModule php5_module libexec/apache2/libphp5.so

enable vhosts in your /etc/apache2/httpd.conf (Include /private/etc/apache2/extra/httpd-vhosts.conf)

fix up your /etc/apache2/extra/httpd-vhosts.conf with appropriate vhosts.

add a line in your /etc/hosts for each virtual host.

That is everything up and running, not so hard when you know how!

While indulging a bit of nostalgia I came across a great site which has converted the legendary Arkanoid to a web game made from javascript! Have a play here.

The other plus point of the Tesla is the fuel economy of 135mpg! The 2008 batch have already been sold and I’m looking forward to reading the first road test. For now take a look at the pistonheads page or the companies own website.

Netscape was one of the first modern generation browsers with, at it’s peak, over 90% of people using it (in the days of 4.7!) but has recently slumped to a miniscule 0.6%. This huge swing in fortune was the decisive factor and the end of Navigator was set last year by the various boards and management at AOL.

Netscape Navigator was a very important piece of software laying down the ground rules for almost every other browser including the IE series and will go do in history.

In spirit it will on in the form of Firefox, Flock and various other Mozilla based browsers. The Mozillia foundation was created by former Netscape staff who were made redundant in 2003; since then they have once again had large scale success with Firefox now corning over 20% of the worlds browsers.

When you starting mixing floated containers with non floated containers the IE 6 only parameter hasLayout triggers to -1 causing all sorts of chaos in your layout; most notably tail characters repeating themselves. This is a big pain in the ass and is a little devil to fix.

To get your layout working again you have to get hasLayout back to 1. This can be done in several ways but the most successful seems to be by adding display:inline onto the containers (and sometimes the items inside) style declarations and crossing as many body parts as you can (for luck).

Other methods for fixing this is to set margin-right:-3px or to change which parts are floated (if your layout allows).

The best way to still load all your remote content in and inform the user of what is going is to use a loading image. I can never find a a decent one when I need it most, so this site I came across is great! You can select a suitable style, background colour and foreground colour and the site creates a gif for you!

Try it out yourself here.

With the switch between older versions of IE they implemented a malformed doc type detector to enable what was commonly known as ‘quirks mode’ so the site would render using the previous engine. At first look you’ve got to think that this was bad as you could end up with thousands of broken sites which relied on the old, faulty engine. And thats the point.

The only way to get old sites which only worked with faulty / flawed rendering engines is to make sure that when the users of the site install a new browser the site breaks. After all these users start complaining making the site work correctly suddenly appeals a lot more.

This is NOT what has happened with IE 8.

Instead MS and their development team decided to flout previous acceptable methods and create a meta tag to signify the site should use then newly compliant engine. So why exactly would anyone spend time and money turning their old site? As far as they are concerned the site works, who cares if its standard compliant.

Yes its tough being the browser that most people use and with such a bad record of adhering to standards a big switch to a compliant engine and site that was made for your old engine wont work and your stuck answering thousands of email complaints. Is this a goog enough reason… I don’t think so; grow some balls and break the sites are meant to be broken!

If you want to see opinions of world renowned web experts on this stupid decision, take a look at opera watch.

On first look its pretty, sleek, looks the business and has some nice built in features. However, on closer inspection there are some issues with it. Lets start with the my main bug bear; the hard drive.

By default it comes with a PATA drive only running at 4200 rpm making slow and already a generation behind normal laptop drives. To get the 64GB solid state drive adds almost £1K onto the asking price!!! I know its the largest of its kind and therefore going to be pricey but that option now puts it in the same region as a top MacBook Pro!

The Air comes with 2GB of RAM, which you cant upgrade. So I’ve just spent £1200 on something that will need replacing in a year or so when the next version of PS and the like requires 3GB to do anything useful.

No built in ethernet port. Yeah its got wireless, but for gaming or any kind of en masse file exchange then you cant beat a good old cat5 cable.

No optical drive. For me thats not a particular problem as I bearly use my drive as it is, but for your standard user this is how they get programs onto their machines. As a solution you can buy a separate drive at an additional cost of course.

Overall I would rather save some money and buy a nicely kitted out MacBook for portability or if I was a bit flush a 15" inch MacBook Pro.

I only seem to have the original and current designs at hand; not sure where the second version went to but it is some what similar to the current iteration, minus the top navigation bar.

As this was built and populated ages ago this is running an older version of the Wildfire CMS but is a relatively straight forward site, nothing to complicated.

Go have a look at their live site.

(This site was also worked on by Ross Riley, John Walker and Sheldon Els)

EDIT (Oct 10 2009): Wow, I’m shocked that it hasn’t been changed again!

Along with an extensive list of shops inside the Birmingham city centre the site also has a large news section journaling relevant events and blog like features. The blog section (called Style Guru) contains posts from local style icons about the latest trends in the fashion world.

The Shops section breaks down all of the shops into primary categories such as Menswear, Womenswear, etc. From this section you can then view a list of shops.

When viewing the actual shop you get a decent level of information including a google map of where the shop is, some basic copy about the shop, details like phone numbers, websites and opening hours are also included along with what Brands the shop stocks.

Alternatively you can use The Brands section to find the brand your looking for and then view the shops that stock that brand.

The site has a competitions section on the front end and within the CMS. The CMS module allows the admin to create a new competition, specifying questions, start date, end dates and introduction text. As an extra feature the admin can hide the competition feed from the front page and view all entrants.

The gallery section (now renamed events) uses the same slideshow technology as the latest articles on the home page to display the most recent 9 photos. This initial page also shows some descriptive text which is controlled via the CMS. The main gallery page shows all images, paginated with an on click jqmodal box.

The site uses modern web standards together with cutting edge AJAX technics to keep the site smooth and simple.

EDIT (Aug 01 2009): The site has now been redesigned by 383 project, so all of that stuff above no longer exists!

Another insurance broker website based on one of the more recent iterations on the Wildfire CMS. Fairly standard with the a contact us form and google map.

The site contains several AJAX enabled sections to improve the website flow and ease of use. For the most part the site uses the Moo Tools library with certain aspects such as the gallery (now disabled) using the YUI library instead.

The site also has multiple skins which are currently pink for spring, orange for autumn and blue for winter.

As always the site has a google sitemap, dynamic meta tags (utilising some constant values along with chunks of the page copy) and is valid xhtml strict (unless some of the dynamic content breaks it!).

EDIT (Jun 11 2009): It seems the previous incarnation of the site has now also been turned off; along with pretty much all webxpress.com domains.

EDIT (Sept 03 2008): My previous employer (WAA) recently lost the account for Telford Shopping Centre and the site has been completely redesigned – I’m not impressed; compare it to our version and see what you think.

Where SONY and Microsoft went about created bigger, meaner machines with high end graphic cards and enough technology to carry such weighty tags as ‘home entertainment console’ and ‘THE home theatre solution’ Nintendo went a different way

Using the existing Gamecube platform Nintendo went about doing what they do best; they changed the way we played games. Instead of using clunky controllers they came up with a small tv remote style controller and then came the killer feature…

Your motions controller aspects of the games! The days of button bashing are over, now to beat some jumped up kid on the Wii you need some muscle in places other then your fingers. After playing 4 player Wii tennis i woke up the next day with sore arm muscles!

Forget the real life graphics, fun and game play wins every time!

However, as part of the php-wax framework development I created a very basic plugin to use the Flickr API. You can see an example of its use on the front page of this website. Once the framework has been released and out of beta I will write a proper article about its uses with code examples.

How about a facility inside their CMS which would let them list these keywords and then some how from these keywords pull back a list of appropriate websites. Then from this list (and of course allowing users to add some more of their own) search for pages containing another set of keywords and then using some statics track the rise and fall of these keywords over a set duration.

Not a bad idea i thought, so i looked into implementing it and came across another great utility provided by yahoo. Yes it’s another api, but this one is useful. The web search REST service allows anyone to query yahoo’s search engine, specifying all sorts of parameters and retrieve the results in multiple formats including serialised php and xml.

Great! Now all I need is the client to agree to it and I’ll be making a meta search engine.

When it gets to a sensible price level (ie free or very cheap on contract like most phones) and has 3G facilities instead of EDGE with a larger hard drive then I will definitely have one!

Lets start at the beginning; I am one of the developers working on a new php framework called php-wax. I won’t get into details in this post (please see another post – when i write it!) but basically it does what rails did for ruby. Once the framework got to a certain point we started to develop a CMS system to go with it to allow simple updating of content and make everyday minor updates simple.

This new site is an example of how flexible these can be and lots nicer then messing around trying to hack wordpress to do something new. Two big changes to the standard combination are the custom comments module and an alteration to how the content is found, allowing categories to be used in a similar fashion to the sections list

On a side note the home page also uses some cool javascript and php-wax’s flickr API (something I wrote a while back, ok for the basics not tried anything too daring with it yet) to create a slide show of my most recent photos. If this is well received I will probably use it and jmodal boxes on actual content pages

Anyway, where was I… The comments module is a custom module inserted into the CMS, hopefully I will get round to tidying it up and convert it into a plugin to make future use nice and easy.

That is one of the great features of php-wax, the fact you can run one simple command and do lots of great things. This ranges from installing plugins to deploying the website onto a live server. Anyway, thats enough talk about the technology of the site and time to move onto its purpose

As with every web developer I’m only as good as my last site, so I’ll be adding a portfolio section to showcase what I’ve been working on along with the usual sport and hobbies.

In order to make the site customised for each client the entire site content is filtered by which client is logged in. In order to speed up making client ares I developed a templating system with creates a basic set of pages and documents on client creation.

When making the client simply select what type of client it is (local government, housing associations etc) from the template list and the appropriate set of web pages are created for the new client.

When you also factor in the number of outbound links and themed sections then you can imagine just how big this site is. In order for the client to keep all of this under control the entire site is ran via an early version of the Wildfire CMS.

On an event page the person can submit their details to confirm that they are coming. All people that have submitted their details are viewable within the CMS and can be exported in the form of a csv.

EDIT (14 Oct 2009): It seems they have been bought out by another insurance group so no longer have a website!

The British sensation withstood everything that the afternoon’s action could throw at him to take a fantastic maiden victory in just his sixth F1 race on Canada’s Circuit Gilles Villeneuve.

There were four safety cars periods, the difficulties of driving on an increasingly treacherous track and constant order changes behind him to deal with – but Lewis kept his head throughout to take a flawless win.

The wild race, which featured a horrifying accident for BMW Sauber driver Robert Kubica, made fellow championship Fernando Alonso and Ferrari’s Kimi Raikkonen look like the rookies.

But while the established stars faltered, Hamilton added the most important chapter in his F1 story so far and now leads the championship ahead of Alonso by eight points.

Indeed the contrasting fortunes of the two McLaren drivers were settled at the start.

Hamilton was slower away off the line than his team-mate and Alonso looked set to sweep around the outside of the sister MP4-22 going in to turn one.

But in a mistake reminiscent of his one at last month’s Spanish Grand Prix, Alonso out braked himself and was forced to cut across the grass at the turn two hairpin.

Crucially the mistake dropped the double world champion behind the BMW of Nick Heidfeld, allowing Hamilton the opportunity he needed to dictate the race from the front.

And that’s where he would stay, despite all that one of the most chaotic races in recent years served up.

By the end of lap one, the Briton was 1.5 ahead of Heidfeld, with Alonso stuck behind the German.

However rather than climbing all over the back of the BMW, the Spaniard was consistently around two seconds behind it for the opening 10 laps while his team-mate was waltzing away at the front.

No doubt frustrated by his predicament, on lap 15 Alonso made his second mistake at turn one, running across the grass and losing a further two seconds to his team-mate.

The world champion though would surely ensure he wouldn’t make the same mistake for a third time though, right?

Well, amazingly, it wasn’t as just three la

later he slid across the turn one grass again, but this time the mistake was even more costly as it allowed Massa to nip inside the McLaren and nab third place.

But in the next few laps the whole complexion of the race changed.

Hamilton pitted on lap 22 and looked set to continue on his way until his old F3 Euroseries team-mate and friend Adrian Sutil threw a spanner in the works – or rather threw his Spyker hard in to the turn four wall.

The incident brought out the safety car just seconds after Hamilton had rejoined, eroding his comfortable lead.

While Nick Heidfeld remained a threat, he soon didn’t have to worry about Alonso, who along with Nico Rosberg, made his first pit stop when their respective teams wrongly thought the pit lane was still open.

The pair were immediately placed under investigation by race control and were soon handed a 10s stop-go penalty – which they would serve later.

More drama befell Massa and Renault’s Giancarlo Fisichella when the pit lane was reopened.

As they made to rejoin the circuit, they jumped a red light at the exit of the pit lane – an infraction that would later see both black-flagged from the race with just 19 la

to go.

The next man along, Kubica, did obey the lights, but the Pole was soon the unfortunate passenger in a terrifying accident.

On lap 27, when the race went green, the BMW driver had enormous crash after touching the right-rear wheel of Jarno Trulli’s Toyota while heading towards the hairpin flat-out at 180mph.

The impact launched Kubica’s F1.07 into a massive impact with the concrete wall, before it slewed back across the track, rolled, and finally came to rest against the guardrail on the outside of the hairpin.

The safety car was immediately dispatched once again to allow medics to attend to the Pole and marshals the chance to clear the huge amounts of debris littering the circuit.The accident cast a menacing cloud over the afternoon, but miraculously Kubica was awake and alert when he was taken to the circuit medical centre.

He was airlifted to hospital and the team later confirmed that he was uninjured.

When the race resumed on lap 33, leader Hamilton immediately picked up from where he had left off and left Nick Heidfeld standing when the safety car pulled in to build an immediate three-second advantage.

But the safety car was to make two more appearances still, just to make Lewis’ life a bit more difficult.

The first came on lap 50 after Christijan Albers became the second driver to spread orange carbon fibre debris following an off-track moment.

Then just six la

later Tonio Liuzzi, on course for a healthy haul of points for Toro Rosso, added his name alongside the likes of Michael Schumacher, Damon Hill and Jacques Villeneuve by ploughing into the infamous wall at the final turn.

But while Liuzzi may not be a champion yet, one man who looks set to be, maybe even this season, is Lewis Hamilton – who after what must have seemed the longest afternoon of his life crossed the line to take a magnificent first F1 victory.

Heidfeld, who had been the McLaren drivers’ closest challenger all afternoon, picked up BMW’s best result since it bought the Sauber team at the end of 2005, with a superb second place.

Undoubtedly the biggest winner from the madness was Alex Wurz who from 19th on the grid ke

his head above the confusion to come home a remarkable third.

The result ended Williams’ two-year podium drought and was the prefect way for the likeable Austrian to celebrate the 10-year anniversary of his F1 debut.

It was also a landmark day for Renault’s Heikki Kovalainen, who despite all the trails and tribulations of his weekend up until Sunday, came through from the back of the field to claim fourth place, his own F1 high so far.

Raikkonen was perha

lucky to end up fifth after a scrap

performance in which he never lived up to his ‘Iceman’ nickname.

The Finn, whose championship challenge is slipping away by the race, touched the back of team-mate Massa at the first turn and then survived queuing behind the Brazilian while pitting under the safety car and several other misadventures.

Raikkonen’s four points were all Ferrari had to show from a weekend in which it once again was unable to challenge the now dominant McLarens.

Then to cap a quite extraordinary afternoon, Takuma Sato pulled off something that you thought you would never witness – a Super Aguri passing a McLaren on merit.

The McLaren was the double world champion of Fernando Alonso, no less, whose nightmare afternoon ended with a demotion to seventh place after the feisty Japanese ace out braked the Spaniard into the final chicane.

The final point went to Toyota’s Ralf Schumacher, who himself was a late victim of the Sato charge.

But the day belonged to super Lewis after what will surely be the first win of many.

Laziness has caught hold once agin, this is an edited report taken from itv

The silver cars were in a class of their own throughout, routinely lapping a second faster than the opposition and leaving Ferrari’s Felipe Massa trailing home nearly a whole lap behind in third place

Despite some acrobatic and at times heart-stopping driving with an oversteering car, Lewis was unable to get past Alonso

The fact that he looked downbeat after his fifth podium finish in as many F1 starts was a measure of just what an astoundingly good job he has done so far, and how high expectations have been raised

Alonso and Hamilton both got away well from the front row, the Briton crossing over to the right-hand side to cover any challenge from Massa and slotting in behind his team-mate before the first corner

A set of super-soft tyres propelled Nick Heidfeld off the line and the German put a muscular move on Nico Rosberg to grab fifth behind Giancarlo Fisichella’s Renault

All 22 cars made it round the first lap but Vitantonio Liuzzi got out of shape at Massenet at the start of lap two and buried his Toro Rosso in the barrier

His MP4-22 had not been handling quite to his liking and a tyre pressure adjustment at the pit stop had not cured the problem

By the time Alonso stopped for the second time on lap 51, he had 11 seconds in hand

It was too much for Hamilton to overcome, particularly since it transpired that he was pitting just two laps later although a leisurely out-lap from Alonso made it a lot closer than it might have otherwise been

In fact, over the next few laps Alonso allowed his lead to dwindle to as little as 0.7s

Did he have a problem? Or having made his statement when he needed to was he simply moderating his pace to ensure no mishaps on the way to the chequered flag?

Alonso relaxed his pace a little and the silver cars held station until the finish

After initially keeping the McLarens in sight, Massa had a lonely afternoon holding down an ever more distant third place

The Brazilian crossed the line one minute and nine seconds behind Alonso

Fisichella also ploughed his own furrow in fourth, but this result beating both BMW Saubers on merit was a morale-booster for the Renault squad, suggesting that the world champion team is gradually regaining lost competitiveness

Robert Kubica parlayed a 45-lap opening stint and a single pit stop into fifth place, leapfrogging his team-mate Heidfeld who ran a less conventional one-stop strategy with a short first stint on super-soft tyres followed by a long run to the flag

Alex Wurz took seventh for Williams, his first points-scoring finish since his return to grand prix racing this year

The Austrian fought a successful rearguard action to keep Kimi Raikkonen at bay throughout the closing stages

Starting from a lowly 16th after his qualifying mishap, Raikkonen made a good start to move up four places but thereafter couldn’t break free of the midfield traffic

Scott Speed took a worthy ninth place for Toro Rosso, capitalising on an excellent getaway and solid pace thereafter

The two Hondas both fell back a place from their grid berths to finish 10th (Rubens Barrichello) and 11th (Jenson Button) after the Japanese team chose an unorthodox two-stop strategy with a short final stint on super-soft tyres

Rosberg’s fine qualifying performance came to nothing as Williams’ strategy backfired and he spent much of the race stuck behind slower cars, ultimately finishing down in 12th

EDIT (Aug 12 2009): Looks like that site has been turned off and now longer in use. Not really a shock as employers at the time (WAA) lost the contract.

Massa never looked back after emerging on top from a first-corner skirmish with McLaren’s Fernando Alonso, which sent the home hero scampering across the gravel and down to fourth place – an incident he never recovered from

And while the world champion endured a race-long struggle, his team-mate Hamilton upstaged him for the second race running by scoring another superb second place finish

The result gives the 22-year-old rookie sole possession of the world championship lead after just four grands prix another extraordinary milestone

Polesitter Massa set the tone for his dominant display at the start by coming out on top after going wheel-to-wheel with Alonso going in to the first turn

Both had got away well from the front row, but it was the world champion, no doubt spurred on by his passionate fans, who looked set to take the lead as he tried to brave it round the outside of the Ferrari through turn one

However Massa held firm on the inside of the corner and the pair touched, forcing Alonso across the gravel and nearly into the path of his team-mate Hamilton and Raikkonen as he hurriedly rejoined the track

Alonso’s first corner move was a gamble that totally backfired, leaving him with a damaged car and a mountain to climb

He tried to pass Raikkonen on the outside at turn 10 on the next lap, but was forced to settle into fourth place

The first lap action had not all been at the front, as there was further chaos in the midfield

As Giancarlo Fisichella, Anthony Davidson and Ralf Schumacher battled at turn 10, the following Alex Wurz was unsighted and smashed his Williams into the back of Schumacher’s Toyota shattering his FW29’s front suspension and forcing him in to retirement

The incident also forced the Toyota driver in for an unscheduled stop a double blow for the Japanese squad after Jarno Trulli’s car had developed a fuel pump problem at the end of the formation lap

At the front, Massa rapidly pulled away from Hamilton – who had outdragged Raikkonen at the start – with a succession of fastest laps

He was six seconds clear by the end of lap 10

But his team-mate Raikkonen ?%u20AC%u201C who had been hovering around a second behind Hamilton for the first nine laps suddenly struck electrical problems and slowed

The Finn limped back to the Ferrari garage and into his first retirement of the season a huge blow to his world championship aspirations

Raikkonen’s demise came amid a series of retirements in the opening 10 laps

Red Bull’s Mark Webber (hydraulics) and Trulli had already pulled in to the garage before the right rear tyre on Scott Speed’s Toro Rosso spectacularly blew out on Catalunya’s main straight

Meanwhile up front Massa had pulled out a 9.5s advantage by the time of his first pit stop on lap 19

But for a few nervous moments all that effort looked as though it might have been in vain as an overfill on the fuel caused a flash fire on his Ferrari

Luckily for the Brazilian, however, the conflagration did little damage and he was able to get back on the pace at the start of his second stint

Massa was followed into the pits by the man who started alongside him on the front row, Alonso, but the Spaniard was now already out of the reckoning for a home victory

But he then gambled for a second time by opting to take on the harder compound tyres for the second stint in a bid to claw back lost ground ?%u20AC%u201C a decision that would see him fall further back from the top two and in to the clutches of the chasing pack behind

Within a few laps, the Spaniard was only a couple of seconds ahead of BMW’s Robert Kubica, enjoying by far his best weekend of the season, with Red Bull’s David Coulthard running close behind in fifth

Lewis, as he hinted to ITV Sport following qualifying, did indeed have more fuel on board than both his team-mate and Massa, pulling in for service three laps later than they had

This allowed him to close to within eight seconds of his Ferrari rival, but it proved to be a false dawn as despite the fire, Massa increased his lead further in the race’s second stint

By the time of the final round of stops, Massa – who again was the first of the leading runners to pit – had a virtually insurmountable 19.3s advantage in his pocket

Hamilton ran longer on the fuel, by four laps, and although he used the extra laps on the softer compound to claw back some ground, he still emerged from his second stop 11s adrift

From here Massa managed the gap to the young Briton in the final 20 laps, eventually crossing the line 6.7s ahead of F1’s youngest-ever world championship leader

Alonso’s lacklustre afternoon ended with a distant third, with Kubica picking up a solid five points for fourth after an impressive weekend

He would have had a close race with his BMW team-mate Nick Heidfeld had the German not been waved out of his first pit stop before his right front wheel was properly attached

Heidfeld had to tip-toe back around to the pits for the wheel to be secured, and later retired with gearbox failure

Another driver to star was Coulthard who scored his best result since his podium in last year’s Monaco GP, although the Scot had a nervy final five laps after his RB3 lost a gear

This allowed Nico Rosberg a shot at trying to steal fifth place for Williams, but he ran out of laps and had to settle for sixth

Heikki Kovalainen underlined his growing confidence with seventh and at times was even the fastest driver on the track, but his race was marred by a fuel rig problem that forced both Renaults to make additional stops

Probably the happiest team in the whole paddock was Super Aguri, who at the 22nd attempt finally scored its first F1 point thanks to Takuma Sato

Sato took advantage of a late splash-and-dash fuel stop from Fisichella to take eighth place and no doubt sent his massed ranks of Japanese supporters wild back home

But in contrast to the 140,000 Spaniards in the Barcelona grandstands, their own home hero had not quite delivered the result they had been looking for.

In the development of this website the first postcode search for the PHP-WAX framework was created and used so people can simply enter in their postcode and be shown the six nearest brokers. This functionality was converted into a plug-in for future use.

This site was also the first site to use a member subscription system for notifications and has the prototype models for this which since then has been generalised and integrated into the Wildfire CMS.

I worked on the initial design and phase one with my colleagues Ross Riley and Joe Turner where phase two (the integration of a quoting engine API) is being worked on by John Walker.

EDIT (Sept 10 2009): From what I’ve heard phase two is now actually live! :-o

Massa atoned for his schoolboy error in Malaysia with a perfectly judged performance, but he was harried for much of the afternoon by the astounding Hamilton, who edged tantalisingly closer to a maiden win.

The 22-year-old Briton etched his name in the F1 record books by becoming the first driver to finish on the podium in each of his first three grands prix.

Into the bargain, he moved into a three-way tie with Fernando Alonso and Kimi Raikkonen for the lead of the world championship.

Although he regained the points lead, Raikkonen was less than satisfied after finishing more than 10 seconds adrift of his winning team-mate in third place.

BMW Sauber’s Nick Heidfeld broke McLaren and Ferrari’s stranglehold on the top quartet of places with another impressive drive to fourth, the highlight of which was a skilful passing manoeuvre on Alonso.

That left the double world champion, who was outperformed by his rookie team-mate all weekend, to settle for fifth.

Massa got away well from pole position, while from the dirty side of the track Hamilton found enough traction to hold second place into the first corner.

From the second row, Alonso outdragged Raikkonen and the Ferrari only just kept the McLaren at bay at turn one.

Alonso carried more momentum through the tight complex and muscled ahead on the approach to turn four to snatch third place

Moments later the safety car was deployed following a melee at turn four which eliminated Jenson Button’s Honda and the Toro Rosso of Scott Speed

At the restart Raikkonen was caught napping, crossing the line a long way behind the top three, who were in nose-to-tail formation

Hamilton feinted to the inside of Massa approaching turn one but thought better of any outlandish move and tucked back into line

These two immediately established a cushion over Alonso, who soon had the fast-closing Raikkonen filling his mirrors

The die was cast for the opening stint, with an increasingly large margin opening up between the Massa/Hamilton and Alonso/Raikkonen battles

Alonso was visibly struggling with the handling of his MP4-22, locking wheels and missing apexes with uncharacteristic frequency â%u20AC" but Raikkonen was never quite able to pounce

As a result, Kimi found himself being chased by Heidfeld’s BMW Sauber, which had remained within surprisingly close range early on and was now closing in on the battle for third

Massa and Hamilton continued to trade fastest laps all the way up to the first pit stops, the Ferrari driver edging away on one lap only for the McLaren man to reel him in again the next

It was an absorbing duel, and such was Hamilton’s relentless focus that it was easy to forget it was but his third F1 start

Lewis was the first of the front-runners to pit and McLaren put both him and Alonso (who took on service three laps later) onto a long middle stint in a bid to turn the tables on Ferrari

The tactic didn’t pay off, as Massa turned up the wick on his scrubbed set of soft-compound tyres while both McLarens struggled for balance

Moreover, Raikkonen leapfrogged Alonso by pitting one lap later than him, which released him to hunt down second-placed Hamilton

With a front wing adjustment at his pit stop having cured his car’s understeer, Massa stretched his lead to 8.3s lap by lap 30, while Hamilton’s focus switched to fending off the other Ferrari of Raikkonen

Meanwhile Alonso’s race had really started to unravel

The Spaniard had his work cut out keeping the flying Heidfeld behind him and finally ceded the place when the BMW driver pulled off an audacious outside pass at turn four on lap 32

A little farther up the road, Raikkonen slowly but steadily whittled away the 5s gap to Hamilton until the pair were tied together by lap 40

But having handicapped him earlier, the long middle stint now worked in Lewis’ favour as he was able to stay out for three more laps on a light fuel load â%u20AC" thus continuing his remarkable record of leading each grand prix he has started

Coupled with a shorter final stop, it was enough to ensure that he retained second place, emerging from the pit lane comfortably in front of Raikkonen

Just as Massa’s lead seemed secure, there was another twist in this constantly fascinating race as it drew towards its climax

Hamilton found his McLaren was handling much better on the harder â%u20AC?%u0153prime’ tyres he had taken on at his final pit stop, now free of the understeer that had bothered him in the middle stages

The Briton began to take substantial chunks out of Massa’s lead with each new lap, cutting it to 6.7s on lap 47 and 4.6s by lap 51

His progress was thwarted a little when Anthony Davidson’s Super Aguri expired in front of him and he had to navigate his way through the murky trail of oil â%u20AC" but even on that lap, he trimmed the deficit by 0.2s

Ultimately, he ran out of laps, and Massa held on to take the chequered flag 2.3s ahead of his now regular sparring partner

When Hamilton put on his late spurt Raikkonen was unable to stay with him, finishing more than 8s in arrears

Alonso’s pace improved in the final stint and he closed back onto Heidfeld’s gearbox, but the German is one of F1’s coolest customers and was never likely to give his pursuer an opening

Robert Kubica could not match team-mate Heidfeld’s pace and almost alone of the 22 drivers, it seemed had a lonely time en route to sixth place and his first points of 2007

By rights, seventh place should have gone to David Coulthard, who drove his best race since scoring Red Bull’s first podium finish in Monaco last year

The Scot’s feisty charge from 21st on the grid was sadly halted by a broken driveshaft shortly after his second pit stop

Team-mate Mark Webber stepped into the breach, but his RB3 fell by the wayside five laps later

The demise of the Red Bulls promoted Jarno Trulli and Giancarlo Fisichella to the final points-paying positions

The Toyota driver had his hands full in the closing laps staving off his fellow Italian, who despite Renault boss Flavio Briatore’s animated exhortations over the radio was unable to find a way past.

layout: defaulttitle: F1 – Malaysia 2007category: motorsportkeywords:- motorsport- F1- 2007- Sepang- Malaysia- Hermann Tilke- heritage- Ferrari- Schumacher- Kimi Raikkonendescription: “Sepang was the first of the new generation of Hermann Tilke designed racetracks, and it made a big impression when it joined the Formula 1 calendar in 1999.”—-Sepang was the first of the new generation of Hermann Tilke-designed racetracks, and it made a big impression when it joined the Formula 1 calendar in 1999.With its wide expanses, sweeping corners and state-of-the-art facilities, the state-funded Malaysian circuit on the outskirts of Kuala Lumpur provided a blueprint for the many new grand prix tracks that would spring up in ever more diverse corners of the world over the next decade.It also gave an insight into the difficulties of establishing an F1 venue in a country with little motorsport heritage.But the organisers do not complain about the lack of a large and passionate crowd, instead seeing the grand prix as an excellent way to advertise Malaysia as an international tourist destination.Sepang’s first ever F1 race in ‘99 was its most memorable, as Michael Schumacher made a remarkable comeback after three months on the sidelines with a broken leg.He took pole position and dominated until handing victory to his title-chasing team-mate Eddie Irvine.Highlights of subsequent years included Kimi Raikkonen’s maiden win in 2003 and Jenson Button’s long-awaited first podium the following season.The circuits wide straights leading into tight corners have always prompted lively wheel-to-wheel racing – and inevitably some controversial collisions as well.

layout: defaulttitle: F1 – Australia 2007category: motorsportkeywords:- motorsport- 2007- Ferrari- Mass- Kimi- Australiadescription: "Start of a new season and Ferrari have got off to a cracking start. Not the best day for Massa (dropping to 20th after a gearbox change) but he did manage to get all the way up to 6th place and score some points. "—-Start of a new season and Ferrari have got off to a cracking start. Not the best day for Massa (dropping to 20th after a gearbox change) but he did manage to get all the way up to 6th place and score some points.With a win for Kimmi the season looks good for the Ferrari faithful.Youngster Lewis Hamilton put in a sterling performance to get on the podium on his first outing into F1 and spent most of the race showing Alonso exactly why Ron Dennis has so much faith in him.Hopefully the points will keep coming for Lewis as with Button stuck in an under performing Honda he is the main British interest this season. Unfortunately that does come with all that pressure and hassle from the media; lets just hope they will leave him in peace to do this thing on the track.Other notable points: The MacLaren is still the most beautiful car on the track and this season seems to have some speed and substance to back up its looks. Wurz was almost decapitated by the under-tray of Coultards Red Bull in a daring (if slightly foolish) over taking attempt.

Take a look at the youTube video here.

Take a look at the full story here.

And about time to! Take a look at the full story here.

Take a look here.

After a rush to get it all sorted the new Spirit Health Club website went live. This is running on a highly customised early version of the Wildfire CMS and PHP-WAX framework. The majority of the customisation relates to each club having separate admin logins with the ability to create unique pages, offers and news for their club.

Somewhere along the line the ‘big wigs’ at Bulldog would of had to formulate a strategy for resolving customer queries. It looks like this meeting was a very short one. Their answer to everything; out source to India! Yes, thats right, another company jumping on that band wagon.

Due to restrictions imposed upon me by my landlord (no cable allowed:( ) I was left with very few choices for an ADSL provider. I opted for the best of a bad bunch, Bulldog. That is when things started to go wrong.

The connection took 6 weeks to be sorted, instead of the maximum of 4 stated on the website and on the letter. Strike 1!

Fitting day came, credit where credit is due, the engineer was early and switched on the socket nice and quickly. Now according to the letters, emails and the assurances of the fitter, the line should be active within 4 hours.

Five hours later, nothing. Time to call the helpline.

Strike 2! Useless in the extreme. With great lines like “if you want to complain about your lack of internet connection you will need to send an email to…” and “have you checked your connection status online?” it is difficult for me to comprehend how these people survive.

At this point I was getting somewhat annoyed, clearly those ‘bigwigs’ who made these procedures lack some common sense. How exactly do you send an email or look at a website when they haven’t got round to pulling their collective finger out and switching on my line!

I called back later on in the evening before the so called “support” line closed. Strike 3 and in a big way! This time the idiot on the other end claims “if it is not on now sir, it probably wont be until monday”. Time to get the supervisor!

After a brief vent of some more choice points that I wanted them to fully understand in no uncertain terms (mostly arguments about them lying in their correspondence and delaying of services equating to breaches of contract) I calmed down slightly.

In hindsight the most worrying and down right rude part of this escapade was that not a single member of the support staff ever apologised or even showed the slightest form of remorse. Yes, I was at times slightly abrupt, but only because I was getting nowhere!

Maybe in the future those same ‘big wigs’ will sit down and decide that if their customer service was better and actually helpful they might shrug off the bad image, get more customers and make money that way instead of cutting corners by giving everything to the lowest bidder.

At the moment, my internet connection is running well and I have no complaints about that thankfully, as I really do not relish having to speak to “support” again!

Rant over and out .. for now..

Plying my trade using mostly Linux, Windows and the odd Unix systemI was always a fan of the stability and security of the ’Nix way. On the other side the compatibility and of course the plethora of games available on Windows is a draw.

With OS X being based on FreeBSD there is a happy third alternative. I know this is a bit behind the times, but I’ve never quite got round to writing this before but this time I was spurred into writing this by my recent purchase. A Mac Mini!

I couldn’t help it, its small, perfectly formed and more powerful then my tower PC! With top class software, great compatibility and some amazing games I cant think of a reason not to own a Mac any more. Especially now you can have two buttons on your mouse!

The fact is I’ve now completely converted, even to the extent where I use an iMac at work and an old PowerBook for a laptop.

Since owning my Mac I’ve really been enjoying using text mate. A truly wonderful piece of editing software, it comes with syntax highlighting and help files for virtually every single commonly used programming language. It even includes utilities for svn!

I know there are some down sides to using a Mac, but they are getting fewer all the time. I am now officially a Mac Fan!

Now where did I put my ipod…. ;)

However, this was not the case. With only a few races remaining it was a very close call between Schumi and Alonso; unfortunately a rare engine failure gifted it to Alonso.

If you look back though the season then maybe you could point out some mistakes (by Ferrari and Michael) that cost points and possibly even the championship. But this would take away from the astounding performances and pure driving genius that he graced us with this year and during his illustrious career.

On several occasions “the master” shocked us with brilliant over taking, amazing grit and determination along with stunning race performances. In some cases coming from the tail end of the grid to get his car in the points!

Unfortunately there were some lows. One in particular might cast a shadow of disapproval over his last season, maybe even his entire career. The incident at Monte Carlo. Tactical, yes, sportsman-like, no.

If it had worked, it would have been great for Ferrari. But it didn’t.

Incidents like this occurred though out his career. That is the flaw of the champion. The desire to win at all costs, regardless of others.

Should we persecute him for this? No, after all he is only human and we all make mistakes. Thankfully for most of us 10 million plus people aren’t watching us when we make them.

Whether you love him or loath him, the sport wont be the same without him. No offence to Alonso, but he just doesn’t have the same level of notoriety or skill as Michael. Without the 7-time champion the sport no longer has that exciting figurehead that inspires the fans.

With the rumour mill working over time, talk is already circulating about Michael going back to Renault for one last season, maybe even creating his own team with Ross Braun (the architect of many Shumi wins). Who knows what will happen (Bernie?), but I doubt we’ve seen the last of Michael Schumacer.

This season wasn’t just about the title race. With new winners and sterling performances from young drivers there is hope for next season.

Button winning his first race has to be one of the best moments this year for British motor sport. Massa out-qualifying his team mate on more then one occasion. Kimi moving to Ferrari. Alonso going to McClaren. 2007 should be an interesting year.

Go Ferrari!

During my university days I used public transport almost exclusively to get back and forth. Most of the time it was the train, which meant using New Street.

With thousands of trains coming and going day in day out there are bound to be the odd delay, which is acceptable. However, when these delays are caused by miss-management and poor control systems something needs to be done.

For many years there has been talk about giving New Street an overhaul. In the latest bout of proposals New Street gets another set of platforms, a lofty makeover and a sparkly lick of paint.

While this is great for the artisans amongst us the practical side of me wonders if these improvements will be more then skin deep. Will they finally dump the cash-sucking Windows and jump onto the OpenSource bandwagon?

Although I’m not a regular “user”, I must admit the bus service by me is annoyingly regular (all those buses driving by really messes with my tv reception!). With some nice new touches, such as location of where the next bus is and its eta, maybe buses are the way forward?

Or maybe not. Even if there were massive improvements to public transport, the chances are I’d still take the car!

How wrong could I have been!

After providing them with the complete address (not just a guessed one mind you, but the official full address straight from Royal Mail) surely finding the property would be easy.

Postcode, no luck there; full address; still can’t find it. What more do they want, the longitude and latitude? Eventually after hounding the letting agent I finally got hold of the previous account number and hey presto, they found it.

This problem was repeated at almost every one of the utility providers I contacted. Maybe it was something I was doing, but then how did other companies find my flat straight away?

After a little bit of investigation I found the crux of the problem. Approximately 18 months ago the building that is now my block of flats was a field.

It seems that these large, national companies simply weren’t updating their information. Why is this? Budget cuts? Poor practices? Laziness? Ignorance?

With an ever increasing demanding for new housing this seems a worrying trend. Does this mean that every new house or block of flats won’t appear on the books of basic utility provides for over a year?

Maybe it was just my flat; maybe I moved in in-between them updating their databases; maybe I’m just unlucky. If not, they really need re-evaluate their business practices and update! Well, that is my rant over for this week!

EDIT (Jan 20 2008): Unfortunately the company that ran this site suffered a tragedy leading to closure and sale; this meant the website was also shut down so I have removed the links.