1. Forms Link
LiveValidation is a lightweight library that equips you with set of validation functions. Besides the classic validation methods, the library has a powerful live validation feature that controls 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 a Prototype version, too.
A powerful, extensible and flexible form-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.
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 with formreform.
2. Animation Link
$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 customize it further.
A powerful library for creating customizable CSS-based animations. With a 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.
A lightweight library, with a YUI-like syntax, FX can create a tween for 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 Link
Canvas 3D JS Library (C3DL)13
C3DL makes writing 3D applications easy. It provides a 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.
An amazing library that simplifies working with vector graphics on the Web. Raphaë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.
Pixastic uses 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 the canvas element is relatively new, the library does not have equal support in all browsers yet.
4. Database Link
5. String And Math Functions Link
Working with dates are always tricky. So many 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.
Pretty Date 23
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 Link
Very similar to typeface.js, Cufón enables you to use any TrueType font in a website. Again, it converts the font to VML with a generator. After inserting the generated .js file in your Web pages, you can use the font like any other.
7. Debugging And Logging Link
Firebug, which sadly only works with Firefox, is one of the best debugging tools around. To have a similar tool for all browsers, insert the Firebug Lite .js file into your Web pages, and you get the functionality and interface you’re used to.
8. Other Link
swfobject is the most popular and flexible method for 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 “why swfobject should be used” can be found here34.
sorttable36 and dragtable37
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 above. 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_roundies38 and DD_belatedPNG39
DD_belatedPNG is a library that provides a customizable fix for the notorious IE6 PNG problem. Whether the PNG is used as “src” or “background-image” DD_belatedPNG can fix it. Unlike other solutions, “background-position” and “background-repeat” properties work as expected too.
A lightweight library (about 4.5 KB) for creating custom dialog boxes. Four boxes can be displayed: alerts, warnings, prompts, success. With a simple function, you can specify the title of the box, the content to be shown and how many seconds to show it for.
Starting with Google Reader and Gmail, keyboard shortcuts in Web applications have become popular because they improve usability so much. Shorcuts.js provides 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.
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 where Mapstraction comes 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 between them.
- 1 http://www.drlongghost.com/validanguage.php
- 2 http://www.drlongghost.com/validanguage.php
- 3 http://www.pengoworks.com/index.cfm?action=get:qforms
- 4 http://code.google.com/p/formreform/
- 5 http://code.google.com/p/formreform/
- 6 http://fx.inetcat.com/
- 7 http://fx.inetcat.com/
- 8 http://coderepos.org/share/wiki/JSTweener
- 9 http://code.google.com/p/tweener/
- 10 http://coderepos.org/share/wiki/JSTweener
- 11 http://www.jscharts.com/
- 12 http://www.jscharts.com/
- 13 http://www.c3dl.org/
- 14 http://www.c3dl.org/
- 15 http://ejohn.org/blog/processingjs/
- 16 http://processing.org/
- 17 http://ejohn.org/blog/processingjs/
- 18 http://www.activerecordjs.org/
- 19 http://www.datejs.com/
- 20 http://www.datejs.com/
- 21 http://sylvester.jcoglan.com/
- 22 http://sylvester.jcoglan.com/
- 25 http://stevenlevithan.com/regex/xregexp/
- 26 http://www.mikeindustries.com/blog/sifr/
- 27 http://cufon.shoqolate.com/generate/
- 28 http://www.gscottolson.com/blackbirdjs/
- 29 http://www.gscottolson.com/blackbirdjs/
- 30 http://getfirebug.com/lite.html
- 31 http://getfirebug.com/lite.html
- 32 http://code.google.com/p/swfobject/
- 33 http://www.danvk.org/wp/dragtable/
- 34 http://www.alistapart.com/articles/flashembedcagematch/
- 35 http://code.google.com/p/swfobject/
- 36 http://www.kryogenix.org/code/browser/sorttable/
- 37 http://www.danvk.org/wp/dragtable/
- 38 http://dillerdesign.com/experiment/DD_roundies/
- 39 http://www.dillerdesign.com/experiment/DD_belatedPNG/
- 40 http://dillerdesign.com/experiment/DD_roundies/
- 43 http://www.tommysmind.com/gamejs/
- 44 http://www.xna.com/
- 45 http://www.tommysmind.com/gamejs/
- 46 http://www.openjs.com/scripts/events/keyboard_shortcuts/
- 47 http://mapstraction.com/
- 48 http://mapstraction.com/
- 49 http://jsload.net/
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.