#yepnope

10 months ago, I met her.

We've been close friends since then, and in the past few months we've only gotten closer.

Today, our lives entangled in a new way.

I have no words for this, but this smile will not fall from my lips for the longest time, and I know that it is mutual.

I will leave the specifics of today to us, but today was perfect.

"A conditional loader for your polyfills" bezeichnet yepnope ihren cleveren Resource-Loader.  Dabei handelt es sich um einen asynchronen Loader, der flink arbeitet und dabei hilft, nur die Skripte zu laden, die auch tatsächlich auf dem jeweiligen Browser benötigt werden und gegebenenfalls Fallbacks (polyfills) für den Browser nachzuladen.

Als sehr praktisch erweist sich das, wenn man z.B HTML5 und CSS3 Seiten für die neusten Browser entwickelt, dabei aber die "altgedienten" Browser wie Internet Explorer oder Firefox 3 nicht ins offene Messer laufen lassen will.

Yepnope fungiert dabei als Javascript Loader, der die Polyfills erst bei Bedarf nachlädt und dabei selbst als intelligente Weiche arbeitet.  Yepnope.js ist mit nur 1,6 KB (GZip,minified) erstaunlich schlank.

Ein Test Objekt hat bei yepnpope.js immer folgenden Aufbau:

yepnope([{ test : /* boolean(ish) - Something truthy that you want to test */, yep : /* array (of strings) | string - The things to load if test is true */, nope : /* array (of strings) | string - The things to load if test is false */, both : /* array (of strings) | string - Load everytime (sugar) */, load : /* array (of strings) | string - Load everytime (sugar) */, callback : /* function ( testResult, key ) | object { key : fn } */, complete : /* function */ }, ... ]);

So kann yepnope.js z.B. Resource Fallbacks laden und nebenher abhängige Skripte laden. Hier ein Beispiel aus der yepnope.js Dokumentation:

yepnope([{ load: 'http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js', complete: function () { if (!window.jQuery) { yepnope('local/jquery.min.js'); } } }, { load: 'jquery.plugin.js', complete: function () { jQuery(function () { jQuery('div').plugin(); }); } }]);