After several months’ hard work, the jQuery team announced the release of the new (improved!) jQuery plugin registry with an official blog post published on January 16, 2013. The new registry, accessible at, replaced the old one that was affected by a lot of problems. But circa two years later, the new registry was set in read-only mode, meaning that new plugin releases won’t be processed. As a replacement for the new registry, the jQuery team recommends using npm.
Accessing the URL, you’ll be prompted with a clean interface that shows a search bar that you can use to find the plugin(s) you need. Once the results of a search are returned, you can click a name to find a lot of other information on the plugin, including the link to download it.
Although npm is the recommended channel where you can find the plugins, it’s not the only one. An alternative with a nice UI but with a rather limited number of plugins is Unheap.
If neither of them satisfies you or you can’t find what you need, keep in mind that Google is your friend. But also remember to verify the source. After all, you’re going to include one or more JavaScript files in your website! Not satisfied yet? Wait until the next few sections and we’ll instruct you on how to create your own plugin.
Knowing where to look to find jQuery’s extensions isn’t enough. You don’t want your well-crafted project to be filled with bad code or, even worse, to be slowed down by an incorrectly developed plugin. The next section gives you some tips on how to evaluate a plugin.
How to use a (well-written) plugin
When working on a project, relying on a third-party plugin is a smart way to save time because you don’t have to build, test, and maintain it on your own. But is this always true? Based on our experience, the answer is no.
Adding a plugin to your project means adding a dependency to it. Choosing a plugin is an important decision because your whole project will be built on top of it. You should take some time to check several factors before committing to the use of a given plugin. Some of these factors are strictly related to the code whereas others are external. The combination of these clues gives you an idea of the stability and the quality of the component. Let’s start analyzing some code-external factors.
Code-external factors
You rely on third-party components to free yourself from the burden of developing one or more features from scratch. But if you don’t pay attention to the component you’re using, you may find yourself losing more time than you saved in fixing existing bugs or understanding how to use it. Although we’re talking about jQuery plugins, keep in mind that these points are also applicable to tools, libraries, and any third-party software.
Note
For a more in-depth discussion on this and related topics we suggest you take a look at the lesson “Writing Maintainable, Future-Friendly Code” by Nicholas Zakas included in the fourth Smashing ebook titled New Perspectives on Web Design.
The first thing to look at is the last time the plugin was updated. It gives you an idea of how much attention the author gives to this project. A plugin not updated for a while may indicate an abandoned plugin, something you want to avoid. Before using it take the time to look at its changelog. The last update isn’t always a good metric because a plugin built for a certain version of jQuery will still work in a new minor or patch release because for the most part they’re backward compatible. The case where an update breaks a plugin leads us to the second point.
The second factor to consider is the rate at which an author tackles issues. Software is never perfect and an issue can arise for many reasons. The speed at which the author fixes them is very important. If a plugin stops working due to an update of jQuery and you’re using it, the lack of a rapid action forces you to either keep using the old version of jQuery or to fix the issue yourself, nullifying any advantage leading to the externalization of a feature.
Another important factor is the version of the plugin. Unless it’s developed by a newbie, the version of the library has a precise meaning (described in the link provided previously). Therefore, don’t ever use a 0.1.0 version of a plugin, unless you want to try it for fun. Often, software that hasn’t reached version 1.0.0 is subject to a lot of changes that break backward compatibilities.
The fourth point is to check who the author is. Is it a company or a lone gunner? Does the company or the developer have a good reputation? Usually components developed by a company are well maintained because companies can invest money, whereas a single developer usually works on these projects in their spare time. But even if the author is a single developer, if they’re an established authority, it can be worthwhile to use it.
Another factor is the documentation of the plugin. If it’s poorly documented or lacks any documentation, it’s better to continue your research. Such extensions will force you to invest a lot of time trying to understand how they work and how to use them.
In conclusion, keep in mind that not all jQuery plugins have the same quality and it’s your responsibility to check them out to the best of your knowledge.
The factors analyzed in this section are important but represent only one side of the coin. To correctly evaluate a plugin, you have to have a good grasp of its code, too. The point here isn’t to suggest that you go on the web and read the entire code of each plugin you want to use. This practice may take many hours of work. The idea is to have an overview of the quality of the source, parsing a sample, in the attempt to spot flags of bad code. In order to have the knowledge to evaluate the source’s quality, you need to be instructed on the principles required to create a plugin. Therefore, we ask you to wait until the next few pages where we’ll mentor you on the creation of a plugin through a step-by-step guide.
Now let’s take a look at how you can use a third-party plugin.
Using a plugin
Once you’ve found a plugin that fits your needs and you’ve checked that it deserves your attention, you can add it to your project. Using a well-written plugin is usually easy. All you have to do is to store it in a folder accessible by the web server and add it after the jQuery library.
As the first example, we’ll take a look at the jQuery Easing plugin that we introduced in section 8.3 when talking about easing functions. Once you’ve downloaded it, store it in a folder that your page can access. For example, you may store it in a folder called “javascript.” Then you have to add it to your page using a script element, after the jQuery library. If you add the plugin before jQuery, you’ll receive an error and all the JavaScript of your page will stop working. In your page you should have markup that resembles this:
<script src="javascript/jquery.1.11.3.min.js"></script>
<script src="javascript/jquery.easing.min.js"></script>With the markup in place, what happens next depends on the plugin used. In this case, you don’t have any new jQuery methods or utility functions to call. jQuery Easing only injects easing functions into the jQuery core, allowing you to use them as if they were native.
This plugin is a special case because many plugins require you to add some markup in your web page or to add a few classes to an element or even an ID. To see one of these extensions in action, you’ll take a look at slick, a jQuery plugin used to create carousels. In the next example you’ll write the code to create a carousel of images.
The first step required to use slick is to add its JavaScript file after the jQuery library. If you stored it in a folder called “javascript” at the same level of your HTML page, you’ll have markup like the following:
<script src="javascript/jquery.1.11.3.min.js"></script>
<script src="javascript/slick.min.js"></script>After adding the JavaScript file, you also have to add a CSS file included in slick. As you learned in lesson 1, the JavaScript files should always be located before the closing </body> tag, whereas the CSS files should be placed in the <head> of the page. If you’ve stored the CSS file in a folder called “css,” you should have code like the following:
<head>
<link rel="stylesheet" href="css/slick.css" />Once you’ve finished doing this, you have to set up the markup of your page. Because you want a carousel of images, you have to wrap the images with a container element (in this case you’ll use a <div>) as shown here:
<div class="carousel">
<img src="images/image1.jpg" />
<img src="images/image2.jpg" />
<img src="images/image3.jpg" />
<img src="images/image4.jpg" />
</div>With this code in place, the only step left is to call the slick() method to run the magic:
<script>
$('.carousel').slick();
</script>This statement relies on the default configuration of the plugin, but you can change it to fit your need. If you want to deepen your knowledge about this plugin, you can take a look at the repository and its documentation.
These two examples should give you an idea of what you should expect when integrating a third-party plugin into your web pages. Now, before you start to create your own extensions, let’s take a brief look at some popular and useful jQuery plugins.
Leave a Reply