I’ve been really itching to get started on something with WebOS. In general I’m dying to do something complicated with JavaScript and the announcement of the Pixi and the Nokia rumors have kept WebOs on my mind, so this news really got my attention:

Ben Galbraith and Dion Almaer to lead Developer Relations team at Palm
Read the rest of this entry »

Things are afoot. I’m building out the redesign of Drunkenfist.com, and we’re working on an internal redesign at work. I’ve been toying with the idea of using the new HTML5 semantic elements for both and to that end I took some time to evaluate Modernizr, the small JS library that programatically exposes HTML5/CSS3 feature support (via classes on the HTML element) and “fixes” IE’s style support for some of the newer semantic elements.
Read the rest of this entry »

There’s a back story to this one. I once failed to get video progress tracking working with a Flash video player and Big Expensive Analytics Company™ code. It was a real pain in the ass. We missed the deadline, wasted about 8 hours and eventually just dropped the feature. A frustrating experience for all involved.

With that in mind, then, it should come to no surprise that I returned to the problem when exploring the <video> element and related APIs. What was a fruitless 8 hours of hoping the Big Expensive Analytics Company™ code would “just work,” turned out to be about 30 minutes of light hacking to get it up and running with Google Analytics and HTML5.

By the way, between you and me the Big Expensive Analytics Company™ code never “just works,” even though that kind of feature is one of the reasons they get the big bucks for their product. I don’t really like working with Big Expensive Analytics Company™. I’m much happier with GA. It behaves as expected and is a lot easier to “get” right out of the box.

Anyway, here’s what I did. It’s hack-y, but works:
Read the rest of this entry »

Quick verdict? It’s fun.

The long verdict (albeit one not base on the work I did here?) The accessibility concerns are valid and will need to be addressed before we end up with a replay of Flash circa 2000. And no one wants that.

Anyway, the example I did do for the demo is actually one of the use cases imagined when the Canvas element was introduced. I took a simple data table and turned it into a simple chart. This is obviously not the most complicated, impressive example of the technology, but it’s an easy one to digest so it’s a perfect way to highlight the technology as part of a 45 minute presentation. Especially since I’ve got to run through another five or six features of the spec.

Anyway, here’s the example.
Read the rest of this entry »

The Digg Bar is the most obvious (and noxious) example, but the new trend of URL shorteners coupled with a URL hijacking frame is spreading alarmingly. More and more I’m seeing this odious technique. These things break bookmarks, wreck navigation cues from the URL and are generally sleazy and rude.

And there’s how to beat them. Insert this code in the head of your document and frames will disappear:

Best Frame-buster JavaScript

Read the rest of this entry »

I saw it yesterday in some code I was debugging and I realized I’ve become hyper sensitive to this common pattern:

var anchors = document.getElementsByTagName('a');
if (anchors.length > 0){
    for (var i=0; i < anchors.length; i++) {
        addEvent( anchors[i], 'click',  trackLinks );
    };
};

Why am I sensitive to it? Well, what are some of the things we know about JavaScript performance?
Read the rest of this entry »

Thanks to Jason Duclos, my presentation from a couple of weeks ago is live. In it I compare standard JavaScript DOM methods to YUI, jQuery, Dojo and Prototype/Scriptaculous.

JavaScript Library Showdown from rob larsen on Vimeo.

Here’s the deck.

Jason is the man for putting this together, by the way.

My presentation went well, I think. It started a little later than I would have liked, and I didn’t have any water (insane? yes.) but overall it was a lot of fun. People seemed interested, which is the important part.

The really interesting news is that the presentation was recorded, so I should be able to post a version to Youtube at some point in the future.

Thanks to the folks over at the The Center for Digital Imaging Arts at Boston University for hosting me and working with Jason to get the camera equipment set up.

Yesterday I was wondering why obj.getElementsByTagName wasn’t working in Safari/WebKit on a tag with a namespace prefix. I wondered, aloud, whether or not it was just something I was ignorant of.

It turns out that was the case. Dom Level 2 added new namespace specific methods to search through documents or document fragments for tags of a specific NameSpace. I’d just never had to use them before. Learning that greatly simplified the hacky code I wrote yesterday. Here it is, new and improved:
Read the rest of this entry »

Is It Me or the Browser?

I had a Safari bug on a project I’m rushing to get out the door. We’re using a Flickr feed to populate a div with link+thumbnail to some flickr images. In Firefox/Internet Explorer I simply did the following to build the links:

flickr : function(obj) {
//get the full list of items
	var items = obj.getElementsByTagName("item");
//make sure it's not empty
	if (items.length > 0 ) {
//start the HTML block
		var blob = "<div id='flickrFeed'>";
//loop through the items (we only want 5) and build some links)
		for (var i = 0; i< 5 ; i++) {
//get the link
			var flink = items[i].getElementsByTagName("link")[0].childNodes[0].nodeValue; 
//get the thumbnail
			var flurl = items[i].getElementsByTagName("media:thumbnail")[0].getAttribute("url");
//smash them into the string
			blob+="<a href='"+flink+"'><img height='75' width='75' src='"+flurl+"' /></a>";
		};
//close the div
		blob+="</div>";
//pop it onto the shelf, for later use
		$("hyperspace").innerHTML+=blob;
	} else {
//if there's somethign wrong with the feed, go to default contentk
		social.fallBack.flickr(); 
	}
}

Read the rest of this entry »