jQuery CDN having SSL issues
code.jquery.com
code.jquery.com
They've added a cryptographic hash/integrity and the async/defer attributes to the script tag, but something as essential as a fallback if a script or stylesheet fails to load (which the browser is best placed to know), has no built in functionality.
Instead you're left doing JavaScript tricks which for missing CSS gets a little ugly[0]. But CDN with local fallback (or visa versa) has been common now for decades but yet no official support at all. Honestly if the integrity attribute is specified the browser should just be able to fall back to a cached copy it has (e.g. jquery.1.2.3.min.js has a crypto hash of ABC123, and I have that file already).
[0] https://stackoverflow.com/questions/7383163/how-to-fallback-...
A lot of libraries, JQuery, Lodash, Angular, Vue, React, Bootstrap's JS, module loaders, etc aren't simply offering "improved interactivity" they're offering core functionality. In essence the site runs on these libraries, if you remove them there's nothing left to regress too.
I've worked in several companies and never seen progressive enhancement used. It might have made sense back in the IE6 era when JavaScript was just for whiz-bang, these days JS libraries are holding the whole site's data context/state and generating Ajax as needed (Vue, Angular, React, etc). That's core, there's nothing progressive that can be removed from that.
Progressive Enhancement only makes sense for small toy sites or for academics to play with. Even Netflix's famous examples are about web services going offline, not losing core JavaScript libraries.
There are apps using browser as execution environment and there are websites. You wouldn't expect a client-side drawing tool, WebVR game or real time visualization of blockchain transactions to work without JS enabled.
However, you can easily expect a social network, mail client, news page, task app, and to some extent even things like IM to work with no JavaScript. "That's core" is just an excuse for poor architecture - it's only core because you chose to make it so.
There are apps and there are websites, with only some small part of grey area in between. If you're a web developer wanting to use newest, greatest trendy tools, you see everything as apps, despite of common sense suggesting otherwise, and you end up with no progressive enhancement for no good reason. When you take it to extremes, you end up creating such abominations like the old SPA Twitter frontend, spinning the fans of your laptop for 15 seconds just to display 140 characters of text, because "the core" is implemented as AJAX calls and fully rendered client-side.
We're talking about large organizations. No single developer is making these decisions. And the question is about resource allocation, if the choice is between improving the core experience or implementing an experience that <1% of our users will ever see, the choice is easy.
> "That's core" is just an excuse for poor architecture - it's only core because you chose to make it so.
It is core because the internet has democratically made it so. You're speaking for a very vocal minority. We're choosing not to implement a special mode for people who self-selected to receive a broken web experience. Fortunately that same demographic knows how to resolve the issue they caused.
> no progressive enhancement for no good reason.
A richer user experience is a very good reason. If the choice is between making the site richer and more immersive for 99% of users, and leaving 1% of users who wish to be contrarian for no reason out in the cold? So be it. A worthy sacrifice, in particular as this 1% selected themselves for punishment.
You're welcome to pick and choose any arbitrary part of the web to disable, maybe JavaScript, maybe CSS, maybe font rendering entirely, maybe disable images, but it gets a little silly when you blame others for your self imposed breakages. You don't want it broken? Don't break it.
There is no choice. You can either make it properly, in accordance to best engineering techniques, that make it work good enough with those restrictions and still work as rich as you want when you don't impose them. Or you can make it broken by doing it the lazy way.
Also, there are plenty of reasons to disable JavaScript. It often makes the web browsing experience better, faster and more energy efficient. Sometimes you care about those things way more than any perceived "richness". In many cases, lazy webdevs and their broken code are the only reasons why it might be worse.
Even according to your own statistics, we're prioritizing 98.9% of user's needs over 1.1% of user's needs (or more accurately 99.2% of users against the broken 0.8%, since we won't do anything for the 0.3% who decided to break it on purpose).
Resources allocated to 0.8% of the userbase aren't free, they come from time that could be better spent improving the experience for everyone else.
> That’s potentially fine if the cost balance equation works out that way for you, but it’s a specific choice you’ve made to not support people who through no fault of their own don’t meet the requirements of the environment you’ve decided to create.
That's fine. The same 0.8% with a broken browser or proxy won't find elsewhere on the internet any more friendly to them. The best they can hope for is a small slither of sites with fallback, but the user experience will be so terrible they're better off just fixing the issue than continuing.
I find it funny that people spent years making these same arguments, but used assistive technologies as their cornerstone, now that assistive technologies (and the aria standards) fully support rich JavaScript sites, the argument has shifted to some hand waving minority that cannot even be quantified. We both know this is really about the NoScript crowd (and similar, like RequestPolicy), the other people with a broken web experience have far more significant issues that no one site can hope to mitigate.
As to users choosing to run without JavaScript? We simply don't support it. We support IE8 and above. You cannot even get to our site using Windows XP due to errors in the TLS negotiation (to avoid SSL downgrade). If users choose to disable a core part of their browser that happens to be a core part of modern web standards, then they shouldn't be surprised when sites using that part no longer work.
We built Qantas’s in flight wifi portal using this same technique, a necessity to deal with providing users with an instant ‘web’ experience over a high-latency connection.
Toy sites or for academics? Hardly.
You gave two examples, one of which didn't even work correctly when regressed ("videos won’t play") and the other is effectively a toy site (login/terms of service portal).
When you're in the weeds developing complex data entry sites for large companies or government, you aren't going to write the page three times progressively, write three sets of tests, run userability & accessibility studies three times, and maintain all three for tens of years with bug fixes/enhancement.
What you're going to do is lock in your library requirements, and if the library failed to load you're just going to fast fail into a generic error message until the library is available. If for no other reason that it isn't financially feasible to do anything else.
Progressive enhancement of JavaScript libraries was dead the second we went to SPAs and had a library hold the page's data context/scope instead of writing web pages using HTML forms and refreshing every time you click.
I really want this feature. I think there might be some cross-origin issues that need to be handled correctly (e.g. you might be able to fingerprint a user by probing for parts of their cache), but for common things like exact copies of jquery, this would be super useful.
I understand that the CDN version of the library may have already been cached by the browser while visiting other websites, but does it really save that much time/traffic compared to self-hosting?
If every site you visit has 350kb of stuff that would benefit from a CDN JS but also some CSS and fonts (google fonts, bootstrap, etc.) If you visit 50 pages a day in a 30 day month, that's a little over 500mb of data.
.35mb x 50sites x 30days = 525mb
That would be a ton of easily avoidable data in regards to mobile plans depending on where you are. This number isn't 100% accurate though, many "normal" (read - not techy hackernews readers) might only visit say a dozen sites a day or less (let's ignore apps like facebook/snapchat/etc). Even that might be a stretch.
Then again students and other "savy" users might be going across hundreds of new sites a day.
For you the host? Unless you're a massive beast, most of us "hobbiests" fit within the free bandwidth of 5$ vps services anyway.
Original, jQuery CDN:
https://code.jquery.com/jquery-X.Y.Z.min.js
Google:
https://ajax.googleapis.com/ajax/libs/jquery/X.Y.Z/jquery.min.js
Microsoft:
https://ajax.microsoft.com/ajax/jquery/jquery-X.Y.Z.min.js
Microsoft ASP.NET:
https://ajax.aspnetcdn.com/ajax/jquery/jquery-X.Y.Z.min.js
jsDelivr:
https://cdn.jsdelivr.net/npm/jquery@X.Y.Z/dist/jquery.min.js
cdnjs:
https://cdnjs.cloudflare.com/ajax/libs/jquery/X.Y.Z/jquery.min.js
Yandex.ru:
https://yastatic.net/jquery/X.Y.Z/jquery.min.jsKeyCDN has an online asset performance tool that we can use to compare the hosted jquery.min.js files. The numbers included here are results received (to the San Francisco location) in ms of [DNS lookup time] / [time to connect to server] / [overhead of TLS connection on individual asset] / [time from client HTTP request to receiving first byte from server]:
Original, jQuery CDN:
https://tools.keycdn.com/performance?url=https://code.jquery...
8 / 2 / 79 / 85
Google:
https://tools.keycdn.com/performance?url=https://ajax.google...
32 / 2 / 132 / 155
Microsoft:
https://tools.keycdn.com/performance?url=https://ajax.micros...
128 / 3 / 122 / 130
Microsoft ASP.NET:
https://tools.keycdn.com/performance?url=https://ajax.aspnet...
128 / 3 / 114 / 120
jsDelivr:
https://tools.keycdn.com/performance?url=https://cdn.jsdeliv...
64 / 3 / 118 / 129
cdnjs:
https://tools.keycdn.com/performance?url=https://cdnjs.cloud...
64 / 2 / 118 / 125
Yandex.ru:
https://tools.keycdn.com/performance?url=https://yastatic.ne...
32 / 139 / 667 / 993
When I tested them, only jsDelivr and cdnjs/Cloudflare recieved green results (under 200ms time to connect and under 400ms time to first byte) from all 16 worldwide test locations. Averaging the results between these two across 16 locations, I would go with jsDelivr who had a faster average TTFB. The fact that they are combining CloudFlare, Fastly, StackPath, and Quantil (who I had never heard of until today) might explain their global results.
Nowadays, with all the Node.js stuff that goes around modern front-end, I don't see the point of embedding a JavaScript library from a CDN, unless that library is dependent on a remote service, e.g. Google Analytics, Google Maps, etc… That being said, if you are still maintaining a legacy website that depends on jQuery, you should consider to embed the library like this instead:
<script>window.jQuery || document.write('<script src="/js/jquery.min.js"><\/script>')</script>
What does Node.js have to do with deciding whether to get your static assets from a public CDN or not? I hope your not serving your static assets with Node.js.
There are tools like Grunt and WebPack (which depend on Node.js) that can bundle all your dependencies.
I cannot provide details about how they work because I don't do front-end development, but I can tell you about years ago when I had to copy & paste both code and links to jQuery and other libraries like BackBone or Ember.js (relevant at the time) into my projects. Nowadays, web developers seem to prefer the use of tools that came from the Node.js ecosystem to handle these dependencies in a more "engineer-ish" way using NPM packages.
Just because you can doesn't mean you should. You usually don't want some huge javascript bundle to load it's bad for page load performance. Also Webpack allows you to chose whether you want to bundle a dependency locally or grab it at runtime from a CDN or another sever.
Many times the 100KB of JavaScript is faster to load when minified and combined with other site code and served compressed over a single HTTP request or streamed via HTTP/2. It's almost always faster to use an existing connection than to start a new one.
Also there isn't one canonical version of jQuery. There's dozens of potential versions available[1]. So it's not immediately clear that a user will have the version a site depends on.