From 283e6f3212e96dfa751b531b41044736e3f3c528 Mon Sep 17 00:00:00 2001 From: askesian Date: Sun, 31 May 2015 14:41:29 -0500 Subject: [PATCH] Update 2015-05-31T19:41:27.637Z --- .../23/require-js-conditional-load/index.html | 31 ++++++-- .../index.html | 31 ++++++-- 404.html | 31 ++++++-- CNAME | 1 - README.md | 73 ------------------- about/index.html | 31 ++++++-- assets/css/main.css | 2 +- assets/js/all.js | 71 +++--------------- assets/js/vendor-all.js | 49 +++++++++++++ atom.xml | 12 ++- blog/index.html | 30 ++++++++ contact/index.html | 30 ++++++++ index.html | 31 ++++++-- work/index.html | 30 ++++++++ 14 files changed, 280 insertions(+), 173 deletions(-) delete mode 100644 CNAME delete mode 100644 README.md create mode 100644 blog/index.html create mode 100644 contact/index.html create mode 100644 work/index.html diff --git a/2013/04/23/require-js-conditional-load/index.html b/2013/04/23/require-js-conditional-load/index.html index 9ea6ff3..f02176d 100644 --- a/2013/04/23/require-js-conditional-load/index.html +++ b/2013/04/23/require-js-conditional-load/index.html @@ -1,13 +1,30 @@ Conditional loading with require.js · askesian

Conditional loading with require.js

Apr 2013

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.

WHY

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.

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.

HOW

Figuring out how to do this wasn't straightforward for me, but I finally got it. Here's how I did it:

Now, I am in no way claiming that this is the best or only way. This is my way, and it works beautifully.

\ No newline at end of file +})(window,document,'script','dataLayer','GTM-K3873T');

Conditional loading with require.js

Apr 2013

UPDATE:

I am now using Browserify and WebPack, which much more easily address the issues described in the original article.

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 RequireJS 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.

WHY

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.

As you've probably read, jQuery 2.x discontinued support for IE8 and lower. 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 inherent latency in these cellular networks. Additionally, given the relative uncertainty around mobile device browser cache size limits, I wanted to be more confident that the smaller jQuery script would always be cached by a mobile browser.

HOW

Figuring out how to do this wasn't straightforward for me, but I finally got it. Here's how I did it:

Now, I am in no way claiming that this is the best or only way. This is my way, and it works beautifully.

\ No newline at end of file diff --git a/2015/05/22/gulp-filter-exclusion-filter-gotcha/index.html b/2015/05/22/gulp-filter-exclusion-filter-gotcha/index.html index d044b6a..4bf1df9 100644 --- a/2015/05/22/gulp-filter-exclusion-filter-gotcha/index.html +++ b/2015/05/22/gulp-filter-exclusion-filter-gotcha/index.html @@ -1,16 +1,33 @@ Exclusion filter gotcha with gulp-filter · askesian

Exclusion filter gotcha with gulp-filter

May 2015

When using gulp-filter, you might run into an issue when using an exclusion filter to remove certain files or directories from the source files passed to gulp.src(...).

To illustrate, imagine a gulp task like the following:

gulp.task('js', function() {
+})(window,document,'script','dataLayer','GTM-K3873T');

Exclusion filter gotcha with gulp-filter

May 2015

When using gulp-filter, you might run into an issue when using an exclusion filter to remove certain files or directories from the source files passed to gulp.src(...).

To illustrate, imagine a gulp task like the following:

gulp.task('js', function() {
   var filterVendorJs = $.filter(['!vendor']);
 
   gulp.src(config.scripts.src)
diff --git a/404.html b/404.html
index f166466..f11640d 100644
--- a/404.html
+++ b/404.html
@@ -1,13 +1,30 @@
 404: Page not found · askesian

404: Page not found

Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. Head back home to try finding it again.

\ No newline at end of file +})(window,document,'script','dataLayer','GTM-K3873T');

404: Page not found

Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. Head back home to try finding it again.

\ No newline at end of file diff --git a/CNAME b/CNAME deleted file mode 100644 index 55411f7..0000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -askesian.net diff --git a/README.md b/README.md deleted file mode 100644 index 797fb16..0000000 --- a/README.md +++ /dev/null @@ -1,73 +0,0 @@ -# askesian.net website - -This is the repo for my personal website, [askesian.net](http://askesian.net). - -The `development` branch is used for, well, development, and a [gulp](http://gulpjs.com) [task](https://github.com/shinnn/gulp-gh-pages) is used to deploy the files to the `master` branch. This keeps the master branch clean, such that it only contains the files that are needed to display the website. All of the files for building, compiling, and optimizing are kept in the `development` branch. - -The application makes use of the following high-level technologies and frameworks: - -* Ruby -* Jekyll -* Node.js -* Gulp - -## Prerequisites -Because of the technologies used in this application, the application has the following prerequisites that must be met before you can install and run the application: - -* Ruby -* Node.js -* Bundler (Ruby gem) - -## Installation -To install the app, you must have Ruby and Node.js installed. Additionally, you must have the [Bundler](http://bundler.io/) Ruby gem installed. - -### Installation Steps -1. Clone this repo to a new folder on your machine: - -```shell -> git clone git@github.com:askesian/askesian.github.com.git ~/projects/MyWebApp -``` - -2. Ensure that you have Ruby and Node.js installed: - -```shell -> ruby -v -ruby 1.9.3p551 (2014-11-13 revision 48407) [x86_64-darwin14.3.0] -> node -v -v0.12.2 -``` - -3. Install the `Bundler` Ruby gem. Run the following from the console: - -```shell -> gem install bundler -``` - -4. Now that you have Ruby, Node.js, and the `Bundler` Ruby gem installed, run the following from the console: - -```shell -> bundle install -> npm install -``` - -These commands will install the Ruby gems required by the project, as well as the Node.js [npm](https://www.npmjs.com/) modules. - -## Running the Application -The application makes use of several commands that can be run from the console. These commands primarily control the state of the application, as well as the deployment of the application to a [GitHub](https://github.com/) repository of you choice. After all of the installation steps have been completed, you should be able to run one or more of the following commands from the console: - -* npm run gulp -* npm run build -* npm run build:production -* npm run deploy - -#### npm run gulp -TODO: Explain this command - -#### npm run build -TODO: Explain this command - -#### npm run build:production -TODO: Explain this command - -#### npm run deploy -TODO: Explain this command \ No newline at end of file diff --git a/about/index.html b/about/index.html index 4a4d653..1f7286f 100644 --- a/about/index.html +++ b/about/index.html @@ -1,13 +1,30 @@ About · askesian

About

Thanks for visiting my site. It's made by @askesian.

You can checkout some of the stuff that I work on by visiting my personal GitHub page, or my company's public GitHub profile. Unfortunately, about 90% my code is tucked away inside my company's private BitBucket account, so you can't see any of that.

Fun Stuff

This site was created using some of the following cool technologies:

If you're interested in knowing more about the site, please checkout out this sites GitHub repo or reach out to me on Twitter.

Thanks!

\ No newline at end of file +})(window,document,'script','dataLayer','GTM-K3873T');

Thanks for visiting my site. It's made by @askesian.

You can checkout some of the stuff that I work on by visiting my personal GitHub page, or my company's public GitHub profile. Unfortunately, about 90% my code is tucked away inside my company's private BitBucket account, so you can't see any of that.

Fun Stuff

This site was created using some of the following cool technologies:

If you're interested in knowing more about the site, please checkout out this sites GitHub repo or reach out to me on Twitter.

Thanks!

\ No newline at end of file diff --git a/assets/css/main.css b/assets/css/main.css index bf69d61..f8369b1 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1 +1 @@ -@font-face{font-family:'Lato';src:url("../fonts/Lato-Regular.woff2") format("woff2"),url("../fonts/Lato-Regular.woff") format("woff"),url("../fonts/Lato-Regular.ttf") format("truetype");font-weight:400;font-style:normal}@font-face{font-family:'Lato';src:url("../fonts/Lato-Bold.woff2") format("woff2"),url("../fonts/Lato-Bold.woff") format("woff"),url("../fonts/Lato-Bold.ttf") format("truetype");font-weight:700;font-style:normal}*,*:before,*:after{-webkit-box-sizing:inherit;box-sizing:inherit}html,body{margin:0;padding:0}html{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:100%}@media screen and (min-width:42em){html{font-size:20px}}body{background:#FAFAFA;color:#515151;font-family:sans-serif;font-size:1rem;font-weight:400;line-height:1.5;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.fonts-loaded body{font-family:Lato,Helvetica,sans-serif}a{color:#bf616a;text-decoration:none}a:hover,a:focus{color:#722e35;border-bottom:1px solid currentColor;text-decoration:none}h1,h2,h3,h4,h5,h6{margin-bottom:.5em;font-family:Lato,Helvetica,sans-serif;font-weight:700;line-height:1.25;text-rendering:optimizeLegibility;color:#313131}h1{font-size:2em}h2{margin-top:1em;font-size:1.5em}h3{margin-top:1.5em;font-size:1.25em}h4,h5,h6{margin-top:1em;font-size:1em}p{margin-top:0;margin-bottom:1em;max-width:45em}p:last-child{margin-bottom:0}ol,ul,dl{margin-top:0;margin-bottom:1em}code,pre{font-family:Menlo,Monaco,"Courier New",monospace}code{padding:.25em .25em;font-size:85%;color:#bf616a;background-color:#F1F1F1;border-radius:3px}pre{display:block;margin-top:0;margin-bottom:1em;padding:1em;font-size:.8em;line-height:1.4;white-space:pre;white-space:pre-wrap;word-break:break-all;word-wrap:break-word;background-color:#F1F1F1}pre code{padding:0;font-size:100%;color:inherit;background-color:transparent}.highlight{margin-bottom:1rem}.highlight pre{margin-bottom:0;border-radius:4px}.highlight .hll{background-color:#ffc}.highlight .c{color:#999}.highlight .err{color:#a00;background-color:#faa}.highlight .k{color:#069}.highlight .o{color:#555}.highlight .cm{color:#09f;font-style:italic}.highlight .cp{color:#099}.highlight .c1{color:#999}.highlight .cs{color:#999}.highlight .gd{background-color:#fcc;border:1px solid #c00}.highlight .ge{font-style:italic}.highlight .gr{color:red}.highlight .gh{color:#030}.highlight .gi{background-color:#cfc;border:1px solid #0c0}.highlight .go{color:#aaa}.highlight .gp{color:#009}.highlight .gu{color:#030}.highlight .gt{color:#9c6}.highlight .kc{color:#069}.highlight .kd{color:#069}.highlight .kn{color:#069}.highlight .kp{color:#069}.highlight .kr{color:#069}.highlight .kt{color:#078}.highlight .m{color:#f60}.highlight .s{color:#d44950}.highlight .na{color:#4f9fcf}.highlight .nb{color:#366}.highlight .nc{color:#0a8}.highlight .no{color:#360}.highlight .nd{color:#99f}.highlight .ni{color:#999}.highlight .ne{color:#c00}.highlight .nf{color:#c0f}.highlight .nl{color:#99f}.highlight .nn{color:#0cf}.highlight .nt{color:#2f6f9f}.highlight .nv{color:#033}.highlight .ow{color:#000}.highlight .w{color:#bbb}.highlight .mf{color:#f60}.highlight .mh{color:#f60}.highlight .mi{color:#f60}.highlight .mo{color:#f60}.highlight .sb{color:#c30}.highlight .sc{color:#c30}.highlight .sd{color:#c30;font-style:italic}.highlight .s2{color:#c30}.highlight .se{color:#c30}.highlight .sh{color:#c30}.highlight .si{color:#a00}.highlight .sx{color:#c30}.highlight .sr{color:#3aa}.highlight .s1{color:#c30}.highlight .ss{color:#fc3}.highlight .bp{color:#366}.highlight .vc{color:#033}.highlight .vg{color:#033}.highlight .vi{color:#033}.highlight .il{color:#f60}.css .o,.css .o+.nt,.css .nt+.nt{color:#999}.wrapper--header{max-width:55em;margin:auto;padding:1em}.main-nav{background:#bf616a}.wrapper--main-nav{position:relative;max-width:55em;margin:auto;padding:1em}.brand{display:inline-block;margin:0;text-align:left}.brand-link{color:#FAFAFA}.brand-link:hover,.brand-link:focus{border:0}.nav-list{position:absolute;left:auto;right:1em;display:inline-block;list-style-type:none;margin:0;padding:0;line-height:2.5}.nav-list__item{display:inline-block;padding:0 1em}.nav-list__link{color:#FAFAFA}.nav-list__link:hover,.nav-list__link:focus{border:0}.post-link{color:#515151;text-decoration:none}.wrapper--footer{max-width:55em;margin:auto;padding:1em}.page{max-width:55em;margin:auto;padding:1em} \ No newline at end of file +@font-face{font-family:'Lato';src:url("../fonts/Lato-Regular.woff2") format("woff2"),url("../fonts/Lato-Regular.woff") format("woff"),url("../fonts/Lato-Regular.ttf") format("truetype");font-weight:400;font-style:normal}@font-face{font-family:'Lato';src:url("../fonts/Lato-Bold.woff2") format("woff2"),url("../fonts/Lato-Bold.woff") format("woff"),url("../fonts/Lato-Bold.ttf") format("truetype");font-weight:700;font-style:normal}.highlight .hll{background-color:#ffc}.highlight .c{color:#999}.highlight .err{color:#a00;background-color:#faa}.highlight .k{color:#069}.highlight .o{color:#555}.highlight .cm{color:#09f;font-style:italic}.highlight .cp{color:#099}.highlight .c1{color:#999}.highlight .cs{color:#999}.highlight .gd{background-color:#fcc;border:1px solid #c00}.highlight .ge{font-style:italic}.highlight .gr{color:red}.highlight .gh{color:#030}.highlight .gi{background-color:#cfc;border:1px solid #0c0}.highlight .go{color:#aaa}.highlight .gp{color:#009}.highlight .gu{color:#030}.highlight .gt{color:#9c6}.highlight .kc{color:#069}.highlight .kd{color:#069}.highlight .kn{color:#069}.highlight .kp{color:#069}.highlight .kr{color:#069}.highlight .kt{color:#078}.highlight .m{color:#f60}.highlight .s{color:#d44950}.highlight .na{color:#4f9fcf}.highlight .nb{color:#366}.highlight .nc{color:#0a8}.highlight .no{color:#360}.highlight .nd{color:#99f}.highlight .ni{color:#999}.highlight .ne{color:#c00}.highlight .nf{color:#c0f}.highlight .nl{color:#99f}.highlight .nn{color:#0cf}.highlight .nt{color:#2f6f9f}.highlight .nv{color:#033}.highlight .ow{color:#000}.highlight .w{color:#bbb}.highlight .mf{color:#f60}.highlight .mh{color:#f60}.highlight .mi{color:#f60}.highlight .mo{color:#f60}.highlight .sb{color:#c30}.highlight .sc{color:#c30}.highlight .sd{color:#c30;font-style:italic}.highlight .s2{color:#c30}.highlight .se{color:#c30}.highlight .sh{color:#c30}.highlight .si{color:#a00}.highlight .sx{color:#c30}.highlight .sr{color:#3aa}.highlight .s1{color:#c30}.highlight .ss{color:#fc3}.highlight .bp{color:#366}.highlight .vc{color:#033}.highlight .vg{color:#033}.highlight .vi{color:#033}.highlight .il{color:#f60}.css .o,.css .o+.nt,.css .nt+.nt{color:#999}*,*:before,*:after{-webkit-box-sizing:inherit;box-sizing:inherit}html,body{margin:0;padding:0}html{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:100%}@media screen and (min-width:42em){html{font-size:20px}}body{background:#f7f4ed;color:#515151;font-family:sans-serif;font-size:1rem;font-weight:400;line-height:1.5;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.fonts-loaded body{font-family:Lato,Helvetica,sans-serif}a{color:#0067a7;text-decoration:none}a:hover,a:focus{color:#004874;border-bottom:1px solid currentColor;text-decoration:none}h1,h2,h3,h4,h5,h6{margin-bottom:.5em;font-family:Lato,Helvetica,sans-serif;font-weight:700;line-height:1.25;letter-spacing:.01em;text-rendering:optimizeLegibility;color:#2D2D2D}h1{font-size:2em}h2{margin-top:1em;font-size:1.5em}h3{margin-top:1.5em;font-size:1.25em}h4,h5,h6{margin-top:1em;font-size:1em}p{margin-top:0;margin-bottom:1em;max-width:45em}p:last-child{margin-bottom:0}ol,ul,dl{margin-top:0;margin-bottom:1em}code,pre{font-family:Menlo,Monaco,"Courier New",monospace}code{padding:.25em .25em;font-size:85%;color:#f7485a;background-color:rgba(0,0,0,.03);border-radius:3px}pre{display:block;margin-top:0;margin-bottom:1em;padding:1em;font-size:.8em;line-height:1.4;white-space:pre;white-space:pre-wrap;word-break:break-all;word-wrap:break-word;background-color:rgba(0,0,0,.03)}pre code{padding:0;font-size:100%;color:inherit;background-color:transparent}.main-nav{background:0 0;text-align:right}.wrapper--main-nav{position:relative;max-width:55em;margin:auto}.brand{position:absolute;top:0;left:0;margin:0;text-align:left;background:#f7485a}.brand-link{display:block;padding:1rem;color:#f7f4ed}.brand-link:hover,.brand-link:focus{border:0;color:#e80a21}.nav-list{display:inline-block;list-style-type:none;margin:0;padding:0;line-height:2.5}.nav-list__item{display:inline-block}.nav-list__link{display:block;padding:.5em .875em;color:#f7485a;text-transform:uppercase}.nav-list__link:hover,.nav-list__link:focus{border:0;border-radius:.05em;background:#f7485a;color:#f7f4ed;-webkit-transition:color .2s ease-in-out,background .2s ease-in-out;transition:color .2s ease-in-out,background .2s ease-in-out}.nav-list__link.active{-webkit-box-shadow:inset 0 -3px 0 0 #f7485a;box-shadow:inset 0 -3px 0 0 #f7485a}.wrapper--header{max-width:55em;margin:auto;padding:1em}.articles--external{padding:1em;padding-top:0;overflow:hidden;font-size:90%;background-color:#0067a7;color:#f7f4ed}.articles--external h1{color:rgba(255,255,255,.35)}.article{margin-bottom:1em}.articles--external .link--external{color:#f7f4ed}.external-article__date{font-size:75%;color:rgba(255,255,255,.35)}.post-list{margin-bottom:3em}.section--featured{margin-bottom:4em}.older-posts .section-title{font-size:80%;text-transform:uppercase;color:#a7a7a7}.post-header{margin-bottom:1em}.post-title{margin-bottom:0}.post-content{overflow:hidden}.post-meta{display:inline-block;width:25%;margin-right:-5px;vertical-align:top}.post-body{display:inline-block;width:75%}.post-body p:last-child{margin-bottom:0}.post-date{display:block;font-size:90%;color:#a7a7a7}.post-title__link{text-decoration:none;color:#2D2D2D}.post-title__link:hover,.post-title__link:focus{color:#202020}.post-title__link[data-visited="true"]:after{content:" (seen)";font-size:50%;color:#a7a7a7}.wrapper--footer{max-width:55em;margin:auto;padding:1em}.container{position:relative;max-width:55em;margin:auto;padding-top:4em}.page{max-width:55em;margin:auto;padding:1em}.main{display:inline-block;width:66.6667%;padding:0;padding-right:2em}.articles{display:inline-block;width:33.3333%;margin-right:-4px;margin-top:2em;vertical-align:top} \ No newline at end of file diff --git a/assets/js/all.js b/assets/js/all.js index e3620cc..f523d0f 100644 --- a/assets/js/all.js +++ b/assets/js/all.js @@ -1,64 +1,17 @@ -var ASKESIAN = (function () { +(function(window, document, undefined) { + var pageLinks = document.getElementsByTagName('a'); + var loc = window.location; - // hold instance of ASKESIAN - var instance; + // handling visited links + // http://joelcalifa.com/blog/revisiting-visited + localStorage.setItem('visited-' + loc.pathname, true); - // DOM element cache for major elements - var DOM = { - window: window, - document: window.document - }; + for (i = 0, len = pageLinks.length; i < len; i++) { + var link = pageLinks[i]; + var pathName = link.pathname.substr(-1) !== '/' ? link.pathname + '/' : link.pathname; - var eventLookup = {}; - - function init() { - console.log('App is initialized'); - this.name = "ASKESIAN"; - - return this; - } - - function bindEventFor (target, evt, fn) { - if (!target && !evt) { - return; - } - - if (target.addEventListener) { - target.addEventListener(evt, fn, false); - } else { - target.attachEvent(evt, fn); + if (link.host === loc.host && localStorage.getItem('visited-' + pathName)) { + link.dataset.visited = true; } - - eventLookup[target] = eventLookup[target] || { - events: [] - }; - - eventLookup[target].events.push({event: evt, fn: fn}); - - return target; - } - - function getEventHandlersFor (target) { - return eventLookup[target]; } - - return { - - getInstance: function () { - if (!instance) { - instance = init.call(this); - } - - return instance; - }, - - addEvent: bindEventFor, - - getEvents: getEventHandlersFor - - }; - -})(); - -ASKESIAN.getInstance(); - +}(window, document)); \ No newline at end of file diff --git a/assets/js/vendor-all.js b/assets/js/vendor-all.js index bd1d427..4c1cf5c 100644 --- a/assets/js/vendor-all.js +++ b/assets/js/vendor-all.js @@ -1,3 +1,52 @@ +(function(window, document, undefined) { + + var cookiejar = { + + getCookie: function(name) { + + var nameEQ = name + "="; + var ca = document.cookie.split(';'); + + for(var i = 0, len = ca.length; i < ca.length; i++) { + var c = ca[i]; + while (c.charAt(0)==' ') { + c = c.substring(1, c.length); + } + + if (c.indexOf(nameEQ) == 0) { + return c.substring(nameEQ.length, c.length); + } + } + + return null; + }, + + addCookie: function(name, value, days) { + + var expires; + + if (days) { + var date = new Date(); + + date.setTime(date.getTime() + (days*24*60*60*1000)); + expires = "; expires=" + date.toGMTString(); + } + else { + expires = ""; + } + + document.cookie = name + "=" + value + expires + "; path=/"; + }, + + destroyCookie: function(name) { + this.addCookie(name, "", -1); + } + + }; + + window.COOKIEJAR = cookiejar; + +}(window, document)); (function(){'use strict';function f(a){function b(){document.body?a():setTimeout(b,0)}b()};function h(a){this.a=document.createElement("div");this.a.setAttribute("aria-hidden","true");this.a.appendChild(document.createTextNode(a));this.b=document.createElement("span");this.c=document.createElement("span");this.h=document.createElement("span");this.g=document.createElement("span");this.f=-1;this.b.style.cssText="display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;";this.c.style.cssText="display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;"; this.g.style.cssText="display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;";this.h.style.cssText="display:inline-block;width:200%;height:200%;";this.b.appendChild(this.h);this.c.appendChild(this.g);this.a.appendChild(this.b);this.a.appendChild(this.c)}function p(a,b,c){a.a.style.cssText="min-width:20px;min-height:20px;display:inline-block;position:absolute;width:auto;margin:0;padding:0;top:-999px;left:-999px;white-space:nowrap;font-size:100px;font-family:"+b+";"+c} function u(a){var b=a.a.offsetWidth,c=b+100;a.g.style.width=c+"px";a.c.scrollLeft=c;a.b.scrollLeft=a.b.scrollWidth+100;return a.f!==b?(a.f=b,!0):!1}function v(a,b){a.b.addEventListener("scroll",function(){u(a)&&null!==a.a.parentNode&&b(a.f)},!1);a.c.addEventListener("scroll",function(){u(a)&&null!==a.a.parentNode&&b(a.f)},!1);u(a)};var A=[];function B(a){A.push(a);1===A.length&&C()}function D(){for(;A.length;)A[0](),A.shift()}if(window.MutationObserver){var E=document.createElement("div");(new MutationObserver(D)).observe(E,{attributes:!0});var C=function(){E.setAttribute("x",0)}}else C=function(){setTimeout(D)};function F(a){this.a=G;this.b=void 0;this.c=[];var b=this;try{a(function(a){b.resolve(a)},function(a){b.reject(a)})}catch(c){b.reject(c)}}var G=2;function H(a){return new F(function(b,c){c(a)})}function I(a){return new F(function(b){b(a)})} diff --git a/atom.xml b/atom.xml index b821a52..9e15e17 100644 --- a/atom.xml +++ b/atom.xml @@ -4,7 +4,7 @@ askesian - 2015-05-26T08:33:10-05:00 + 2015-05-31T14:41:20-05:00 http://askesian.net Chris Wigley @@ -52,13 +52,17 @@ 2013-04-23T00:00:00-05:00 http://askesian.net/2013/04/23/require-js-conditional-load - <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&#39;t figure out how to conditionally load the correct version of jQuery.</p> + <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&#39;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>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&#39;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> +<p>As you&#39;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> diff --git a/blog/index.html b/blog/index.html new file mode 100644 index 0000000..c95bc8e --- /dev/null +++ b/blog/index.html @@ -0,0 +1,30 @@ +Blog · askesian

Conditional loading with require.js

Apr 23, 2013

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.

\ No newline at end of file diff --git a/contact/index.html b/contact/index.html new file mode 100644 index 0000000..79d7618 --- /dev/null +++ b/contact/index.html @@ -0,0 +1,30 @@ +Contact · askesian

You can also reach me at any one of these places:

GitHub Twitter

Or, subscribe to my RSS feed and to be updated when I post new articles.

Thanks for hanging out!

\ No newline at end of file diff --git a/index.html b/index.html index b4f905e..828a9d3 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,30 @@ askesian · Supping life's nitrous oxide

Exclusion filter gotcha with gulp-filter

When using gulp-filter, you might run into an issue when using an exclusion filter to remove certain files or directories from the source files passed to gulp.src(...).

Read the full post

Conditional loading with require.js

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.

Read the full post
\ No newline at end of file +})(window,document,'script','dataLayer','GTM-K3873T');

Older Articles

\ No newline at end of file diff --git a/work/index.html b/work/index.html new file mode 100644 index 0000000..d654a00 --- /dev/null +++ b/work/index.html @@ -0,0 +1,30 @@ +Work · askesian
\ No newline at end of file