Should Github Be Used as a Cdn for JavaScript Libraries

Should Github be used as a CDN for javascript libraries?

You should not do that for JavaScript files if you care about performance or IE9 compatibility.

GitHub doesn't serve its "raw" files with a far-future expires header. Without the possibility of cross-site caching, you lose the biggest benefit of using a public CDN to host your JavaScript. In fact, using GitHub as a CDN will be slower than simply hosting the files on your own server after each user's first request for the file (assuming you configure caching correctly on your server).

Another problem is that GitHub doesn't serve "raw" files with a content-type header that matches the file's actual MIME type. In IE9 (and perhaps other browsers/proxies/firewalls/etc), JavaScript files that aren't served with the correct content-type are blocked by default. You can see that in action on the BlockUI demo page, for example:

Sample Image

What is the standard way to add javascript libraries to my project?

It is safer to use an own saved version.

  • You won't depend other sites.
  • Your sites won't depend other site's network connectivity.
  • You don't have to care about version upgrades.

On the other hand

  • you have to care about potential bugs, security issues yourself. Follow the related channels, and fix manually or upgrade.
  • this can be more bandwidth consuming. (minified versions/compression/client side cacheing can help.)

Including JavaScript files from GitHub into HTML pages

You will be able to do it with a URL similar to this:

https://rawgit.com/h5bp/html5-boilerplate/master/src/js/plugins.js

Note that this is not the same as clicking on the "raw" button within GitHub;
that button will also give you a clean version of the file, but it will be sent
with the wrong headers.


A Word of warning; the file is not not being served from GitHub. It is being
redirected through the rawgit.com domain. As is stated on https://rawgit.com:

Hey! rawgit.com is just for fun and is not associated with GitHub in any
way.

Keep in mind that the owner of that domain is now in control of the traffic and
is able to manipulate it as they see fit.

Is there a publicly available CDN that hosts JSON2?

Checkout cdnjs.com

http://cdnjs.com/libraries/json2/

Might also be worth investigating Json3

http://cdnjs.com/libraries/json3/

UPDATE: Some of the information was out of date, changed to better links.

How to properly use jsPDF library

you can use pdf from html as follows,

Step 1: Add the following script to the header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>

or download locally

Step 2: Add HTML script to execute jsPDF code

Customize this to pass the identifier or just change #content to be the identifier you need.

 <script>
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
source = $('#content')[0];

// we support special element handlers. Register them with jQuery-style
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
// There is no support for any other type of selectors
// (class, of compound) at this time.
specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#bypassme': function (element, renderer) {
// true = "handled elsewhere, bypass text extraction"
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width': margins.width, // max width of content on PDF
'elementHandlers': specialElementHandlers
},

function (dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save('Test.pdf');
}, margins
);
}
</script>

Step 3: Add your body content

<a href="javascript:demoFromHTML()" class="button">Run Code</a>
<div id="content">
<h1>
We support special element handlers. Register them with jQuery-style.
</h1>
</div>

Refer to the original tutorial

See a working fiddle

How to load JavaScript files from GitHub externally?

You cannot load JavaScript from Github because the content type is not application/javascript or text/javascript.

This is done intentionally to prevent you from using Github as a CDN, which is in violation of their terms of service.

See also: https://rawgithub.com/

And this: https://github.com/blog/1482-heads-up-nosniff-header-support-coming-to-chrome-and-firefox

Including local vs. remote javascript libraries

If your application is available on the WWW, you should consider using a well-known external URL.



<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>

This example below gets the minified version of jquery 1.8.0 from google's servers.



  • The benefit obtained by this method comes from caching:

  • You do not want the first visit a potential user makes to your website to be slow and disappointing. If your first-time visitor has visited my site which uses this URL for jQuery, her browser will probably have cached it so it will not need to load it.

  • Using immutable versioned resources (jquery/1.8.0 instead of something like jquery/current) both helps developers not have to track down breaking changes in their production code and ensures that these resources can be cached.

  • If the resource has to be downloaded and the URL is hosted on a CDN you are likely to get lower latency as the resource will probably be loaded from a server closer to the user's network. The URL in the example is hosted on Google Hosted Libraries which is a CDN. See https://developers.google.com/speed/libraries/devguide for more information.

  • Another argument often seen in such discussions is that when the resource has to be downloaded, you will be able to get better client-side resource loading parallelism if the resource is not on your own servers together with 10 more resources your page includes because browsers limit themselves to loading up to a small number (6 or so in modern browsers) of resources form the same server.

  • If your internet-wide web application is security-critical, you must keep control of as much of it as you can securely manage (and static immutable or nearly immutable resources are relatively easy to manage securely).

  • If my bank's e-banking application which runs over HTTPS were to rely on google's HTTP servers for serving, it would both be granting Google authority over the client-side part of its e-banking application and eliminating practically all benefits of the HTTPS connection to its servers. There are very few things that a rogue client script cannot do...

  • If your application is accessed locally, you should probably include it in your application for both performance (access to your servers should be faster than accessing some remote server both in terms of latency and in terms of bandwidth) and reliability reasons (you are not relying on the external internet connection and on the remote servers being up and running).



Related Topics



Leave a reply



Submit