How to Display Justin Bieber Tweets with Asynchronous Recursion
Tutorial Details
- Topic: Justin Bieber News (or JavaScript)
- Estimated Difficulty: Intermediate
- Format: 20 Minute Screencast
Bottom line: Justin Bieber = traffic. I fully intend to use this to my advantage, and none of you can do anything about it. The purpose of today’s video tutorial is to demonstrate how to use a scary set of words, “asynchronous recursion” to continuously display updated tweets about the great Biebster. And then finally, we’ll hijack these tweets to make them look as if they’re referring to Nettuts+ instead.
The Full Source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Biebster</title>
</head>
<body>
<h2> Latest Biebster Tweets </h2>
<ul id="tweets"> </ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
(function() {
var UpdatePanel = {
init : function(options) {
this.options = $.extend({
interval : 5000,
number : 3,
hijackTweet : false
}, options);
this.updater();
},
updater : function() {
(function updateBox() {
this.timer = setTimeout(function() {
updateIt();
updateBox();
}, UpdatePanel.options.interval);
})();
// get the ball rolling
updateIt();
function updateIt() {
$.ajax({
type : 'GET',
url : UpdatePanel.options.url,
dataType : 'jsonp',
error : function() {},
success : function(results) {
var theTweets = '',
elem = UpdatePanel.options.elem.empty();
$.each(results.results, function(index, tweet) {
if ( UpdatePanel.options.hijackTweet ) {
tweet.text = tweet.text.replace(/(Justin )?Bieber/ig, 'Nettuts');
}
if ( index === UpdatePanel.options.number ) {
return false;
}
else {
theTweets += '<li>' + tweet.text + '</li>';
}
});
elem.append(theTweets);
}
});
}
},
clearUpdater : function() {
clearTimeout(this.timer);
}
};
window.UpdatePanel = UpdatePanel;
})();
UpdatePanel.init({
interval : 5000,
number : 5,
url : "http://search.twitter.com/search.json?q=bieber",
elem : $('#tweets'),
hijackTweet : true
});
</script>
</body>
</html>
Conclusion
Thanks for watching; I hope you enjoyed it! Stay tuned to Nettuts+ for more news and gossip on Justin Bieber!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
What?… October fools?
This concept is hilarious! :D Thanks for the tutorial… I need this!
You guys are funny. Who knew I could catch Bieber news on a web design tut site. Always pushing the envelopes ;) Ha!
Thanks for this!
NOOOOOO!!!!!!
Intresting tutorial regardless of Bieber being in it.
“and none of you can do anything about it” People could cancel their plus account… :|
It’s a joke.
Great article, but when I saw it I thought net tuts was being hacked.
You should chose someone less, you know, bieber…
Haha i was thinking WTF is going on ;P
Anyway a nice tutorial, useful!
I think that this may push people AWAY from nettuts :-(
Come on people! Don’t be so bitter :D
Lol this is hilarious. Good tutorial too.
Just, LOL. Couldn’t you get in legal trouble for the second part of the tutorial? (hijacking)
Amazing, though. Keep up the insane work Jeff ;)
Regards,
Chris
Haha! Cool idea!
Thanks Jeff!
lol?
Have a sense of humor guys. It’s Friday.
Don’t worry Jeff, I think that’s exactly how everyone intended the comments to be.
But Friday? It feels like Tuesday.
Nice job Jeff! At first I was thinking this was another GifTuts joke. But when I seen the implementation I understood the brilliance in it. Them non-designer/developer Beiber fans are going to be pissed when Nettuts comes up first on their Beiber searches! We should pity them because… you know… they’re Beiber fans.
Keep the good stuff coming!
ps – That’s three Beiber’s in one comment (four now). More fodder for Google’s search!
see what happens after he loses that bet! vegemite, yuck!
he has been contaminated, taken over
never heard of vegemite before and I was in Australia many years ago.
Al
Programming was a perfect scape from the whole Bieber Fever thing. Now i am doomed.
Wow! I like your code Jeff that was smart ;)
clearUpdater : function() {
clearTimeout(this.timer);
}
this.timer?
Hahahaha. This is ridiculously funny.
Hahahahaha! This is brilliant!
This tutorial kicks ass. Thank you for teaching me Asynchronous Recursion Jeffrey, you are a ninja. Teach me…
You little cheater… haha, brilliant!
lol I thought Im in the wrong website , and I saw nettuts , lol and I was suprised..nice post man
I think that by using Justin Bieber to score traffic is really low. And to find out that the post was authored by Jeffery Way?! I’m thinking about canceling my Plus membership. Seriously.
Okay, seriously… To each of the commenters that didn’t find this, at the very least, a bit humorous, I think it’s about time to remove that gargantuan (spelled correctly on my first try! gold star!), bark-covered, armlike thing from your sphincter (holy cow, I’m 2 for 2!). First of all, like it or not, the ladies love Justin Bieber. Secondly, development is almost always too serious (minus a few fantastic robots.txt files). It’s refreshing to have some fun every now and then, especially when it comes to asynchronous recursion. So, sit back, have a laugh, and be happy that you’re alive and able to read/watch the great J-Way at work. A+ Tut!
“And to find out that the post was authored by Jeffery Way?!”
So what?
Look at the overall quality of tutorials here and you’ll see why they’ve chosen Justin Bieber as the envato mascot.
@Ben – Of course girls love him, but more in a way they would love a girlfriend, gossip, color their nails, do the hair, talk about makeup…
@Luis – WTF does quality of tutorials have to do with Justin Bieber? :)
Loving the guitar in the background (first few seconds).
Haha amazing, I saw the tweet but didn’t think you’d actually go through with it. I like a site that can loosen up once and a while :)
Great post Jeffrey, Nice use of jquery.
Thanks for sharing the artcile.
Like… seriously? Geez Jeff, I never though you one of the Bieberman.
I’m not.
Jeffrey, admittance is the first step of bieberehab, no need to be ashamed by it, you’re not alone, there are millions of little girls with the same prob.
Haha, just kidding man, developers are smart enough to know the twelve commandment “Thau shall not worship that gay bastard Bieber”. :)
Ahaha nice, idea, good for the fans though and you just had to use Justin, as a cover for a nice article. Anyways nice tuts again from the master, This will be helpful.
Great tut and even a better way to present it tbh!
the most gay post in the world!!
The GAYEST nickname (xRommelx) in the World!
Very Well Done Jeff. Great post!
Actually, the relation with traffic is pretty unclear to me … how would putting tweets about justin bieber, replaced by nettuts on your nettuts site get you more traffic???
I love the tutorial though, gives a nice view on what and how.
Tom, Tom…Tom.
This is what vegemite makes with people. They become bieber fans! Horrible!
LOL
Great idea!
You’ve got to be joking.
This is so low. At least use someone decent!
hehe, I’d laugh if you guys (Envato) got into legal trouble because of this ;D
Da… Da… Da… Douche!
super!
I have just removed all my net tuts bookmarks and will never visit the site again.
So you are committing suicide??? Just because of a simple funny tutorial??
that’s it, I’m cancelling my subscription
Same here.
A-W-E-S-O-M-E.
It scares me how stupid people can be. I mean, you canceled your subscription because of this? I assume you are either Bieber’s fans or you consider yourselves too high-class to read a comment about him.. in a tech blog. Either way, you disgust me.
What about a tutorial with Justin Bieber and the Youtube API?
Brilliant :p
hahahahahahahahaha
This is quite disturbing.. I thought the Justin Bieber madness was only for the fourteen year olds…
Its like the prefect way to SEO :D
Why not use an infinite while statement, instead of declaring a new function? (Referring to the Updater method.) Native statements are faster, look better and usually require less typing. You can also easily let the user choose how to exit the loop if they wish.
ya thats so cool.. lol.. ;)
Love it Jeff, I think we all know you’re a bieber fan at heart :P
I think Justin Bieber is a excellent example to get girls on my future website (:
I wonder if theres any HTML5 games for throwing bottles at Justin Bieber but anyways!!!
Great Job!!!!
Thanks for the idea! haha, im sure there will be some flash games around.
Recyclable bottles… Preserve the internet ozone layer, it was damaged and that’s how this Bieber thing made it’s way.
Is this an April Fools joke because Australia is in the southern hemisphere, thus 6 months different than the northern hemisphere in terms of season? ;-)
Haha the end of the tutorial was great, showed a bit of fun and some off the cuff antics from you Jeff.
Love the way you code, simply awesome mate.
Many thanks.
To me it feels more like recursive asynchronicity :P
Jeffrey, you are starting to scare me. Great idea.
One small improvement is to put the text replacing part of code inside the part that is checking if the number of tweets has been reached. This way you will spare one text replace. If you understand what I mean.
Second, as Twitter has a 150/hour limit to the API, this would stop working after some time. But I understand what this tut is trying to show.
Very nice, thanks again