Recently I ended up with a project requirement that needed to build dropdown menus from external data. Because the project ran offline, databases and backend programming were out of the question, so I had decided to use JSON as the storage medium for the package data as well as the manifest of all packages. The challenge would be both coming up with a JSON format for storing hierarchical data, and being able to parse it in Javascript. Here’s ultimately what I came up with:

External JSON file:
{
"name": "Example Package",
"author": "Chris Bartek",
"contents": [
{
"title": "Menu 1",
"href": "menu1.html",
"children": [
{
"title": "Submenu 1",
"href": "submenu1.html"
},
{
"title": "Submenu 2",
"href": "submenu2.html"
}]
},
{
"title": "Menu 2",
"href": "menu2.html",
"children": [
{
"title": "Submenu 1",
"href": "submenu1.html"
},
{
"title": "Submenu 2",
"href": "submenu2.html",
"children": [
{
"title": "Subsubmenu 1",
"href": "subsubmenu1.html"
}]
}
]
}
]
}

Javascript/jQuery:
$.getJSON('package.json', function(data){
var module = [];
$.each(data, function(key, val){
module[key] = val;
});

var ul = $('<ul id="nav"></ul>');
$.each(module.contents, function(key, value){
var func = (function (item, list){
if(item){
if(item.href && item.title){
$(list).append($('<li></li>', {
"html": $('<a></a>', {
"href": item.href,
"html": item.title
})
}));
}
if(item.children && item.children.length){
var sublist = $('<ul></ul>');
for(index in item.children){
func(item.children[index], sublist);
}
$(list).children().last().append($(sublist));
}
}
});
func(value, $(ul));
});
$('nav').html(ul);
});

All that’s left is to hook in a dropdown menu script. I used a pure CSS solution, but a jQuery one would work, too. Hope this helps someone out there.

Sorry for the mainstream media headline, but the truth hurts. Javascript CDNs are dangerous and want to harm your grandparents, your kids, and your little dog too. What do I mean by this? Well, let’s look at the advantages and disadvantages:

Advantages:

1. Potential to sometimes make your website load slightly faster

Disadvantages:

1. Potential to make your website take longer to load
2. Potential to prevent your website from loading
3. Complete reliance on external servers (single point of failure)
4. Many popular CDNs do not use optimal cache control settings
5. SSL introduces ethical issues

So let’s look at the first one. the CDN can make your script load faster. It can make it run slower. Consider the odds of the user already having the script. What do you think the chances are of that user having already specifically downloaded, for instance, jquery.min.js v1.7.2? It’s probably safe to assume less than 50% for the average user, right? So then we should all use jquery.latest right? Ha, no. NEVER trust the latest version of jQuery; I speak from firsthand experience. Also consider, if the user does NOT have that version of jQuery, it will have to connect to an external server, and thus will take longer to download than if it were local.

Second, the potential to break your website if the CDN doesn’t connect, or gets hacked. Don’t say “that’s Google’s server, it’ll never happen!” It can, and it does. It’s not a question of if it will happen, but when. And when it happens, a lot of websites are gonna go down for putting too much trust in the cloud. On top of that, some places have a ban on Google domains (such as some schools, workplaces, and entire countries). I’ve seen this happen in the past, and had to stop using CDNs in K-12 educational projects.

Third, reliance on external servers. You are introducing a single point of failure by using a CDN-hosted script. Luckily, there is a way around this; have a local fallback in place. However, this can introduce problems when trying to test your website locally.

Fourth, CDNs don’t generally cache like you think they would. You’d think they’d cache a solid version of jQuery for a week or month, since it’s highly unlikely it’ll change. As far as I can tell, they only cache for days or hours. Does this not defeat the purpose of a Javascript CDN? I think it does.

And finally, SSL. When someone connects to your website via SSL, they are entrusting you not to communicate their requests with remote servers. You are essentially breaking their trust by using a CDN. It may not be a big deal to me and you, but to some users it is.

I have to admit, I’ve been using Javascript CDNs blindly for years now, and only recently did I begin to question whether the effort was worth it. When you do the math, honestly it doesn’t look like it is. Are we really willing to put our eggs in other baskets to save 15kb? Does the potential savings in loading time have enough of an impact to positively affect the user? Are the odds in the user’s favor at all? Ask yourself these questions, and you might be surprised you’ve been living in the cloud computing matrix, and this stuff about CDNs making things faster is irresponsible marketing at best, dangerous at worst. Am I onto something, or am I just being an idiot?