You can dash out an HTML page quickly using a hosted version (also known as a CDN) of  JQuery, which means you don’t have to copy JQuery to a local directory. Here’s an example.

Start with a minimal HTML5 file:

Somewhere between the <head> tags, link to the latest version of JQuery from jquery.com:

Add your Javascript somewhere between the <body> tags. It’s best to put your code close to the closing <body> tag at the bottom so the rest of the page’s assets can load.

Here is the div that contains the online help. Note that its style is initially set to style="display: none;", meaning it’s invisible until the (More) link is clicked. If anyone clicks on the link with the anchor text (More) It reveals a div that is otherwise hidden. This is where you’d put the help text. Because it’s a toggle function, the customer makes it disappear simply by clicking again.

This code simulates online help. Here’s what happens:

  • The code between $(document).ready(function() { and its closing } bracket is the JQuery document ready function, which does not execute until the full HTML document has been loaded.
  • The code between ("#showhelp").click(function(){ and its closing } bracket executes when anything with an ID of “showhelp” is clicked. It doesn’t have to be a link as shown. It could be a button
  • There is a link going nowhere (target of "#" with the ID "showhelp"
  • There is a div with the ID "helpmessage". Its visibility gets reversed when the "showhelp" link is clicked, using the code $("#helpmessage").toggle();

Here’s the whole program. Click here to try it:

 

Update August 2014

Amazingly, even these did not pass the W3C validator because they lacked a title tag. They are shown with a space between them because the validator regards an empty title tag as an error. Examples have been duly updated.

Addy Osmani’s blog is a must-read for Javascript developers. His books are a pleasure to read, and some of them are free. Am rereading his Writing Modular JavaScript With AMD, CommonJS & ES Harmony because I’m interested in high-performance Javascript. Like the look of the blog itself, this free resource is elegant in both appearance and substance. The blog is so good I inaugurated the Recommended Reading section just to talk about.

Here at HTMLCheats.com Central, we love creating useful tutorials in 1 page or less with code you can plug right into your own projects, and CDNs (content deliver networks) are a marvelous shortcut. They can also pose a danger to production code. This article tells you what a CDN is, when you should use it, and when you might wish to avoid it.

What’s a CDN and why do I want one?

A content delivery network means that someone else hosts assets used by your website, typically images, videos, fonts, or script libraries. YouTube is a common example: when you embed a YouTube video in your site, you’re using a CDN.

I get a little more antsy when I think about using a CDN for a code asset, though it’s fantastic for tutorials. Our popular Fabric.js Tutorial is an excellent example. Look at these two script tags:

This code works on any HTML page and requires no explanation.  Contrast it with this (simplified) passage from our even more popular Reveal.js Tutorial:

  • Visit the Reveal.js home page at https://github.com/hakimel/reveal.js.
  • Find the Download as Zip icon and click it
  • The zipped archive file downloads as reveal.js-master.zip.
  • Extract the file to a working directory
  • A directory called reveal.js master is created containing dozens of files. You don’t need them all to create a presentation. The other files are required by developers to change the source code for Reveal.js, which is definitely not necessary for normal usage.
  • Copy the files you need to your working directory
  • Copy the directories css, js, plugin, and lib into the directory you’ll use to write the HTML file that makes up the presentation.

Man, I got tired just copying and pasting that deathless prose. Now that you’ve seen what a CDN is and how it works, let’s see the pluses and minuses.

Advantages to using a CDN

  • Speed, part 1: Sites like Google usually have better servers than you do
  • Speed, part 2: Browsers can download a certain number of assets per web site concurrently. Since the CDN is on another site it’s not included in that limit.
  • Great for trying experiments quickly because you don’t have to download anything or create separate asset directories
  • Someone else maintains these files for you and often can automatically upgrade to the latest version
  • Good for free web hosting sites like Weebly that don’t let you create script or asset directories
  • Speed, part 3: There’s a good chance your user’s ISP has already cached files from popular CDNs such as Google

Disadvantages to using a CDN

  • It can be a disaster for automated testing.  If the CDN makes silent changes to the hosted file, or turns out to be unreliable, tracking down the problem may be more difficult
  • If the CDN goes out of business, you have to re-host on your own website
  • If the CDN performance is bad, it reflects badly on your website
  • If you use something like jquery_latest (shown below) to obtain the most recent version, it’s possible that new, incompatible code in the library may break your existing code.
  • It doesn’t work offline, so you can’t develop without a net connection.
  • You can’t edit the CSS or Javascript on the CDN (big security risk, and of course it would change every one else’s copy)
  • It’s easy to forget to upgrade a library if versions change. The JQuery CDN avoids this neatly by using  jquery-latest.js and that’s pretty cool, but it could also break tests if the behavior of a jquery feature in a new version was not backwards compatible

When to use a CDN, when not to

At my day job, we have good luck using a paid CDN for some items such as style sheets and logo images. They speed performance but their absence would not affect core site operations. We also use YouTube to host videos because videos aren’t mission critical and it’s awesome SEO. Our site requires real time performance and has no margin for error, and we pay a lot of money for everyday hosting. When should you use a CDN?

  • If your site gets relatively low traffic (such as a brochure advertising your service business, a vanity site, or a specialty niche) and uses an inexpensive host a CDN is probably all win. It will improve performance and add reliability, in the case of low-end web hosts
  • If you’re using a top tier CDN such as Google or Microsoft CDNs, you’ll be fine.
  • If your site gets a lot of traffic and the assets are mission critical, it’s a tossup. For reliability’s sake it may be that you trust your own dedicated host more. On the other hand if your site serves complicated web pages with many assets on one page, the performance may outweigh the slight risk of the CDN going down.
Posted in CDN.