Event delegation is the topic of today’s post as it was the primary reason for me not understanding .on(), and I’m writing about it because it took someone to tell me about it for it to sink in… so keep reading and I may be able to do the same for you.

Our example code

So for the purpose of this post, let’s assume we have a table, and in that table we have 500 rows, we’ll only show a few but imagine there are many more there.

<table>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    ... many more rows
</table>

For our example event we’ll fire an alert box when a row is clicked, nice and simple.

Event bubbling

One thing you need to understand about events in jQuery is event bubbling, it’s quite simple really, when an event fires on an element, it also fires on each of its parents up the DOM to the document*. This means when we click on one of our table rows the table also receives a click event, and so does each parent until we hit the document level.

* Some events don’t do this, such as submit

Non-delegation event binding

So if you’re like me and haven’t used event delegation yet you might use a very simple selector to base your event on, we want to target the click event on all rows right? Easy!

$('table tr').click(function() {
    alert("A normal click event");
});

So that was pretty easy, and it does exactly what we want it to do, but what are we actually telling jQuery to do? We’re asking it to bind an event to every matching element based on our selector, this event is being bound to 500 individual elements!

It goes without saying that this is an inefficient method of binding an event, but how can we improve it?

Event delegation

Right, so how can event delegation improve our standard selector? Remember what we discussed previously about events bubbling up the DOM, every table row click also fires a table click? Well we can take advantage of event bubbling by applying our click event to the parent table, and check if the clicked item was the table row. In other words we’ll be delegating the click event to the table.

We’re doing a bit more work in our event, but we now only have one bound event. Actually, as developers we’re not doing any extra work… jQuery gives us the tools to delegate easily, take a look at this:

$('table').on('click', 'tr', function() {
    alert("We're delegating baby");
});

So lets explain exactly what we’ve done, our selector targets the table and the first parameter of the on method is the event type, click in this instance. The second parameter is where our delegation is set, we pass through the context of tr, this tells jQuery that we’re delegating the click event from the table row to the parent table.

This method improves performance as the number of events bound is significantly reduced (from 500 to one), but we also take advantage of another side effect, being able to fire events against dynamically inserted content. So if you dynamically add another 500 rows to the table our last event will still fire on all of them, with no extra work. Whereas the .click() event would not, as the new rows would not have an event bound directly to them.

Alternative to .live()

At uzERP I migrated our JavaScript framework from Prototype to jQuery about two years ago, and ever since we’ve been using the .live() event method for practically everything, as lots of our content is dynamically inserted from AJAX requests.

The .live() method employs event delegation to allow you to bind events to an element, even if it doesn’t exist at runtime or is replaced thereafter. The issue is .live() bubbles the event right up to the document level, and then checks where it came from to determine which event(s) to fire, that’s a lot of bubbling.

The .live() method was deprecated in jQuery 1.7, and only remains for legacy reasons. Thus take a moment to improve your code and go and remove .live() for .on(), I know I will be.

Happy delegating!

With this in mind you might want to add Siege to your tool belt. Siege is a regression and benchmarking tool that allows you to throw a load of concurrent requests at your app within a specific time frame. Keep reading for an introduction to Siege.

I’m going to be running Siege on my Debian 6 server, this process should be the same for Ubuntu, although you might have to do a bit more work to get going on other linux flavours.

So, lets install Siege:

sudo apt-get install siege

That was easy, apt-get will resolve dependencies for you so if everything’s gone well you should be able to get stuck right in, lets say we’ve got a WordPress instance under localhost that we want to test, simply run this command:

siege -c 5 -b -t30s 'http://localhost'

Here’s a quick explanation of the options we’ve used above:

• -c 5 – run with five concurrent requests
• -b – benchmark mode
• -t30s – time, run for 30 seconds
• http://localhost – the target of the benchmark

When Siege has completed benchmarking your app we get this back:

Lifting the server siege...      done.
Transactions:		          21 hits
Availability:		      100.00 %
Elapsed time:		       29.35 secs
Data transferred:	        0.55 MB
Response time:		        5.75 secs
Transaction rate:	        0.72 trans/sec
Throughput:		        0.02 MB/sec
Concurrency:		        4.12
Successful transactions:          21
Failed transactions:	           0
Longest transaction:	        8.16
Shortest transaction:	        4.73

We could analyse each of the bits of data above, and which piece of data you analyse and compare is really specific to what you’re trying to find out from your benchmarking. For the work I do I’m really interested in reducing the response time, of which will impact on how many transactions will complete in our 30 seconds of benchmarking.

Of course like any experiment you’ll need a set of figures to act as your control, run Siege before making changes to your app and then again after each revision, being able to compare before and after will give you a handle on whether your changes are improving performance.

There are plenty of options for using Siege, an explanation of which can be found on the Siege manual page.

The plugin will ensure that only valid pages can be selected, a valid request will result in the paged callback. First, previous, next and last buttons work out of the box, but are optional.

DemoDownload

Since my first version I’ve further improved the jQuery / WordPress fix, ironing out a few issues I found making this a simper and less restrictive fix, in this post I address these issues and demonstrate an improved method of loading jQuery into your WordPress theme.

Issues with the previous version

• Generating protocol relative URLs in PHP is a bit of a pain
• Difficult to provide fallback jQuery file
• Too much emphasise on functions file instead of theme file

How do we solve these issues?

Easy, go back to loading jQuery in your themes header.php file, load it how you used to in the good old days… just like the example given in the HTML5 boilerplate:

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.4.min.js"><\/script>')</script>

We still need to register jQuery with WordPress, so my first thought was to load an empty ‘dummy’ js file, however WordPress doesn’t actually need to load a file to register jQuery as an available dependancy. With that in mind look here’s the improved fix:

function load_jquery() {

    // only use this method is we're not in wp-admin
    if (!is_admin())
    {

        // deregister the original version of jQuery
        wp_deregister_script('jquery');

        // register it again, this time with no file path
        wp_register_script('jquery', '', FALSE, '1.6.4');

        // add it back into the queue
        wp_enqueue_script('jquery');

    }

}

add_action('template_redirect', 'load_jquery');

Notice we’ve deregistered the original version, registered a new version (which just so happens to have no file associated with it), then placed it back in the queue. Now any other JavaScript files that depend on jQuery will load, as WordPress recognises the dependancy (jQuery) has been set. I also figured we’d need to keep the version number in there just in case another script references a specific version dependency.

A good example of a WordPress plugin that has JavaScript files that depend on jQuery is Contact Form 7, of which loses it’s ability to submit using AJAX is jQuery isn’t in WordPress’ resources queue.

With this new fix you can load jQuery however you like in your theme, thus kicking the arse of all of the issues I raised at the start of the post! The improvement from the original version seems pretty good although I haven’t been running for that long.

As always comments are welcome, especially if you spot an issue or think this can be further improved.

Before the release of Microsoft’s last operating system, Windows 7, I had hoped that they might have simplified their line up and reduced prices in order to make stepping on board the Windows train slightly easier. But does price and choice really affect the sale of software?

Choice

Just like XP and Vista, Windows 7 was release with three different versions (in Europe), six if you include upgrade versions too, these are:

• Home Premium
• Professional
• Ultimate

When it comes to choice we all know that for most domestic customers Professional and Ultimate are beyond their requirements, but do the customers know that? There’s an interesting study into how customers react to choice, specifically a wide range of choices, in which the following was proven:

When customers were presented with a huge selection of brands of a certain item, fewer customers bought the item than when fewer brands were displayed. The wide selection led to a paralysis of choice – the customers could not decide which brand to choose. As a result, they went away without choosing any.

Now three versions of Windows 7 isn’t exactly massive choice, but when you consider there are also three upgrade versions this presents are rather interesting set of choices to the user, now it’s fair to say a technically minded customer wouldn’t have a problem selecting the version they want, but what about the average user?

Price

Before the launch of Windows 7, Microsoft announced the UK pricing as follows, upgrade prices in brackets:

• Home Premium: £149.99 (£79.99)
• Professional: £219.99 (£189.99)
• Ultimate: £229.99 (£199.99)

Their cheapest offering was £150 for a full version, whether this is considered cheap or not is subjective, as is value for money. However in recent times we’ve seen a rise in low cost software and it’s been proven lowering the cost of software can increase sales, thus increasing revenue vs normal sales of a high cost unit.

Valve (creators of the Steam platform) ran an experiement where they asked are games too expensive?, they reduced the price of a game in the hope that it would lead to increased sales. Not only did sales increase but so did revenue:

Discounting games does not only increase unit sales–it increases actual revenues. During the 16-day sale window over the holidays, third-parties were given a choice as to how severely they would discount their games. Those that discounted their games by 10 percent saw a 35% uptick in sales–that’s dollars, not units. A 25 percent discount meant a 245 percent increase in sales. Dropping the price by 50 percent meant a sales increase of 320 percent. And a 75 percent decrease in the price point generated a 1,470 percent increase in sales.

Low cost software isn’t restricted to the gaming community either, look at applications in both the Mac App Store and the iOS App Store, millions of people were happy to chance a dollar (less than a pound) on the Angry Birds game and that’s claimed to be one of the most profitable games in history.

Could this work for operating systems too? Mac OS X Lion is available for only £20.99 in the UK, less than most of the software that needs it to run! Not too scientifically Lion hit the top paid app spot on the Mac App Store pretty quickly.

Disclaimer: I know Lion is only available to Snow Leopard users at present, and a USB option will be available in August to others at a cost £55, granted twice as expensive as the download only version.

My Thoughts…

Considering (as of this post) that in the last year Windows has lost over 3% of it’s market share compared to a 0.3% increase against Mac and a 2.5% increase for iOS platforms, I think Microsoft will have to do something to slow down / reverse it’s market share decline, would changing it’s strategy with regards to choice and price work? I think it would, I cannot help but think a simple proposition wouldn’t give them a strong product to pitch to customers.

We’ll just have to for the Windows 8 release in 2012 to see exactly what approach Microsoft will take.

What are your thoughts on the matter, is reducing price and choice a good thing? Who are the winners and losers of this type of strategy? I’d love to hear your opinions in the comments below.

Only a short while ago I noticed a problem in the way I was handling jQuery in WordPress. To start with I noticed jQuery was being loaded twice, and then after attempting to fix the problem some of my WordPress plugins lost their JavaScript functionality, this blog post will show you how to properly load jQuery so you can delivery a faster site and maintain WordPress script dependancies.

Note – A new version of this fix is now available.

The problem

So you’re creating a WordPress theme and want to use the latest version of jQuery, you might be inclined to put the following code in your template:

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.1.min.js"><\/script>')</script>

The code above has been lifted from the HTML5 Boilerplate, a popular default HTML5 template

This is good, we’ve got a protocol relative version of jQuery from Google’s CDN and a fallback just in case. But look what happens, jQuery is loaded twice?

The first instance is in fact WordPress loading a local version of jQuery, output by the wp_head() function of which you’ll find in your header.php file.

The incorrect fix

There are couple of examples out there (here’s one) that suggest the following method of preventing WordPress loading the local version of jQuery.

wp_deregister_script('jquery');

This will remove jQuery from WordPress’ list of scripts and is great for stopping the local version being loaded, but it can also cause some of our WordPress plugins to lose their JavaScript functionality, Contact Form 7 is a good example of a plugin that loses it’s JavaScript, it won’t be able to submit a form using AJAX.

The reason some plugins might not work correctly using this method is because when you register a JavaScript file within WordPress you can specify dependancies that said file relies on, if that dependancy doesn’t exist (has been deregistered, for example) the dependant JavaScript file won’t be included. Look back at the last code example… see where I’m going with this?

The correct fix

Right, to correctly use a different jQuery source we need to remove the local version and introduce our new version to WordPress. We quite like the idea of using the protocol savvy, minified, Googlefied version, here’s the code, pop this in your functions.php file:

function load_jquery() {

    // only use this method is we're not in wp-admin
    if (!is_admin()) {

        // deregister the original version of jQuery
        wp_deregister_script('jquery');

        // discover the correct protocol to use
        $protocol='http:';
        if($_SERVER['HTTPS']=='on') {
            $protocol='https:';
        }

        // register the Google CDN version
        wp_register_script('jquery', $protocol.'//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js', false, '1.5.2');

        // add it back into the queue
        wp_enqueue_script('jquery');

    }

}

add_action('template_redirect', 'load_jquery');

As well as the original deregister, we’re also discovering the correct protocol to use, then re-queuing jQuery so our script dependancies are satisfied. Now we should be using a decent source for our jQuery, only loading it once and our WordPress plugins can properly use jQuery again.

Note: We have to detect the protocol server side, if the script path starts with //ajax.googleapis.com WordPress will assume it’s path is part of your domain, like this http://mydomain.com/ajax.googleapis.com.

Hopefully you’ll find this solution useful, in a very un-scientific test earlier I found about half of WordPress driven blogs from people I follow on Twitter suffered from this issue of loading two versions of jQuery, hopefully with this example we’ll be able to reduce the size of our site and maintain jQuery within WordPress.

As always if you spot a mistake or think something could be don better, don’t hesitate to leave a comment below.

You may or may not be aware of a feature o2 have recently implemented on their mobile internet of which verifies a users age before they’re allowed on a website that might not be suitable for under 18s. This age verification check seems to have annoyed many of the people I follow on the internet (one such example), but it didn’t bother me, as I had moved from o2 to GiffGaff a few months ago this wouldn’t effect me… or so I though.

I already knew GiffGaff were part of the o2 network, however had assumed that the age verification “feature” wouldn’t be passed down to the separate company. But much to my disappointment it had, and what’s more is that it looks like no one had been informed of this change.

I checked for myself and hit carling.com and pkr.com**, companies that you’d perhaps see on a television advertising major sporting events or entertainment programs, yet have been blocked by o2. I guess I don’t have an issue with blocking websites to protect children from inappropriate content, but the way o2 have handled the situation has disollusioned me (and others) somewhat.

To verify my age I must either own a credit card or go into an o2 store with some photo ID. The following paragraph has been ripped from the o2 age verification faq:

Q: Why do customers need a credit card to age verify with O2?
A: You don’t have to. You can also take photo ID (passport, driving license) into an O2 retail store, where they can be age verified by our store staff. But credit card is the most convenient method for most customers. Because you have to be over 18 to have a credit card, it’s fool proof in that respect. [...]

The problem is I don’t own a credit card, equally getting the hundreds of thousands of o2 customers without a credit card to go into a store to verify their age seems backwards. So until then I’m going to have restricted access to the internet I pay for.

This ass covering tactic may keep the lawyers happy, but I cannot help but think this should have been an opt-in process, should it not be up to the parent to say whether or not their child should be allowed a mobile phone, and if so have a age restriction in place? And for those who say that children can purchase phones for themselves, should devices with access to inappropriate content be sold to under 18s?

I suppose there are so many angles to this story, but like in most cases it’s not the age verification I have an issue with, just how poorly o2 have handles the situation.

* And I mean really piss them off
** Beware, these websites link to nasty things… don’t open them from within 50 feet of someone under 18… or who hasn’t had their age verified by o2

Getting There

I went to Nottingham with three local lads, road tripping it up in a rental car was not only cheaper than a train but a darn sight easier too. Getting into the city was extremely easy, parking was even easier and a short walk up the road and we were successfully checked into the hotel.

In fact everything we needed was within spitting distance from the hotel, that being the main venue, various pubs / clubs, after party venues etc. So for those thinking of going next year (Simon has suggested a sequel is on the cards) then don’t be put off by the logistics of getting to / being in the city centre.

The Venue

New Adventures was held at the Albert Hall in Nottingham, a fantastic venue with some fantastically painful seats! 650 people eventually got through the door after a slight delay with registration, not that most minded, this delay was handled extremely well, in fact the organisers were extremely informative both before and during the conference, something that I really appreciated.

Simon made the decision not to have venue WiFi, this kept the cost down and in general kept most of the attendees listening instead of coding or emailing, however this didn’t stop some people.

Speakers

I was impressed with some of the presentations, specifically those by Jon Tan and Brendan Dawes, the use of emotion and humour respectively certainly made me sit up and pay attention  (despite the painful seats!). Brendan’s talk was the last of the day, and his use of humour was very much appreciated, it certainly drove his point home.

I felt other talks such as those by Dan Rubin, Sarah Parmenter, Elliot Jay Stocks and Veerle Pieters were also very good, especially Elliot’s of which I had been thinking in depth not so long ago (I knew I should have blogged about it!).

The talks were all informative and inspirational, some more than others but I feel it would be harsh to bad mouth specific speakers who don’t appeal to me directly, that’s more of a personal thing.

Meeting New (And Old) Faces

Many of the people I follow on Twitter made it to the conference and pre/post parties, and I was fortunate to catch up with most of them, but perhaps disappointed I hadn’t spoken to more. That said I met many more new people and had many great discussions about the days adventures as well as other geeky topics.

I figure it would be a good thing to give a quick shout out to those who I spoke to, so here goes:

Alun Rowe, John Hicks, Andrew Horth, Colin Watts, Tanya Newell, Mike McKelvaney, Harry and Louise Harris, Kris Noble, Michael Heap, Matt Croucher, Steve Lacey, Kyle Ridolfo… sorry if I’ve forgotten anyone, that’ll teach you for not giving me a business card :P.

Final Thoughts

The first thing I guess I should mention is the incredible value for money, I paid £80 for an early bird ticket and for the quality of the speakers and their talks this left me very happy.

I’d like to saying a massive thank you to Simon on behalf of all that attended, the conference was executed extremely well, provided amazing speakers and was affordable too, what could anyone complain about.

For those who didn’t make it this year keep your eyes peeled for next years New Adventures conference, if it’s anything like this one the tickets will go on sale in the summer so jump on it quickly.

I had this very problem and came up with this basic function to return a boolean value if a string contained an upper case character.

function isPartUppercase($string) {
	if(preg_match("/[A-Z]/", $string)===0) {
		return true;
	}
	return false;
}

The function uses a simple regular expression that tries to find any upper case A-Z characters, preg_match returns the number of instances of the expression it finds in the string, but stops at 1, preg_match_all() returns the count of all instances it finds.

For those interested, I created this function as the ERP application I work on takes titles from a permission table an automatically capitalises each word, the problem is titles such as “uzERP” shouldn’t be converted in this way, as it becomes “Uzerp” and thus doesn’t match our branding, therefore if a title already contains upper case characters it won’t be subject to capitalisation.

Edit

Steve correctly pointed out that this function can be simplified whilst maintaining the boolean returning value, so many thanks to him for providing the following changes:

function isPartUppercase($string) {
    return (bool) preg_match(‘/[A-Z]/’, $string);
}

SMover hides away social media (in fact, any) icons and only displays them when the user hovers on a call to action, there are no labels with SMover, however the links title is used to signify the links purpose, check out the demo for a hands on session.

DemoDownload

Usage

First we need to need to include the following JavaScript files, SMover depends on jQuery and hoverIntent, both are provided.

<script type="text/javascript" src="http://example.com/js/smover/jquery.js"></script>
<script type="text/javascript" src="http://example.com/js/smover/hoverintent.js"></script>
<script type="text/javascript" src="http://example.com/js/smover/smover.js"></script>

Now we have to specify our HTML structure, SMover is customisable so you don’t have to use the same structure as I have below.

<div id="share-page">
    <span>Share Page</span>
    <ul style="display: none;">
        <li><a title="Digg" href="#"><img alt="Share with Digg" src="http://example.com/images/social-icons/digg.png"></a></li>
        <li><a title="Facebook" href="#"><img alt="Share with Facebook" src="http://example.com/images/social-icons/facebook.png"></a></li>
        <li><a title="StumbleUpon" href="#"><img alt="Share with StumbleUpon" src="http://example.com/images/social-icons/stumbleupon.png"></a></li>
        <li><a title="Twitter" href="#"><img alt="Share with Twitter" src="http://example.com/images/social-icons/twitter.png"></a></li>
    </ul>
</div>

And now we can initiate our SMover plugin.

$(document).ready(function() {
    $('#share-page').smover();
});

And that’s all that’s required to get your SMover plugin going, you can see how this plugin will function be visiting the demo page.

Options

$(document).ready(function() {
	$('#smover1, #smover2').smover({
		titleElement  : 'span', // title selector, must be child of smover element
		linksElement  : 'ul',   // links selector, must be child of smover element
		fillerText    : ' on ', // the string that joins the title text and link title
		mouseoutDelay : 500     // hide delay after the mouseout event
	});
});

Commit History, Issues and Suggestions

SMover is hosted on GitHub, you can view the commit history there as well as raise an issue or suggestion.