jQuery Plugins Every Webmaster Should Try

Thursday, May 23, 2013

The open source jQuery library has penetrated fields of the old methods for coding JavaScript. New frontend developers have a larger toolbase to start building with, and so we can see loads of new plugins being released every month. This combination of open source codes along with plugin functionality means that you can extend your website using a single instance of jQuery.

I want to expand on some of the more recent plugins I have found over the past couple weeks. These are based on all forms of Internet media and consider the interface aspect of building websites. Ajax and jQuery animations are also extremely popular among web developers. But check out a few of these ideas and see if you can find any gems.

Social Feed

The Social Feed jQuery plugin is completely free to download and open source. You may set this up to pull from various social networking RSS feeds and import your profile activity. Here is the live demo where you can see the plugin working in action.

I do not know how many people would have a major need for this functionality. It is dynamic and works flawlessly within any typical layout. However you will need to dedicate some space on the page for storing all of this content. The plugin can only pull from Twitter, Facebook, and VK, but it is growing rapidly. The actual Github documentation goes into much greater detail for customizing the JavaScript.

jQuery Waiting

I know there are lots of resources online for generating the loading gif images. These are common interface features which designers use to denote Ajax requests. Typically you will remove a submit button or page link which loads dynamic content, and replace this with a lone animated circle. The jQuery Waiting plugin takes over this functionality and allows you to generate loading gifs without any images.

The project is still brand new as it was only released in 2013. The codes are free and open source under the MIT license. You only need to include a single file to get everything working, and the documentation is scarce but easy to understand. I’d have to say this is a great script for testing your own Ajax applications without needing to store a loading image. But at times this can be an easier choice so try it out and see how you feel.

Swipeshow

How many times have you needed to implement a slideshow interface using swipe functionality? Mobile users are much more common than they were 3-4 years ago. Catering to the most common denominator is tough but worthwhile. I would like to introduce Swipeshow which is a jQuery plugin naturally based around swipe events.

The code is simple to install and you only need a few images to create the demonstration. You can see this live example which displays how you would swipe between various images. All of the default CSS styles are easy to manipulate and customize for your own website. It will take some practice but Swipeshow is worth a bit of time when you are feeling creative.

Typeahead.js

Many web developers have heard about Twitter Bootstrap. The core team of developers have moved into other similar areas with open source projects. Namely the UI for recommended search keywords using typeahead.js. This is a jQuery plugin which allows you to create a default suggest feature when a user is typing into an input field.

Installation is a breeze and you only need a single dependency on jQuery 1.9+. Check out the live Typeahead.js demo and you can see how this whole thing works. It is very similar to Google Suggest which is now a default on the search engine homepage. Typeahead.js may be one of my new favorite jQuery plugins which has hit the market in recent months. If you need any type of dynamic autosuggest functionality then this is a great plugin to choose.

Closing

Learning how to write jQuery code is not as difficult as you may assume. If you are new to frontend development then it will take a lot of time and effort. But you also have to consider that plugins are an interesting solution to saving yourself the hassle of writing codes from scratch. Along with this collection of plugins feel free to share your own examples in the comments discussion area below.