Getting tweets to fade onto the screen

Over the past two weeks, I got to know JSON and the Twitter API well enough to write a fun little function that lets tweets fade into the screen. It is my contribution to the demo that Scott and Anna are presenting at the Open Video Conference. (It was modified in the final version.)

Things to get out of the way:

1) "Closure" in Javascript. According to two explanations (Patrick Hunlock and Javascript Kit), a closure is a variable that continues to exist outside of the function that created it.

2) You can assign a function to a variable! Eg.

var doSomething = function() {
alert("You are perusing Donna's blog");
/* And whatever else you want to do in this function */
}

What it is useful for, as explained in permadi.com, is adding functions as a property of an object (see Example D2A in the webpage).

JSON

To get started, I had to look up what a JSON object is and how to get a JSON object from websites like Twitter. JSON is javascript object notation. All it does is contain data. At its most basic form, a JSON object has a key-value pair (like ({"name" : "donna oberes"}) ); other times, it can be an array of key-value pairs, like this:
("students" : {("name" : "donna oberes", "program" : "cpa"), ("name" : "john doe", "program" : "cns")}). .

Twitter API

A part of the Twitter API describes the link that will bring up a JSON object containing tweets and other information related to it. For example, http://twitter.com/status/user_timeline/daoberes.json?count=15&callback=? will bring up a JSON object containing all the tweets that a person has made and all related information, like the date and the tweet ID. Something like http://search.twitter.com/search.json?q=%23happy&callback=? will bring up all the tweets with the hashtag "#happy" and other info such as the tweeter's ID, the tweet itself, the date, the user's avatar, etc. If you click on the last link (Google Chrome displays the data on the browser), you'll notice that the object has a key called "results" and that its value is an array of objects and other key-value pairs (look at the bottom!). To get it formatted, go to jsbeautifier.org.

jQuery

How did I put all of this together? Through good ol' Javascript and jQuery. According to the website, "jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development." It did make my life a lot easier.

The functions that I used from the library are .getJSON (), .css (the 2nd overloaded function), $.fadeIn(), and .fadeTo.

.getJSON returns the results of the query in JSON format and then lets you specify exactly what you want done with the returned data with the optional callback parameter. This is what I did:

$.getJSON('http://search.twitter.com/search.json?q=%23' + searchTerm + '&callback=?',
null, function(data) {
datalength = 4;

/* Store tweets and twitter user images in a JSON object */
tweets = []; //declare array of tweets;

//Declare a JSON object
jsonTweets = [];

//Iterate through JSON object and push Twitter pictures and tweets
// onto another JSON object
  for (i = 0; i < datalength; i++) {
    if (data.results[i].text) {
      jsonTweets.push({ "tweetPic" : data.results[i].profile_image_url,
                        "tweet" : data.results[i].text,
                        "twitterId" : data.results[i].from_user,
                        "id" : data.results[i].id });
    }
  }
  nextTweetOrNone();
});

How the function worked

After asking the user to enter a hashtag they would like to print to the screen, the function calls the .getJSON function ( $.getJSON('http://search.twitter.com/search.json?q=%23' + tag + '&callback=?', null, function(data) { ... }); ) and processes the JSON object as a whole and takes out of it anything I would need later on.

nextTweetOrNone() is going to check if the array I just created still has any elements in it. I am going to start popping elements out of it in the next function, and then I will call nextTweetOrNone() again to keep checking if there are still elements I can print out.

I used the setTimeout() function so that all my tweets would not fade into the screen all at once. setTimeOut() calls printTweet.

printTweet first pops an element from the end of the array. Then it creates a span element that will contain two inner span elements, one for the twitter user's picture and one for the tweet. Later in the function, I use .appendChild() to actually make the outer span tag contain the two inner span tags.

The tweets are to appear in random colours, depending on the mood typed in. The "sad" tag will appear in mostly blue colours, "angry" in red, and "happy" in all ranges. I specified the 10 colours that each of the tags will appear in and used the Math.random() function to get a random number between 1 and 10.

I then used the .css function to specify the appearance of the span tags that I created. (This is where the random font colour of the text is set, amongst other things.)

And then the fun part! I used .fadeIn to specify how long the tweets should take to appear on the page. And then I used .fadeTo to reduce the tweet's opacity!

Try it out! Happy coding!