Skip to content

Instantly share code, notes, and snippets.

@branneman

branneman/index.html

Last active September 27, 2016 11:49
Show Gist options
  • Save branneman/37865bcfc5d102c2be6c to your computer and use it in GitHub Desktop.
Save branneman/37865bcfc5d102c2be6c to your computer and use it in GitHub Desktop.
Download ZIP
Conditioner.js bootstrap with JavaScript Mustard Cut & Polyfill loading
Raw
index.html
<!doctype html>
<html>
<head>
...
<script>
(function(d){
if (!('querySelector' in d && 'addEventListener' in window)) return;
d.documentElement.className += ' has-js';
d.addEventListener('DOMContentLoaded', function() {
var s = d.createElement('script');
s.setAttribute('src', '/static/js/vendor/requirejs/require.js');
s.setAttribute('data-main', '/static/js/main');
d.body.appendChild(s);
});
}(document));
</script>
</head>
<body>
...
</body>
</html>
Raw
main.js
(function(){
require.config({
map: {
'*': {
classList: 'polyfills/classList',
conditioner: 'vendor/conditionerjs/conditioner'
}
}
});
var polyfills = [];
if (!('classList' in document.documentElement)) {
polyfills.push('classList');
}
// ... more feature detections ...
require(['conditioner'].concat(polyfills), function(conditioner) {
conditioner.init();
});
}());
@rikschennink
Copy link

Looks nice, I've taken a stab at shortening the mustard cut a bit. And have implemented the bouncer pattern.

(function(){

    var d = document;
    if (!('querySelector' in d && 'addEventListener' in window)) {return;}

    d.documentElement.className += ' has-js';
    d.addEventListener('DOMContentLoaded', function() {
        var s = d.createElement('script');
        s.setAttribute('src', '/static/js/vendor/requirejs/require.js');
        s.setAttribute('data-main', '/static/js/main');
        d.body.appendChild(s);
    });

}());

Also the new module enabled property in Conditioner might be interesting in relation to the polyfills. It's a micro mustard cut.

To prevent polluting the global scope with the _polyfills variable you could wrap the entire main.js in a self executing function or maybe even make a separate polyfills module.

@branneman
Copy link
Author

Manual minification, I love it. We can do even better:

(function(d){
    // ...
}(document));

Also, would it be possible to shorten both the setAttribute calls? I know s.src = will work, but will this work for the data attribute as well?

var s = d.createElement('script');
s.src = '/static/js/vendor/requirejs/require.js';
s['data-main'] = '/static/js/main';

Or we could go crazy and save more bytes:

(function(d, f){
    s[f]('src', '/static/js/vendor/requirejs/require.js');
    s[f]('data-main', '/static/js/main');
}(document, 'setAttribute'));

On second thought, let's stop here ;) We should leave minification to a minifier.

Anyway, I've updated the gist with the sane changes.

@rikschennink
Copy link

Haha, brilliant! :-) Excellent plan to leave minifying to the pros ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment