HTML5 Boilerplate plugins.js

Question

How is one expected to include additional js files in plugins.js? Is the expectation that we just copy and paste the contents of each plugin there? Or is there some method of doing a js include that I should be using?

Specifically, I'd like to see an example of goes within this function:

// remap jQuery to $
(function($){

})(this.jQuery);

Georgiana

There is a nice boilerplate to follow here: websanova.com/tutorials/jquery/… – Ananthous

link to websanova in previous comment is broken – Angel

Answer 1

That section of the html5boilerplate is sort of an abbreviation of what should/could go there.

You can approach plugins.js a few ways:

1. Ignore it and include all of your JS plugins as separate files (undesirable)
2. Manually concatenate and minify the plugin files (this is a pain to maintain)
3. Use a script to concatenate them (and cache it) at run-time (like this)
4. Use a makefile to concatenate/compress like a ninja (like this)
5. Use a slick JS library like yepnope.js to asynchronously load your plugin files as needed.

There's a lot of options for including your JS plugins...you'll have to weigh them yourself, of course. I usually use options 3 or 4, though I need to start using 5.

As for what goes in the snippet of code that you gave:

(function($){
  // This is a wrapper for your jQuery stuff 
})(this.jQuery);

You'll see that block of code wrapping a lot of jQuery plugins (check the docs). It can be used to wrap your jQuery-specific code so you can make use of $ while keeping your site in jQuery compatibility mode...which lets your site play nicely with other libraries that may use $ as well.

Cassius

Yeah, I think the purpose of the plugins file it just to have a place where you put your jQuery plugin code so it doesn't polute the global namespace. – Daria

What borkweb says. The FAQs cover it as well. – Abc

So what's the point of the "mylibs" directory? I'm surprised H5B doesn't go into more detail on how to use jQuery plug-ins with it and give better examples. – Shult

Here is a more detailed explanation of plugins.js and scripts.js though it might be slightly dated. – Orang

Note that H5BP comes with Modernizer by default. Modernizer comes with yesnope.js embedded by default. So you shouldn't need to load yesnope separately. modernizr.com/docs/#load – Alleviate