Elliott C. Back: Technology FTW!

In a much better naming than Technorati’s immature WTF (Where’s the fire), Yahoo today released a labs product called Yahoo Pipes. The name comes from linux file handle terminology:

Pipes is a hosted service that lets you remix feeds and create new data mashups in a visual programming environment. The name of the service pays tribute to Unix pipes, which let programmers do astonishingly clever things by making it easy to chain simple utilities together on the command line.

The idea is quite simple. Yahoo Pipes lets users take everyday RSS feeds and mash them together with Yahoo APIs, other feeds, and programmatic building blocks in an easy to use graphical environment. Unfortunately, the execution is terrible and buggy. Take, for example, this yahoo pipe I created to scan the NYT feed for locations / keywords and insert flickr images as appropriate:

The first thing you might notice is that it doesn’t really do what it’s supposed to. Well, we’ll come to that in a minute. You’ll also notice a lot of & going around–every time I hit save it re-encoded the original ampersand. How irritating. Worse is how their pipes are so watered down they can’t do anything:

All I wanted to do was take some content, for each item do content analysis and geo analysis, and use those outputs as the input to a flickr search, then append the photo to the text snippet. Well, first you can’t fork a data stream into two bits and recombine them later. So scratch two kinds of analysis. Second, the outputs of content/geo analysis can’t be used to populate the inputs of the flickr data source–an obvious problem. And third, the annotation feature useless doesn’t annotate, it just replaces chunks messily.

Yahoo, your pipes are indeed clogged.

You’ve probably seen the article at at 24 ways about Ajax in-place editing, but honestly the javascript they code up there seems quite hacky and un-standards-compliant. Instead, we’re going to use the Yahoo UI Library (YUI, YUI-EXT), a modern cross-browser javascript toolkit, to accomplish the same results with less hassle, and more power.

The effect we want is like Flickr’s edit in place descriptions:

Part 1: The YUI javascript example:

In javascript, here’s the code. First you need some includes:

<script type="text/javascript" src=js/yahoo.js"></script>
<script type="text/javascript" src=js/connection.js"></script>
<script type="text/javascript" src=js/event.js"></script>
<script type="text/javascript" src=js/utilities.js"></script>
<script type="text/javascript" src=js/dom.js"></script>
<script type="text/javascript" src=js/yui-ext.js"></script>

Don’t forget to add this handy shortcut–we’ll use it later:

<script type="text/javascript">
var $ = YAHOO.util.Dom.get
</script>

Then we need a function to show something as editable:

function showAsEditable(e){
	YAHOO.util.Event.preventDefault(e);
	YAHOO.util.Event.stopPropagation(e);

	if(this.oldBG == undefined) {
		var pos = this;

		while(pos && pos.style.backgroundColor == '') {
			pos = pos.parentNode;
		}

		this.oldBG = pos.style.backgroundColor;
	}

	var anim = new YAHOO.util.ColorAnim (
		this,
        	{backgroundColor:{to:'#ffffd3'}},
		.5,
		YAHOO.util.Easing.easeOut
	);

	anim.animate();
}

This function finds the closest defined background color, if not already defined, and saves it. Then it animates to a nice yellow overlay color. Now we need its reverse:

function showAsNotEditable(e){
	YAHOO.util.Event.preventDefault(e);
	YAHOO.util.Event.stopPropagation(e);

	var anim = new YAHOO.util.ColorAnim (
		this,
		{backgroundColor:{to:this.oldBG}},
		.5,
		YAHOO.util.Easing.easeOut
	);

        anim.animate();
}

This function is even simpler–it just restores the saved background color. Now that we can turn their “editable effect” on and off, we need something to actually do the work:

function editHandler(e){
	YAHOO.util.Event.preventDefault(e);
	YAHOO.util.Event.stopPropagation(e);
	var target = (e.srcElement) ? e.srcElement : e.target;

	var form = '<div id="' + target.id + '_editor">';
	form = form + '<textarea id="' + target.id +
		'_edit" name="' + target.id +
		'" rows="4" cols="60">' +
		target.innerHTML + '</textarea>';
	form = form + '<br/><input id="' + target.id +
		'_save" type="button" ' +
		'value="SAVE" /> OR <input id="' +
		target.id + '_cancel" type="button" ' +
		value="CANCEL" /></div>';
	form = form + '</div>';

	YAHOO.ext.DomHelper.insertHtml('afterEnd', target, form);

	YAHOO.util.Event.addListener(target.id + '_save', 'click', function(){
		YAHOO.util.Connect.asyncRequest('POST', 'ajax.php',
		{
			success: function(o){
	                	target.innerHTML = $(target.id + '_edit').value;
	                  	$(target.id + '_editor').parentNode.
					removeChild($(target.id + '_editor'));
				target.style.display = 'block';
			},
			failure: function(o){
				$(target.id + '_editor').value =
				'Sorry, the update failed...';
			},
			scope: this
		},
		'action=updatepost&target=' + target.id + '&value='
			+ escape($(target.id + '_edit').value)
		);
	});

	YAHOO.util.Event.addListener(target.id + '_cancel', 'click', function()
	{
		$(target.id + '_editor').parentNode.
			removeChild($(target.id + '_editor'));
		target.style.display = 'block';
	});

	target.style.display = 'none';
}

Now that that’s out of the way, you just need to add these handlers to mouseover, mouseout, and click events of “editable” items:

var elements = YAHOO.util.Dom.getElementsByClassName('editable');
YAHOO.util.Event.addListener(elements, 'click', editHandler);
YAHOO.util.Event.addListener(elements, 'mouseover', showAsEditable);
YAHOO.util.Event.addListener(elements, 'mouseout', showAsNotEditable);
YAHOO.ext.EventManager.onDocumentReady(Init.init, Init, true);

Part 2: the HTML code

Here’s an example of some html code that automatically makes itself editable:

<div class="itemcontent">
	<p id="description-' . $row['id'] .
		'" class="editable">' .
			htmlentities($row['description']) .
		'</p>
</div>

Part 3: the AJAX

Since we encode the field name and identifier in the id attribute of the editable element, processing the ajax request is easy:

$value = urldecode($_POST['value']);
$bits = preg_split('[-]', $_POST['target'], -1);
$field = $bits[0];
$id = $bits[1];

switch($field) {
	case 'title':
		$object->UpdatePostTitle($id, $value);
		break;
	case 'description':
		$object->UpdatePostDescription($id, $value);
		break;
}

Conclusion

Using YUI you can add a robust, cross-platform edit-in-place solution that’s as easy as giving your html elements id attributes in the form “$field-$id” and the classname “editable.” The rest is magic. For a live demo, see my edit in place demo.

For Alexander Wrege, Claim ID, a new identity Web 2.0 project, is a complete success. After setting up a profile on Claim ID, a search for his rare name turns up the new profile in first place:

Not everyone is as lucky as Alex. About half of the claim ID profiles I surveyed did not appear in the first page of Google search results. However, as the domain is nearly a year old, its profile should begin ranking well on Google.

What exactly does Claim ID do? It let’s you associate hyperlinked material (web pages) with your name and a brief personal-biographical statement. In their own words,

ClaimID is a service that lets you claim the information that is about you online. That information is then associated with your name, providing folks an easy way to see what is and isn’t about you online. In doing so, you get to influence the search engines, and provide people more relevant information when they search for you. It’s time to reclaim some power back from the search engines. ClaimID is about letting you have some say in what search engines say about you.

Features

You have control over the following elements of your online life:

• Associate any URL with your name
• Claim websites you own as your own, and verify them
• Associate a biographical statement with your name
• Associate an image with your name
• Organize URLs into groups

There’s also a bookmarklet to help you collect links related to you, a very pretty AJAX-based interface, and a blog to keep updated on Claim ID related news.

Problems

Their privacy policy dictates how account deletion works:

Users may delete their information from our database by deleting their accounts. All personal information will be deleted, but the user’s name will be “locked” so that another user cannot use this name.

This could lead to a large number of names being permanently tied up. Without some form of name recycling, people will have to sign up with “Elliott Back 7889898.” A denial of service attack could be used to void large numbers of names, as well.

Also, the only thing it does right now is create a (name, {url}) binding. While useful, hopefully Claim ID will expand its features in the future.

Conclusion

If you want to see what Claim ID should look like, take a gander at my claim ID profile, which is just a few links and my photo. In a couple years, this will be a powerful identity service.

This is just a little test of the new Google Related Links product. Please note that if a javascript box doesn’t immediately appear below, it’s because I’m fixing problems with Wordpress’ filters:

It’s a little strange that it’s located on the main Google domain, and not on the labs page, or a subdomain. I guess it’s stable but too small for a big release. Oddly, they allow total customization:

You can modify the size, content type and color of your unit. If you have any suggestions on new layouts and designs, feel free to email us at labs+relatedlinks@google.com. We’d love to hear from you.

Is this the first time that Google’s asked people to come out with modifications to their products? All you Google Hackers rejoice. This could be the next Google-X.

I’m doing some cool things for the new ElliottBack.com. One of them involves integrating a community tagging solution, to which I’ve added or modified the following features:

+ Automatic tagging
+ Related RSS search feeds now in regular HTML as well as AJAX
+ RSS search feed item descriptions

I need to add one more feature, that is, to let everyday users add tags at will, too. Once that’s done, this tagging solution will power intra-post linkage as well as draw in valuable content from offsite.