Intereactive Web Design - Sugar Land, TX

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 “activate” 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

Custom events in Mootools classes allow you to run a set of code when an event occurs in the Class. An example would be “onSuccess” when running an ajax (Request) call, which allows you to run some javascript when the class says that the ajax request is a “success”. If you have ever been witting a class in Mootools and wondered how the custom events work or are used, then you are definitely not alone.

This tutorial assumes you have basic Mootools knowledge and a simple understanding of how classes in Mootools work. If you aren’t there yet, here is a great tutorial on Mootools classes: The Mootorial

The Code

Lets jump right in and say that we are writing a simple class that will show/hide a div on our page. In addition we want to know when that div has been shown or hidden so we will write a custom event for “onShow” and “onHide”. We’ll walk through each step to make thing crystal clear because even as I was digging through the docs and other examples, I found that I had a flawed understanding of how these work.

Our test class

var PopUp = new Class({
	Implements: [Events, Options],

	options: {
		/*
		onShow: $empty,
		onHide: $empty,
		*/
		element_id: null
	},
	initialize: function(options) {
		this.setOptions(options);
	},
	show: function() {
		$(this.options.element_id).setStyle('display', 'block');
		this.fireEvent('show');
	},
	hide: function() {
		$(this.options.element_id).setStyle('display', 'none');
		this.fireEvent('hide');
	}
});

Here we initialize the Class (usually in ‘domready’)

popup = new PopUp({
	element_id :	'popup_div',
	onShow:function(){
		alert('The "show" event was fired');
	},
	onHide:function(){
		alert('The "hide" event was fired');
	}
});

Explanation - Part 1

The following code tells the class what we want to implement. You need both the Events and the Options for custom events to work

	Implements: [Events, Options]

Explanation - Part 2

The following code is where we set the options for the class. You will notice that both onShow and onHide are commented out. Mootools doesn’t need these values implicitly declared because when you pass them in (when you initialize the class), Mootools automatically sets them as events. Mootools will take any option passed in that has a function associated with it and will convert that to an event. They are listed here in the options list for reference only.

	options: {
		/*
		onShow: $empty,
		onHide: $empty,
		*/
		element_id: null
	}

Explanation - Part 3

The following code is needed because when the class is initialized the onShow and onHide as passed in as Options. This threw me for a huge loop when I was trying to use custom events because I thought I was trying to set up an “event” and not an “option”. I didn’t know that Motools converted the option into an event.

	initialize: function(options) {
		this.setOptions(options);
	}

Explanation - Part 4

This is where the custom event is actually fired. When the class has done something we want to hook to (onShow in this case), we call “this.fireEvent(’show’);“. You will notice that it uses “show” instead of “onShow”. Mootools will automatically convert the two. This is done to keep things semantic. The event you are firing is “show” and in you class initialization you want to run a function on the Event (or onShow). Also note that running “this.fireEvent(’onShow’);” will work but is not recommended.

	show: function() {
		$(this.options.element_id).setStyle('display', 'block');
		this.fireEvent('show');
	}

A Working Example

I’ve put all the pieces of this post together in a working example so you can see how things work in real time. Custom Event Example