Loading a new version of jQuery without breaking an old version

Sometimes you’re working on a website that already uses an old version of jQuery and upgrading is not an option at that moment in time; if for example the jQuery library is bundled with a version of Drupal and works with a set of existing plugins.

The following code will allow you to load in a newer version of jQuery and still leave the $ variable assigned to the old version…

The code:

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'> 
//<![CDATA[
google.load('jquery', '1.7.1'); 
//]]> 
</script>
<script type="text/javascript"> 
// save the new version of jquery to a variable and revert $ to the existing version on the page
var jQuery_1_7_1 = $.noConflict(false); 
</script>

The same code with console logging for testing:

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
// outputs jquery version to Firebug/chrome console to test
console.log("$=" + $().jquery);
//<![CDATA[
google.load('jquery', '1.7.1');
//]]>
</script>
<script type="text/javascript">
console.log("$=" + $().jquery);
// save the new version of jquery to a variable and revert $ to the existing version on the page
var jQuery_1_7_1 = $.noConflict(false);
console.log("$=" + $().jquery);
console.log("jQuery_1_7_1=" + jQuery_1_7_1().jquery);
</script>

After that, you can use jQuery_1_7_1 in place of $ in your newer code.

Hat-tip to the following helpful articles:

I’ve set myself a challenge

I’ve had an idea for a piece of software I think would be really useful. And rather than spend months thinking about and scoping it, I’ve set myself a deadline (deadlines are magic).

The first version will ship by the end of this month.

If I’ve not announced this new project on this blog by 31 Aug 2012, feel free to send me abuse.

I’m also going to use this as a chance to learn some new skills. I think I may learn Python.

On appropriate design for an appropriate budget

ON Health Osteopath BristolI’ve just launched a simple website for a friend, and in part it was a pleasure to work on because we weren’t trying to re-invent the wheel. All it needed was clean and clear communication and the functionality for her to maintain the site herself.

Only a few years ago, this would have been a messy and much more expensive process, but with open source software as the foundation (WordPress in this case) a small budget can deliver a decent product if you trust your web developer. This is particularly true of location based businesses; Claire is an Osteopath working in Bristol, so doesn’t need the most amazing osteopathy website in the whole world – just a slightly better website than the other osteopaths working in the same area.

In this scenario, good communication is the avoidance of bad communication. This is a subtle but important distinction when trying to communicate on a limited budget. This website won’t win her business, instead it will reduce the potential loss of business that no website, or a badly designed website would have had. Her business will still come from the quality of treatment and patient care she offers.

Even at this ‘entry’ level of web design and build it’s possible to ship quality code. This is a bespoke, HTML5, CSS3, responsive design, and including all configuration, installation, testing, populating, image sourcing etc still came in at just 30 hours work.

It would have taken longer (and cost more) if for example Claire had wanted to debate 6 different types of headline font; and this is the key to appropriate design. We could easily have spent three times as long iterating design concepts, but this would not change the marketplace in which Claire’s messaging needs to operate.

If you’re working on a limited budget, find a developer/team you can trust and talk to them about what you want to achieve. In their hands, your money can go much further.