Twitter timeline serverless

HTML

<script src="https://oauth.io/auth/download/latest/oauth.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script>
<div id="connect">
    <button class="btn btn-primary">Connect with twitter</button>
    <p>If nothing happen after the connexion, it's maybe because the twitter rate limit exceeded</p>
</div>
<div id="res"></div>

<script id="entry-template" type="text/x-handlebars-template">
    <ul id="timeline">
    {{#each data}}
        <li>
            <img class="thumbnail" src="{{user.profile_image_url}}" />
            <span class="content">
                <span class="author">{{user.name}}</span>
                <span class="text">{{link text}}</span>
            </span>
        </li>
    {{/each}}
    </ul>
</script>

CSS

#connect { text-align: center; padding-top: 15px}
#connect p {color: #AAA; margin-top: 20px}
#res { display: none }
#timeline { list-style-type: none }
#timeline li { clear: left; margin-bottom: 10px; padding-bottom: 10px; min-height: 70px; border-bottom: 1px solid #EEE }
#timeline li .thumbnail { float: left; position: relative; left: -10px }
#timeline li .content { display: block; margin-left: 15px; margin-top: 5px }
#timeline li .author { font-weight: bold; display: block }

CoffeeScript

Handlebars.registerHelper 'link', (text) ->
    exp = /((https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return new Handlebars.SafeString(text.replace(exp,'<a href="$1">$1</a>'))

$('button').click ->
    OAuth.initialize 'oEcDIQahkO4TUAND-yTs-H6oY_M'
    OAuth.popup 'twitter', (err, res) ->
        res.get('/1.1/statuses/home_timeline.json').done (data) ->
            console.log data
            template = Handlebars.compile $('#entry-template').html()
            $('#connect').slideUp 'fast'
            $('#res').html(template data:data).slideDown 'fast'