We all know, by now, that Twitter limits its tweets to 140 characters. We’ve all got pretty good at limiting ourselves to 140 characters, but many overlook a hidden limit. This post outlines what that is and how we can avoid it.

Many users of Twitters are hoping that their followers will retweet (RT) their tweets. Twitter recently made a change to how these work, but in general, the following pattern is followed:

   UserXYZ tweets: Hey... here's something that's fascinating
   UserABC tweets: RT @UserXYZ: Hey... here's something that's fascinating

User XYZ’s tweet was 42 characters. UserABC’s RT was 52 characters, i.e. 10 characters were added in order to RT.

Put another way, if UserXYZ creates a tweet that was longer than 130 characters, nobody would be able to RT it with modifying the original tweet. If you’re trying to get a specific message out to the world, you might not be happy with lots of people fiddling with it.

I’ve created a new Greasemonkey script which will help you with this. I’ve written about Greasemonkey plugins before and this is another Twitter helper. If you install the script, you will see the following change:

You can now see, next to the normal character countdown, a bracketed countdown. This is the number of characters that you have left, before a tweet can no longer be RTed without modification. In this example, you would be able to send the tweet (as you have 6 characters left), but Twitter users would have to remove 8 characters before they could RT your Tweet.

To use this, it’s simple:

1. If you haven’t already, install Greasemonkey
2. Install the ReTweetable Alert script

That’s it! As ever, your questions and comments are most welcome

• Google Analytics will not be able to track these external links (if, for instance, you’re using my Google Analytics for external links)
• Non-visual User Agents will not be able to access these links
• As a subset, Google will not be able to crawl these links and so associate your site with the sites those banners point to.

The way to resolve this is to use the method of graceful degradation or, perhaps more appropriately, progressive enhancement. By this, I mean, the HTML should be written such that the above issues are avoided, and then the JavaScript should be written to provide the Rotating Banners functionality.

Using the Rotating Banners script as a starting point, the obvious approach is to dispense with the JSON representation of our banners and replace it with an HTML representation of our banners. This will be hidden using CSS. Much of the functionality will otherwise remain the same. By representing the links in the HTML document, webcrawlers (such as Google’s indexing service) will be able to parse these links and use them accordingly. In addition, Google Analytics (if installed on your site) can track exits from your site, via these banners.

I have created a new object which extends the original Rotating Banners object, such that it doesn’t cause SEO problems. In order to use this object, you need to include the original object in your HTML, as well as this one.

The new object is shown below:

/**
* SEO Safe Rotating Banner
*
* Specialized version of Rotating Banner
* @author dancrumb
*/
 
/*global rotatingBanner,$ */ 
 
var seoSafeRotatingBanner = function (spec, secrets) {
 
	var prvItems = secrets || {};
 
	var that = rotatingBanner(spec, prvItems);
 
	spec.banners = [];
 
	prvItems.rotate = function () {
		// This should only be executed if initialization is complete
		if (!prvItems.intialized)	{
			return null;
		}
 
		var newBanner = prvItems.nextBanner();
 
		$('#' + spec.divId + ' a').css('display', 'none');
		$('#' + newBanner.id).empty();
		var imgBanner = $(document.createElement('img')).
			attr('src', newBanner.src).
			attr('height', spec.height).
			attr('width', spec.width);
 
		$('#' + newBanner.id).append(imgBanner);
		$('#' + newBanner.id).css('display', 'inline');
 
		prvItems.cacheNextImage();
 
		return newBanner;
	};
 
	prvItems.initialize = function () {
		var bannerDiv;
		bannerDiv = $('#' + spec.divId);
		if (bannerDiv.length === 0)	{
			alert("Please provide the ID of an element on the page");
			return null;
		}
 
		$('div#' + spec.divId + ' a').each(function (i) {
			var aElem = $(this);
			// Ensure that there is an ID defined, for future manipulation
 
			var a_id = aElem.attr('id');
			if (a_id === null) {
				a_id = 'rb_auto_id_' + i;
				aElem.attr('id', a_id);
			}
 
			// Ensure that there is a target defined, and set it to the defaultTarget
			// if not
			var tgt = aElem.attr('target');
			if (!tgt) {
				tgt = spec.defaultTarget;
				aElem.attr('target', tgt);
			}
 
			// Ensure that the banner is hidden
			aElem.css('display', 'none');
 
			// Add the banner to the rotater
			that.addBanner(
				{
					"src": aElem.text(),
					"id": a_id
				}
			);
		});
 
		that.randomizeBanners();
		prvItems.intialized = true;
		prvItems.rotate();
                $('div#' + spec.divId).css('display', '');
	};
 
	return that;
 
};

This file can be downloaded here.
All that is necessary is to override the ‘initialize’ and ‘rotate’ methods.

Using this object on your page is just as straightforward as before. As before, you need to include the jQuery library. You also need to include the original rotatingBanners script, as well as this one. The initialization code is slightly different:

var rB = seoSafeRotatingBanner(
  {
    "width":  600,
    "height": 400,
    "interval": 5000,
    "divId": "bannerHere",
    "defaultTarget": "blank"
   }
);
rB.startRotation();

The final ingredient is the list of links itself. This is provided in HTML:

<div id="bannerHere" style="display:none;">
  <a id="banner1" href="link1">/image_location/img_src_1.jpg</a>
  <a id="banner2" href="link1" target="blank">../img_src_2.png</a>
  <a id="banner3" href="link1" target="some_target">img_src3.gif</a></div>

Note that the URLs to the images are just plain text. They are not IMG tags.

You must ensure that the style of the enclosing DIV contains ‘display:none‘ (per line 1) or your list of links will be visible to the user.

At this point, you will have your rotating banners, without sacrificing your SEO performance.

The main problem with the script is that it was too random. It took an array, or list, of banners and, on each rotation, it would select a random position in this list. The problem with this becomes obvious when you look at some examples of random number selections. The output from the following (Perl) script:

my $idx = 20;
while ($idx)
{
print int(rand()*5);
$idx--;
print "," if $idx;
}

is

0,1,2,0,3,0,3,3,3,3,0,3,0,1,1,1,0,4,4,2,4

If each number represents a specific banner, you can see that there is a significant bias toward 3 in this set of 20 rotations. This is not indicating an inherent bias towards 3. Quite the opposite; this is truly random, but human perception detects a bias because our sample is relatively low.

Leaving the statistics behind, it is quite easy to ensure that the order of banner rotation is random, but every banner gets equal time. All you have to do is to randomize the order of your list of banners when the page loads, and then cycle through them. On each page load, the order is random, but once a page is loaded, the order remains static.

With that in mind, I wrote a JavaScript object to provide the necessary function. I’ve been writing JavaScript for some time, but I recently bought ‘JavaScript: The Good Parts’ by Douglas Crockford. Crockford has been writing JavaScript for a long time now and has some strong opinions on the language. I for one applaud this book, although I’m not wholly sold on some of his beliefs. That said, I decided to take a crack at creating an object based on his writings. I’m not overly convinced that the code I’ve written is superior to anything else I would have written, but I’m willing to take the blame for any failings in my code here:

/**
 * @author dancrumb
 */
 
/*global $ */
 
var rotatingBanner = function (spec, secrets)
{
 // Private
 var that = {},
 prvItems = secrets || {};
 
 prvItems.workingList = [];
 prvItems.cached = {};
 prvItems.timeoutId = null;
 prvItems.intialized = false;
 
 prvItems.nextBanner = function () {
 var banner = prvItems.workingList.shift();
 prvItems.workingList.push(banner);
 return banner;
 };
 
 prvItems.rotate = function () {
 // This should only be executed if initialization is complete
 if (!prvItems.intialized) return null;
 
 var newBanner = prvItems.nextBanner();
 
 $('#'+spec.divId+' a img').attr('src',newBanner.src);
 $('#'+spec.divId+' a').attr('href',newBanner.href || '');
 $('#'+spec.divId+' a').attr('target',newBanner.target || spec.defaultTarget || '');
 
 prvItems.cacheNextImage();
 
 return newBanner;
 };
 
 prvItems.initialize = function() {
 var bannerDiv,
 eImg,
 eA;
 bannerDiv = $('#'+spec.divId);
 if(bannerDiv.length == 0)
 {
 alert("Please provide the ID of an element on the page");
 return null;
 }
 
 bannerDiv.empty();
 eImg = $(document.createElement("img")).
 attr('height',spec.height).
 attr('width',spec.width).
 attr('id','bannerImage');
 
 eA = $(document.createElement('a')).
 attr('href','');
 
 eA.append(eImg);
 bannerDiv.append(eA);                
 
 that.randomizeBanners();
 prvItems.intialized = true;
 prvItems.rotate();
 };
 
 /*
 * Place the next Banner Image into the browser cache
 */
 prvItems.cacheNextImage = function () {
 var upcomingBanner = prvItems.workingList[0],
 cacheImage;
 if (!prvItems.cached[upcomingBanner.src])
 {
 cacheImage = new Image();
 cacheImage.src = upcomingBanner.src;
 prvItems.cached[upcomingBanner.src] = true;
 }
 };
 
 /*
 * Ensure we, at least, have an array of banners
 */
 if(!(
 spec.banners &&
 typeof spec.banners === 'object' &&
 typeof spec.banners.length === 'number' &&
 typeof spec.banners.splice === 'function' &&
 !(spec.banners.propertyIsEnumerable('length'))
 ))
 {
 spec.banners = [];
 }
 
 /*
 * Confirm that the interval is sensibly set
 */
 if (!((typeof spec.interval === 'number') &&
 (isFinite(spec.interval)) &&
 (spec.interval >= 500))) {
 spec.interval = 1000;
 }
 
 // Public
 that.randomizeBanners = function () {
 // We shouldn't fiddle with knownBanners directly as this
 // is our master list of banners
 var holdingCopy = spec.banners.slice(0),
 index;
 
 if (prvItems.timeoutId)
 {
 clearTimeout(prvItems.timeoutId);
 }
 prvItems.workingList = [];
 
 // Randomize the order of the holding copy of known banners and put it
 // into the working list
 while (holdingCopy.length > 0)
 {
 index = parseInt((Math.random()*holdingCopy.length),10);
 prvItems.workingList.push(holdingCopy[index]);
 holdingCopy.splice(index,1);
 }        
 
 // If we cancelled the rotation, we restart it here
 if (prvItems.timeoutId)
 {
 that.startRotation();
 }
 };
 
 that.startRotation = function () {
 prvItems.timeoutId = setInterval(function(){
 prvItems.rotate();
 },spec.interval);
 };
 
 that.addBanner = function (banner) {
 spec.banners.push(banner);
 this.randomizeBanners();
 };
 
 that.setInterval = function (interval) {
 if (prvItems.timeoutId)
 {
 clearTimeout(prvItems.timeoutId);
 }
 spec.interval = interval;
 if (prvItems.timeoutId)
 {
 that.startRotation()
 }
 }
 
 $(function(){ prvItems.initialize();});
 return that;
};

You can download this script here

The code above relies on jQuery, so naturally, you would need to include that library first in any HTML page that uses this object.

Invoking this code is straightforward. Your webpage will need a DIV with a defined ID attribute; in this case we use bannerHere.

var rB = rotatingBanner(
 {
 "width":  600,
 "height": 400,
 "banners": [
 {"src":'fake1', "href":'fake1'},
 {"src":'fake2', "href":'fake2'}
 ],
 "interval": 2000,
 "divId": "bannerHere",
 "defaultTarget": "blank"
 }
 );
 rB.startRotation();

width and height are the desired dimensions for the banners
interval is the time (in ms) between each rotation
defaultTarget is the desired value for the TARGET attribute of the banner link
banners is a JavaScript array of JavaScript objects with the following fields:

src is the SRC of the banner image
href is the HREF of the banner link
target is the optional target for the banner link

The code is based on Crockford’s belief that we should not pretend the JavaScript is a class-based language. It isn’t, it’s a prototype-based language. This means that new objects are created from a ‘template’ object or from a factory method, which generates new object. Again, I’ll repeat that my implementation is quite probably not the best example of this and I’m not sure that I prefer this code to a class-based approach, but it works and it’ll do for now.

There are some SEO concerns with this implementation, but I’m going to save them for an upcoming post. For now, the code about should be enough for you to implement rotating banners on your website

Tracking external links with Google Analytics is a great way to work out and why how people are leaving your site. This post describes a method for automatically tracking external links in a way that degrades gracefully in the absence of Javascript.

Google Analytics works by having you install a small Javascript on each page. This script tracks a number of things, including the referrer. The referrer is the page that the user as just on. If this was an external page, then Google Analytics registers this as a traffic source. If this was an internal page, then Google analytics registers this as well. When you’re analyzing your site statistics, Google Analytics will be able to show which internal links were clicked on any given page.

However, because Google Analytics relies on the page that you’re clicking to, in order to track information, you need to do something extra in order to track clicks on external links. Remember, when you leave your site, Google Analytics isn’t going to be able to track that normally.

The Google Analytics documentation for this explains what you need to do. You need to add an onClick event handler to your external links. The problem is, the method that they recommend doesn’t degrade very nicely if your visitor doesn’t have Javascript running. In addition, it requires yo to add this code to every external link.

I’ve written a script which will set up all of your external links to be tracked with Google Analytics and include it here for your use. I’ve stripped out a lot of the comments from the code below, but the actual file has plenty of comments in it. It can be found here.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

function EnableGA(tracker,mappings,trackUnknownLinks,testing)
{
	this.tracker = tracker;
	this.mappings = mappings;
	this.trackUnknown = (typeof(trackUnknownLinks) != "undefined")?trackUnknownLinks:false;
	this.testing = (typeof(testing) != "undefined")?testing:false;
 
	this.parseOptions = {
		key: ["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"],
		q:   {
			name:   "queryKey",
			parser: /(?:^|&)([^&=]*)=?([^&]*)/g
		},
		parser: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/
	};
 
	var oThis = this;
    $(document).ready(function(){oThis.enable()});
}
 
/*
 * enable
 *
 * Enables GA tracking of external links
 */
EnableGA.prototype.enable = function()
{
	if(this.tracker || this.testing)
	{
		var oThis = this;
		$("a").each(function()
		{
			var target = $(this).attr("href");
			if((target != null) && (target != ""))
			{
				var URL = oThis.parseUri(target);
				if ((URL.host == "") || (URL.host.search(window.location.hostname)>=0))
				{
					// Do nothing. Google Analytics already tracks local files
				}
				else
				{
					var pseudoLoc = oThis.getPseudoLoc(URL);
					if(pseudoLoc)
					{
						$(this).bind('click',function(evt)
						{
							if(oThis.testing)
							{
								if((typeof(console) != 'undefined') && (typeof(console.log) != 'undefined'))
								{
									console.log(pseudoLoc)
								}
								else
								{
									alert(pseudoLoc);
								}
								evt.preventDefault();
							}
							else
							{
								pageTracker._trackPageview(pseudoLoc);
							}
						});
					}
				}
			}
		});
	}
};
 
/*
 * getPseudoLoc
 *
 * Gets a pseudo-location for the purposes of GA tracking for the provided
 * URL of an external link
 */
EnableGA.prototype.getPseudoLoc = function(url)
{
	var response = this.trackUnknown?"/UNK/"+[url.host,url.directory,url.file].join(''):null;
 
	jQuery.each(this.mappings, function(plDir,regExp)
			{
				if(regExp.test(url.host))
				{
					if(((url.path == "") || (url.path == "/")) && (url.file == ""))
					{
						response = "/"+plDir+"/root";
					}
					else
					{
						response = "/"+plDir+"/"+[url.directory,url.file].join('/');
					}
				}
			});
 
	return response;
};
 
/*
 * parseURI
 *
 * Takes a URI and splits it into its constituent parts
 */
EnableGA.prototype.parseUri = function(str)
{
	var	o   = this.parseOptions,
		m   = o.parser.exec(str),
		uri = {},
		i   = 14;
 
	while (i--) uri[o.key[i]] = m[i] || "";
 
	uri[o.q.name] = {};
	uri[o.key[12]].replace(o.q.parser, function ($0, $1, $2) {
		if ($1) uri[o.q.name][$1] = $2;
	});
 
	return uri;
};

In order to demonstrate how this works, I’ve created a very bare bones demonstration. This will show you how the script is used and how it bahaves in ‘testing’ mode.

If you have any questions or comments, feel free to leave a comment below and I’ll address them as soon as I can

The other day, the preDevCamp team published our ‘PreView’ map at http://predevcamp.org/preView.html. In this post, I’ll talk about how it was put together.

PreView is a combination of the Google Maps API and the Twitter API. Without wanting to shatter the mystique, I’m going to outline how I set about creating PreView.

First, take a look at the HTML in preView.html. When you strip out the preDevCamp menu and Twitter Bird, you’re left with:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html>
<head>
<title>preView - Global Twitter interest in preDevCamp, Palm Pre and webOS</title>
<link rel="stylesheet" type="text/css" href="/css/preView.css" >
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=xxxxxxxx" type="text/javascript"></script>
<script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager_packed.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/jQuery.js"></script>
<script src="/js/tweetList.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/preView.js"></script>
</head>
<body>
<div id="tweetAPI">Checking Twitter API</div>
<div id="preViewMap">Loading Google Map</div>
</body>
</html>

As you can see, the BODY of the page is exceptionally simple; just two DIVs with ids set and some basic content. All the hard work is done by the Javascript in the HEAD of the page. So how does it all work? The ‘preView.js’ script creates an object called PreView which pulls together jQuery, Google Maps and Twitter.

jQuery

jQuery is a library that extends the Javascript language and makes it easier to perform Web 2.0 functionality in a way that works independent of your users’ browsers. You can find good tutorials on jQuery all over the Internet and the docs are pretty good too, with lots of examples. One thing that I discovered the hard way is that your CSS links must appear before loading jQuery or else you can find you have problems when you try to access CSS properties in later code. For the life of me, I can’t figure out why this is so, but that’s how it works.

Other people might say Prototype or YUI. I haven’t used either of those, so I can’t comment, but I will be learning Prototype soon, since it underpins a lot of the webOS language.

Google Maps

The next step is to create your map. I used the Google Maps API for this. To access the API, you need to get a key from Google. This allows them to track how people are using their API and who is making requests. Your API key is associated with a specific domain, so for preDevCamp, we need 3 keys; one for ‘.com’, one for ‘.org’ and one for ‘.net’.

In addition to pulling in the Google Maps API, we used the Marker Manager for handling all of those little Palm Pres dotted over the map. The Marker Manager improves performance of map panning by only drawing the Pres that are currently visible. As preDevCamp grows, we’re going to have more and more Pres on the map, so this will get more an more important.

Once the API is loaded, you have access to all of the Google Maps commands. The API documentation is the best place to go to understand what each object does, but here’s a breakdown of what PreView does:

1. Locate the destination DIV for the Google Map
2. Create the GMap2 object and associate it with this DIV
3. Add a small Zoom control
4. Centre the map on 50n,0E. This is in the English channel, directly south of London. There’s no great geographical significance of this point, but it makes for a map that feels reasonably centered, with regard to land masses.
5. Set the map to a Physical map instead of a Satellite Image map
6. Create a new Marker Manager and associate it with the map
7. Make a JSONP call to the preDevCamp website requesting the location of all the preDevCamps. This returns an array of JS objects, each containing the Name, Longitude and Latitude of each preDevCamp city (see geocoding below)

That’s it for creating the map!

Geocoding

Geocoding is the transformation of an address of some sort into a latitude and longitude. Google Maps provides a geocoding interface and you can translate addresses on the fly if you need to. However, the geocoding service is rate limited and if you request too many, too quickly, your requests will get rejected. In addition to this, it takes a certain amount of time to send the request and get a response. As a result, the geocoding results have been cached on the preDevCamp server and are taken from there. This also allows us to handle ambiguous locations, such as “Washington” or “Charleston”, which could refer to a number of locations. Since we know which city each preDevCamp is in, we can add special handling for cities such as these.

That said, the geocoding service is used to find the Latitude and Longitude of Twitter users, based on their reported location.

Twitter API

Once the map is created, all that remains is to query Twitter for relevant Tweets. Like the Google Maps API, the Twitter API is really well documented. They actually have 2 APIs. One is for searching the Twitter public time line, the other is for interacting more explicitly with Twitter. One thing to note is that the Twitter API is also rate limited. You’re restricted to 100 API requests per hour, unless you get a special dispensation from Twitter.

So, the first step PreView takes is to find out how many API requests are available. It also checks to see when this limit will be reset and will use that later on, if the limit is exceeded

PreView continues by sending out searches for ‘predevcamp’, ‘webos’ and ‘palm pre’. Each of these requests generates a list of Tweet objects which are put onto a central list which sorts by each Tweet’s ID. The ID is globally unique. At this point, PreView does not filter duplicated Tweets, but a future version will.

The next step is to go through the list one at a time and display the Tweet on the map. In order to do this, we take the location property of the Tweet and send it to the Google Geocoding Service. Although this Service is rate limited, we only show Tweets once every 8 seconds or so, so we’re not going to hit the rate limit that Google sets. However, asking Twitter where a user is located, does count against our Twitter API usage, so we make sure to cache users’ locations to prevent the limit from being gobbled up.

If the user’s location does not translate, we put the Tweet somewhere in the middle of the Pacific Ocean. There may be a better way to indicate that Tweet cannot be located but, again, that is deferred to version 2.0.

Once all of the Tweets in the list have been shown, we send a second request to the Twitter Search API. Twitter has a neat trick to help us here. When we send a search request , Twitter gives us a list of Tweets as well as a URL that we can use later which essentially says: “Show us the Search Results starting from where we left off in the last search”. This means we don’t need to filter for Tweets that we’ve already seen.

Summary

Hopefully, that’s given you an overview of what I sought to achieve with the preView map. By looking through the source code and reading this post, you should be able to see what it takes to make something like this. The astute of you will also see areas where preView could be improved and, when I have time, I’ll be taking a second run at it. However, for now, I hope that it proves to be an instructive read!

If you don’t know, webOS is the new operating system that Palm have created. Instead of having to write apps in Objective C or Java, Palm have opted for having HTML, Javascript and CSS as the language of choice. I think this might be a smart move on their part; the number of applications that developers write is directly proportional to the number of developers who actually have the expertise to code for this platform. However, I think Palm have only made half of this smart move.

If you want to change the game, you sometimes need to bring in new players. Right now, the smartphone application development arena is populated by Objectve C developers and Java developers. Many of these developers have been mobile application developers for a long time. They bring great experience with them, but they also bring history. They look at applications in a ‘mobile’ way; this is not necessarily the best way. Palm seem to have opened the door, but they’re not doing anything to point the door out to people or to encourage them to walk through it.

I want to see web developers sit up and take notice of webOS and the Palm Pre. For one thing, it’s an opportunity for them to branch out and extend their repetoire. They don’t need to learn a new language; just an alteration in architecture and a new framework. With very little effort, a seasoned web developer can become a webOS developer.
Also, web developers are used to the stateless nature of web pages and have learned to work around this with cookies and HTML 5 Storage functions. In addition, they’re used to JSON and working with DOM manipulation. That means that they can concentrate on the important aspect of generating innovative ideas for apps, instead of getting to grips with a new language.

Bringing in developers without a traditional mobile mindset will, no doubt, result in some applications that really don’t perform well on a mobile platform. However, it also brings the potential for some really great ideas, unfettered by the idea of ‘what is possible’. Again, Palm do not appear to be highlighting this; instead they are highlighting the number of PalmOS developers that they have.

The thing is, the number of web developers in the world is staggering. Palm claim 30,000 developers in the Palm development community; contrast this with the over 4.5m downloads of the development version of  jQuery last year alone… that gives you some kind of indication of how many web developers are out there.

If you’re a web developer out there, looking for a new challenge, take a long hard look at the Palm Pre. If you’re interested, go over to the preDevCamp website and sign up or organizer a local event; join an evergrowing group of developers excited by this new platform. As a founder of preDevCamp, I have to admit a bias, but I’m not waiting for Palm to realise what they’ve got here

O’reilly release the first chapter of their new webOS book in the past few days and it has been a welcome island in a sea of tedious rumours. While others may wildly speculate on when the Pre will appear, at least we now have some idea of what it will be running.

So what does this chapter tell us about webOS? Well, a lot of the chapter is spent with the usual overview. I tend to skip these chapters in technical books, but webOS is brand new to me, so I gave it the time. Here’s what I learned:

• webOS is expressly intended to support multiple hardware environments with all sorts over screen sizes, resolutions and orientations – This tells me that a good webOS App will not restrict itself to functioning on a Pre form factor
• webOS will use HTML 5 tags to provide storage functions and some graphic functions (using the canvas) – This tells me that I need to get up to speed on HTML 5 and start playing with it in Firefox
• webOS will give you access to Calendar and Contact data, Location Services, Accelerometer data and XMPP messaging  – This tells me that the apps we can make are going to be awwwwesome!
• Mojo will come bundled with the Prototype framework – Since I’m a jQuery fan, this means that I have to learn another JS framework, if I’m going to be able to fully exploit the Pre
• The Core OS will support fat32 for media file partitions (with a mention of mounting via USB) – This suggests that it may be possible to plug a USB drive into the Pre for extra storage and ease of file transfer!

There are some  nice pieces about design philosophy and UI considerations in the first chapter and some high level introduction to concepts such as stages and scenes.

All in all, and interesting read; certainly enough to whet my appetite for the Pre. Here’s what I’m going to be doing in preparation:

1. Learn HTML 5
2. Learn Prototype

I think focusing on those two, for now, will put me in good stead. I recommend the same to you.

I saw @mhat‘s tweet today about ‘What language should I learn‘  and it got me thinking about the times I’ve asked that question and how I might answer it. So, @mhat, I’m taking your tweet to be a challenge to write an unbiased and ‘unwrong’ post. To do this, I’m going to give you a history of the languages I have learned.

The early years

As I wrote in my first post, I started at a tender age, on a ZX Spectrum. The Spectrum came with a dialect of BASIC, called ‘Sinclair Basic’. Like all BASIC derivatives, it’s a high level language, however unlike modern flavours of BASIC, it was untyped and unstructured. Lines of code were entered with the line number provided explicitly. There was no variable scoping and subroutines were implemented as a special ‘GOTO’ called ‘GOSUB’ which allowed you to ‘RETURN’ to the next line. However, since there was no variable scoping, recursion was impossible.

That said, I was 5 at the time, I wasn’t too worried about recursion at the time. My programming was limited to copying code out of books containing page after page of ZX Spectrum programs. My brother and I would diligently type these out, then play the game for a while and then start playing with the code to see what changes we could make. This process was about as successful as genetic mutation. More often than not, our change would kill the program, but sometimes it would lead to great stuff.

As we got older, our 48K Spectrum was replaced with a 128K Spectrum. Along with the extra memory, came an update to BASIC to include keywords that allowed direct access to the MIDI chip. I continued to mess around with BASIC, making programs that would play both hands of a piano score, as well as simple games.

The IBM PC arrives

My first experience with an IBM PC was the 286. I migrated from Sinclair BASIC to GW-BASIC. At this point, I was writing programs from scratch, including a text adventure called ‘Loup-Garou Chateau’. Tragically, this game has been lost from prosperity, but it was my first foray into actually designing a program before coding it. I chose GW-BASIC, simply because I was very familiar with BASIC and it made for the simplest transition.

As the years passed, I would inherit my dad’s old computers, moving up through the 386 to the 486. At this point, I got my hands on Visual Basic. Again, this transition was driven by the ease of transition from what I knew to something new. This was my first experience with a proper development IDE, as well as my first experience with creating GUIs. Beyond that, it wasn’t a great step forward to me… that would come during university.

Coding gets hardcore

I never studied computing at university; I was a physics student. However, the course I took, included some small computing components. For one lab rotation, we learned how to use computers for physical analysis. This was back in 2000 and they had us coding with Pascal. At the same time, I was playing with C at the suggestion of my dad. For the first time, I was learning about functions and variable typing. In addition, I was programming with the intention to solve problems that were being presented to me, instead of just ‘playing’ with a language and seeing what it could do. When you have an externally provided problem to solve, you’re forced to learn how to use new facets of the language. If you’re just playing around, you can be limited to seeing what you can do with the parts of the language you understand.

While at university, I also participated in an Electronics lab which involved learning about the 8086 processor. We had an experimental board which allowed us to commit opcodes to a region of memory and then execute them. As part of the practical, we actually had to wire up the SUB instruction, by running the clock signal through the appropriate logic gates and to the appropriate ALU pins. This was my first experience with the lowest level of programming.

In the summer between my second and third years, I spent four weeks working for Milford Instruments. While there, I developed a DMX-512 Transceiver Controller. I was working with the SX-Chip from Parallax and learned how to write assembler, how to work with interrupt handlers and how to get microcontrollers to talk to other microchips. For 4 weeks, I worked on the firmware and the hardware and really learned what programming was all about…

Coding starts to bring in money

My month at Milford Instruments made me realise what I wanted to do with my time; I wanted to get into development professionally. It was an obvious choice to apply to IBM and I started working at their Hursley Development Lab, one weeks after school ended. They had me working on a protocol converter, (this time, a SCSI-SSA converter) and, as before, it was coded in assembler.

After a couple of years working on this, I moved to work on one of their Storage RAID controllers. This time I was coding in C, the first time I had done so, professionally. However, alongside all this production code, I was steadily learning how to write Perl and Korn Shell scripts for developing test rigs. I was also teaching myself how to code for the web. I’d done some basic page development while at university, but I was beginning to learn about dynamic pages and DOM manipulation.

My next move got me into support and I started writing a web-based support tool. It uses Perl and MySQL in the back-end and HTML and Javascript in the front-end.

The main thing I got from the IBM Development Lab was the chance to be surrounded by people writing a wide variety of code to solve a wide variety of problems and be exposed to what other people were doing with languages that I both knew and that I had never heard of. I learned that there is really no such thing as the one perfect language, rather the best language for the job in hand.

What’s the point of all this?

So, what’s the point of this post? Is it possible to write a post about “Which language should I use” that is not biased and has some value? I hope so. Here’s what I feel I’ve learned over the years.

People write code for a wide variety of reasons. The language that they code in is also determined by a multitude of factors. More often than not, we don’t have a truly free hand when it comes to choosing the language we’re coding in. However, looking back, I believe I see some benefits in the track I took.

• Learning C allows you to truly understand what higher level languages such as Perl or Java are doing with objects and references. Although people get scared off by pointers, if you don’t understand the concept, then you’re going to struggle with the idea of references. Since all languages have variables, if you can get those nailed and totally understood, you’re going to be in good stead when you move to a language which brings new data types
• Learning Assembler allows you to truly understand what C is doing with pointers. Assembler has a tiny command set and you have to tell it to do every last thing. It’s a struggle, but once you’ve got assembler in your tool belt you’re in good shape. You may never go back to it, but the lessons you learn from it can be applied all the way up the language stack
• Learning a wide variety of languages allows you to truly understand the patterns of development that are language-independent and stops you falling into the trap of becoming a language bigot. There’s nothing wrong with having a favourite language, but saying that one language is categorically better than another because of the presence of a specific feature is like praising Inuit for its wide variety of words for snow. That’s fine if you’re describing snow, but not much use if you want to discuss the surfing conditions in Hawaii.
• Learning a language is a lot easier if you’re trying to solve a specific problem that has come from an external source. This is why it’s such a good idea to do the exercises if you’re learning from a textbook. There’s nothing wrong with playing with a feature for its own sake, but unless you have some factor that is external to the language driving you, it’s going to be tough to learn all that the language can do.

Did I just cop out?

So, did I just cop out of the question? If someone asked me what language they should learn, how would I answer? That depends on the person. If they were just starting out, I would say Perl or Python. These languages have a huge development community and millions of pages dedicated to coding in them. They are in common usage and show no signs of disappearing in the near future. They are neither arcane nor limited in their range and they allow for procedural and object oriented style programming, meaning that the developer can transition to OO without having to change languages.

If I was being asked by someone with a reasonable amount of development, I would strongly suggest Javascript. As the powerhouse behind Web 2.0 and the basis for coding on the Palm Pre, it’s critical to know this language. However, testing and debugging Javascript is not a trivial task and requires a developer who is comfortable writing code that has ‘a good chance’ of working so that troubleshooting is limited to ironing out wrinkle. Also, the problems of cross-browser support are bewildering enough for experienced coders; exposing a brand new coder to Javascript would probably be the end of their efforts in the field.

If someone wanted to spread their wings a little, I’d strongly suggest taking a look at Assembler or some other microprocessor based language. It’s still coding, but you’re forced to truly understand your code’s interaction with external factors that don’t care about your nice neat program. Spending time debugging microprocessor code; especially code that interacts with an external piece of hardware, gives you a true understanding of the many ways that code can fail to work.

Like a fair number of people, I have a number of Twitter identities. I have my personal identity (@dancrumb) as well as a number of shared identities that represent events or organizations in which I’m involved.

I use a number of clients to send out tweets, but all of these clients limit you to a single identity. If you want to user twitter.com to send out messages, you need to log in with the appropriate identity before you perform any Twitter functions.

Herein lies the problem. When you’re logged in to Twitter and you navigate to somebody’s Twitter page, there is no indication as to who you’re logged in as. The risk is that you could elect to follow or message someone, thinking you’re logged in as one identity, only to find that you’re logged in as another identity. I did precisely this, yesterday. As luck would have it, the person was my sister and I quickly spotted my mistake, but if  you’re using Twitter as a major communication channel, you need to be very aware of which identity you’re tweeting with.

In order to address this, I’ve written a small Greasemonkey script. You can access it here. You’ll need to have the Greasemonkey plugin installed, of course.

Once the script is installed, you will be able to see who you’re logged on as, in the Twitter navigation bar at the top right-hand corner of the screen, at all times.

I hope you find it useful; I know from experience that I will…

As part of the preDevCamp 2009 site, I created a JavaScript TwitterFeed today.

A sample can be seen here. If you leave this page open, it will constantly update with all Twitter tweets that contain the word ‘twitter’. It will update once every 5 seconds and will contain no more than the 25 most recent tweets.

Installing this code into a page of your own is very simple. You will need the following:

• jQuery must be installed and you must include it in your webpage
• tweetFeed.js must be included in your webpage
• tweetFeed.css should be included, although the function will work without this file
• A <div> with an id of ‘tweets’ somewhere on the page

With all of those in place, it’s a simple case of instantiating the feed:

var tf = new TweetFeed(searchString,feedPeriod,feedLength);

searchString

This is the string that is used to generate the feed. The feed will contain all tweets containing this word

feedPeriod

Number of seconds between each refresh of the feed

feedLength

Maximum number of tweets to show. At the moment, this must be > 15 or else the feed doesn’t work properly.

All of the relevant code can be found by looking at the example, linked to above. Feel free to use this in any way you like. Comments are welcome