New updates include CSS3 support (provided via @rstacruz‘s excellent jquery.transit.js plugin), animation as well as zooming in both directions and better browser support – it works and looks great on tablets and other touch devices.

In addition, the project now has a legitimate project homepage which provides documentation and a couple of live demos. 

Check it out now at: http://subchild.com/slideshowify

I still have much more to learn, but though this exercise I’ve become a big fan of Python and, after working with lots of different templating engines over the years, really like the format and flexibility of Jinja2. Kudos to Armin Ronacher for his fantastic work on all of this.

No kudos though to the iStockphoto folks who haven’t even responded to my request for access to their API. This means that all of the data is currently scraped from the HTML. Nasty.

What was missing though is a PHP API for easily creating and processing invalidation requests, so I put one together, largely inspired by the existing S3 and CloudFront PHP kits.

To invalidate an object, just create an instance of CloudFront and call invalidate() it. Like so:

$cf = new CloudFront($keyId, $secretKey, $distributionId);

// invalidate single object
$cf->invalidate("/path/to/object");

// invalidate many objects with single (batch) request
$cf->invalidate(array("/path/to/first","/path/to/second"));

// enable debugging (response output) by passing true as the second argument
$cf->invalidate(array("/path/to/first","/path/to/second"), true);

Check out the source on GitHub: http://github.com/subchild/CloudFront-PHP-Invalidator

A couple of things to keep in mind. CloudFront supports very few concurrent invalidation requests so make batch requests as much as possible.  If you absolutely need to up this limit, go to http://aws.amazon.com/cloudfront-request/ and submit such a request. Also, keep in mind that updating a resource on CloudFront means that you’ll need to update it on S3 first, then invalidate the CloudFront copy only after the S3 has actually been updated, not when you make the request.

I recently had a chance to make a few updates to the Live XML Editor and address some user requests. Version 1.5 is now done and out.  Among the updates are:

- jQuery 1.4 support. Since the editor relies heavily on DOM rendering and events, this update makes the app snappier.

- Comment node display and editing. This was requested by a user and I was surprised that I hadn’t thought of it. Creating comments isn’t supported yet, but its on the to-do list.

- Various bug fixes, tweaks and optimizations.

- Added (MIT) license.

Check it out: http://www.subchild.com/liveXmlEdit.  Code is also on GitHub: http://github.com/subchild/liveXmlEdit/

/**
 * Loggable adds a log method to the passed object.
 * @param obj       {Object}  Object which will get a new log() method
 * @param objName   {String}  Optional parameter for displaying a string before each log output
 * @param debugMode {boolean} Optional switch for disabling logging
 */
function loggable(obj /* , objName, debugMode */){
	var objName   = arguments[1] || "",
		debugMode = (typeof arguments[2]!=="undefined") ? arguments[2] : true,
		prefix    = objName ? objName + ": " : "";
	obj.log = (function(prefix){
		return function(){
			if (debugMode && typeof console!=="undefined"){
				if (arguments.length){
					arguments[0] = prefix + arguments[0];
				}
				console.log.apply(null, arguments);
			}
		}
	})(prefix);
	return obj;
};

So if you have an object like:

var obj = {
  name     : "Alex",
  getName : function(){ return "Alex" },
  setName : function(name){
    obj.name = name;
    obj.log("name was set to", name);
  }
}

loggable(obj, "Obj");

Then, executing:

obj.setName("Balthazar");

Will log this in your console (Firebug or otherwise):

Obj: name was set to Balthazar.

Here it is on GitHub: http://gist.github.com/547926

Anyhow, here’s a stab at such a thing. Some future enhancements are obvious (pan direction, zooming, transition options, etc.) and anticipate finding the time to add that stuff shortly.

For now, check out the code on github.com and see a demo at www.subchild.com/slideshowify

To use it, include jQuery, jquery.slideshowify.js, then feed slideshowify a selector that matches some images. For example:

$("img").slideshowify();

Alternatively, you could load data from an external feed and call $.slideshowify() with configuration options:

$.slideshowify({
 	dataUrl   : "http://www.gallerama.com/services/gallery/get.php?gid=2107&versions[]=9",
	dataType  : "jsonp",
	randomize : true,
 	filterFn  : function(imgs){
 		var fixedImgs = [];
 		$.each(imgs, function(i, img){
 			fixedImgs.push(img.versions["9"]);
 		});
 		return fixedImgs;
 	},
	afterFadeIn : function(imgData){},
	beforeFadeOut : function(imgData){}
 });

Most of the params here are passed directly to jQuery’s $.ajax() method. Some are used to reformat the data (slideshowify() expects an array of objects of this format: {src:”domain.com/path/to/image.jpg”, w:”600″, h:”400″}), others are hooks or speed (fade, delay) options.

Proper documentation will be provided. Most likely.

$('<link href="/path/to/stylesheet.css" rel="stylesheet" type="text/css" />').appendTo("head");

After investigating and Googling this a bit, I discovered that this technique does work:

var $link = $('<link/>').appendTo("head");
$link.attr({
	href : "/path/to/stylesheet.css",
	rel  : "stylesheet",
	type : "text/css"
});

However, this doesn’t work in Opera (only the latest version tested).

The solution is perhaps to simple to bother writing up, but here it is anyway:

$('<link href="/path/to/stylesheet.css" rel="stylesheet" type="text/css" />').appendTo("head");
$link.attr({
	href : "/path/to/stylesheet.css",
	rel  : "stylesheet",
	type : "text/css"
});

/**
 * Sorts an array of json objects by some common property, or sub-property.
 * @param {array} objArray
 * @param {array|string} prop Dot-delimited string or array of (sub)properties
 */
function sortJsonArrayByProp(objArray, prop){
	if (arguments.length<2){
		throw new Error("sortJsonArrayByProp requires 2 arguments");
	}
	if (objArray &amp;&amp; objArray.constructor===Array){
		var propPath = (prop.constructor===Array) ? prop : prop.split(".");
		objArray.sort(function(a,b){
			for (var p in propPath){
				if (a[propPath[p]] &amp;&amp; b[propPath[p]]){
					a = a[propPath[p]];
					b = b[propPath[p]];
				}
			}
			// convert numeric strings to integers
			a = a.match(/^\d+$/) ? +a : a;
			b = b.match(/^\d+$/) ? +b : b;
			return ( (a < b) ? -1 : ((a > b) ? 1 : 0) );
		});
	}
}

Here’s a simple example:

var arr = [
	{name:"Zack", friends:{count:50}},
	{name:"Alex", friends:{count:80}},
	{name:"Mike", friends:{count:30}}
];
sortJsonArrayByProp(arr, "name");
sortJsonArrayByProp(arr, "friends.count");
sortJsonArrayByProp(arr, ["friends","count"]);

[Update] This function now converts strings made up entirely of digits into integers for (presumably) more accurate comparisons, and therefore, sorting.