Category 'JavaScript'

jQuery and The Google Libraries API

JavaScript, jQuery

What is jQuery?

JQuery is a small, widely-used JavaScript library that helps to simplify front-end development tasks such as DOM manipulation, element animation, and sending/receiving AJAX content. At the time of writing it can be found in over 24,636,038 sites on the Internet, and there is a huge amount of support for it in the web development community.

What is a CDN?

CDN stands for Content Delivery Network or Content Distribution Network depending on who you’re talking to. It can loosely be defined as a collection of web servers at various geographical locations, with each location containing a copy of the same web content. Since the distance between your site’s visitor and your server has an impact on page load time, it makes sense for a visitor to download your content from the closest server collection. For example a visitor from Glasgow might access the CDN servers in Dublin to download content, where as a visitor from Las Vegas might access the content from the CDN servers in San Francisco. This is a faster approach than forcing the vistor in Las Vegas to go all the way to servers in Dublin to fetch content.

What is the Google Libraries API?

The Google Libraries API is a CDN and loading architecture for the most popular, open-source JavaScript libraries. It allows for high speed and global access to a growing list of the most popular, open-source JavaScript libraries including jQuery, MooTools and Prototype.

So why load jQuery from the Google CDN?

There are two big reasons for this:

Improved Caching

The great thing about loading from Google’s CDN is that if the user has visted another site that also loads from the CDN, then they will already have a cached copy stored locally, so there’s no need to download another copy from the server. This caching effect can help improve the loading time of your site, especially if you’re loading multiple files from the CDN.

Reduced Latency

As I mentioned before, a CDN is distributed across multiple geogrphical locations. This means the vistor is downloading jQuery from a server closer to them, thus helping to reduce latency, which is another important factor.

But what if the site can’t access the Google CDN?

This can happen, maybe the Google CDN goes down (however unlikely!) or you don’t have Internet access in your development environment. Fear not, there are solutions, my personal favourite being the one used by HTML5 Boilerplate. HTML5 Boilerplate uses a nice, simple way of falling back to a local copy in your js/lib folder, shown below:

<!-- 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.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>

So there you have it, a quick guide to jQuery and The Google Libraries API and an slick, effective way to fall back to a local copy.

JavaScript quirks – equality operators and comparisons

Articles, JavaScript

JavaScript – developers either love it or hate it and it’s not that difficult to see why. It’s a slightly different way of thinking from C# or Java development. All of a sudden semi-colons are optional, variables are in global scope and your functions have become objects and not just methods in a Class.

When does 0 == “”?

One of the main differences between C# and Java, is that JavaScript features weak typing. This means that the equality operator coerced types to compare them. This can be a total nightmare for an inexperienced JavaScript developer as the “==” operator can yield some really peculiar results. For example:

""          ==   "0"         // returns false
0           ==   "0"         // returns true
0           ==   ""          // returns true
false       ==   "false"     // returns false
false       ==   "0"         // returns true
false       ==   undefined   // returns false
false       ==   null        // returns false
null        ==   undefined   // returns true
" \t\r\n"   ==   0           // returns true

Interesting eh? So in JavaScript, the use of == is widely regarded as bad practice, and because of the coercion between its operands it has the potential to introduce bugs that will be frustrating to find. Luckily there is a better way…

The Strict Equality Operator

The strict equality operator is made up of three equals signs (===). It works a lot like the usual double equals (==) operator that we use in C# and Java, but in JavaScript it does not perform coercion between its operands. Now our equality comparisons perform as expected:

""         ===   "0"          // returns false
0          ===   ""           // returns false
0          ===   "0"          // returns false
false      ===   "false"      // returns false
false      ===   "0"          // returns false
false      ===   undefined    // returns false
false      ===   null         // returns false
null       ===   undefined    // returns false
" \t\r\n"  ===   0            // returns false

In Summary

So as you can see from the examples above, it’s much safer to use the strict equality operator in your JavaScript code. Ultimately, it will cut accidental mistakes that are cause JavaScript’s types coercion. For more detailed explanation on this and some of the other quirks in JavaScript, check out JavaScript Garden as it really is a great resource.

Changing the date format of the jQuery UI datepicker

JavaScript, jQuery, jQuery Snippets

A lot of people have asked me recently how to change the date format of the jQuery UI datepicker from the US date format (mm/dd/yy) to the UK date format (dd/mm/yy). This is really simple once you know how:

<script type="javascript/text">
$(document).ready(function() {
    // datepicker with UK date format
    $(".cssselector").datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>

You can replace ‘dd/mm/yy’ with a combination of any of the following shorthand codes for your own custom date format.

• d – day of month (no leading zero)
• dd – day of month (two digit)
• o – day of the year (no leading zeros)
• oo – day of the year (three digit)
• D – day name short
• DD – day name long
• m – month of year (no leading zero)
• mm – month of year (two digit)
• M – month name short
• MM – month name long
• y – year (two digit)
• yy – year (four digit)
• @ – Unix timestamp (ms since 01/01/1970)
• ! – Windows ticks (100ns since 01/01/0001)

So there you have it, easier than you thought. If you would like more information check out the official jQuery UI datepicker documentation.