Useful JavaScript Libraries and jQuery Plugins — Part 2

If you have a problem and need a solution for it, chances are high that a JavaScript library or jQuery plugin exists that was created to solve this very problem. Such libraries are always great to have in your bookmarks or in your local folders, especially if you aren’t a big fan of cross-browser debugging.

In this overview, we feature some of the recent useful JavaScript and jQuery libraries which could be just the right solutions for your common problems. You might know some of these libraries, but you probably don’t know most of them. In either case, we hope that this overview will help you find or rediscover some tools that you could use in your next projects.

Due to the length of this post, we’ve split it into two parts for your convenience:

Quick Overview:

Below you’ll find a brief overview and links to the libraries and tools featured in this post.

Text Manipulation Libraries

Prism33
A lightweight and extensible syntax highlighter. There are no Prism-specific markup or class names, you can use the standard markup. Prism supports parallelism with Web workers, if available. All styling is done through CSS, with sensible class names like .comment, .string, .property etc. The overall core core size is only 1.5Kb (minified and gzipped).

Prism34

TOC jQuery Plugin: Generate Tables Of Contents35
This library automatically generates and guides the user through a table of contents on a page. It’s customizable and is able to automatically highlight a current section of the document. The plugin is also very lightweight, can be used multiple times on a page, and even includes a smooth scrolling functionality for the correct section. The plugin is developed by Greg Allen and is currently available in beta. You might want to check out Tocify jQuery plugin36 as well.

JavaScript Library37

MagicNav: Generates Links for The FAQ38
If you want to create a quick navigation for your FAQ page, you can use this jQuery plugin for generating navigation links dynamically from page elements.

Cutter.js39
This library solves the problem when cutting content by a number of words is required but you don’t want to change the markup. It simply cuts the content to the required length, while allowing the user to see the full content again.

Trunk840
Trunk8 is a text truncation jQuery plugin that cuts off just enough text from a large block of text to prevent it from spilling over. While conventional truncation just limits the character length, this library is able to measure the content area for spill-over and chooses the text that best fits into a given space.

Relevancy.js41
This library allows you to sort an array of items based on their relevancy. This script is attempting to implement basic partial matching which so far has not been successfully implemented. It assigns strings to their respective elements.

Manipulating Tables and Lists

Handsontables: Excel-Like Tables For The Web42
This jQuery library allows you to use auto-expanding and auto-complete as well as add new rows and columns. It also includes a legend, scrolling (so as your table grows, it won’t take up your entire page and become unwieldy), context menus, conditional formatting and other features. You can even set it to track changes made to the table. And, all the data you enter in Handsontable can be copied and pasted to Excel, Google Spreadsheet, or LibreOffice.

JavaScript Library43

List.js44
A cross-browser native JavaScript library that transforms HTML lists into flexible content that you can easily edit. It makes your list easily searchable and sortable. A template-driven concept lets you simply add and edit items.

List.js45

Create Nested Sortable Lists With jQuery46
This plugin lets you create a sortable list where your users can drag and drop list items into any configuration they choose. You can set various attributes, such as the maximum number of nested levels, as well as setting custom methods (including To hierarchy, To array, and Serialize). As an alternative, there’s also the HTML5 Sortable47 plugin, which uses HTML5 and jQuery for a similar functionality.

JavaScript Library48

Pivot.js49
With Pivot you can easily summarize large data sets on the fly. The library lets you create customizable table views from your browser. The results of pivot-table tools (which automatically sort, count, total or give the average) will be displayed as an HTML table pivoting from the input data (CSV or JSON).

Pivot.js50

Crossfilter51
Crossfilter is a JavaScript library which supports exploring large multivariate datasets in the browser. It enables fast (<30ms) interaction with coordinated views, even with large data sets containing more than a million records. It was built to power analytics for Square Register and allows merchants to slice and dice their payment history fluidly. By using sorted indexes, the library speeds up incremental filtering and thereby increases the performance of live histograms and top-K lists.

Crossfilter52

jQuery CSV to Table53
This library reads in comma separated values (CSV) or tab separated values (TSV) data and generates an HTML table.

jQuery CSV to Table54

Csonv.js5516
Paul Engel has released a tiny library to fetch relational CSV data client-side (JSON). When using CSV, one file represents one entity; the librarycan also nest relational data within the resulting objects as if you are joining SQL tables.

DataTables jQuery Plug-in56
The library can display data from different sources, be it DOM, a JavaScript array, or a server-side file with JSON formatting. Among other features, the library provides pagination, on-the-fly filtering, and multi-column sorting with data type detection. And the features that DataTables provides can be enhanced by many freely available plug-ins: e.g. with row grouping, column filtering, column resizer, etc. The library weighs 68Kb minified, and 20Kb gzip’d. Open source, and released under GPL and BSD.

JavaScript Library57

Useful JavaScript Tools for Web Development

Yeoman58
Yeoman is a set of tools and libraries that helps to scaffold new projects, automatically compiles CoffeeScript & Compass, runs yours scripts against jshint for proper language coverage and optimizes all your images. It effectively uses plugins like NodeJS, Compass, Grunt and PhantomJS and actually requires the installation of Node 0.8.x.

JavaScript Library59

Grunt.js: Task-Based Command Line Tool60
Grunt is a task-based command line build tool for JavaScript projects. It has a dozen of predefined tasks built-in already: file concatenation, project scaffolding from a predefined template, validation with JSHint, minifcation with UglifyJS, qUnit tests, server start, running unit tests with nodeunit and running watched files.

Grunt.js: Task-Based Command Line Tool61

Holder.js62
A client-side image placeholder library to render placeholders entirely in browser. It works both online and offline, and offers a chainable API to style and create placeholders with ease. You can use Holder in different areas on different images with custom themes. Since it extends its default settings with the settings you provide, you only have to include those settings which you want changed.

Holder.js63

PxLoader64
A JavaScript library that makes it easier to download images, sound files or any other file needed before taking an action on your website. The script lets you set up a preloader for HTML5 games and websites. You can monitor download status and even prioritize downloads in tagged groups.

PxLoader65

Percentage Loader66
With this jQuery plugin the common horizontal progress bar is displayed differently. The script uses HTML5 canvas and data URI encoding (vector graphics) to allow for visually appealing and variably sizable graphics. Also, it can be used to display feedback during long-running tasks.

Percentage Loader67

Resumable.js68
The library is designed to introduce fault-tolerance into the upload of large files through HTTP. It thus provides multiple, simultaneous and resumable uploads through the HTML5 File API. That means, losing the networks connection doesn’t require a completely new upload. Users can also manage their uploads without loss of data. However, due to the reliance on the HTML5 File API, support is currently limited to Firefox 4+ and Chrome 11+.

History.js69
The library gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype. You can modify the URL directly, without needing to use hashes.

Jurlp70
Jurlp is a jQuery URL parser plugin for parsing, manipulating, filtering and monitoring URLs in href and src attributes within arbitrary elements, as well as creating anchor elements from URLs found in HTML or text.

Jurlp71

URI.js723
To work with URLs you could use this JavaScript library, that offers a jQuery-like API. URI.js offers simple, yet powerful ways of working with query string, has a number of URI-normalization functions and converts relative/absolute paths.

Touchy.js73
A JavaScript library which handles touch events without any dependencies. It’s an easy way to assign hand functionality for touchscreen devices to your website. You might want to check out Hammer.js74 as well.

Touchy.js75

gridster.js76
A jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better. MIT licensed.

gridster.js77

Freetile78
A jQuery plugin that enables you to organize the page content in a dynamic and responsive layout. Once applied to a container element, it attempts to arrange its children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement.

Freetile.js79

Strapdown.js80
This tool makes it easy for you to embed a Markdown editor into your page. No server-side compilation required. The tool is cross-browser-compatible and has Github-style syntax highlighting.

Strapdown.js81

accessifyhtml5.js82
Eric Eggert has released a practical polyfill to make HTML5 more accessible. Most modern browsers work fine with HTML5′s new semantic elements, however, they often lack the ARIA accessibility attributes that the specification demands. This small script adds those attributes to enhance accessibility of web sites.

accessifyhtml5.js83

jQuery++84
An MIT-licensed collection of useful DOM helpers such as jQuery.cookie, jQuery.formParams, jQuery.within and special events for jQuery 1.7 that provide low-level utilities for features that jQuery doesn’t support. You can download a variety of plugins you might wish to use and disregard the rest.

jQuery++85

Hogan.js86
Twitter’s templating engine that lets you precompile your templates ahead of time for vanilla JavaScript. This engine was developed with Mustache test suite compatibility and performance in mind.

Zepto.js87
Zepto is a lightweight JavaScript library with a largely jQuery-compatible API. The main purpose of the library is to cover the most important jQuery functions yet have a relatively small modular library that loads and executes fast, with a familiar and versatile API. If you use jQuery, you already know how to use Zepto. You might want to check Mini.js88 and CreateJS89 as well if you are looking for simple and lightweight JavaScript libraries to perform very specific tasks.

Zepto.js90

CSSrefresh91
A useful small script file that immediately implements changes on your browser made to your CSS-files, by surveying the CSS files in your Web page. Saved CSS-files are executed right away.

CSSrefresh92

Has.js93
Instead of browser sniffing and feature inference, this library provides a collection of self-contained tests and a unified framework using pure feature detection for whatever library consumes it. Make sure to consider other alternatives94, too.

Filepicker.io95
An advanced solution for uploading files to the server as well as conversion, synchronization and integration of file uploads with services such as Facebook, Dropbox etc. A free plan is available.

Filepicker.io96

XRegExp97
An open source MIT licensed JavaScript library, XRegExp provides augmented, extensible regular expressions. The library provides a new syntax, flags, and methods beyond what browsers support natively. Also, take a look at Matches.js98, an advanced pattern matching library for JavaScript.

XRegExp99

FrameWarp100
This library helps you to show pages on your site with a CSS-driven transition effect. It has a helper function which compares the URL of the iframe with the address of the current page. If both the domain and the protocol match, Framewarp will try to access the DOM of the iframe and add the APU methods – one for hiding it, and another one for sending a message to the parent.

Filer.js101
Eric Bidelman released a wrapper library for the HTML5 Filesystem API. Filer.js reuses familiar UNIX commands and makes the HTML5 API more approachable for developers that have done file I/O in other languages. Repetitive operations (renaming, moving, duplicating) are easier to manage. You might want to check out DownloadBuilder.js102, a library that supports concatenation of local files and uses session storage to cache Ajax/JSONP requests.

Filer.js103

Client Side Caching For JavaScript104
Server caching is useful for quick response times, but sometimes, especially when you are developing a Web application, you migh need to cache objects client-side rather than server-side. Maybe you need to cache something for offline use, or for reuse later. That’s where locache.js105 comes in. It’s a JavaScript caching framework for client side caching in the browser using HTML5 local storage. The library has a memcache-similar API, no dependencies and is very small. And the best part: locache gracefully degrades when the browser doesn’t support local storage. So users with IE6 and IE7 will not get any errors, but as developers say, “caching attempts will be silently dropped and lookups will always appear to be a cache miss.” You can provide an expiration time for cached objects as well.

JavaScript Library106

Last Click

ReView.js107
This library provides a responsive Web design viewing choice. Users can either “opt-in” or “opt-out” of responsive design states and keep the persistent view preference for each session. Developed in pure JavaScript according to the principles of core (mobile-) first progressive enhancement. You might want to check FlexiNavCalc108 as well, a responsive navigation library that calculates navigation item widths in percentages to ensure that the navigation holds the layout until a break-point is executed.

JavaScript Library109

A Hotline For All Your JavaScript Problems110
Do you feel like giving up? Nothing makes sense anymore? Your problems seem insurmountable? Wouldn’t it be great if you could talk to someone who cares and knows your woes? Why don’t you give the friendly, supporting folk at JS Hotline111 a call when your JavaScript wisdom is at an end? Garann Means created JS Hotline as a helpline for people who are stuck with a JavaScript problem. This call-service powered by Pocket Hotline112 promises professional help to people who need advice concerning JavaScript. They’ll talk you off the ledge when you just can’t make it work. And it won’t cost you anything but a smile.

JavaScript Library113

Useful JavaScript and jQuery Libraries

Due to the length of this post, we’ve split it into two parts for your convenience:

Footnotes

  1. 1 http://www.smashingmagazine.com/2012/09/23/useful-javascript-libraries-jquery-plugins-web-developers/
  2. 2 http://prismjs.com/
  3. 3 http://medialize.github.com/URI.js/
  4. 4 https://github.com/tombonner/jurlp
  5. 5 https://github.com/tcorral/Cutter.js
  6. 6 https://github.com/rviscomi/trunk8
  7. 7 http://projects.jga.me/toc/
  8. 8 http://johnpolacek.github.com/MagicNav.js/
  9. 9 https://github.com/padolsey/relevancy.js
  10. 10 http://tableclothjs.com/
  11. 11 http://listjs.com/
  12. 12 http://documentcloud.github.com/visualsearch/
  13. 13 http://farhadi.ir/projects/html5sortable/
  14. 14 http://square.github.com/crossfilter/
  15. 15 http://code.google.com/p/jquerycsvtotable/
  16. 16 http://archan937.github.com/csonv.js/
  17. 17 http://warpech.github.com/jquery-handsontable/
  18. 18 http://datatables.net/
  19. 19 http://yeoman.io/
  20. 20 http://gruntjs.com/
  21. 21 http://imsky.github.com/holder/
  22. 22 http://widgets.better2web.com/loader/
  23. 23 https://github.com/tombonner/jurlp
  24. 24 http://medialize.github.com/URI.js/
  25. 25 https://github.com/jairajs89/Touchy.js
  26. 26 http://eightmedia.github.com/hammer.js/
  27. 27 http://strapdownjs.com/
  28. 28 https://github.com/yatil/accessifyhtml5.js
  29. 29 http://twitter.github.com/hogan.js/
  30. 30 http://www.filepicker.io/
  31. 31 http://xregexp.com/
  32. 32 https://github.com/d0ugal/locache
  33. 33 http://prismjs.com/
  34. 34 http://prismjs.com/
  35. 35 http://projects.jga.me/toc/
  36. 36 http://gregfranko.com/jquery.tocify.js/
  37. 37 http://projects.jga.me/toc/
  38. 38 http://johnpolacek.github.com/MagicNav.js/
  39. 39 https://github.com/tcorral/Cutter.js
  40. 40 https://github.com/rviscomi/trunk8
  41. 41 https://github.com/padolsey/relevancy.js
  42. 42 http://warpech.github.com/jquery-handsontable/
  43. 43 http://warpech.github.com/jquery-handsontable/
  44. 44 http://listjs.com/
  45. 45 http://listjs.com/
  46. 46 http://farhadi.ir/projects/html5sortable/
  47. 47 http://farhadi.ir/projects/html5sortable/
  48. 48 http://farhadi.ir/projects/html5sortable/
  49. 49 http://rjackson.github.com/pivot.js/
  50. 50 http://rjackson.github.com/pivot.js/
  51. 51 http://square.github.com/crossfilter/
  52. 52 http://square.github.com/crossfilter/
  53. 53 http://code.google.com/p/jquerycsvtotable/
  54. 54 http://code.google.com/p/jquerycsvtotable/
  55. 55 http://archan937.github.com/csonv.js/
  56. 56 http://datatables.net/
  57. 57 http://datatables.net/
  58. 58 http://yeoman.io
  59. 59 http://yeoman.io
  60. 60 http://gruntjs.com/
  61. 61 http://gruntjs.com/
  62. 62 http://imsky.github.com/holder/
  63. 63 http://imsky.github.com/holder/
  64. 64 http://thinkpixellab.com/pxloader/
  65. 65 http://thinkpixellab.com/pxloader/
  66. 66 http://widgets.better2web.com/loader/
  67. 67 http://widgets.better2web.com/loader/
  68. 68 https://github.com/23/resumable.js
  69. 69 https://github.com/balupton/History.js/
  70. 70 https://github.com/tombonner/jurlp
  71. 71 https://github.com/tombonner/jurlp
  72. 72 http://medialize.github.com/URI.js/
  73. 73 https://github.com/jairajs89/Touchy.js
  74. 74 http://eightmedia.github.com/hammer.js/
  75. 75 https://github.com/jairajs89/Touchy.js
  76. 76 http://gridster.net/
  77. 77 http://gridster.net/
  78. 78 http://yconst.com/web/freetile/
  79. 79 http://yconst.com/web/freetile/
  80. 80 http://strapdownjs.com
  81. 81 http://strapdownjs.com
  82. 82 https://github.com/yatil/accessifyhtml5.js
  83. 83 https://github.com/yatil/accessifyhtml5.js
  84. 84 http://jquerypp.com/
  85. 85 http://jquerypp.com/
  86. 86 http://twitter.github.com/hogan.js/
  87. 87 http://zeptojs.com/
  88. 88 http://minijs.com/
  89. 89 http://createjs.com/#!/CreateJS
  90. 90 http://zeptojs.com/
  91. 91 http://cssrefresh.frebsite.nl/
  92. 92 http://cssrefresh.frebsite.nl/
  93. 93 http://badassjs.com/post/1217357060/hasjs
  94. 94 http://www.netmagazine.com/features/essential-javascript-top-five-script-loaders
  95. 95 http://www.filepicker.io
  96. 96 http://www.filepicker.io
  97. 97 http://xregexp.com/
  98. 98 https://github.com/natefaubion/matches.js
  99. 99 http://xregexp.com/
  100. 100 http://demo.tutorialzine.com/2012/07/framewarp-jquery-plugin/
  101. 101 http://ericbidelman.tumblr.com/post/14866798359/introducing-filer-js
  102. 102 http://gregfranko.com/DownloadBuilder.js/
  103. 103 http://ericbidelman.tumblr.com/post/14866798359/introducing-filer-js
  104. 104 https://github.com/d0ugal/locache
  105. 105 https://github.com/d0ugal/locache
  106. 106 https://github.com/d0ugal/locache
  107. 107 http://responsiveviewport.com/
  108. 108 https://github.com/clintonbeattie/flexinavcalc
  109. 109 http://responsiveviewport.com/
  110. 110 http://www.pockethotline.com
  111. 111 https://javascript.pockethotline.com/
  112. 112 http://www.pockethotline.com
  113. 113 http://www.pockethotline.com
  114. 114 http://www.smashingmagazine.com/2012/09/23/useful-javascript-libraries-jquery-plugins-web-developers/

The Smashing team loves high-quality content and cares about the little details. Through our online articles, books and eBooks and Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

Advertising
  1. 1

    Great resource! However, note that the following reads like nonsense:

    “A useful small script file that immediately implements changes on your browser made to your CSS-files, by surveying the CSS files in your Web page. Saved CSS-files are executed right away.”

    0
  2. 2

    This post is one hell of a resource center, I especially love the idea of JS Hotline, thats awesome.

    0
  3. 3

    Quick correction. DownloadBuilder.js allows local AND Github file downloads/concatenation while also using the HTML5 Filesystem to allow users to download the concatenated file to their computers. It is very useful for any project that wants to create custom project builds.

    http://gregfranko.com/blog/creating-custom-project-builds-with-downloadbuilder-dot-js/

    0
  4. 4

    I think that plugin iScroll is very useful tool:

    http://cubiq.org/

    Thanks.

    0
  5. 5

    Great collection and great reference!

    0
  6. 6

    Very good compilation, Thank you for this article.

    This is WOW!!

    Nikunj Dhawan

    0
  7. 7

    I am sure its probably in here somewhere, but I am not that much of a techie. I am looking to see if i can some code that will convert excel data to a nest jason. thanks.

    0
  8. 8

    Hi guys,

    I wrote a plugin called Tumbles Youtube Plugin. Heres the url http://tumbleblogs.com/youtube-jquery-template-plugin/ and the demo is available @ http://www.tumbleblogs.com/examples/ajaxtemplate/.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top