40 lightweight JavaScript Libraries

ArticleDirectory

• 1. Forms
• 2. Animation
• 3. Visualization and image effects
• 4. Database
• 5. String and math functions
• 6. Fonts
• 7. debugging and logging
• 8. Other

PopularJavascript LibrariesSuch as jquery, mootools, prototype, dojo and Yui can be great for accomplishing common JavaScript tasks. these libraries provide functions, whether the matter is related to events or effects or Ajax. and if one of these libraries can't do the job, a plug-in probably exists that can.

Such flexibility is great but sometimes comes with a penalty (the size of JavaScript files being one of them ). although adopting a well-known JavaScript library is usually a wise demo, you may want to perform a task that can be accomplished by a more lightweight library dedicated exclusively to that task or that is not supported by the more popular JavaScript libraries.

Below, we present40 stand-alone JavaScript libraries that serve specific purposes. These are not all the ones out there, but every web designer or developer will find something helpful here.

1. Forms

Wforms
Wforms isOpen-sourceAndUnobtrusive Library
That simplifies the most common JavaScript form functions. It offers
Ready-to-use Form validation functions for which can be applied
Adding a class info to the form objects. Besides these,WformsHas powerfulForm Synchronization(Like "check"/"uncheck all") andConditional formCapabilities (e.g. If X is checked, then show y ).

Validanguage
Validanguage is an unobtrusiveJavascript Form validation framework.
It has an inheritance logic whose settings can be defined globally, per
Form or per element. With the 2 APIs provided: And features like
Integrated Ajax support, caching and callback functions, the Framework
Provides a robust validation experience. It has a HTML-like API inserted
In comment tags and a JavaScript Object-based API, for advanced
Configuration.

Livevalidation
Livevalidation is a lightweight library that equips you with set
Validation functions. Besides the classic validation methods,
Library has a powerful live validation feature thatControls the fields as you type.Ruby on Rails
Developers will find it very easy to use because the naming conventions
And parameters are very similar. It is a stand-alone Library but has
Prototype version, too.

Yav
A powerful, extensible and flexibleForm-validation library,Yav
Has support for a wide range of scenarios, from basic ones like date,
Email and integer, to advanced ones, like masking and custom regular
Expressions. It has built-in Ajax support, and errors displayed can be
Easily customized per object level.

Qforms
A complete solution for handling forms. It equips a developer
Features such as varous validation rules, methods to prevent
Multi-submissions, ability to lock/disable fields and more.

Formreform
Using Multi-column layouts without tables is usually challenging. This
Tiny library transforms a classic form into a stylish layout with one,
Two or four columns. forms are styled to fit any design automatically
WithFormreform.

2. Animation

$ FX ()
$ FX ()Is a lightweight library for animating html
Objects. using it, you can alter any CSS property within a given
Timeline. For complicated animations, you can combine effects, Group
Them to chains and run them in parallel. And you can set different
Callbacks at every step to mimize it further.

Jstweener
A tweening library for Javascript. Its API is similar to the famous ActionScript tweening engine Tweener.
You can mention the time of the animation, define the transition
Effects and delays. at almost any point (like onstart, oncomplete,
Onupdate) You can fire new events.

Facebook Animation
A powerful library for creating customizable CSS-based animations. With
Line or two in Facebook animation, you can improve the UI.
The syntax is identical to the fbjs version (the Library Used in
Facebook applications) and once learned, it is an asset for creating
Facebook applications.

FX
A lightweight library, with a Yui-like syntax, FX can create a tween
Almost any CSS property. It supports color and scroll animations.
Designing the "to" and "from" values of any object/property is enough.

3. Visualization and image effects

JS charts
JS chartsSupports bar charts, pie charts and simple
Line graphs. It offers nice usability by simply inserting the library
Onto web pages and calling the data from an XML file or a javascript
Array. Charts are created as PNG files and the library is compatible
With all the major browsers.

Canvas 3D JS Library (c3dl)
C3dlMakes writing 3D applications easy. It provides
Set of math, scene and 3D object classes to make the canvas more
Accessible to developers who want to develop 3D content in a browser
But not have to deal in depth with the 3D math needed to make it work.

Processing. js
This is a javascript port to the processing language
(A language for programming images, animation and interactions).
Library is feature-rich for creating 2D outputs. It provides methods
Shape/image drawing, color manipulation, fonts, objects, math functions
And more.

Rapha rjl
An amazing library that simplifies working with vector graphics on
Web. Rapha using L uses SVG and VML for creating graphics that can be modified
And event handlers that can be attached to them. The Library is
Feature-rich in functions, including rotation, animation, scaling and
Drawing curves, rectangles and circles.

Imagefx
This is a javascript library for adding effects to images, like blur,
Sharpen, emboss, lighten and more. imagefx uses Canvas Element
Creating the effects. It is compatible with all major browsers (there is
A compatibility chart on the script's page). The Library is so easy
Use. simply inserting the. js file in the web page and calling
One-line function is enough.

Pixastic
PixasticUses the HTML5 Canvas Element, which enables
Accessing raw pixel data. The effects supported include desaturation
And grayscale, inverting, flipping, brightness and contrast adjustment,
Hue and saturation, embossing, blurring and much more. Because
Canvas Element is relatively new, the Library does not have equal
Support in all browsers yet.

Reflection. js
An unobtrusive JavaScript to auto-create reflection effects. The height
And opacity of the reflection can be defined. Using It is as easy
Adding a "class" to the images. It works in all major browsers and is
Smaller than 5 kb.

4. Database

Taffy DB
A JavaScript library that can be thought as an SQL database in
Browser or an advanced "array manager." It works as a database layer
Within Ajax 'ed web applications. You can create, read, edit and delete
Data, use loops, sort them and use advanced queries.

Activerecord. js
This library supports Google gears and chrome, Aptana jaxer, Adobe AIR,
And any platform that supports W3C HTML5 SQL specification (WebKit and
IPhone for now). It makes it easy to work with databases in JavaScript.
UsingActiverecord. js, You can auto-create tables, validate and synchronize data and more.

5. String and math functions

Date. js
Working with dates are always tricky. So empty dots, slashes and formats.Datejs
Is a stunning library for simple to complex date functions. It can
Parse dates like: "next Thursday", "+ 2 years" and all formats like
2009.01.08, 12/6/2001 etc.

Sylvester
This is a javascript library for doing vector and matrix math easily,
Without using a lot of loops and getting lost between arrays. it
Includes classes for modelling vectors and matrices in any number
Dimensions and for modelling infinite lines and planes in 3D space.

Pretty date
A smart JavaScript solution for displaying dates within the past month
In a prettier and more user-friendly way. It displays dates relative
The current time; for example, "Yesterday," "3 hours ago," etc.

Xregexp
Regular Expressions can be already used in JavaScript with the Regexp object.Xregexp
Adds more power to Regexp with features that will be part of
Browsers Of Tomorrow (according to proposals for ecmascript 4-ES4 ).
Using the library, Regexp objects can be cached and reused, Modifiers
Can be added to existing Regexp objects and more.

Javascript URL Library
A library for handling and manipulating URLs more easily. It is possible
To reach every part of a URL as a string and modify it when needed.
This URL library is very new but already works as mentioned.

6. Fonts

Typeface. js
An unobtrusive library for using any font on a website. Unlike popular solutions like sifr or FLIR,Typeface. jsDoesn't require flash and is 100% JavaScript. to use any font, upload the TrueType font file to a web-based generator, and download the rendered Javascript file and include it in your web pages.

Cufón
Very similar to typeface. JS,CufónEnables you to use
Any TrueType font in a website. Again, it converts the font to VML with
Generator. After inserting the generated. js file in your web pages,
You can use the font like any other.

7. debugging and logging

Blackbird
Alert () s are widely used to create checkpoints in Javascript development.Blackbird
Offers a stylish console to log, view and filter messages in
Javascript, which quickens the development process by eliminating
Pause at every alert and analyzing each better.

Nitobibug
A browser-based, cross-browserJavaScript Object logging and inspection Utility.
By inserting rules in your code (like which object to follow), you can
Have it distinguish between simple types, like strings, booleans and
Numbers, and complex objects, like error messages and objects.

Firebug Lite
Firebug, Which sadly only works with Firefox, is one
The best debugging tools around. To have a similar tool for all
Browsers, insertFirebug Lite. Js file into your web pages, and you get the functionality and interface you're used.

8. Other

Swfobject
SwfobjectIs the most popular and flexible method
Embedding Flash movies. It is unobtrusive, generates valid markup and
Can detect the version of a user's Flash Player, allowing you to display
Alternate content if the required flash version is not loaded. A nice
Article on "WhySwfobjectShocould be used "can be found here.

sorttable and dragtable
tables, like them or not, are still one of the best ways to present data. but they can be better: sorttable
is a library that makes tabular data sortable, Both ascending and
descending. to do this, simply add class = "sortable" to the table. you
can also exclude certain columns from being sorted and make either
ascending or descending the default behavior. dragtable
is another library that makes columns draggable. after inserting the
library in the web page, add class = "dragtable" to the table as abve.
best of all, both libraries can be used together. simply add
class = "sortable dragtable" to the table after including both libraries
in the web page.

Dd_roundies and dd_belatedpng
Dd_roundiesIs a great JavaScript solutionsCreating rounded corners without using images. It is focused on IE and supports it through VML. other browsers are ignored because they support CSS's border-radius property.

Dd_belatedpngIs a library that provides a customizable
Fix for the notorious IE6 PNG problem. Whether the PNG is used as "src"
Or "Background-image"Dd_belatedpngCan fix it. Unlike other solutions, "Background-Position" and "Background-repeat" properties work as expected too.

Custom JavaScript dialog boxes
A lightweight Library (AB out 4.5 kb) for creatingCustom dialog boxes.
Four boxes can be displayed: alerts, warnings, prompts, success. With
Simple function, you can specify the title of the box, the content
Be shown and how many seconds to show it.

Gamejs
GamejsIs a javascript-ported version of Microsoft's xNa game framework
That uses "canvas" as the rendering device. Javascript is not the best
Platform for creating games. But for games with less FPS, and if you are
A JavaScript developer, then why not? The library provided des handy
Classes for controlling the objects, drawing and keyboard controls.

Shortcuts. js
Starting with Google Reader and Gmail, keyboard shortcuts in Web
Applications have become popular because they improve usability so much.
Shorcuts. jsProvides functions to handle keyboard
Shortcuts more easily. Using the library, it is possible to create
Hotkeys and run functions at the press of a button.

Mapstraction
There are several mapping providers that provide different APIs. If you
Need to switch providers (say from Google Maps to MapQuest), codes need
To be updated. that's whereMapstractionComes in. It
Provides a common API that covers most of the popular mapping providers.
By simply updating a line of code, it is possible to switch
Them.

Amberjack
A tiny JavaScript Library (about 4 kb) that helps you add good-looking
Website tours to your website. Once activated, a modal box guides users
By displaying any type of content. The steps in the tour can be
Hand-coded or generated online. Also, tours can be made to match the look of the modal box, either via CSS or with a ready-to-use theme.

jsload
remote loading API of JavaScript library. jsload is simple API that
enables you to import big JavaScript libraries from Google server.
jsload load dependencies of any version of the library automatically.