JSFiddle - React, Tailwind, and code Playground

by blaipratdesaba

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Super awesome news feed</title>
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet">
        
        <!-- please, take a look at the original coffeescript file on     -->
        <!--            http://www.blaipratdesaba.com/tweet.coffee                         -->
        <!--            script files loaded at the bottom of the page                         -->
    </head>
    <body>
        
        <div class="container">
            <div class="row">
                <!-- begin tweets column list -->
                 <div class="span9">
                     <div class="alert alert-new-tweets">
                     
                         <strong> <span class="n-new-tweets"></span> new twits!</strong> Click here to see them! 
                    </div>
                        <div class="tweetlist">
                     
                     </div>
                     &nbsp; <!-- quick hax to prevent empty div to flash on boot-->
                 </div>
                <div class="template">
                     <div class="twit">
                         <img src="http://a0.twimg.com/profile_images/2532596241/r2q9kbwna9ggusdy4fzi_normal.jpeg" class="img-rounded profile-picture" width="48" height="48">
                         <h4> @<span class="name">Burai</span> says:</h4>
                         <p class="message">Això és un twit</p>
                         <h6 class="time">On 23:35</h6>
                     </div>s
                </div>
                <!-- end tweets column list -->
                <!-- begin info column list -->
                <div class="span3 title">
                    <h1>Read the latest tweets on <span class="query"></span></h1>
                    <button class="btn btn-large     btn-block autorefresh autorefresh-disabled"...

CSS

.title h1 {
  margin-bottom: 60px;
}
.twit {
  position: relative;
  background-color: #DDD;
  padding: 10px;
  margin: 10px 0;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  transition: background-color 1s;
  -moz-transition: background-color 1s;
  -webkit-transition: background-color 1s;
  -o-transition: background-color 1s;
}
.twit img {
  position: relative;
  display: block;
  float: left;
  margin: 0 10px 10px 0;
}
.twit h4,
.twit p {
  margin: 0px;
  padding: 0px;
}
.twit h6 {
  padding: 0px;
  margin: 0px;
}
.twit.twit-new {
  background-color: #f5ced4;
}
.template {
  display: none;
}
.alert-new-tweets {
  display: none;
}

CoffeeScript

###jshint eqnull:true###
### original .coffe document with all the comments available on http://www.blaipratdesaba.com/arenanet/tweets.coffee ###
#
# TwitterControl v 0.1
# example for Arena.net
# 
# 2012 Blai Pratdesaba (www.blaipratdesaba.com)
# 


# Class: TwitterControl
# manages the twitter search and polls it in intervals
# 
# Parameters:
#        query - The text that searches in twitter, default "guildwars2"
#        refresh - Time (in seconds) between queries (default to 10)
#        url    - the url to query 
#     autoupdate - if we want to use the autoupdate function (default to false)
#    
# Usage:
#        t = new TwitterControl({query: "arena.net", refresh: 5})
#


TwitterControl = (args = undefined)->
    # OPTIONS
    # query to be made on twitter
    # Remember! Hashtag code is "%23"
    query = args.query || "guildwars2";

    # refresh interval, in seconds 
    refresh = args.refresh || 10    
    
    # url where to get the query
    url = args.url || "http://search.twitter.com/search.json";
    
    # the list will autoupdate
    autoupdate = args.autoupdate || false;

    # internal variables    
    boot = false
    title = $("title").html()
    tweets = []
    tweets_id_cache = []
    tweets_display_later = []
    
    
    
    
    # METHODS     

    # Query methods
    # run the query on twitter
    getInformation = ()->
        
        #prepare the page if it is the first time
        preparePage()    if boot is false

        # run ajax to query the information
        # using the JSONP protocol
        $.ajax({
            url: "#{url}?q=#{query}"
            dataType: "jsonp"
            success: callbackInformation
        })
        # TODO: Check if the connection timeouts or fails
    
    
    
    
    # callback that processes the results
    callbackInformation = (i)->    
        
        # the first time that the function runs
        if boot is false
        
            # we have recieved the information
            #...