handy js libraries

Handy Javascript LibrariesConducted by: Riz Rahman

BackgroundJavascript is fun.

jQuery is even more fun.

With the introduction of HTML5, JS is being considered to be the future of web programming (already present?).

For those who don’t know what jQuery is – it is just a Javascript framework/library.

What we will know todayJavascript can do amazing things these days.

We will get introduced with several of these breath-taking technologies today.

Zip.js - A JavaScript library to zip and unzip fileszip.js provides a low-level API for writing and

reading large zip files (up to 4GB with File writer API).

zip-fs.js provides a high-level filesystem API.

Resources: http://gildas-lormeau.github.com/zip.js/

Zip.js - A JavaScript library to zip and unzip files

The site has good documentation and examples. I will show you live.

Zoom.js - A JavaScript library to zoom in/outzoom.js is a proof of concept JavaScript API

for zooming in on DOM elements or points.

Demo: http://lab.hakim.se/zoom-js/

Code: https://github.com/hakimel/zoom.js

Zoom.js - A JavaScript library to zoom in/out

Hammer.js - A javascript library for multi-touch gestures

Why use Hammer.js? easy implementation of touch events in your

websitelightweight with only 2kb (minified and gzip),

easy to dig intofocused javascript library, only for multi-touch

gesturescompletely standalone, and a jQuery plugin is

available

Resources: http://eightmedia.github.com/hammer.js/

Hammer.js - A javascript library for multi-touch gestures

Hammer.js - A javascript library for multi-touch gestures

Bacon - a jQuery plugin that allows you to wrap text around a bezier curve or a line.Resources: http://baconforme.com/

Raphaël - JavaScript library that should simplify your work with vector graphics on the web If you want to create your own specific chart or image crop and rotate

widget, for example, you can achieve it simply and easily with this library.

Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics.

This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later.

Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

Raphaël - JavaScript library that should simplify your work with vector graphics on the web

Raphaël - JavaScript library that should simplify your work with vector graphics on the web

Demos are just amazing.

Resources and demos: http://raphaeljs.com/

Resumable.js - It's a JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API.

The library is designed to introduce fault-tolerance into the upload of large files through HTTP.

This is done by splitting each files into small chunks; whenever the upload of a chunk fails, uploading is retried until the procedure completes.

This allows uploads to automatically resume uploading after a network connection is lost either locally or to the server. Additionally, it allows for users to pause, resume and even recover uploads without losing state.

Resumable.js does not have any external dependencies other the HTML5 File API. This is relied on for the ability to chunk files into smaller pieces.

Resumable.js - It's a JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API.

Resumable.js - It's a JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API.

Resources: https://github.com/23/resumable.js

Instant.js - allows you to add an instant picture effect (including tilt) to images on your webpages Resources: http://www.netzgesta.de/instant/

Instant.js - allows you to add an instant picture effect (including tilt) to images on your webpages

Money.js - JavaScript currency conversion library, done right - with no dependencies, in just over 1 kb.

Resources: http://josscrowcroft.github.com/money.js/

Designed to work seamlessly with data from the Open Source Exchange Rates API project - but can be set up to use any data source and base currency in just a few lines.

Money.js - JavaScript currency conversion library, done right - with no dependencies, in just over 1 kb.

Power PWChecker - jQuery plugin to ensure secure passwords for usersResources:

http://www.egrappler.com/jquery-strong-password-plugin-power-pwchecker/

  $(document).ready(function () {           $('.password-

container').pschecker({ onPasswordValidate: validatePassword, onPasswordMatch: matchPassword });

Arbor.js - a graph visualization library using web workers and jQuery

Resources: http://arborjs.org/

I will show everything live!

MotionCAPTCHA is a jQuery CAPTCHA pluginMotionCAPTCHA is a jQuery CAPTCHA plugin,

based on the HTML5 Canvas Harmony procedural drawing tool by Mr Doob and the $1 Unistroke Gesture Regonizer algorithm (and the more recent Protractor algorithm improvement), requiring users to sketch the shape they see in the canvas in order to submit a form.

Resources: http://www.josscrowcroft.com/projects/motioncaptcha-jquery-plugin/

Another amazing thing that I need to show live.

Some more links to checkhttp://www.smashingmagazine.com/2011/10/

28/useful-coding-workflow-tools-for-web-designers-developers/

http://www.smashingapps.com/2011/12/26/best-of-2011-best-useful-jquery-plugins-and-tutorials.html

http://www.1stwebdesigner.com/css/jquery-plugins-2011/

http://www.1stwebdesigner.com/freebies/uniquely-cool-jquery-plugins-tutorials/

Thank you folks.