Intereactive Web Design - Sugar Land, TX

In most javascript frameworks, one of the most powerful tools they offer is the DOM selector function. It’s commonly known in Mootools and Prototype as the double-dollar ($$) and in jQuery it’s just a single-dollar ($). It allows us to search and find elements in the DOM and return them as an array.

For instance, $$(“p”) will return an array of all the elements in the DOM with the p tag. A more powerful example would be $$(“.post”), where you get a returned array of elements that have the class “post”. Add in some Mootools slickness and we can really make it powerful by use of the Selectors such as $$(“.post:last-child”) to select the last element that has the class “post”.

As I’ve been active in the Mootools forums and various blogs and such, I’ve seen lots of people that are new to Mootools (or JS in general), not quite understand what to do with this function. One of the key things to remember when dealing with this function is that it returns the elements in a way that you can apply all the Mootools element methods.

Here are some examples of how I often see this function overcomplicated

//Common way that is used
$$('.status').each(function(el){
	el.set('html','Success');
});

//Shorter way to write this
$$('.status').set('html','Success');

Or a more complex example where chaining together methods can be used. As Aaron points out in the comments chaining methods causes the selector to run multiple times, which with a large result set will hinder performance.

//Common way that is used
$$('.status').each(function(el){
	el.set('html','Success');
	el.highlight();
});

//Shorter way to write this
$$('.status').set('html','Success').highlight();

Mootools also allows you to apply Tween or Morph directly on an element such as element.tween(‘color’, ‘#009900′) or element.morph(‘.class_name’). This allows us to also use tween and morph via the double-dollar($$) like:

//Using Tween to change the text color in last p tag in the DOM
$$('p:last-child').tween('color', '#009900');

//Using Morph to morph all p tags in the DOM to a class named "large"
$$('p').morph('.large');

There are definitely times when we should use the “each” array itterator to do several things to each value, but more often than not I see it overused which really complicated the code. And that has a chain reaction that will further make it harder for new users to understand how to use the framework. Mootools has gone to great lengths to allow us to simplify our code and we should be using this shorter code whenever possible.

I had a little personal project where I needed to combine my wife’s and my Twitter feed into one common feed. This was so we could display it on our blog and it would show in realtime what we were doing. Not a problem using Yahoo Pipes since our accounts are unprotected and open to the public. I created a simple pipe to combine the feeds and sort by date.

This past week I had another personal project where we have a large music festival with lots of people that will be twittering while the event is going on. Many of them have their account protected (for whatever reason) and short of asking them to unprotect it for the week of the festival, there is no easy way to get access to their feed. I couldn’t even get access to it for a few days because once you open your feed to the public anyone can see all your history.

What I needed was a way to grab their twitter feed only during the festival so I put my brain in overdrive and shortly after came up with a pretty elegant way of doing it. I had remembered using a script called Snoopy that is a PHP class that simulates a web browser. I dug through the Twitter API and found the “friends_timeline” call, which is basically a feed of all my friend’s tweets (what you see on twitter.com/home). I put the 2 together and had the core of a script that would let me login to Twitter and pull the tweets for everyone I follow.

There are two ways to go from here. You could create a dedicated Twitter account and follow just the people you want to display on the overall feed. Or you can create an array of usernames in your code that is used to filter only the ones you want in the overall feed. In my final code I choose to go with the later for simplicity.

Here is the core of what I wrote to pull in the feed via XML

require_once('snoopy.class.php');
$snoopy = new Snoopy;
$snoopy->agent = 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)';
$snoopy->user = 'your_twitter_username';
$snoopy->pass = 'your_twitter_password';
$snoopy->fetch('http://twitter.com/statuses/friends_timeline.xml');

// Make sure we connected to the API
if (strpos($snoopy->response_code, '200')) {
	// Use PHP's SimpleXML functions
	$xml = simplexml_load_string($snoopy->results);
	foreach($xml->status as $status) {
		// Do your code here using the format:
		// $status->id
		// $status->user->screen_name
		// etc...
	}
}

There are a few things to note:
1) The main thing is that if someone has their Twitter marked as “protected”, it is that way for a reason. Be SURE you have their permission to pull their tweets only during a set time of your event or whatever you are doing.
2) The Twitter API will only display the latest 20 tweets. To get around this I created a PHP file using the above code and I run it on a Cron Job every 1 minute, dumping the results in a database table. Then I pull from that DB table when I display the feed. Here is the complete file that I use (I added the Snoopy class so it would be self contained): twitter_grab_cron.zip

As we are building out our ap, Mosaic, we are starting to add in a few of the detail touches that make a UI a little more comfortable to use. In many places, such as the navigation, we are swapping the background color of a link to show the rollover (or :hover) effect. It’s a very sharp on/off transition that we wanted to make a bit more smooth.

So I started in on the problem using Mootools native Morph effect and was going to animate in the background color using it’s capability to pass in CSS rules. But I realized that it was going to pull out alot of control of the layout from the CSS and make me have to write separate classes for “off state” and “over state” which will not degrade gracefully.

30 minutes later I came up with this short piece of code that uses the native :hover element and will override it’s functionality.

$$('.animate').morph('.nav').addEvents({
	'mouseenter': function() {
		this.morph('.nav:hover');
	},
	'mouseleave': function() {
		this.morph('.nav');
	}
})

Where we have this HTML

<a class = "animate nav" href = "#">Link 1</a>

The class “nav” is what styles the actual a tag and it’s corresponding nav:hover is what changes the background color. The class “animate” is what hooks the mootools code on it to make it animate.

The only thing extra I had to go back and add to the CSS to make this work was that I had to implicitly declare a background color on the “nav” class. The Morph class needs both values to go back and forth to.

The code is small and can easily be modified to be put into a class or function to pass in the classes needed so that it’s more global. I’m sure as I start to implement this around the ap more I’ll find ways to make it more generic. Here is an example of it in use: Link Animation Example