In this round-up, you’ll find some of the useful JavaScript and jQuery tools, libraries and plugins that we have stumbled upon recently. Hopefully, you’ll find them valuable for your upcoming projects. Among other things, you’ll find handy services and online utilities, recently released JavaScript libraries and jQuery plugins.
The goal of this script is to provide a fast and lightweight script to enable responsive Web designs in browsers that don’t support CSS3 Media Queries. In particular, Internet Explorer 8 and under.
Blackbird: Open Source JavaScript Logging Utility
Blackbird offers a dead-simple way to log messages in JavaScript and an attractive console to view and filter them.
Treesaver.js
Treesaver is a JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS. It is free for all uses and made available under the MIT or GPLv2 licenses.
Bibliotype
Bibliotype is a (very) simple HTML, CSS and JS based library for rapid prototyping long-form typography and reading on tablets.
Highcharts – Interactive JavaScript charts
Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.
jStat: a JavaScript statistical library
jStat is a statistical library written in JavaScript that allows you to perform advanced statistical operations without the need of a dedicated statistical language (i.e. MATLAB or R).
highlight.js
Highlight.js highlights syntax in code examples on blogs, forums and in fact on any web pages. It’s very easy to use because it works automatically: finds blocks of code, detects a language, highlights it.
Visual Event JS Library
Events in Javascript are often seen as a bit of an enigma. This is odd given that Javascript is very much an event driven language, but it is typically down to their complex nature and difficulty to debug. To this end the author created Visual Event to help track events which are subscribed to DOM nodes.
Underscore.js
Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.
Popcorn.js
Popcorn.js, is a HTML5 javascript library for integrating the web into video production.
SlickGrid!
SlickGrid is a JavaScript grid/spreadsheet component.
JavaScript InfoVis Toolkit
The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web.
Handlebars.js: Minimal Templating on Steroids
Handlebars provides the power necessary to let you build semantic templates effectively with no frustration. You might want to read ThinkVitamin’s article Getting Started with Handlebars.js, too.
Backbone.js
Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.
Load JavaScript and Stylesheets on Demand | SidJS
SidJS is a lightweight JavaScript library used to load JavaScript scripts and CSS stylesheets on demand. It increases AJAX applications performance by loading resources when they’re needed.
OpenFaces
OpenFaces is an open-source library of AJAX-powered JSF components, an Ajax framework and a client-side validation framework. OpenFaces is based on the set of JSF components formerly known as QuipuKit. It contains fully revised codebase of QuipuKit and introduces many new components and features.
d3.js
D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document.
Tempo: JSON rendering engine
Tempo is a tiny JSON rendering engine that enables you to craft data templates in pure HTML. It not only makes AJAX content easier to work with but also manages clear separations of concerns, i.e. no HTML in your JavaScript files!
Art Deco – Selectable Text
A quick proof-of-concept of split typography, based on Pierre Fix-Masseau’s Art Deco style. The challenge here was to achieve ‘split letters’ as part of a Web page layout, while retaining the ability to select text.
Using Less.js to Simplify Your CSS3
LESS is an amazing little tool that extends CSS with the addition of variables, mixins, operations and nested rules.
PhantomJS: Headless WebKit with JavaScript API
PhantomJS is a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.
TestSwarm is an open source project by Mozilla Labs (and created by John Resig) which aims to simplify the complicated and time-consuming process of running JavaScript test suites in multiple browsers. It offers a continious & distributed testing environment that can be used by multiple users running the tests in various browsers with a “set-and-forget” logic.
Minimee
On the Web, speed is important — so when it comes to CSS and JavaScript files, size does matter. By automatically minimizing and combining your files for you, Minimee takes the heavy lifting out of keeping your files nice and clean. Minimee is an ExpressionEngine add-on only.
Doctor JS
Doctor JS is a tool which analyzes your JavaScript code. The tool tests how well your code is written in regards to polymorphism, prototypes, exceptions and callbacks. You might want to check out JSLint as well.
Remy Sharp’s JSConsole
A JavaScript (and CoffeeScript) web console, useful for quick experimentation, debugging, presentations (for live coding) and workshops. Also available as a native iOS app from the iTunes store.
JavaScript Library Boilerplate
Why go through the tedium of creating both a closure AND a .noConflict method when all you want to do is create your own JavaScript Library? With JavaScript Library Boilerplate, you can hit the ground running and create your own JavaScript Library in no time!
jsdoc-toolkit
JsDoc Toolkit is an application, written in JavaScript, for automatically generating template-formatted, multi-page HTML (or XML, JSON, or any other text-based) documentation from commented JavaScript source code.
Jasmine: BDD for your JavaScript
Jasmine is a behavior-driven development framework for testing your JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.
ObfuscateJS: JavaScript compressor
The obfuscator currently removes whitespace and comments. It renames variablenames with a local scope to a shorter version, And as an advanced option it renames all variables with a certain prefix to a shorter name.
Online JavaScript beautifier
This beautifier will reformat and reindent bookmarklets, ugly javascript, unpack scripts packed by the popular Dean Edward’s packer, as well as deobfuscate scripts processed by javascriptobfuscator.com.
PEG.js
PEG.js is a parser generator for JavaScript based on the parsing expression grammar formalism. It enables you to easily build fast parsers which process complex data or computer languages. You can use it as an underlying tool when writing various data processors, transformers, interpreters, or compilers.
JSONView
JSONView is a Firefox extension that helps you view JSON documents in the browser.
jsPerf: JavaScript performance playground
jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.
JSonduit
JSonduit is a service that can turn practically anything on the web into a JSON feed that any website or mobile app can consume.
jsplumb
jsPlumb provides a means for a developer to visually connect elements on their web page, in much the same way you might have seen on Yahoo Pipes. It uses Canvas in modern browsers, and Google’s ExplorerCanvas script for stone-age browsers. The current version (1.2.5) can be used with jQuery, MooTools and YUI3.
Helma
Helma is a server-side JavaScript environment and web application framework for fast and efficient scripting and serving of your websites and Internet applications.
HTML + JSON Report
Online HTML5 JSON Report format to view any JSON data in a human-readable HTML view.
JSON Editor
This editor allows for easy editing of json strings, after loading a sample from the dropdown list click ‘build tree’, expand the tree, click nodes and start changing.
JSCSSP, a CSS parser in JavaScript
JSCSSP is a CSS parser written in cross-browser JavaScript. It parses a string containing CSS styles and outputs a CSS Object Model (warning: not the CSS Object Model). It can preserve some comments, at-rules and style rules that your browser does not recognize and trashes, and even whitespaces if you absolutely need to preserve indentation and blank lines.
Sausage is a jQuery UI widget for contextual pagination. It complements long or infinite-scrolling pages by keeping the user informed of her location within the document.
jQuery Waypoints
Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element.
Pietimer jQuery Plugin
Pietimer injects a canvas element into the page which has an ever reducing pie shaped timer.
ImageLens: a jQuery plug-in for Lens Effect Image Zooming
You can use this jQuery plug-in to add lens style zooming effect to an image.
Timeglider jQuery Plugin/Widget
Timeglider is a zooming, panning data-driven timeline — great for history projects, project planning or any other tasks where you’ll need to display a time frame.
960 Grid on jQuery-Mobile
A port of a 960 grids to use in jQuery mobile. It aims to bring more flexibility to jQuery-mobile layouts and thus makes it easier to use on tablets. The code is available on Github under MIT license.
diagonalFade jQuery plugin
A jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements.
Wijmo jQuery UI Widgets
Wijmo is a complete kit of over 30 UI widgets with everything from interactive menus to rich charts. If you know jQuery, you know Wijmo. Complete with documentation and professional support, every widget is hand-crafted and includes premium themes.
Lettering.js – A jQuery Plugin for Radical Web Typography
CSS does not offer a complete down-to-the-letter control. Here you’ll find kerning type, editorial design, manageable code and complete control — just a few examples of what can easily by done with Lettering.js.
jslide
jslide is a jQuery plugin to create a simple slideshow of list elements, containing either images or other content.
Isotope: A jQuery Plugin for Magical Layouts
An exquisite jQuery plugin for magical layouts. Enables filtering, sorting, and dynamic layouts. Isotope’s capabilities are designed to be used together cohesively. You can do it all — filter, sort, change layout modes, add items — and Isotope will handle it with ease.
Better Check Boxes with jQuery and CSS
In this short tutorial, the authors will create a replacement for the default browser checkboxes in the form of a simple jQuery plugin.
Thumbnails Navigation Gallery with jQuery
In this tutorial the authors are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. They are going to use jQuery and some CSS3 properties for the style.
jQuery Quicktag
Quicktag is a tagging plugin for the jQuery JavaScript library.
DataTables (table plug-in for jQuery)
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
jQuery Tags Input
This plugin will turn your boring tag list into a magical input that turns each tag into a style-able object with its own delete link. The plugin handles all the data — your form just sees a comma-delimited list of tags.
jquery.timepickr.js
a jQuery library that enhances a date picker input area with a more convenient date selection.
This emulator is meant as a ‘proof of concept’ and uses the HTML5 Canvas-element to render the Commodore 64 screen layout.
BreakDOM
A remix of the classic Breakout game. This one will keep you busy for a while.
Useful JavaScript Libraries
Respond.js: Fast CSS3 Media Queries for Internet Explorer 6-8 and MoreThe goal of this script is to provide a fast and lightweight script to enable responsive Web designs in browsers that don’t support CSS3 Media Queries. In particular, Internet Explorer 8 and under.
Blackbird offers a dead-simple way to log messages in JavaScript and an attractive console to view and filter them.
Treesaver is a JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS. It is free for all uses and made available under the MIT or GPLv2 licenses.
Bibliotype is a (very) simple HTML, CSS and JS based library for rapid prototyping long-form typography and reading on tablets.
Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.
jStat is a statistical library written in JavaScript that allows you to perform advanced statistical operations without the need of a dedicated statistical language (i.e. MATLAB or R).
Highlight.js highlights syntax in code examples on blogs, forums and in fact on any web pages. It’s very easy to use because it works automatically: finds blocks of code, detects a language, highlights it.
Events in Javascript are often seen as a bit of an enigma. This is odd given that Javascript is very much an event driven language, but it is typically down to their complex nature and difficulty to debug. To this end the author created Visual Event to help track events which are subscribed to DOM nodes.
Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.
Popcorn.js, is a HTML5 javascript library for integrating the web into video production.
SlickGrid is a JavaScript grid/spreadsheet component.
The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web.
Handlebars provides the power necessary to let you build semantic templates effectively with no frustration. You might want to read ThinkVitamin’s article Getting Started with Handlebars.js, too.
Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.
SidJS is a lightweight JavaScript library used to load JavaScript scripts and CSS stylesheets on demand. It increases AJAX applications performance by loading resources when they’re needed.
OpenFaces
OpenFaces is an open-source library of AJAX-powered JSF components, an Ajax framework and a client-side validation framework. OpenFaces is based on the set of JSF components formerly known as QuipuKit. It contains fully revised codebase of QuipuKit and introduces many new components and features.
D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document.
Tempo is a tiny JSON rendering engine that enables you to craft data templates in pure HTML. It not only makes AJAX content easier to work with but also manages clear separations of concerns, i.e. no HTML in your JavaScript files!
A quick proof-of-concept of split typography, based on Pierre Fix-Masseau’s Art Deco style. The challenge here was to achieve ‘split letters’ as part of a Web page layout, while retaining the ability to select text.
LESS is an amazing little tool that extends CSS with the addition of variables, mixins, operations and nested rules.
PhantomJS is a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.
JavaScript Tools and Utilities
TestSwarm: Continious & Distributed JS TestingTestSwarm is an open source project by Mozilla Labs (and created by John Resig) which aims to simplify the complicated and time-consuming process of running JavaScript test suites in multiple browsers. It offers a continious & distributed testing environment that can be used by multiple users running the tests in various browsers with a “set-and-forget” logic.
On the Web, speed is important — so when it comes to CSS and JavaScript files, size does matter. By automatically minimizing and combining your files for you, Minimee takes the heavy lifting out of keeping your files nice and clean. Minimee is an ExpressionEngine add-on only.
Doctor JS is a tool which analyzes your JavaScript code. The tool tests how well your code is written in regards to polymorphism, prototypes, exceptions and callbacks. You might want to check out JSLint as well.
A JavaScript (and CoffeeScript) web console, useful for quick experimentation, debugging, presentations (for live coding) and workshops. Also available as a native iOS app from the iTunes store.
Why go through the tedium of creating both a closure AND a .noConflict method when all you want to do is create your own JavaScript Library? With JavaScript Library Boilerplate, you can hit the ground running and create your own JavaScript Library in no time!
JsDoc Toolkit is an application, written in JavaScript, for automatically generating template-formatted, multi-page HTML (or XML, JSON, or any other text-based) documentation from commented JavaScript source code.
Jasmine is a behavior-driven development framework for testing your JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.
The obfuscator currently removes whitespace and comments. It renames variablenames with a local scope to a shorter version, And as an advanced option it renames all variables with a certain prefix to a shorter name.
This beautifier will reformat and reindent bookmarklets, ugly javascript, unpack scripts packed by the popular Dean Edward’s packer, as well as deobfuscate scripts processed by javascriptobfuscator.com.
PEG.js
PEG.js is a parser generator for JavaScript based on the parsing expression grammar formalism. It enables you to easily build fast parsers which process complex data or computer languages. You can use it as an underlying tool when writing various data processors, transformers, interpreters, or compilers.
JSONView is a Firefox extension that helps you view JSON documents in the browser.
jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.
JSonduit
JSonduit is a service that can turn practically anything on the web into a JSON feed that any website or mobile app can consume.
jsPlumb provides a means for a developer to visually connect elements on their web page, in much the same way you might have seen on Yahoo Pipes. It uses Canvas in modern browsers, and Google’s ExplorerCanvas script for stone-age browsers. The current version (1.2.5) can be used with jQuery, MooTools and YUI3.
Helma is a server-side JavaScript environment and web application framework for fast and efficient scripting and serving of your websites and Internet applications.
Online HTML5 JSON Report format to view any JSON data in a human-readable HTML view.
This editor allows for easy editing of json strings, after loading a sample from the dropdown list click ‘build tree’, expand the tree, click nodes and start changing.
JSCSSP is a CSS parser written in cross-browser JavaScript. It parses a string containing CSS styles and outputs a CSS Object Model (warning: not the CSS Object Model). It can preserve some comments, at-rules and style rules that your browser does not recognize and trashes, and even whitespaces if you absolutely need to preserve indentation and blank lines.
jQuery Plugins
sausage.jsSausage is a jQuery UI widget for contextual pagination. It complements long or infinite-scrolling pages by keeping the user informed of her location within the document.
Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element.
Pietimer injects a canvas element into the page which has an ever reducing pie shaped timer.
You can use this jQuery plug-in to add lens style zooming effect to an image.
Timeglider is a zooming, panning data-driven timeline — great for history projects, project planning or any other tasks where you’ll need to display a time frame.
A port of a 960 grids to use in jQuery mobile. It aims to bring more flexibility to jQuery-mobile layouts and thus makes it easier to use on tablets. The code is available on Github under MIT license.
A jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements.
Wijmo is a complete kit of over 30 UI widgets with everything from interactive menus to rich charts. If you know jQuery, you know Wijmo. Complete with documentation and professional support, every widget is hand-crafted and includes premium themes.
CSS does not offer a complete down-to-the-letter control. Here you’ll find kerning type, editorial design, manageable code and complete control — just a few examples of what can easily by done with Lettering.js.
jslide is a jQuery plugin to create a simple slideshow of list elements, containing either images or other content.
An exquisite jQuery plugin for magical layouts. Enables filtering, sorting, and dynamic layouts. Isotope’s capabilities are designed to be used together cohesively. You can do it all — filter, sort, change layout modes, add items — and Isotope will handle it with ease.
In this short tutorial, the authors will create a replacement for the default browser checkboxes in the form of a simple jQuery plugin.
In this tutorial the authors are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. They are going to use jQuery and some CSS3 properties for the style.
Quicktag is a tagging plugin for the jQuery JavaScript library.
DataTables (table plug-in for jQuery)
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
This plugin will turn your boring tag list into a magical input that turns each tag into a style-able object with its own delete link. The plugin handles all the data — your form just sees a comma-delimited list of tags.
a jQuery library that enhances a date picker input area with a more convenient date selection.
Last Click
JavaScript Commodore EmulatorThis emulator is meant as a ‘proof of concept’ and uses the HTML5 Canvas-element to render the Commodore 64 screen layout.
A remix of the classic Breakout game. This one will keep you busy for a while.
Great Article
ReplyDeleteBackbone.js Training | Backbone.JS Online Course | Backbone.JS Training in Chennai
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools
ReplyDeleteJavascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton
of engaging advice and insight into front-end technologies. Even more obvious is his passion
for open source contribution and trial-and-error development, making his blog one of the
most honest and engaging around.
Website: davidwalsh.name
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
ReplyDeleteWebsite: davidwalsh.name
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
ReplyDeleteWebsite: davidwalsh.name
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
ReplyDeleteWebsite: davidwalsh.name
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
ReplyDeleteWebsite: davidwalsh.name
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
ReplyDeleteWebsite: davidwalsh.name
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
ReplyDeleteWebsite: davidwalsh.name