Ranthologia: Rants on the Big Web 2.0

Note: This is a brief intro to a series of tutorials and howto’s in using Mootools. This is not a beginner’s tutorial for Javascript.
Who hasn’t dreamed of adding some eye-candy into their own website? You’ve seen how some sites pull it off: those neat hover effects on the navigation bar, transition effects that fade and scroll into view at every mouse click, and of course the inevitable “drag and drop” feature. Yahoo, YouTube, Facebook, Flickr and most major sites incorporate these features into their webpage, usually to provide interactivity and convenience. Sometimes, other sites just put it there because it looks cool. As a developer, you wish you could do the same thing to all your sites, but then you have no clue how and where to start. “Just how do they do that?”, you ask.

Then the developer community came up with a set of Javascript-based tools that anyone creating a website can use. The tools are called a set of APIs (application programming interfaces) or class libraries coded in Javascript which let you add things like transitions (fade or scroll, slide, etc.), create embedded mini-applications or “widgets” and drag and drop functionality (check out iGoogle), and even enable AJAX as part of the entire package.

There are a number of frameworks each with its own set of rich API’s that may prove useful to any developer wanting to churn out their own YouTube clone. One of the most popular ones are Prototype, Dojo (used by YouTube), the Yahoo UI Library (YUI) and the Prototype-inspired Mootools framework, which we’ll get to in a moment.

Everybody loves Mootools

By “everybody”, we mean all those key websites like CNET, W3C,GameSpot, Ubuntu and possibly others. You can see just how they love it by the way use mootools on their website in different ways. This is another good reason to start using mootools: major support from key players in the online community. In fact, one of the CNET developers also happens to be a member of the Mootools development team. You can check out his developer blog at http://clientside.cnet.com/.

JavaScript without the pain

Personally, I’d call this as an aspiring web developer’s dream come true. Why? Because it actually succeeds in making Javascript a joy to use. Being notorious for its “mistake-prone” features, coding in JavaScript is no picnic. That all changes in Mootools, where every feature that you need has been ingeniously converted and compressed. No more time-wasting, hair-tearing sessions trying to code a complex drag-and-drop script from scratch because Mootools already has a class for it!

Learning Mootools is worth the trouble

Also a noticeable benefit of using Mootools for your Javascript is that you won’t be coding in Javascript anymore, but in Mootools fashion (well, more of an irony really) . Confused? Well, despite the fact that you have learn to code using Mootools classes, it does all the work for you! The first time you start coding, you might start to see double because of its arcane syntax. To give you a taste of things to come, here’s a script that creates a custom tooltip effect for images:

/* tooltip effect */
var Tips2 = new Tips($$('.Tips2'), {
initialize:function(){
this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
},
onShow: function(toolTip) {
this.fx.start(1);
},
onHide: function(toolTip) {
this.fx.start(0);
}
});

If you haven’t been coding in Javascript for a while, the code above may scare the wits out you. The Mootools API uses JavaScript syntax not really used in mainstream web development such as prototyping, advanced function constructs and more. Having never bothered to do any further study on the subject, I thought advanced JavaScript wasn’t really something practical for use with “mission-critical” projects. I was wrong.

Only until recently that developers took this language seriously and its potential to the extreme. JavaScript is now more than just for simply validating forms or making simple pop-up windows: you can find a variety of applications ranging from trivial eye-candy like drag and drop, fade and scroll effects to professional interactive features ranging from dynamic video play lists on YouTube and on-the-fly content in Yahoo to the mission-critical, real-time usability of Google Maps.

What’s next?

We’ll be looking into some basic scripting using the demo scripts found in the Mootools website. If you need to do a refresher course on Javascript you may want to check out these links to get you started (from http://clientside.cnet.com):

Douglas Crockford: The Javascript Programming Language – get an in-depth look into JavaScript in the way everyone should: LIVE! This is a great series of video lectures by Senior Yahoo! Architect Douglas Crockford. You won’t find these anywhere else. If you really want to learn TRUE JavaScript from the inside out, this is THE place to start.

w3schools js docs and tutorials – very useful and straightforward JS examples to get you up and running right away. There’s also a section where you get to see the code you created in action.

The Mootorial website – mootools developer Aaron Newton’s tutorial series about getting started in Mootools. This actually is the inspiration that prompted me to come up with this series of articles for specific applications, mostly basic and ones I’ve implemented in projects at work. I recommend you take some time reading through his site as well.

Once you’ve primed yourself up, you’re ready for the basics.