Google CDN Tips

Thanks to BrightMix for hosting the jQuery meetup presented by Jonathan Sharp last night in Omaha.

Jonathan presented on the new features of jQuery 1.4 last night along other Q&A topics.

Lately I've been experimenting with the Google CDN for delivering jQuery and jQuery UI. The reasons behind using the CDN is faster library loads, cross-internet library caching, automatic version management, and decreased hosting bandwidth.

Jonathan offered a few tips:

1. SSL works with the CDN's path based requests. Use either "http://ajax.googleapis.com" or "https://ajax.googleapis.com".

2. For automatic switching between http:// and https:// get rid of it. Yep - just use "//ajax.googleapis.com". Don't confuse the slashes as "\\" will get you a network path. This should also work for "<img src='//..." and "<a href='//..." but I haven't tested that yet.

3. When using a path such as "//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js", you can control the automatic versioning by increasing or decreasing the dot notation on the version. In the example above, I will always get the latest version of 1.4 - currently 1.4.1. If I wanted to always get 1.4.0, I would append the ".1". If I always wanted to get the laster 1.x version, I'd remove the ".4".

CSS Frameworks

Lately I have been experimenting with the YUI Library CSS Tools and Blueprint. Both are an open source CSS framework, which as Blueprint so gracefully puts it "gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid and sensible typography...".

After experimenting with both, I have continued to lean towards YUI's framework. It seems to be a little more matured and well-known, so I will focus on YUI.

[More]

HTML Tag: <label>

There's an interesting HTML tag that I just learned about:

Uses:

<label>
First Name:
<input type="text" name="firstname" />
</label>

OR

<label for="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname" />

The label tag associated the text inside to the input field. There are two advantage to this.

  • For a disabled user, the screen reader can read to the visitor what this field is asking for.
  • The standard user can click on the label which will bring focus to the input field, similar to many desktop applications.

Internet Explorer will only support the second example above to allow clicking of the label. Also think of the advantage of styling the label tag in CSS. So I'd recommend using the second example above. The for attribute references the id attribute in the input tag.

A good video to watch: Creating Attractive, Usable, and Accessible Forms. This was a presentation at Adobe Max 2008.

BlogCFC was created by Raymond Camden. This blog is running version 5.9.1. Contact Blog Owner