Outlines some very handy JS libraries. This is an old seminar presentation I did long ago, so some of the libraries are outdated now.

1. Conducted by: Riz Rahman

2. Background
 Javascript 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.

3. What we will know today
 Javascript can do amazing things these days.
 We will get introduced with several of these breath-
taking technologies today.

4. Zip.js - A JavaScript library to zip and unzip files
 zip.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/

5. Zip.js - A JavaScript library to zip and unzip files
The site has good documentation and examples. I will show you live.

6. Zoom.js - A JavaScript library to zoom in/out
 zoom.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

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

8. Hammer.js - A javascript library for multi-touch gestures
 Why use Hammer.js?
 easy implementation of touch events in your website
 lightweight with only 2kb (minified and gzip), easy to
dig into
 focused javascript library, only for multi-touch gestures
 completely standalone, and a jQuery plugin is available
 Resources: http://eightmedia.github.com/hammer.js/

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

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

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

12. 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+.

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

14. 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/

15. 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.

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

17. 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

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

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

20. 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.

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

22. Power PWChecker - jQuery plugin to
ensure secure passwords for users
 Resources: http://www.egrappler.com/jquery-strong-
password-plugin-power-pwchecker/
 $(document).ready(function () {
$('.password-container').pschecker({
onPasswordValidate: validatePassword,
onPasswordMatch: matchPassword });

23. Arbor.js - a graph visualization library using
web workers and jQuery
 Resources: http://arborjs.org/
 I will show everything live!

24. MotionCAPTCHA is a jQuery CAPTCHA
plugin
 MotionCAPTCHA 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.

25. Some more links to check
 http://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/

26. Thank you folks.