TableKit

TableKit is a table enhancement JavaScript library written using Prototype provided by Millstream Software. In a nutshell TableKit allows you to easily create sortable, resizable and editable tables. Implementation is extremely simple and, according to Robert Speer, designers don’t have an issue working with it (I haven’t had the pleasure of having a designer work with it yet):

Many times using scripts I find on the Internet turns into kind of a hassle. They are usually unfinished side projects, or are kind of bloated and slow.

TableKit is not one of those scripts, it’s fast & easy to implement. Development time was low, and the designers didn’t complain too much about working with it.

Robert’s right; TableKit is extremely easy to work with. TableKit works by using css class overloading to tell the system how to handle a table. For example:

<table class="sortable resizable editable">

indicates that the table should, obviously, be sortable, resizable and editable. There are all sorts of other options available, which you can read about in the documentation. If you have to use Prototype for a project and you need some jazz TableKit is a good fit.

JQuery UI

According to the official site:

jQuery UI is an open source library of interface components — interactions, full-featured widgets, and animation effects — based on the stellar jQuery javascript library. Each component is built according to jQuery’s event-driven architecture (find something, manipulate it) and is themeable, making it easy for developers of any skill level to integrate and extend into their own code.

I only ran into it because of an update to WP-Click-Track and WordPress uses jQuery so I kinda had to. Not that it’s a bad thing; I like jQuery a little bit more because of jQuery UI.

One of the really cool things about jQuery UI is that there’s an online tool to generate a custom download specific to the project. Having worked with JavaScript libraries for a while I appreciate the customization and convenience of having the smallest footprint as possible. Kudos to them on that.

There’s also a Theme Builder that gives a good overview of what’s available by default along with some preset themes to test; there’s a good deal of widgets there to work with. Almost, almost, makes me want to start a project with it.

jQuery UI - ThemeRoller

Implementation is really elegant too; if you know how jQuery works it’ll be pretty obvious. Otherwise take a look at the below for creating tabs:

<div id="tab-jquery-id">
	<ul>
		<li><a href="#tab1">Tab 1</a></li>
		<li><a href="#tab2">Tab 2</a></li>
		<li><a href="#tab3">Tab 3</a></li>
		<li><a href="#tab4">Tab 4</a></li>
		<li><a href="#tab5">Tab 5</a></li>
	</ul>
	<div id="tab1">
 
	</div>
	<div id="tab2">
 
	</div>
	<div id="tab3">
 
	</div>
	<div id="tab4">
 
	</div>
	<div id="tab5">
 
	</div>
</div>
 
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready( function($) {
	//jQuery UI 1.5.2 doesn't expect tab ID's at DIV, so we have to apply a hotfix instead
	var needs_jquery_hotfix = (($.ui.version === undefined) || !$.ui.version.match(/^(1\.[7-9]|[2-9]\.)/));
	$("#tab-jquery-id"+(needs_jquery_hotfix ? ">ul" : "")).tabs({
		selected: 0
	}); 
	$('.tab5:last').show().removeClass('tab5');
});
//]]>
</script>

As you can see there’s not much there in so far as design or class decorators go; most of that’s handled by jQuery itself as well as the generated css. The only thing to really worry about is adding the wrapper div id in the bottom JavaScript. Still, not a bad thing.

This, of course, barely scratched the surface of jQuery UI but it doesn’t get much more difficult. If you’re using jQuery for a library and you need to make something cool it’s definitely worth checking out.

Tweetmeme

Still, Twitter is all the rage and I do have to admit it is fun working with all the little toys people are making with the Twitter API (playing with the API is really FUN).

One such tool is TweetMeme.

Accoring to the TweetMeme site:

Tweetmeme is a service which aggregates all the popular links on twitter to determine which links are popular. Tweetmeme is able to categorize these links into categories and subcategories, making it easy to filter out the noise to find what your interested in.

We make it easy for you to subscribe to each category and the most popular through aur RSS feeds and Twitter accounts, you can find out more about theses through our help.

TweetMeme has a few ways to integrate their data into your site. The easiest way works by giving site owners a little sliver of JavaScript to embed in their site. The JavaScript adds a little button to the page for one click tweeting on Twitter.

<script type="text/javascript"><!--mce:0--></script>
<script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript"><!--mce:1--></script>

The above creates a little icon:

TweetMeme Icon

In theory, the above is all you’ll need to do; just drop that slip into a page and you’re good to go. The reality is that there are a couple rules you need to follow.

First, make sure you’re using a custom title meta for your pages. If you don’t all your Tweets will have the same title. Not good.

Second, make sure the page in question is open to the Internet. Don’t try and lock the page behind a log in barrier or TweetMeme won’t be able to parse the page to get the URL and title information.

Last, TweetMeme caches the data so don’t expect the update to be instant; you will be disappointed. For example, on the Dark Void site we are constantly being hit up by the client about the delay. You probably won’t see the number in the widget increment for a bit; there’s nothing you can do about it.

TweetMeme also offers a widget, which I admit I haven’t used and but it looks like it’s basically the same thing as Tweetizen.

It should be noted that I wasn’t able to get the TweetMeme Widget to work. Ever. It just shows a blank page. Good job, TweetMeme.

And of course, there’s the TweetMeme API. You just have to have an API to be taken seriously. It does seem a little redundant to have an API that’s populated with data from the Twitter API but, whatever. I haven’t looked at the API too much either but it doesn’t look too outside the norm for most APIs.

Anyway, there you go; TweetMeme. Marketers love it. I’m ambivalent.

Tweetizen

As part of my research into all things Twitter I recently took a look at Tweetizen. According the Tweetizen website:

Tweetizen is a simple web-based tool designed to help you filter the daily influx of tweets, and easily find the ones that are relevant to you.

It’s basically a site that uses the Twitter API to aggregate tags and keywords. Tweetizen doesn’t have an API of it’s own though I suspect this is would be a simple thing for them to implement; unless they’re pussies that is.

Are you pussies Tweetizen?

Instead of an API they do offer a cheap JavaScript widget that can be embedded into a website if you’re into half-assing the concept of “sharing”. Just embed the below into the head of your website:

 <style type="text/css">@import "http://embed.tweetizen.com/embed.css";</style>

And embed the below somewhere in your site:

<div id="twtzn" class="tweetizen_embed"></div>
<script type="text/javascript" src="http://embed.tweetizen.com/tweetizen.embed.js"></script>
<script type="text/javascript" src="http://embed.tweetizen.com?id=twtzn&g=Breaking+News"></script>

It looks just like every other widget they offer but you can style it using CSS if you wish. I imagine it would be incredibly tedious to really make the widget stand apart from the pack with just CSS but it’s all they offer. They do provide a sample CSS file for usage along with instructions on the Tweetizen FAQ page to help the process along.

For me Tweetizen is a lose; but as mentioned above the clients love this shit so I’m in whether I like it or not.

Blackberry Browser

I don’t have an iPhone so I couldn’t get too excited about the content though. After reading the article I started thinking about how to get web sites to render nicely on the Blackberry.

RIM (the makers of the Blackberry) provides some extensive documentation on how best to develop web sites for the Blackberry. The topics include:

1. BlackBerry Browser – Fundamentals Guide
2. CSS for the BlackBerry Browser – Reference Guide
3. HTML for the BlackBerry Browser – Reference Guide
4. BlackBerry Browser – JavaScript Reference

One of the easiest thing you can do to play nice with the Blackberry browser is to use the Viewport and / or HandheldFriendly meta values.

The HandheldFriendly meta value tells the Blackberry browser the website is exactly what the name implies: handheld friendly. This allows the browser to make some assumptions about layout and structure.

<meta name="HandheldFriendly" content="True" />

The viewport meta value works similarly to the HandheldFriendly meta value but provides for some basic customization of the default view settings.

<meta name="viewport" content="initial-scale=1.0" />
<meta name="viewport" content="user-scalable=false" />

It’s important to recognize the screen resolution of the Blackberry model you’re aiming for. Like regular web development hand held devices operate at different screen resolutions and with different color counts. For example the Blackberry Bold has a resolution screen size of 480 x 320 with 65,000 colors. Take heed on this if you want your sites to look good.

For the ecommerce sites out there, especially Blackberry application / theme / game sites, there’s documentation on how to integrate Blackberry Wallet into your website payment processing routine. I wasn’t too familiar with this but according to RIM:

The BlackBerry® Wallet is a BlackBerry device application that is designed to securely store information such as a BlackBerry device user’s name, shipping and billing addresses, credit card information, and login credentials for web sites and other BlackBerry device applications. After a user saves information in the BlackBerry Wallet, the BlackBerry Wallet can populate web forms and fields in applications to reduce the effort required by the user to complete data entry tasks.

So it essentially allows Blackberry users to shop online with their Blackberry but saves them the pain of entering credit card information over and over again. Nice idea.

Unfortunately, to utilize the Blackberry Wallet takes a lot of work; you have to edit all your forms to allow Blackberry Wallet to manipulate them. Kind of a crappy integration strategy…

So far that’s all I’ve been able to discover but I’m sure I’ll post more soon.

Google Visualization

According the official website:

The Google Visualization API lets you access multiple sources of structured data that you can display, choosing from a large selection of visualizations. Google Visualization API enables you to expose your own data, stored on any data-store that is connected to the web, as a Visualization compliant datasource. Thus you can create reports and dashboards as well as analyze and display your data through the wealth of available visualization applications. The Google Visualization API also provides a platform that can be used to create, share and reuse visualizations written by the developer community at large.

I have no real interest in publishing public widgets and I’ve only used the API by generating the data declarations; so far anyway. That’s actually what’s so compelling about the API; since it’s JavaScript based the API can be used with any server side language.

I’m mostly interested in using the charts and graphs for displaying data from a database on a website so that’s all this article is going to focus on.

One more thing to keep in mind; the API is just JavaScript. There’s nothing too fancy or random being done so even though the below may look complicated don’t forget; IT’S JUST JAVASCRIPT.

Examples

Line Chart

Line Chart

<script type="text/javascript">
	google.load("visualization", "1", {packages:["linechart"]});
	google.setOnLoadCallback(drawChart);
	function drawChart() {
		var data = new google.visualization.DataTable();
		data.addColumn('string', 'Date');
		data.addColumn('number', 'Clicks');
		data.addRows(15);
		data.setCell(0, 0, 'March 14, 2009');
		data.setCell(1, 0, 'March 15, 2009');
		data.setCell(2, 0, 'March 16, 2009');
		data.setCell(3, 0, 'March 17, 2009');
		data.setCell(4, 0, 'March 18, 2009');
		data.setCell(5, 0, 'March 19, 2009');
		data.setCell(6, 0, 'March 20, 2009');
		data.setCell(7, 0, 'March 21, 2009');
		data.setCell(8, 0, 'March 22, 2009');
		data.setCell(9, 0, 'March 23, 2009');
		data.setCell(10, 0, 'March 24, 2009');
		data.setCell(11, 0, 'March 25, 2009');
		data.setCell(12, 0, 'March 26, 2009');
		data.setCell(13, 0, 'March 27, 2009');
		data.setCell(14, 0, 'March 28, 2009');	  
                data.setCell(0, 1, 5);
		data.setCell(1, 1, 13);
		data.setCell(2, 1, 27);
		data.setCell(3, 1, 15);
		data.setCell(4, 1, 12);
		data.setCell(5, 1, 15);
		data.setCell(6, 1, 8);
		data.setCell(7, 1, 9);
		data.setCell(8, 1, 15);
		data.setCell(9, 1, 12);
		data.setCell(10, 1, 8);
		data.setCell(11, 1, 21);
		data.setCell(12, 1, 10);
		data.setCell(13, 1, 7);
		data.setCell(14, 1, 3);
 
		var chart = new google.visualization.LineChart(document.getElementById('click_chart_div'));
		chart.draw(data, {width: 500, height: 240, legend: 'bottom', title: 'Click Tracks by Date'});
	}
</script>
<div id='click_chart_div' style='width: 650px; height: 240px;'></div>

Pie Chart

Pie Chart

<script type="text/javascript">
google.load("visualization", "1", {packages:["piechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Day');
	data.addColumn('number', 'Clicks');
	data.addRows(7);
	data.setValue(0, 0, 'Monday');
	data.setValue(0, 1, 56);
	data.setValue(1, 0, 'Tuesday');
	data.setValue(1, 1, 93);
	data.setValue(2, 0, 'Wednesday');
	data.setValue(2, 1, 21);
	data.setValue(3, 0, 'Thursday');
	data.setValue(3, 1, 28);
	data.setValue(4, 0, 'Friday');
	data.setValue(4, 1, 14);
	data.setValue(5, 0, 'Saturday');
	data.setValue(5, 1, 17);
	data.setValue(6, 0, 'Sunday');
	data.setValue(6, 1, 24);
 
	var chart = new google.visualization.PieChart(document.getElementById('day_chart_div'));
	chart.draw(data, {width: 500, height: 400, is3D: true, title: 'Clicks By Day', backgroundColor: '#f9f9f9', legend: 'top', legendBackgroundColor: '#f1f1f1'});
}
</script>

Rhino

Take for example my recent experience integrating the FriendFeed API into a client’s site.

Pop Quiz

The client has a website that utilizes the FriendFeed API, on the homepage only, to display information about their online activities. Basically, they want the site to be updated automatically whenever they update their MySpace or YouTube pages and the like. They’ve specified the layout to be something like the below:

“ClientName” just published a piece titled “Title” on “Site”. Published “X hours ago”

Pretty simple right? An obvious design would go something like this:
1. Connect to FriendFeed API.
2. Make request for data.
3. Display on the page.

The only issue is the formatting of the date / time difference. No worries though; there’s php code all over the place for that:

function RelativeTime($timestamp){
	$difference = time() - $timestamp;
	$periods = array("sec", "min", "hour", "day", "week","month", "years", "decade");
	$lengths = array("60","60","24","7","4.35","12","10");
 
	if ($difference > 0) { // this was in the past
		$ending = "ago";
	} else { // this was in the future
		$difference = -$difference;
		$ending = "to go";
	}
 
	for($j = 0; $difference >= $lengths[$j]; $j++) {
		$difference /= $lengths[$j];
	}
 
	$difference = round($difference);
	if($difference != 1) {
		$periods[$j].= "s";
	}
 
	$text = "$difference $periods[$j] $ending";
	return $text;
}

Using the above you can just execute the output like the below:

echo $me.' just published a piece titled '.$post_title.' on '.$site;
echo ' Published '.RelativeTime($relative_time);

Feeling pretty proud of yourself you show it off to the Producer in charge of the program and they come back with, “Nice! But how will it hold up after caching is enabled?”.

Well, I hadn’t thought of that (my bad fully)…

The Oh Shit Moment

Turns out, they’re expecting a lot of traffic (or the website is pretty resource intensive; take your pick) so full page caching is going to be required.

The problem is the timestamp; since all output is going to be cached the generated time, “5 minutes ago” or “2 days ago”, etc, isn’t going to change until the cache expires. This is not good…

How I Fixed This (The Wrong Way)

The first thing I did was make the conclusion that if php couldn’t be used then the job of formatting the string is up to JavaScript. “OK”, I thought, “fine, I’ll just port the php function to JavaScript and go about my day.

Here’s what I came up with:

 
function getUnixTimestamp(timeObj) {
	var dateObj = null;
	if (timeObj != null) {
		dateObj = new Date(timeObj);
	} else {
		dateObj = new Date();
	}
	return (parseInt(dateObj.getTime().toString().substring(0, 10)));
}
 
function RelativeTime(timestamp){
 
	difference = getUnixTimestamp() - timestamp;
	periodArr = new Array();
	periods = "sec,min,hour,day,week,month,years,decade";
	periodArr = periods.split(',');
 
	TimeLengths = new Array()
	timelength = "60,60,24,7,4.35,12,10";
	TimeLengths = timelength.split(',');
 
	if (difference > 0) { // this was in the past
		ending = "ago";
	} else { // this was in the future
		difference = - difference;
		ending = "to go";
	}
 
	for(j = 0; difference >= TimeLengths[j]; j++) {
		difference /= TimeLengths[j];
	}
 
	difference = Math.round(difference);
	if(difference != 1) {
		periodArr[j] = periodArr[j]+"s";
	}
	text = difference+' '+periodArr[j]+' '+ending;
	document.write(text);
}

Feeling sure of myself, again, a thought occurs to me that this still doesn’t fix the issue 100%. Sure, the date format will be consistent with the relative requirement, but the feed won’t be updated in “Real Time” so the full requirement isn’t there.

The Real Solution

A better idea would be to use AJAX to populate the area of the site where the blurb will be displayed. Since the AJAX request is independent of the rest of the site caching won’t be an issue. Sure, it’s a little more complicated but by doing an AJAX call the client gets exactly what they want.

The Lesson

Now, I’m not going to go into detail about the AJAX solution, mostly because I haven’t written it yet , but, to me, this is the far superior solution.

Admittedly, I was a little frustrated that I didn’t think of the AJAX solution sooner. That is, until I realized how much I had learned going in the “wrong” direction.

I had no idea that generating a UNIX timestamp in JavaScript was “complicated”.
I learned a lot about JavaScript string handling.
I got a quick primer in how JavaScript’s builtin Split function works.
I got a little humility out of the process too.

Sometimes, it’s good to go astray on a project.