Headjs – JavaScript Loader

Headjs – JavaScript Loader

Load scripts and stylesheets on demand. Achieve responsive design with CSS that targets different screen resolutions, paths, states and browsers. Detect various browsers and their features. Target HTML5 and CSS3 safely. Make it the only script in your HEAD. A concise solution to universal problems.

Home Page

JavaScript Loader

Load scripts in parallel but execute in order.

No WEB 2.0 site would work without all the nice scripts we are injecting into our pages today.

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

   // all done
 
});

Head JS loads JavaScript files in parallel 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");

Responsive Design / Media Queries

You’ve heard of Responsive Design, Media Queries & Mobile First. But how do you actually go about and put it into application without having to resort to some kind of mobile framework ?

Design your pages for 1980px resolution, then make them work on a 10” tablet, a laptop or even a mobile phone. Viewport is the single 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); }

Or you migh need to apply a different layout when a page passes from Landscape to Portrait mode.

Landscape

/* page in lanscape mode */
.landscape #hero { width:800px; }

Portrait

/* page in portrait mode */
.portrait #hero { width:300px; }

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

Look at it like Media Queries, except that it works in browsers that don’t even support Media Queries.

Head JS provides you with the following detections: .lt, .gt, .lte, .gte, .eq, .landscape, .portrait, .desktop, .mobile

CSS Router

Target CSS for specific paths and pages

/ CSS targeted for home page only /
#index-page.root-section {
 
}
 
/ make sidebar visible under /plugins  /
.plugins-section #sidebar { display: block; }

Browser Detection / Graceful Degradation

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.

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.

CSS3 Feature Detection

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.

JavaScript Feature Detection

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

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

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>

Home Page