jQuery users, take a look at the autocomplete plugin which is shipping in the UI framework. While there are some serious limitations to the currently plugin, it does provides a drop dead simple way to provide Google Suggest style functionality to your site users without significant overhead. It’s widely supported and weighs in at 78K (without data/css and markup) for the minified components.

My one complaint is the lack of JSON support for remotely fetched results. Currently you must return items for the suggest widget as plain text list. You can, however, currently parse individual lines (which could be objects). I expect the jQuery team will be adding this functionality soon enough. Jörn Zaefferer has built a modified version of the plugin that supports JSON. I’m holding out until it’s merged into the UI trunk to limit my sources of code updates in this instance.

Below is a quick example of the syntax so you can see how easy it is to create. The file, names.php, simply returns a series of names, 1 per line. This might be static or pulled from a database based on the passed “q” get parameter that holds the contents of the input area.

jQuery Autocomplete Plugin Screenshot

<link rel="stylesheet" href="css/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ui.core.min.js"></script>
<script type="text/javascript" src="jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="jquery.dimensions.min.js"></script>
<script type="text/javascript" src="ui.autocomplete.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $("#name").autocomplete("names.php");
});
</script>
<form>
   Name <input type="text" id="name" name="name" value="" /><input type="button" value="Go" />
</form>

The JavaScript UUID Generator class has been refreshed again and is even more efficient than the 0.2 version due largely in part to heavier reliance on built in JavaScript functions. It’s still not a “REAL” UUID, but it’s good enough for most projects. The changes are as follows:

• A leaner and more efficient returnBase(val, base) method for conversion to base16 strings. The original version from irt.org has been replaced with built in JavaScript methods. Some testing for your target platforms should be performed to ensure compatibility with your engine.
• The change from randrange(min, max) in v.0.1 to rand(max) in 0.2 introduced a bug where the maximum value provided would never be matched. This has been fixed to correct for that issue.

Special thanks go out to Robert Kieffer for pointing out these issues and providing the updated code for the base 16 conversion.

Download the latest version.

/*
uuid.js - Version 0.3
JavaScript Class to create a UUID like identifier
 
Copyright (C) 2006-2008, Erik Giberti (AF-Design), All rights reserved.
 
This program is free software; you can redistribute it and/or modify it under 
the terms of the GNU General Public License as published by the Free Software 
Foundation; either version 2 of the License, or (at your option) any later 
version.
 
This program is distributed in the hope that it will be useful, but WITHOUT ANY 
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A 
PARTICULAR PURPOSE. See the GNU General Public License for more details.
 
You should have received a copy of the GNU General Public License along with 
this program; if not, write to the Free Software Foundation, Inc., 59 Temple 
Place, Suite 330, Boston, MA 02111-1307 USA
 
The latest version of this file can be downloaded from
http://www.af-design.com/resources/javascript_uuid.php
 
HISTORY:
6/5/06 	- Initial Release
5/22/08 - Updated code to run faster, removed randrange(min,max) in favor of
          a simpler rand(max) function. Reduced overhead by using getTime() 
          method of date class (suggestion by James Hall).
9/5/08	- Fixed a bug with rand(max) and additional efficiencies pointed out 
	  by Robert Kieffer http://broofa.com/
 
KNOWN ISSUES:
- Still no way to get MAC address in JavaScript
- Research into other versions of UUID show promising possibilities 
  (more research needed)
- Documentation needs improvement
 
*/
 
// On creation of a UUID object, set it's initial value
function UUID(){
	this.id = this.createUUID();
}
 
// When asked what this Object is, lie and return it's value
UUID.prototype.valueOf = function(){ return this.id; }
UUID.prototype.toString = function(){ return this.id; }
 
//
// INSTANCE SPECIFIC METHODS
//
 
UUID.prototype.createUUID = function(){
	//
	// Loose interpretation of the specification DCE 1.1: Remote Procedure Call
	// described at http://www.opengroup.org/onlinepubs/009629399/apdxa.htm#tagtcjh_37
	// since JavaScript doesn't allow access to internal systems, the last 48 bits 
	// of the node section is made up using a series of random numbers (6 octets long).
	//  
	var dg = new Date(1582, 10, 15, 0, 0, 0, 0);
	var dc = new Date();
	var t = dc.getTime() - dg.getTime();
	var h = '-';
	var tl = UUID.getIntegerBits(t,0,31);
	var tm = UUID.getIntegerBits(t,32,47);
	var thv = UUID.getIntegerBits(t,48,59) + '1'; // version 1, security version is 2
	var csar = UUID.getIntegerBits(UUID.rand(4095),0,7);
	var csl = UUID.getIntegerBits(UUID.rand(4095),0,7);
 
	// since detection of anything about the machine/browser is far to buggy, 
	// include some more random numbers here
	// if NIC or an IP can be obtained reliably, that should be put in
	// here instead.
	var n = UUID.getIntegerBits(UUID.rand(8191),0,7) + 
			UUID.getIntegerBits(UUID.rand(8191),8,15) + 
			UUID.getIntegerBits(UUID.rand(8191),0,7) + 
			UUID.getIntegerBits(UUID.rand(8191),8,15) + 
			UUID.getIntegerBits(UUID.rand(8191),0,15); // this last number is two octets long
	return tl + h + tm + h + thv + h + csar + csl + h + n; 
}
 
 
//
// GENERAL METHODS (Not instance specific)
//
 
 
// Pull out only certain bits from a very large integer, used to get the time
// code information for the first part of a UUID. Will return zero's if there 
// aren't enough bits to shift where it needs to.
UUID.getIntegerBits = function(val,start,end){
	var base16 = UUID.returnBase(val,16);
	var quadArray = new Array();
	var quadString = '';
	var i = 0;
	for(i=0;i<base16.length;i++){
		quadArray.push(base16.substring(i,i+1));	
	}
	for(i=Math.floor(start/4);i<=Math.floor(end/4);i++){
		if(!quadArray[i] || quadArray[i] == '') quadString += '0';
		else quadString += quadArray[i];
	}
	return quadString;
}
 
// Replaced from the original function to leverage the built in methods in
// JavaScript. Thanks to Robert Kieffer for pointing this one out
UUID.returnBase = function(number, base){
	return (number).toString(base).toUpperCase();
}
 
// pick a random number within a range of numbers
// int b rand(int a); where 0 <= b <= a
UUID.rand = function(max){
	return Math.floor(Math.random() * (max + 1));
}
 
// end of UUID class file

Just found this excellent resource outlining the DOM in JavaScript. It’s clear and to the point spelling out what methods and properties are supported by the major browsers. Thanks Mark for putting it together.

Nearly 2 years ago I crafted some JavaScript code to create a properly formatted UUID in JavaScript. Full compliance with specification for version 1 UUID’s still isn’t possible. However, in the interest of keeping the project updated, I’ve made some changes to the code to make it more reliable and more efficient.

• It now use getTime() from the date object. This reduced the time spent calculating unnecessary values for the timestamp (idea came from James Hall’s canonical name function).
• The randrange() function was replaced with one that more evenly distributes the random number values while additionally reducing complexity.

Get the download here.

I’d also like to give a shout to some of the folks who have mentioned it in forums, ported it to different libraries, linked to it from Wikipedia, blogs etc and have generally made my efforts worth while. Thank You!

/*
 
uuid.js - Version 0.2
JavaScript Class to create a UUID like identifier
 
Copyright (C) 2006-2008, Erik Giberti (AF-Design), All rights reserved.
 
This program is free software; you can redistribute it and/or modify it under 
the terms of the GNU General Public License as published by the Free Software 
Foundation; either version 2 of the License, or (at your option) any later 
version.
 
This program is distributed in the hope that it will be useful, but WITHOUT ANY 
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A 
PARTICULAR PURPOSE. See the GNU General Public License for more details.
 
You should have received a copy of the GNU General Public License along with 
this program; if not, write to the Free Software Foundation, Inc., 59 Temple 
Place, Suite 330, Boston, MA 02111-1307 USA
 
The latest version of this file can be downloaded from
http://www.af-design.com/resources/javascript_uuid.php
 
HISTORY:
6/5/06 	- Initial Release
5/22/08 - Updated code to run faster, removed randrange(min,max) in favor of
          a simpler rand(max) function. Reduced overhead by using getTime() 
          method of date class (suggestion by James Hall).
 
KNOWN ISSUES:
- Still no way to get MAC address in JavaScript
- Research into other versions of UUID show promising possibilities 
  (more research needed)
- Documentation needs improvement
 
*/
 
// On creation of a UUID object, set it's initial value
function UUID(){
	this.id = this.createUUID();
}
 
// When asked what this Object is, lie and return it's value
UUID.prototype.valueOf = function(){ return this.id; }
UUID.prototype.toString = function(){ return this.id; }
 
//
// INSTANCE SPECIFIC METHODS
//
 
UUID.prototype.createUUID = function(){
	//
	// Loose interpretation of the specification DCE 1.1: Remote Procedure Call
	// described at http://www.opengroup.org/onlinepubs/009629399/apdxa.htm#tagtcjh_37
	// since JavaScript doesn't allow access to internal systems, the last 48 bits 
	// of the node section is made up using a series of random numbers (6 octets long).
	//  
	var dg = new Date(1582, 10, 15, 0, 0, 0, 0);
	var dc = new Date();
	var t = dc.getTime() - dg.getTime();
	var h = '-';
	var tl = UUID.getIntegerBits(t,0,31);
	var tm = UUID.getIntegerBits(t,32,47);
	var thv = UUID.getIntegerBits(t,48,59) + '1'; // version 1, security version is 2
	var csar = UUID.getIntegerBits(UUID.rand(4095),0,7);
	var csl = UUID.getIntegerBits(UUID.rand(4095),0,7);
 
	// since detection of anything about the machine/browser is far to buggy, 
	// include some more random numbers here
	// if NIC or an IP can be obtained reliably, that should be put in
	// here instead.
	var n = UUID.getIntegerBits(UUID.rand(8191),0,7) + 
			UUID.getIntegerBits(UUID.rand(8191),8,15) + 
			UUID.getIntegerBits(UUID.rand(8191),0,7) + 
			UUID.getIntegerBits(UUID.rand(8191),8,15) + 
			UUID.getIntegerBits(UUID.rand(8191),0,15); // this last number is two octets long
	return tl + h + tm + h + thv + h + csar + csl + h + n; 
}
 
 
//
// GENERAL METHODS (Not instance specific)
//
 
 
// Pull out only certain bits from a very large integer, used to get the time
// code information for the first part of a UUID. Will return zero's if there 
// aren't enough bits to shift where it needs to.
UUID.getIntegerBits = function(val,start,end){
	var base16 = UUID.returnBase(val,16);
	var quadArray = new Array();
	var quadString = '';
	var i = 0;
	for(i=0;i<base16.length;i++){
		quadArray.push(base16.substring(i,i+1));	
	}
	for(i=Math.floor(start/4);i<=Math.floor(end/4);i++){
		if(!quadArray[i] || quadArray[i] == '') quadString += '0';
		else quadString += quadArray[i];
	}
	return quadString;
}
 
// Numeric Base Conversion algorithm from irt.org
// In base 16: 0=0, 5=5, 10=A, 15=F
UUID.returnBase = function(number, base){
	//
	// Copyright 1996-2006 irt.org, All Rights Reserved.	
	//
	// Downloaded from: http://www.irt.org/script/146.htm	
	// modified to work in this class by Erik Giberti
	var convert = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
    if (number < base) var output = convert[number];
    else {
        var MSD = '' + Math.floor(number / base);
        var LSD = number - MSD*base;
        if (MSD >= base) var output = this.returnBase(MSD,base) + convert[LSD];
        else var output = convert[MSD] + convert[LSD];
    }
    return output;
}
 
// pick a random number within a range of numbers
// int b rand(int a); where 0 <= b <= a
UUID.rand = function(max){
	return Math.floor(Math.random() * max);
}
 
// end of UUID class file

Recently I needed a color picker for a project and spent a little bit of time reviewing JavaScript color picker tools for integration in the application. What I found was a wide variety of tools that are either hard to implement or hard to use. That aside, there were a few that were reasonable and so I’m calling them out here should anyone need such a thing. It should also be said that there is a lot of room for improvement in the utility space should anyone want to take a stab at improving color pickers.

The most intuitive tool for non PhotoShop users is the one provided by ColorJack. The layout is typical of PhotoShop but without the RGB, CMYK and other color models being in the foreground. Those tools, while useful to designers and production shops, are meaningless to application users. The hue slider is intuitive and easy to use and the picker works in all browsers. What I did find complicated about the picker was it’s ability to easily integrate into a form that might require multiple color selections (such as a layout editor) and the Dynamic HTML placement was unreliable. It did have the least technical feel though ultimately making it the easiest to use. jQuery users be warned, you may need to tweak some of the code as there’s overlap. The widget includes the core functions it requires.

My personal favorite is from John Dyer who provides a clean PhotoShop like implementation. While I’ve not had the opportunity to use it on a site, and therefore have no experience with the level of difficulty integrating it, I have a feeling this will find it’s way into many administrative tools I’ve got on the roadmap over the next few months. The look at feel is clean and simple and the code is structured in a logical. I’ll likely be working to combine his code into a smaller package that I can easily add as a method to my input classes for the task (much like the tool below from WebReference.

The last color picker I want to call out is a detailed article on how to build useful picker from WebReference.com. It integrates cleanly multiple instances on a single form and has two different “modes” one as a simple scale (seen below) and another as a photoshop like tool. Obviously with a little time, this would be easy to modify to suit your needs (assuming you wanted to take away either the PhotoShop gradient or the color strip).

What none of these tools do is help with making good color choices. While I offer a tool to assist in finding some level of color harmony leveraging complementary colors, It would be neat if one of these tools let you find a set of colors based on the color wheel. Use mathematical operations, it’s possible to determine clash, complementary, split complementary, analogous, monochromatic and so on. Perhaps it’s time for a re-write of that tool?

I spent some time yesterday reading up RFC’s on URI encoding for use with OAuth. More specifically, I was getting a handle on how different languages interpret and encode assorted character strings. What I learned is that JavaScript and PHP do not get along well. Even a benign string like “Hello world!” is not escaped consistently between languages.

In his article, Marc Worrell spells out in detail the differences between assorted encoding standards in PHP, Perl and Javascript as well as between different RFC’s. He even provides a great (and simple) function which escapes strings in PHP. I highly recommend taking a look at his page.

What he did not do was show the differences between encodeURIComponent() and escape() in Javascript. It turns out neither are compatible with RFC 3986, and more specifically, the “!” character caused me a bit of grief. Why is this important to OAuth? Because properly signed signatures require identical strings in the hashing alogrithm. Because “!” is not “%21″ a computed hash value would differ resulting in a nightmare when trying to validate signatures. As it turns out, encodeURIComponent() does a pretty good job, but there are a few other characters that are improperly escaped using the built in javascript function.

So I wrote a prototype method to handle the discrepancies and offer that here for folks who might require just such a method.

String.prototype.to_rfc3986 = function (){
   var tmp =  encodeURIComponent(this);
   tmp = tmp.replace('!','%21');
   tmp = tmp.replace('*','%2A');
   tmp = tmp.replace('(','%28');
   tmp = tmp.replace(')','%29');
   tmp = tmp.replace("'",'%27');
   return tmp;
}

Usage is very simple - when you require an encoded version of the string, simply call the to_rfc3986() method. You could easily make this a standalone function if you wanted.

var mystring = "Hello world!";
alert(mystring.to_rfc3986());

This evening I had the opportunity to implement what should have been a simple OAuth signature validation until I ran into trouble parsing the parameters of the request. I decided to use one of the many pre-built libraries instead of rolling my own (perhaps that’s where I went wrong) but I found that it wasn’t as easy as I had expected.

A quick primer for those unfamiliar with PHP, there are multiple variables that hold request information. The two most common for passing parameters to a PHP script are $_GET and $_POST, which are both associative arrays. PHP handles the encoding of the values and brings everything back to regular strings. This is very handy for passing data. There is one more useful structure called $_REQUEST that actually holds both sets of values in one structure - also very handy if you don’t know where your data will be coming from on a given request. Now back to my issue.

OAuth augments your parameters with a few specific values that are unique to it’s implementation and uses a shared secret key system to digitally sign requests providing a level of trust with any request. If your lost with OAuth, I wrote a quick primer about it a month or so ago. OAuth takes any data you pass and signs them into a hashed value by concatenating the data with the shared secret and a few other parameters. The resulting hash is then very unique and very difficult to guess. On the server side, you can now validate the request by looking at the parameters and re-calculating the hash value.

While that’s simple in theory, it’s a bit more difficult in practice, especially with MySpace’s implementation of OpenSocial and OAuth. Yesterday I blogged about how to make AJAX requests using OpenSocial. As a habit, I always default requests to POST when possible to get around any arbitrary data size limits that might be present and to keep data out of my log files. This resulted in quite a bit of drama trying to implement the signature because the library wanted to evaluate the POST parameters and MySpace sends them as GET values. I tried tweaking the library to use the generic $_REQUEST parameters, however, the $_POST values weren’t included in the hash! As a result I ended up moving all requests over to use get - which was very simple.

Below you’ll find the revised GET friendly code:

function ajaxRequest(url, callback_func, post_params){
   var queryString = "";
   for (k in post_params) {
      queryString += "&" + k + "=" + encodeURIComponent(post_params[k]);
   }
   url += "?" + queryString;
   var osParams = {};
   osParams[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.SIGNED;
   gadgets.io.makeRequest(url, makeRequest_callback, osParams);
   function makeRequest_callback(data){
      renderStatus("Handling ajax response with typeof: " + typeof(data.data));
      var json = gadgets.json.parse(data.data);
      if(!json){
         alert('Unable to parse JSON object');
      }
      callback_func(json);
   }
}

Now you can use the OAuth libraries to parse your signature in PHP and verify who’s posting to your data points. Don’t forget to s/_POST/_GET/g your code to update all POST references. It seems like a bug to me in the implementation that if the request is made via POST the parameters wouldn’t also be passed in the same way. Perhaps there’s a method to the madness I’m not aware of?

Two MySpace developers posting on a thread regarding requestNavigateTo within the MySpace environment need credit for this one. Kristaps and Eric posted a discussion which included some nice brief code snips. The code is short and sweet. All that’s required is a surface name and any optional parameters you would want to pass to that surface. Note in OpenSocial 0.7 “surfaces” are now known as “views” which might throw some developers for a loop as they make the transition.

function navigate(surfaceName, params){
   var surfaces = gadgets.views.getSupportedViews();
   var surfaceRef = surfaces[surfaceName];
   gadgets.views.requestNavigateTo(surfaceRef, params);
}

Valid views within MySpace (as of this time) are home, profile, and canvas. Sample usage for moving to the Canvas view from the profile (or home) would be as follows:

<a href="#na" onClick="navigate('canvas',{});" title="Move to canvas">go to canvas</a>

After much frustration debugging a tweak from OpenSocial 0.6 to 0.7, I decided I’d capture the essence of my code in one location for others to look at it. This walks through the basic structure to make an AJAX request using MySpace’s implementation of OpenSocial. It should work with other OpenSocial 0.7 compliant sites as well.

This is the core of the functionality - where all the magic happens - a function called ajaxRequest(). As you see it takes 3 parameters, the URL to post to, a call back function and an object/array containing any data you would like passed via post.

function ajaxRequest(url, callback_func, post_params){
   var queryString = "";
   for (k in post_params) {
      queryString += "&" + k + "=" + encodeURIComponent(post_params[k]);
   }
   var osParams = {};
   osParams[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
   osParams[gadgets.io.RequestParameters.POST_DATA] = queryString;
   osParams[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.SIGNED;
   gadgets.io.makeRequest(url, makeRequest_callback, osParams);
   function makeRequest_callback(data){
      renderStatus("Handling ajax response with typeof: " + typeof(data.data));
      var json = gadgets.json.parse(data.data);
      if(!json){
         alert('Unable to parse JSON object');
      }
      callback_func(json);
   }
}

Now that we have this tool, using it is very simple, first create a call back function that takes your JSON result and does something with it, then invoke the ajaxRequest by calling the ajaxRequest function using your parameters. That’s it.

function ajax_callback(jsonData){
   // do something with the data!!!
}

ajaxRequest("http://www.af-design.com/", ajax_callback,{});

I hope this saves some developers some frustration reading through the OpenSocial documentation and helps them get their apps up and running more quickly.