Referencing jQuery, jQueryUI, and SPServices from CDNs – Revisited

In my previous post entitled Referencing jQuery, jQueryUI, and SPServices from CDNs, I provided the references to quickly add jQuery, jQueryUI, and SPServices from the CDNs I typically use.

However, I made a bit of a faux pas in what I provided. It’s better to omit the protocol in the references. Browsers will simply use the current protocol, whether it be http: or https:, as needed. This means that you won’t have to worry about any issues down the road should you decide to implement SSL. It also means that the location your user happens to use to access the site doesn’t matter.

Here’s my updated set of references with the protocols omitted and updated to the versions I’m currently using:

<!-- Reference the jQueryUI theme's stylesheet on the Google CDN. Here we're using the "Start" theme -->
<link  type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css" />
<!-- Reference jQuery on the Google CDN -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Reference jQueryUI on the Google CDN -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<!-- Reference SPServices on cdnjs (Cloudflare) -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.2/jquery.SPServices-0.7.2.min.js"></script>

Referencing jQuery, jQueryUI, and SPServices from CDNs

OK, I admit it. Now that SPServices is available on a CDN, I’m coming around to thinking that CDNs might be a good idea in some cases. I had been balking at using them primarily from a control standpoint, and I’m still concerned with that aspect. When you host the script and CSS files you are using yourself, you know exactly what you’re going to get. You control the content, the naming conventions, the storage location, the uptime, everything. With CDNs, many of those things are no longer your problem, but you give up some control. I don’t think that CDNs are perfect in every situation, but they can sure be useful.

When I was working with Dan Antion and his team last week, I needed to quickly get something up and running while they were all staring at me, expecting me to perform. (They are the nicest people, but it’s still unnerving to be on the spot to write great code on demand. It seems that I managed to pull it off.) Rather than trying to go out and download jQuery, jQueryUI, and SPServices right then, I decided to quickly toss together a txt file I could easily point to in a Content Editor Web Part (CEWP).

Here’s what I came up with. Google hosts jQuery, jQueryUI, and all of the standard jQueryUI themes, and SPServices is now on cdnjs.

<!-- Reference the jQueryUI theme's stylesheet on the Google CDN. Here we're using the "Start" theme -->
<link  type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/start/jquery-ui.css" />

<!-- Reference jQuery on the Google CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- Reference jQueryUI on the Google CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<!-- Reference SPServices on cdnjs (Cloudflare) -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPServices-0.7.1a.min.js"></script>

I didn’t realize it at the time, but this txt file has become a standard part of my toolkit already. I’ve added it to three client environments just since last week. It’s the A #1 fastest way to get something up and running, even if you know you’re going to host the files locally later.

You simply add a CEWP to whatever page you want to work on, and then point the Content Link to wherever you’ve stored the txt file above. I usually use a Document Library in the root site of my Site Collection called ScriptCSS or something like that. You can, of course, just paste the contents of the txt file into your master page if your use of these tools is going to be ubiquitous.

Cool SPServices Developments Today

A couple of cool things happened today with SPServices that I thought I’d capture in a post.

First, I saw a couple of tweets this morning from Ryan Kirkman (@ryan_kirkman). Ryan runs a CDN for JavaScript solutions called cdnjs.

CDNJS was started in January 2011 as an attempt to speed up the web. It was hosted on Amazon until CloudFlare took over hosting using their own CDN in June 2011.

At the moment the site itself is managed by two passionate web-developers from Australia.   Feel free to get in contact with us at anytime.

http://twitter.com/#!/ryan_kirkman/status/185260155301134336

I’ve had suggestions from quite a few people over the last six months or so to get SPServices up on cdnjs so that they could reference it there rather than host it locally. I’ve wanted to do it, but each time I look at the fact that I need to learn how to use git to do it, I’ve lost steam. I really do want to learn how to use git, and I will (Codeplex just made it available as one of the source control options), but I haven’t yet. Ryan saw me tweet about that yesterday to Simon (@binaryjam) and posted the latest version of SPServices on cdnjs for us. Hooray! (But I still need to learn git.) If you’d like to use SPServices v0.7.1a from a CDN, you can do so by referencing it at the URL:

http://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPServices-0.7.1a.min.js

I’ll figure out how to get some of the other recent versions up there as well.

<UPDATE date=”2012-03-30″>

Josh McCarty (@joshmcrty) was kind enough to add some of the older versions of SPServices to cndjs as well. Take a look at his pull request to see the list. If you’d like any other versions, please let me know.

</UPDATE>

The second thing came from a guy named Ben Tedder (@bentedder) who has been writing a lot of great posts about SPServices on his blog.

http://twitter.com/#!/bentedder/status/185434992225157120

I haven’t had the pleasure to meet Ben (his listing on Twitter puts him in Beijing, China) but I’ve appreciated his posts. Today he did something unique, at least for SPServices. Here’s his “Hand-drawn intro to jQuery and SPServices“. I think it’s pretty cool.