Test for custom template renderer using twitter search api

HTML

<!doctype html>
<html>
    <head></head>
    <body>
        <ul id="list"></ul>
    </body>
</html>

CSS

body{font-family:georgia,sans-serif;font-size:12px;}
a{color:#52A5E0;}
#list{margin:4px;padding:0px;}
li{width:200px;height:120px;margin:10px;
  padding:14px;display:inline-block;float:left;position:relative;
  border:1px solid #000;border-radius:12px;box-shadow:0 2px 4px #000;
  background:#222;color:#DDD;text-shadow:0 1px 0 #000;
  cursor:pointer;
}
li:hover{box-shadow:0 3px 10px #440;}
span.text{font-size:12px;line-height:20px;font-style:italic;color:#CCC;}
time,b{position:absolute;bottom:2px;padding:4px 10px;}
time{right:0;}
b{left:0;font-family:verdana;text-transform:uppercase;font-size:10px;color:#52A5E0;}

JavaScript

function render(template, data) {
    return template.replace(/{[\w\.\(\)]+}/g, function(match) {
        var token = match.replace(/[\{\}]/g, "");
        try {
            with(data) {
                return eval(token);
            }
        } catch (e) {
            return "";
        }
    });
}

function ago(a) {
    a = parseInt(((new Date).getTime() - Date.parse(a)) / 1E3);
    if (a < 0) return false;
    if (a <= 60) return "A minute ago";
    if (a < 3600) return parseInt(a / 60) + " minutes ago";
    if (a <= 5400) return "An hour ago";
    if (a < 84600) return Math.round(a / 3600) + " hours ago";
    return a < 129600 ? "A day ago" : Math.round(a / 86400) + " days ago"
};

function link(a) {
    if (typeof a != "string") return "";
    a = a.replace(/(https?:\/\/[^\s]+)/i, "<a href='$1' class='ext' target='_blank' rel='nofollow'>$1</a>");
    a = a.replace(/(^|[\s,\.])@([A-Za-z0-9_]+)/g, "$1@<a href=\"http://www.twitter.com/$2\" target='_blank'>$2</a>");
    return a = a.replace(/(^|[\s,\.])#([A-Za-z0-9_]+)/g, "$1#<a href=\"http://search.twitter.com/search?had_popular=true&q=$2\" target='_blank'>$2</a>")
};

var apiUrl = "http://search.twitter.com/search.json?q={query}&rpp=10&callback=handle&_crnd={random}";
var tweetTemplate = "<span class='text'>{link(tweet.text)}</span><br/><b class='user'>{tweet.from_user}</b> - <time>{ago(tweet.created_at)}</time>";

var s = document.createElement("script");
var u = document.getElementById("list")
s.setAttribute("type", "text/javascript");
s.async = true;
s.src = render(apiUrl, {
    "query": "newyork scene",
    "random": Math.random()
});

handle = function(data) {
    for (var i in data.results) {
        var result = data.results[i];
        var li = document.createElement("li");
        li.innerHTML = render(tweetTemplate, {
            "tweet": result
        });
        u.appendChild(li);
        console.log(result);
    }
    document.body.appendChild(u);
}
document.body.appendChild(s)