After introducing some of books, I will now share my online resources. There are a lot of toolkits, frameworks or libraries out there, free to use, with powerful features or a lot less typing for you as benefit. The one that all these toolkits rely on is called »prototype«. It is an AJAX Framework which is providing a lot of useful functions to make your Javascript work a lot easier. One of my problems was to get the correct X and Y coordinates from a mouse event. The corresponding DOM properties would be »clientx« and »clienty« and everything worked fine in Firefox but Safari would show a different behavior. If you scrolled down on a website the clienty value that Safari would give you is the actual clienty + the distance you scrolled down – which made it real ugly to add a tooltip to the mouse cursor unless I had a browser detection … . This is where prototype.js came into play because it is providing stuff like this in neat functions. All I needed to do is adding prototype.js to my site. Of course I had to look for the right function as well but that was it. There was no need for me to write the browser detection which saved me a lot of time (This bug is already in Safaris / Webkit bugtracker). But it can do so much more. You can easily build XMLHttpObjects, get references of XHTML elements and and and … seriously it can do a lot. There is only one really bad thing about it – there is no official documentation. However some other people tried to fix that as good as possible. Jonathan Snook published on his site the very useful prototype.js cheat sheet and then there is a list of articles which cover the usage of prototype.js on prototypedoc.com. If you read the books which I mentioned in my previous post you will probably get around by looking directly into the prototype.js file.

One of the libraries / toolkits that rely on prototype.js is script.aculo.us. The name is weird but this piece of javascript gives you a handful of very pretty animated visual effects. In contrast to prototype scriptaculous is very well documented thanks to the use of a wiki. You can try out all the effects on the demo page. The basic visual effects are filed under »Combination Effects Demo«. Just to give you a tiny example of what you can do click here

Other, similar frameworks / toolkits are rico and dojo. Of course they have some unique distinguishable features but they also cover a few of scriptaculous.

One of the smaller toolkits is called »Lightbox« which provides a nice way of viewing pictures on websites. Instead of opening pop-ups it puts another layer over the website showing the picture. It looks really nice and is easy to implement. Go to the website and check out the demos.

Of course, wikipedia is another good resource to find the meaning of all these fancy web 2.0 related buzzwords.

The next post will cover my personal experience while investigating Javascript.

[Addition]

I just found a blog entry that lists a lot more Javascript frameworks than mine, if you’re interested go take a look.

Technorati Tags:
web, ajax, web 2.0, javascript