Andreas Haugstrup Pedersen | solitude.dk

The day are busy at Hoist. We are ready to launch our new work tool very soon (workshops are held next week with few spots left—let me know if you're interested).

Working on the user interface goodness I needed to execute some javascript immediately after a node has been posted in Drupal. The javascript should not be included on every node view, only the first. The nodeapi's 'insert' operation can't be used to include javascript because there is a redirect after it is processed and the 'view' operation can't tell if a node is brand new or not.

The solution I used is to set a session variable. It feels a little hackish, but it works great.

function yourmodule_nodeapi(&$node, $op, $a3 = NULL, $a4 = NULL) {
  if ($op == 'insert') {
    $_SESSION['yourmodule'][$node->nid] = $node->nid;
  }
  if ($op == 'view' && $_SESSION['yourmodule'][$node->nid]) {
    // Insert call to drupal_add_js() here.
    unset($_SESSION['yourmodule'][$node->nid]);
  }
}

About two months ago I bought a new phone, one of these fancy ones that record video. I can even edit video (including trims and titles) and e-mail the finished product directly to my blip.tv account. The workflow is great and I've been trying to be better about actually uploading content. One thing that would motivate me would be if I displayed the video on this website. The idea is that I will get tired of seeing the same videos on the page and would then upload fresh ones. The smart reader will have noticed the thumbnails above titled “Mobile video“. Those are what I'm talking about. Click them to view the video on blip.tv.

Thankfully blip.tv has an open API so it was really easy to hack together some jQuery action to pull in my latest three mobile videos (using AJAX of course). Before I started I knew next to nothing about both blip.tv's API and jQuery. I was pleasantly surprised by both.

The steps were:

• Download the latest version of jQuery and copy it to my domain.
• Set up a PHP script to act as a proxy for fetching posts from blip.tv.
• Write javascript that turns the raw data into pretty thumbnails with links.

I wanted to load the posts from blip.tv with AJAX to avoid having the page hang in case blip.tv goes down (or is slow). I have occasional problems with the lastest photos from 23 in the sidebar on that account. For security reasons AJAX calls can only go to the same domain. That meant I had to write a PHP script that I could call from the javascript. The PHP script would then contact blip.tv and get the lastest posts and forward these back to the javascript. It ended up looking like this:

<?php
	header("Content-type: text/plain");
	// Get JSON from blip.
	$json = file_get_contents("http://blip.tv/posts/?user=andreas&skin=json&pagelen=3");
	if ($json) {
		$json = str_replace("blip_ws_results([{", "[{", $json);
		$json = str_replace("]);", "]", $json);
		echo "{$json}";
	}
?>

A couple of things to note: Most important is the fact that blip.tv offers posts in about a million different formats (HTML, RSS, JSON, OPML, Atom). This is great because I can just pick whatever is easiest to work with for any given scenario. I chose JSON because it's already javascript. Secondly, you'll notice a couple of string replacements in the above. Blip.tv wraps their JSON output in a function — I'm no javascript shark, but I suspect this makes things easier to work with when you're including the javascript file directly into one's page. It was really throwing the JSON function in jQuery off and I figured the fastest way to get around the problem was to strip the function before forward the data. Problem solved. I saved this file as getjson.php and uploaded.

Next thing was to write the javascript that made a call to the PHP script and transformed the JSON data into pretty thumbnail links. Due to the built-in functions of jQuery the javascript turned out to be a measley 10 lines of code:

$(document).ready(function(){
	$.getJSON("/js/getjson.php", function(json){
		var str = "";
		for (var i = 0; i < json.length; i++) {
			str = str+'<li><a href="'+json[i]['Post']['url']+
			  '"title="'+json[i]['Post']['title']+'"><img src="'+
			  json[i]['Post']['thumbnailUrl']+'" alt="'+
			  json[i]['Post']['title']+'" height="90" />
			  </a></li>';
		}
		$("#blipdata").empty();
		$("#blipdata").append("<ul>"+str+"</ul>");
	});
});

The above takes the JSON data from the PHP script and inserts thumbnail links into the div element which has an id attribute of blipdata. I saved this as blip.js and then all that was left was to include the javascript in the head section:

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/blip.js"></script>

And that's it. 19 lines of code total (plus the CSS). I wish everything was as easy to work with as the blip.tv API and jQuery. I'll definitely make sure to work more with both in the future.

A word of warning. The official jQuery documentation stinks. Really, really stinks. The jQuery Visual Documentation on the other hand, rocks. Really, really rocks.

Marc Canter and Lucas Gonze has created a new webservice called Reblg. Lucas posted some details. In short ReBlg takes any (perma)link and sends it off to anywhere you want. When/if tools start supporting this service it can make reblogging, and more importantly, quoting much easier. Just click the button and you're good to go.

Generally speaking I'm not a fan of reblogging, because no one does is responsibly. That's not a critique of ReBlg though. ReBlg can be used for but responsible and irresponsible reblogging. I see the real value in one-click quoting and not reblogging.

After reading through the developer's notes I created two quick Greasemonkey javascripts that can insert the ReBlg buttons on any page (well, not quite). It will insert the ReBlg button after any link which contains a rel attribute with a value of either permalink or bookmark. This should include all standard Wordpress blogs.

• ReBlg button, ReBlg as intermediary
• ReBlg button, Mime helper

One script will create a button which uses the ReBlg website as intermediary, the other create a button that sends the the user the mime helper file.

Only Opera and Firefox supports these javascripts. Opera supports them out of the box, just go to Tools > Preferences > Advanced > Content > JavaScript options, and select the directory where you have saved one of the above javascripts. If you are using Firefox you need to install Greasemonkey and then install one of the two javascripts above. Then you should be able to see the buttons in action on this very page.

Just yesterday Michael Meiser told me about Greasemonkey — a plugin for Firefox that allows you to add your own custom javascripts to websites. And now today I find out (via Phil Ringnalda) that Opera will have the same feature in the upcoming version 8.0 release. Apparently the feature has been planned in Opera for years:

Actually, the User JavaScript idea predates Greasemonkey — it was more based on the way CSS works and the way you can make Opera apply your own user style sheets to all pages. The feature has been planned for years — the first implementation that actually went public was the famous Opera Bork edition that loaded a given external JS file into all MSN pages to mangle their language.

I have been dabbling a bit in javascript lately. I'm still no good at it, but I suspect that user javascript (if made easy to install) can become the next big thing. Especially since more and more websites are moving towards better structured HTML. Javascript is a lot easier to deal with when there is nice HTML to play with.

Empowering the user with the ability to control website behaviour is awesome. The first example I read about is to highlight Google search terms an any page you arrive at from Google. Another use is to make clickable blockquotes. It's a problem that no browser makes quotes like the one above clickable, but with javascript it's relatively easy to make quotes clickable. I have always been able to make my own quotes clickable (and I will do so in the near future), but with user javascripts I can make quotes on any website clickable.

For you Firefox user there is a repository of scripts for Greasemonkey available. I suspect we've only seen the top of the iceberg, and I am looking forward to playing around with this once Opera 8.0 goes final.

This is just a quick test of a new script. It takes any link with rel="enclosure" that also contains an image (like the screenshot above). Then when you click on the image it automagically replace the image with the embedded video. Non-javascript enabled clients will just get the straight link. To it's a great deal for both robots/crawlers and humans.

The downsides right now it that the script doesn't work in Internet Explorer for Windows, and only in the newest beta version of Opera (Firefox users are fine). I haven't tested with more browsers.

Once I get some more quirks worked out (and added support for Windows Media as well as Quicktime) I will put up a notice on how you can use this on your own blog (it's really easy!).

The video is a short clip from Main Street of the small Michigan town where I'm at right now.