Wednesday Fun (Maybe Not)

All Work and No play Makes Jack Dennis a dull Null Boy.

So one of the wonderful things about living here is that regardless of the season, we always have something great to do outside. During this time of the year, we go on a hike each Wednesday with a group of friends. Usually, a great time to unwind and not have to think about anything work.

The trick or struggle always for me is to not think about anything work related and to just relax and enjoy the surroundings. I always enjoy spending the time outdoors whether on my bike, camping with family or on a hike like tonight. However, without fail, I am always working out a problem in my head at some point.

So I am proud to say that I actually made it through the hike without thinking about any problems I am currently working on. Breakthrough!!!

Tonight, I created a new problem and worked on it during the hike. How is that for progress?

Recently, I saw a demo on AngularJS and I was thinking on my hike how hard would it be to redo a jQuery plug in I did for displaying a twitter? The following is what I came up with:

<div ng-app >
    <h1>Twitter Feed</h1>
    <div ng-controller='twitterFeed'>
        <ul ng-repeat='tweet in tweets'>
            <li >{{tweet.text}}</li>
        </ul>
    </div>
</div>

For now, I was thinking of something really simple. Once I got it pulling data from twitter and displaying something, I knew that the rest would come easy.

So before I get deep into the code of AngularJs, let me give a sample of the jQuery plug in I had done awhile back.

(function($){
    $.fn.minTweet = function(options) {
        var defaults = {
            tweets: 5,
            before: "<li>",
            after: "</li>",
            click: function() {},
            onComplete: function() {}
        };
        
        var tweetDeck = this;
        var options = $.extend(defaults, options);
        var tweetStack = new Array();
        
        var init = function() {
        	tweetDeck.each(function() {
	            var obj = $(this);
	            $.getJSON('http://api.twitter.com/1/statuses/user_timeline.json?
	            callback=?&screen_name='+options.username+'&count='+options.tweets,
	                function(data) {
	                    $.each(data, function(i, tweet) {
	                    	tweetStack[i] = tweet;
	                        if(tweet.text !== undefined) {
	                            $(options.before+twitterTime(tweet.created_at)+
	                            options.after).appendTo($(obj)).attr('title', 
	                            tweet.text).attr('id', i).bind
	                            ('click.minTweet', twitterClick);
	                        }
	                    });
	                    options.onComplete();
	                }
	            );
	       });
	    };
	    
	    var twitterClick = function() {
	    	if(tweetStack[$(this).attr('id')]) {
	    		options.click(tweetStack[$(this).attr('id')]);
	    	}
	    };
	    
	    var twitterTime = function(dts) {
		    var now = new Date();
		    var then = new Date(dts);
		    var diff = now - then;
		 
		    var second = 1000,
		    minute = second * 60,
		    hour = minute * 60,
		    day = hour * 24,
		    week = day * 7;
		 
		    if (isNaN(diff) || diff < 0) {
		        return "Unkown"; // return blank string if unknown
		    }
		    else if (diff < minute) {
		        return Math.floor(diff / second) + " seconds ago";
		    }
		    else if (diff < minute * 2) {
		        return "1 minute ago";
		    }
		    else if (diff < hour) {
		        return Math.floor(diff / minute) + " minutes ago";
		    }
		    else if (diff < hour * 2) {
		        return "1 hour ago";
		    }
		    else if (diff < day) {
		        return  Math.floor(diff / hour) + " hours ago";
		    }
		    else if (diff > day && diff < day * 2) {
		        return "yesterday";
		    }
		    else if (diff < week) {
		        return Math.floor(diff / day) + " days ago";
		    }
		    else if (diff > week && (diff < (week + day))) {
		        return "a week ago";
		    }
		    else {
		        return Math.floor(diff / day) + " days ago";
		    }
	    };
	    
	    init();
    };
})(jQuery);

Probably not one of my greatest achievements but at the time of its creation, it was simple and served to solve a problem that I was working on at the time. Granted a majority of the code is that twitterTime() function, it always bothered me that I should have been able to make it simpler.

So would AngularJs save me or would my idea burn? Here is the JavaScript that I came up with.

function twitterFeed($scope, $http) {
    var url = 'https://api.twitter.com/1/statuses/user_timeline.json?
              callback=?&screen_name=dniswhite&count=1';
    $http.jsonp(url).success(function(data,status){
        $scope.tweets = data;
    }).error(function(data) {
        $scope.tweets = "Request failed";
    });          
}

For now, I hardcoded the name of the twitter feed being retrieved to mine. As I went to test it, I could see that the error() function was being called. What could be wrong with my perfectly small piece of code?

Fire off my old jQuery plug in and sure enough, it's no longer working. Did I ever deploy this code and if so what site did I deploy it on? Somewhere out there is a site with a broken twitter feed.

Take out the url from the code and lets give this a test.

{"errors": [{"message": "The Twitter REST API v1 is no longer active. 
Please migrate to API v1.1. https://dev.twitter.com/docs/api/1.1/overview.", "code": 68}]}

So it appears that for now I am temporarily stuck and I will need to resolve the new API (this requires OAuth). I hate to end blogs without resolution, so instead let me say, "Stay Tuned".

Maybe it wasn't such a breakthrough to not think about problems during tonight's hike.