public
Last active

  • Download Gist
loud.on.twitter.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="jquery.twitter.min.js"></script>
<style type="text/css">
body {background: #333; font-size: 64px; color: #999}
.twitter-posts {padding: 10px; list-style-type:none; border-bottom: 1px solid #000;}
.twitter-posts a {text-decoration:none; color: #FFF;}
</style>
<script type="text/javascript">
 
var parseQuerystring = function(){
var nvpair = {};
var qs = window.location.search.replace('?', '');
var pairs = qs.split('&');
$.each(pairs, function(i, v){
var pair = v.split('=');
nvpair[pair[0]] = pair[1];
});
return nvpair;
}
 
$(function(){
var qs = parseQuerystring();
var q = qs['q'] || '@github';
var c = qs['c'] || 2000;
 
$.twitter({limit: 1000, retweets: false, q: q}, function(tweets){
var musings = tweets.results;
var tweet_data = {};
$.each(musings, function(num, tweet) {
tweet_data[tweet.from_user] = tweet;
});
var authors = Object.keys(tweet_data);
var url = "http://api.twitter.com/1/users/lookup.json?callback=?&screen_name=";
$.getJSON(url + authors.join(), function(profiles){
$.each(profiles, function(count, author){
if (author.followers_count > c){
tweet = tweet_data[author.screen_name];
name = author.name;
$('#loud-tweets').append($("<li>", {
"class": "twitter-posts",
html: name + " <a href='http://twitter.com/" + tweet.from_user + "' class='profile'>@" + tweet.from_user + "</a> (" + author.followers_count + ") says...<div class='tweet'><a href='http://twitter.com/" + tweet.from_user + "/status/" + tweet.id_str + "'>" + tweet.text + "</a></div>"}));
};
});
});
});
 
});
</script>
</head>
<body>
<div id="loud-tweets"></div>
</body>
</html>

I would like to understand how to do this with idiomatic JavaScript

This code works, but it's terrible JavaScript. I realized that when I started writing this code that I was attempting to write very procedural code. Sprinkle in some anonymous functions and callbacks and you quickly realize that the procedural code just isn't going to work.

I'd love to finally grasp modern idiomatic JavaScript. Fork and help me out?

(This is just a quick and silly example of something I was hacking together this week, but it's a good example of the problem I have in understanding how this type of code should be written.)

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.