JSFiddle - React, Tailwind, and code Playground

Twitter Feed for jp.com

by Jennifer Perrin

HTML

<div id="jstwitter"></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
body { margin: 20px; }

#jstwitter {
    height: 40px;
    font-family: 'Yanone Kaffeesatz';
    font-size: 18px;
    color: #444;
    overflow: hidden;
    background: url(http://jenniferperrin.com/img/tweet.png) 0 -10px no-repeat;
}
 
#jstwitter .tweet {
    margin: 0 0 0 50px;
    height: 50px;
}
 
#jstwitter .tweet a {
    text-decoration: none;
    color: #ad4625;
    font-size: 16px;
}
    #jstwitter .tweet a:hover {
        text-decoration: none;
        color: #617797;
    }
 
#jstwitter .tweet .time {
    font-size: 14px;
    font-style: italic;
    color: #ccc;
}

JavaScript

/**
* View Tutorial at:
* http://jenniferperrin.com/blog/tutorial-simple-twitter-scroller-using-jquery
**/

jtweet = {

    // Set Twitter username, number of tweets & id/class to append tweets
    user: 'jenniferdperrin',
    numTweets: 10,
    appendTo: '#jstwitter',

    // Core function of jtweet
    loadTweets: function() {
        $.ajax({
            url: 'http://api.twitter.com/1/statuses/user_timeline.json/',
            type: 'GET',
            dataType: 'jsonp',
            data: {
                screen_name: jtweet.user,
                include_rts: false,
                count: jtweet.numTweets,
                include_entities: true
            },
            success: function(data, textStatus, xhr) {

                var html = '<div class="tweet">tweet_text<span class="time">ago</span>';

                // Append tweets to page
                for (var i = 0; i < data.length; i++) {
                    $(jtweet.appendTo).append(
                    html.replace('tweet_text', jtweet.ify.clean(data[i].text)).replace(/user/g, data[i].user.screen_name).replace('ago', jtweet.timeAgo(data[i].created_at)));
                }
            }

        });

    },


    /**
     * relative time calculator FROM TWITTER
     * @param {string} twitter date string returned from Twitter API
     * @return {string} relative time like "2 minutes ago"
     */
    timeAgo: function(dateString) {
        var rightNow = new Date();
        var then = new Date(dateString);

        if ($.browser.msie) {
            // IE can't parse these crazy Ruby dates
            then = Date.parse(dateString.replace(/( \+)/, ' UTC$1'));
        }

        var diff = rightNow - then;

        var second = 1000,
            minute = second * 60,
            hour = minute * 60,
            day = hour * 24,
            week = day * 7;

        if (isNaN(diff) || diff < 0) {
            return ""; // return blank string if unknown
        }
        if (diff < second * 2) {
           ...