IT Nota

Use a CDN Hosted jQuery in Your Website

jQuery Logo Serving your jQuery from a public CDN (Content Delivery Network) can arguably offer several advantages to your website, especially if you don’t use a fast server to host it. If you’re not familiar with both sides of the arguments, please check the two attached links below as there’s no points to repeat the subject over the advantages vs. disadvantages of hosting jQuery from a CDN.

PROS – 3 reasons why you should let Google host jQuery for you (broken – 4/26/2017)

CONS – Should You Use JavaScript Library CDNs?

If you ever decide to use CDN jQuery, you can choose to serve the javascript library from one of the three official CDN jQuery hosts (Google, Microsoft, and jQuery) that are listed on the jQuery download page. With the first two as most popular, you can host your jQuery from Google CDN or Microsoft’s. Another host that’s also worth mentioning is cdn js.

You just need to hotlink to any of the CDN you want to use in your source attribute:

<script
  src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>

That’s it!

But of course things can go wrong with the CDN server or the routing and for any other bizarre reasons the javascript file is just not available. This scenario can be avoided by creating a fallback method to serve the jQuery from our own website. We can do this by adding the second line (line 4-6):

<script
  src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script>
  !window.jQuery && document.write('<script src="/js/jquery-1.12.4.min.js"></script>')
</script>

If you don’t think this technique is sufficient, there are more techniques that might suit your need better from the two links below:

A Simple and Robust jQuery 1.4 CDN Failover in One Line
How and Why: CDN Hosted jQuery with a Local Fall-Back Copy (broken – 5 July 2014)

Most Popular jQuery CDN Links

All three links are listed in the order of popularity. Just use one jQuery CDN link as your source.

Google CDN

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

jQuery’s CDN

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>

Microsoft CDN

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>

Further Reading

Tips on how to add CDN jQuery for WordPress (Genesis Framework) users

Got HTML5?

HTML5 Logo Since the publishing of its First Public Working Draft in 2008, HTML5 (not HTML 5) has gained wider acceptance among developers and designers.

While it’s not 100% foolproof, HTML5, combined with CSS3, gives designers greater control on web layout as they envision it, thus more and more web designers and developers committed to using it.

If you haven’t taken a plunge and want to know more about HTML5, here are a few useful HTML5 links you can use as references:

  1. HTML5 Doctor
    The website publishes articles relating to HTML5, its semantics, and how to use it right now. In addition, it takes questions from visitors and provide answers in their articles to benefit everyone.

  2. Dive Into HTML5
    Dive Into HTML5 seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards with the final manuscript published on paper by O’Reilly, under the Google Press imprint. Informative section on the use of Microdata can be found on this site as well.

  3. HTML5 IE Enabling Script (HTML5 Shiv)
    Public repo for the latest HTML5 JavaScript shiv for IE version 8 or under to recognize and style the HTML5 elements.

  4. HTML5 Logo
    Not as useful as the rest but it’s always cool to have a logo. Use it to spread the word.

  5. HTML Revisited
    All the technical details and FAQ surrounding HTML5.

  6. HTML Cheat Sheet
    HTML cheat sheet which has a full list of all HTML elements which includes descriptions, code examples and live previews.

And lastly, you might want to validate your HTML5 markup using these validators:

  1. Validator.nu (X)HTML5 Validator
  2. The W3C Markup Validation Service (based on validator.nu)

How to Start Using HTML5

So what do you need to do to start using HTML5? At the very least, you can change your DocType Declaration from the more complex HTML 4 version

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

to this

<!DOCTYPE html>

or to add more HTML5 markups

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
  ...  
</head>

That’s all there is to do to start using HTML5. So even if you haven’t been able to update all your markup, there shouldn’t be any reason for you not to switch to HTML5 now.

Further Reading

Web Design with HTML, CSS, JavaScript and jQuery Set
Eloquent JavaScript, 3rd Edition: A Modern Introduction to Programming

Recent Posts

Tags

.NET .NET Core AdSense ASP.NET Cdonts Dll Classic ASP Code Editor ETL FSharp Genesis Framework Git Google HP Asset Manager HTML5 Hugo IIS Information Security Internet Internet Information Services iOS JAMStack Linux macOS Microsoft Microsoft SQL Server MVC PHP PowerShell Python Simple Mail Transfer Protocol Smtp Server SQL SQL Server SSIS SSMS SSRS Sublime Text Visual Studio Visual Studio Code VPN Windows Windows 8 Windows 10 Windows 2012 Windows Server