MooTools is a compact JavaScript framework that lets you quickly and easily add functionality to your website. This can include transition effects, drag and drop, as well as Ajax using XMLHttpRequest. Mootools doesn’t compromise the compliance of your website. It respects strict standards and doesn’t flag up warnings.Although I am still new to MooTools I felt it worth sharing some of the tutorials and resources that I have been reading and using. Firstly I would recommend looking at the demos on the MooTools website. This is a great starting point, it shows you what is possible with this framework. Some of the effects and transitions are pretty smart, and where once only possible with Flash, non-compliant DHTML or ActiveX controls.

When using MooTools, I would recommend downloading the Firebug extension for Firefox so that you will be able to debug your code more easily. Another essential plugin is the Web Developer extension for Firefox. The Web Developer extension will let you test your page with JavaScript or CSS disabled, so you’ll be able to find out how accessible your web pages are or see where things break.

There are numerous MooTools resources, however I have found the following to be particularly useful for seeing the JavaScript effects in operation, as well as giving good examples to follow and implement in your on web development projects.

PhatFusion

• MooTools JavaScript text drop-shadow
• Ajax-based live search
• Page element transition slide effects

pr0digy.com

• MooTools image menu
• Lightbox photo display
• Rounded corners tutorial
• Ajax form submission

silverscripting.com

• Ajax/JS tabs

The beauty of a JavaScript framework like MooTools is that it is designed to degrade gracefully if the user doesn’t have JavaScript enabled on their browser. This is also important for search engine’s to be able to effectively read your page content. MooTools lets you custom-download individual elements from the main script to help save on overall size. However, my recommendation for beginners is to download the full uncompressed script. Once you have got your page working exactly how you want, you can then download the full script again but in compressed format. Saving you about 100kb’s. By combining this with mod_deflate page compression you will be able to maintain snappy, responsive web pages that include aesthetically pleasing elements without compromising on the quality of your coding. See my simple mod_deflate tutorial.