12 Cool JS Plug-Ins that do Amazing Things

While we’d never advocate adding gizmos to a web page just for the gee-whiz factor, there are some times when you really do need to add something a bit fancy.  For those occasions, we’ve got you covered with this list of genuinely awesome plug-ins that can do amazing things.

1. Make easy to use presentation charts with RGraph

This is an amazingly comprehensive and versatile javascript library for creating impressive visual charts that you can use in all kinds of ways. 

While there’s a bit of a steep learning curve involved and you do need a bit of programming knowledge to get exactly the results you want, RGraph is clearly one of the best free charting libraries around.

The main competitor is Forio Contour, which is also free and offers a lot of different chart types.

2. Create flow charts easily with jQuery FlowChart Plug-In

Flow charts are a great way to show hierarchical data, work flows, and other data that can be categorized and organized.  The jQuery FlowChart Plug-In lets you implement flow charts easily into you website.

3. Add textures to maps and shapes for creative data visualization with Textures.js

This project lets you shade areas of an image (such as a map) to provide visual data information about the shaded region.  Or you could just use it to put stripes and dots on your page for no logical reason at all.  You can find it at Riccardo Scalco’s GitHub page.

4. Add a simple date picker to your website with the Datepicker plug-in.

Here is a really simple little plug-in for jQuery User Interface that makes adding a datepicker to your site amazingly easy.  It’s just one of many useful gadgets offered on the site.

5. Get smarter responsive design breakpoint management with Restive.JS

There are so many devices out there with so many different configurations and capabilities, it can be really difficult to stay ahead of the game when it comes to creating quality responsive designs.  Restive.JS changes all that with a really versatile system of breakpoint management that is easy to learn and gives you a lot of control.

6. Build incredible 3D animations with Three.JS

Three.JS is really stunning and impressive.  It also loads quite complex animations in almost no time at all, so it’s a great little plug-in if you need to show something in 3D.  You don’t have to take our word for it, though.  Go take a look at their demo page to see what you can achieve if you already have some 3D design skills.  Also you could view a really fascinating and unexpected way this technology has been applied courtesy of Australia’s SBS TV station, with this interactive story titled The Boat, or try the zombie survival game at theywilleatyou.com.

7. Simplify 2D canvas drawing and animation with Raphael SVG

Learning the ropes of SVG programming involves quite a bit of work.  Fortunately there is Raphael that makes it much easier to create basic drawings and animations in a more straightforward way and with a gentler learning curve.  While the official website has gone offline and is no longer maintained, you can still get access to the library through developer Dmitry Baranovskiy’s GitHub page.  Get it now, while you still can.

8. Show the time in clever ways with jClocksGMT

If you have a site that is somehow related to travel or you have some other need to display time on a clock interface, jClocksGMT is for you.  It allows you to add some interesting timepieces to your site, and unlike some other similar tools out there, it doesn’t come weighed down with obligations or overheads.

9. Make some beautiful text with Lettering.JS

It’s entirely up to you to write something meaningful, but whatever you write you can make it beautiful with Lettering.JS.  This project really needs more documentation before it’s going to become a mainstream thing.

10. Check that your content is readable with Readable

No, that’s not a misprint.  Readable is a little jQuery plug-in that you can use to make all your content

paragraphs easier for viewers to read.  The goal is to make sure that the length of each line in a paragraph is neither too short nor too long for optimal readability.

11. Make grids of things with Isotope

It was a little difficult to work out how to describe what Isotope actually does, but essentially if you have any collection of things that you want to display in a grid-like fashion, Isotope lets you do that with style.  However the real power of Isotope comes from the ability to filter and sort that grid of things in meaningful ways.  You can also add event listeners to bind actions to events, meaning your grids will be truly interactive.

12. Help your users do less typing with TypeAhead.js

No list of awesome plug-ins would be complete without at least mentioning TypeAhead.js (if you’ve ever used Twitter, then you’ve already seen this plug-in in action).  Obviously what it does is it tries to predict what the user is going to type, and then helps out with a drop down list of suggestions.  While search boxes are the most obvious application for this plug-in, there may be other innovative ways it could be employed.

The problem with compiling any “best of” list is that it’s entirely subjective.  Different individuals will have different needs and preferences, so how suitable the items on this list will be for you personally really depends on what you want to do.  What we can report about the items on this list is that they all do something useful.  Which is more than you can say for a lot of plug-ins out there.  They are also all free and generally easy to use even if you only have a little knowledge of JavaScript.

Without any trace of a doubt, we will have missed some of your favorite JS plug-ins when putting this list together, so why not let us (and the other readers) know about other great plug-ins you know and love?

header image courtesy of Vitor Hugo Japa

Emma Grant

Emma Grant is a professional freelance content writer from Ireland. Over the past three years she has travelled the world while running her business from her laptop. You find her at www.florencewritinggale.com

Leave a Reply

Your email address will not be published. Required fields are marked *

Rating *