Of HTML 5 Twitter and Time Zones

In an attempt to expand my knowledge of things, I have been looking into HTML 5 and how it works. In general, HTML 5 adds a few new tags and with help from a bunch of JavaScript, will allow you to create more dynamic web pages and even web applications that can be converted into to mobile applications.  BlackBerry handles their HTML 5 web applications through WebWorks.  They have just recently updated their Developer Zone with nicer splash pages to highlight the multiple ways for creating mobile applications.  WebWorks was available for OS 5 BlackBerry phones, but the new PlayBook is champ with HTMl 5.  The beta version of the OS 2 scores the 2nd highest of all (desktop, tablet and mobile) browsers.

So, with this in mind, I set forth to play around with HTML 5.  I didn’t want to just post what I learned on website on the server, so I installed Apache, PHP and MySQL on my PC.  After following some instructions for installing the three and searching for answers when it didn’t work initially, I finally got everything working.  Hopefully I won’t move to a new PC anytime soon and the installation will keep working.  As part of the setup, I copied a HTML 5 template for the home page.  I hadn’t done much to it during the installation and wasn’t planning on making any updates until I got everything works.  Again, having the local site was mainly for learning so I decide to replace a section for “customer reviews” with my Twitter feed.  I found some basic jQuery Twitter code and modified it for the section.  Simply, the jQuery reads the JSON call from Twitter (twitter).  You can access each element of the feed and get the needed information. In this case, I was only retrieving the Tweet itself (twitter.text) and the datetime when it was tweeted (twitter.created_at).  From there, it is just a matter of formatting it into the appropriate HTML look and then marking a spot on the page where the feed will appear.

// When the document is loaded (jQuery function)
$(document).ready(function() {
// Call the Twitter API to retrieve the last 10 tweets in JSON format for the pcpro Twitter account
$.getJSON("http://twitter.com/statuses/user_timeline.json?screen_name=DeanLogic&count=10&callback=?", function(tweetdata)
{
// Grab a reference to the ul element which will display the tweets
var tl = $("#tweet-list");
// For each item returned in tweetdata
$.each(tweetdata,
function(i,tweet) {
// Append the info in li tags to the ul, converting any links to HTML <a href=.. code and convert the tweeted date
// to a more readable Twitter format
/*
<div>
<figure><img src="images/client_image_1.jpg" alt="Image" /></figure>
<blockquote>
<p>Tweet goes here. « When Tweet was Created </p>
</blockquote>
</div>
*/
var tweetItem = "<div class=\"clearfix says\">"
+ "<figure class=\"marginRight\"><img src=\"images/TwitterDeanLogic.png\"></figure>"
+ "<blockquote><p>" + urlToLink(tweet.text)
+ "  « " + relTime(tweet.created_at, tweet.user.utc_offset)
+ " <span class=\"twitterRetweet\">    </span> " + tweet.retweet_count;
if(tweet.favorited){
tweetItem += "  <span class=\"twitterFavorite\"> </span>";
}
tweetItem += "</blockquote></div>";

tl.append(tweetItem);
});
});
});

Well, the original code (which I have misplaced) was giving the wrong feedback for when the Tweet was posted.  So much for simply copying and pasting code.  I looked into the issue and found that the recent Daylight Savings Time change was causing the issue and also the original code wasn’t accounting for different time zones or something.  After searching around and trying different things, I found that the time zone offset was part of the User information of the JSON feed (twitter.user.utc_offset).  I modified the function to pass in the offset and then subtract that from posted time in order to get the difference in date and time.

// Takes a time value and converts it to "from now" and then returns a relevant text interpretation of it
function relTime(createdDate, utcOffset) {
createdDate = createdDate.replace(/(\+[0-9]{4}\s)/ig,"");
// add utcOffset to parsed value to get actual tweet time
var parsedDate = Date.parse(createdDate) + (1000 * utcOffset);

// get current Date and parse
var relativeDate = new Date();
var relativeOffset = relativeDate.getTimezoneOffset( ) / 60;
var relativeParsed = Date.parse(relativeDate) + (1000 * relativeOffset);

// subtract relative from parsed and get the seconds difference
var timeago = parseInt((relativeParsed - parsedDate) / 1000);

// Determine how long ago in seconds and display relative text
if (timeago < 60) return 'less than a minute ago';
else if(timeago < 120) return 'about a minute ago';
else if(timeago < (45*60)) return (parseInt(timeago / 60)).toString() + ' minutes ago';
else if(timeago < (90*60)) return 'about an hour ago';
else if(timeago < (24*60*60)) return 'about ' + (parseInt(timeago / 3600)).toString() + ' hours ago';
else if(timeago < (48*60*60)) return '1 day ago';
else return (parseInt(timeago / 86400)).toString() + ' days ago';
}

Well, that fixed the general problem, but did not fix the issue with the Daylight Savings Time.  Apparently that still is a little iffy.  So, I moved on to working with CSS and Sprites.

The new (relatively) thing to do with images or icons is to have one image that holds all of your icons and then manipulate the style sheet to only show the portion of the image that is need for the icon.  The benefit of this is, instead of loading 20 different icon images with a site, you only have to load one image.  Which also means, instead of taking one template of a bunch of icons and creating different files, you can edit all of your icons in one place and have just the one file.  If you are bound to change the look of your site for the season, then you don’t have to worry about forgetting one icon while you are creating the dozens for your site.  Of course, the real saving is if you design web sites and just want a quick way to handle each different client’s website.  Anyway, it is a cool way to take this :

And only show what you really want, like      .

Unfortunately WordPress likes to remove any behind the scenes HTML, so I suggest going to the CSS Background Image Sprites tutorial to learn how to do it. It is pretty easy, with a bit of trail and error if you don’t know the exact position of the individual icons and if you use a span instead of a div, like I did.