Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
14 changed files
with
280 additions
and
173 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,30 @@ | ||
| <!DOCTYPE html><html lang="en-us"><head><link href="http://gmpg.org/xfn/11" rel="profile"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta http-equiv="content-type" content="text/html; charset=utf-8"><!-- Mobile FTW --><meta name="viewport" content="width=device-width,initial-scale=1"><!-- Title --><title>Conditional loading with require.js · askesian</title><!-- Social Meta --><meta name="twitter:card" content="summary"><meta name="twitter:site" content="@askesian"><meta name="twitter:title" content="askesian"><meta name="twitter:description" content="Crabwalking through the mind of a learner"><meta name="twitter:creator" content="@askesian"><meta name="twitter:domain" content="http://askesian.net"><!-- CSS --><link href="/assets/css/main.css" rel="stylesheet"><!-- JS --><script src="/assets/js/vendor-all.js"></script><!-- Font Face Observer for fast loading of webfonts --><script>(function (window, undefined) { | ||
| var observer = new FontFaceObserver('Lato', { | ||
| weight: 400 | ||
| }); | ||
| var lato400, lato700; | ||
| var docEl = window.document.documentElement; | ||
|
|
||
| observer.check().then(function () { | ||
| window.document.documentElement.className += " fonts-loaded"; | ||
| if (COOKIEJAR.getCookie('fonts-loaded') === 'true') { | ||
| console.log('fonts-loaded'); | ||
| docEl.className += " fonts-loaded"; | ||
| } | ||
| else { | ||
| lato400 = new FontFaceObserver('Lato', { | ||
| weight: 400 | ||
| }); | ||
| lato700 = new FontFaceObserver('Lato', { | ||
| weight: 700 | ||
| }); | ||
| }(this));</script><!-- Google Site Verification --><meta name="google-site-verification" content="U6YPESxNVHg41T6gYx640_oFdniD2hQZ6jaiYWJBsUY"><!-- Icons --><link rel="apple-touch-icon-precomposed" sizes="144x144" href="/assets/images/apple-touch-icon-precomposed.png"><link rel="shortcut icon" href="/favicon.ico"><!-- RSS --><link rel="alternate" type="application/rss+xml" title="RSS" href="/atom.xml"></head><body><!-- Google Tag Manager --><noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-K3873T" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': | ||
|
|
||
| Promise.all([ | ||
| lato400.check(), | ||
| lato700.check() | ||
| ]).then(function() { | ||
| docEl.className += " fonts-loaded"; | ||
| COOKIEJAR.addCookie('fonts-loaded', 'true', 7); | ||
| }); | ||
| } | ||
|
|
||
| }(this));</script><!-- Google Site Verification --><meta name="google-site-verification" content="U6YPESxNVHg41T6gYx640_oFdniD2hQZ6jaiYWJBsUY"><!-- Icons --><link rel="apple-touch-icon-precomposed" sizes="144x144" href="/assets/images/apple-touch-icon-precomposed.png"><link rel="shortcut icon" href="/favicon.ico"><!-- RSS --><link rel="alternate" type="application/rss+xml" title="RSS" href="/atom.xml"></head><body><!-- Google Tag Manager --><noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-K3873T" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': | ||
| new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], | ||
| j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= | ||
| '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); | ||
| })(window,document,'script','dataLayer','GTM-K3873T');</script><!-- End Google Tag Manager --><nav class="main-nav"><div class="wrapper--main-nav"><h1 class="brand"><a class="brand-link" href="/" title="home page of askesian.net">askesian</a></h1><ul class="nav-list"><li class="nav-list__item"><a class="nav-list__link" title="askesian home page" href="/">Home</a></li><li class="nav-list__item"><a class="nav-list__link" title="About" href="/about/">About</a></li><li class="nav-list__item"><a class="nav-list__link" title="askesian on GitHub" href="https://github.com/askesian/">GitHub</a></li><li class="nav-list__item"><a class="nav-list__link" title="askesian on Twitter" href="https://twitter.com/askesian/">Twitter</a></li><li class="nav-list__item"><a class="nav-list__link" title="Subscribe to my RSS feed" href="/atom.xml">RSS</a></li></ul></div></nav><div class="page"><article class="article"><header class="article-header"><h1 class="article-header-title">Conditional loading with require.js</h1><div class="article-header-date">Apr 2013</div></header><section class="article-body"><p>For one of my mobile-first projects, I wanted to use jQuery 2.0 by default, but fallback to jQuery 1.9.1 when the site was loaded in IE9 or lower. I wanted to use require.js as a script loader / pseudo-IoC container to make the site as composable and performant as possible. I had everything humming along fine, exept there was one snag. I couldn't figure out how to conditionally load the correct version of jQuery.</p><h4>WHY</h4><p>The reason I needed to do this was because the site content was managed with a browser-based CMS that allowed viewing the site pages as you would edit content. The site content was administered by content admins who are undoubtedly using some version of IE, so I had to fall back to jQuery pre-2.0 for IE8 support.</p><p>As you've probably read, jQuery 2.xx drops support for IE8 and lower. This is a good thing -- I wanted to send the smaller jQuery 2.0 file to modern browsers, and especially portable devices that use cellular networks for data due to the inherent latency in said networks. Additionally, given the relative uncertainty around mobile device browser cache size limits, I wanted to be more confident that the jQuery script would always be cached by the mobile browser.</p><h4>HOW</h4><p>Figuring out how to do this wasn't straightforward for me, but I finally got it. Here's how I did it:</p><script src="https://gist.github.com/askesian/6e05daa443ca1955ea32.js"></script><p>Now, I am in no way claiming that this is the best or only way. This is my way, and it works beautifully.</p></section><footer class="article-footer" role="complimentary"><div class="article-footer-date"></div></footer></article></div><footer class="footer" role="complimentary"><div class="wrapper--footer"></div></footer><script src="/assets/js/all.js"></script></body></html> | ||
| })(window,document,'script','dataLayer','GTM-K3873T');</script><!-- End Google Tag Manager --><nav class="main-nav"><div class="wrapper--main-nav"><h1 class="brand"><a class="brand-link" href="/" title="home page of askesian.net">askesian</a></h1><ul class="nav-list"><li class="nav-list__item"><a class="nav-list__link" title="About" href="/about/">About</a></li><li class="nav-list__item"><a class="nav-list__link" title="Blog" href="/blog/">Blog</a></li><li class="nav-list__item"><a class="nav-list__link" title="Work" href="/work/">Work</a></li><li class="nav-list__item"><a class="nav-list__link" title="Get In Touch" href="/contact/">Contact</a></li></ul></div></nav><div class="container"><article class="article"><header class="article-header"><h1 class="article-header-title">Conditional loading with require.js</h1><div class="article-header-date">Apr 2013</div></header><section class="article-body"><p><strong>UPDATE</strong>:</p><h2>I am now using <a href="http://browserify.org/">Browserify</a> and <a href="http://webpack.github.io/">WebPack</a>, which much more easily address the issues described in the original article.</h2><p>For one of my mobile-first projects, I wanted to use jQuery 2.x by default, but fallback to jQuery 1.9.x when the site was loaded in IE8 or lower. I was also using <a href="http://requirejs.org/">RequireJS</a> as front-end module loader, to make the site as composable and performance-oriented as possible. I had everything humming along fine, except there was one snag -- I couldn't figure out how to conditionally load the correct version of jQuery.</p><h4>WHY</h4><p>The reason I needed to do this was because the site content was managed with a CMS that allowed viewing the site pages while editing the site content. The site content was administered by content admins who are undoubtedly using some older version of IE, so in order for everything to work properly, I had to fall back to jQuery 1.9.x for older IE support.</p><p>As you've probably read, jQuery 2.x <a href="http://blog.jquery.com/2013/04/18/jquery-2-0-released/">discontinued support for IE8 and lower</a>. This is a good thing. The jQuery 2.x file size is smaller, which has an obvious positive impact, especially when delivering resources to devices that use cellular networks -- due to the <a href="http://calendar.perfplanet.com/2012/latency-in-mobile-networks-the-missing-link/">inherent latency</a> in these cellular networks. Additionally, given the relative uncertainty around mobile device <a href="http://www.html5rocks.com/en/tutorials/offline/quota-research/">browser cache size limits</a>, I wanted to be more confident that the smaller jQuery script would always be cached by a mobile browser.</p><h4>HOW</h4><p>Figuring out how to do this wasn't straightforward for me, but I finally got it. Here's how I did it:</p><script src="https://gist.github.com/askesian/6e05daa443ca1955ea32.js"></script><p>Now, I am in no way claiming that this is the best or only way. This is my way, and it works beautifully.</p></section><footer class="article-footer" role="complimentary"><div class="article-footer-date"></div></footer></article></div><footer class="footer" role="complimentary"><div class="wrapper--footer"></div></footer><script src="/assets/js/all.js"></script></body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.