[Unobtrusive] Suggestion - Enhancement: Replace [yass.loader.js] with Head JS script loader [head.min.js]

[GoogleCodeExporter]

Coming from the background of what others are using for a JavaScript loader 
that can do Loading of JS scripts in parallel but execute in order - and more! 
I am about to do this change...

My testing shows this to work amazingly well, and I have had a few issues with 
the use of [yass.loader.js] - shifting JavaScript before the </body>

My suggestion is to have [web-optimizator] utilize the features of 
http://headjs.com/

JavaScript loader features:
--------------------------

Load scripts in parallel but execute in order

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() 
{

   // all done

});

Head JS loads JavaScript files like images without blocking the page. Your page 
will be faster even with a single combined file.
JavaScript organizer

You've read the books and placed SCRIPT SRC tags on the bottom. Good. But can 
you do this?

// use jQuery on the body of the page even though it is not included yet
head.ready(function() {
   $("#my").jquery_plugin();
});

// load jQuery whenever you wish bottom of the page
head.js("/path/to/jquery.js");  

CSS modernizer

HeadJS adds classes to the HTML root element so that you can do this

/* target CSS for browsers without box-shadow support */
.no-boxshadow .box {
   border: 2px solid #ddd;
}

The focus is on CSS3 styling and it's easy to add more tests. Minimalism is a 
must. It's your HEAD again.
HTML5 enabler

DIV is good but HeadJS let's you be semantic and futuristic

<style>
   article { text-shadow:0 0 1px #ccc; }
</style>

<!-- works in IE too -->
<article>
   <header></header>
   <section></section>
   <footer></footer>
</article>

Screen size detector

Design pages for 1980px wide screen and make it also work on 10" laptops and 
mobile phones. Viewport is the most important thing when developing for mobile 
clients.

/* screen size less than 1024 pixels */
.lt-1024 #hero { background-image:(medium.jpg); }

/* fine tune for mobile phone */
.lt-640 #hero { background-image:(small.jpg); }

If you resize the browser window your CSS rules will dynamically follow. Head 
JS does it behind the scenes.
Dynamic CSS

Style for various application states

<script>
/* detect whether user is logged in. here we check for an existence of a cookie 
*/
head.feature("logged", mycookielib.get_cookie("auth_token"));
</script>

<style>
/* .. and write CSS accordingly */
.logged #login-box { display: none; }
</style>

Whenever you call `head.feature()` your CSS rules will follow.
CSS router

Target CSS for specific paths and pages

/* CSS targeted for home page only */
.root-section #index-page

/* make sidebar visible under /plugins  */   
.plugins-section #sidebar { display: block; }

Browser detector

All browsers are detected but we all love IE

/* older than IE9 */
.lt-ie9 .box { padding: 10px; }

/* CSS fixes for IE6 */
.ie6 ul  { list-style: none; }

It's generally wiser to use feature detection IE is a feature in itself.
JavaScript feature detection

Every feature can also be found on the head (default) JavaScript variable.

if (head.logged) {
   // do things
}

Original issue reported on code.google.com by peterbowey on 30 Dec 2010 at 2:49

[GoogleCodeExporter]

Need to check the possibility of this enhancement, there a lot of ways to load 
scripts, also to load ads

Original comment by sunny.dr...@gmail.com on 16 Jan 2011 at 8:19

• Changed title: [Unobtrusive] Suggestion - Enhancement: Replace [yass.loader.js] with Head JS script loader [head.min.js]
• Changed state: Accepted
• Added labels: Component-Logic, Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

The feature set sounds impressive to a JS noob like me :)

Original comment by merzmar...@gmail.com on 6 Mar 2012 at 5:56