subCHILD

developerWorks Tutorial: Processing XML with jQuery

My tutorial on processing XML with jQuery in the browser is now live on IBM’s developerWorks website. Check it out at:

http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html

Most JavaScript and jQuery ninjas needn’t read past the title for the gist, but hopefully there’s something new for everyone. Either way, your comments are welcome.

Amazon CloudFront – PHP Invalidator

Amazon recently (finally!) added support for invalidation to CloudFront.  Frankly, without this feature the service was pretty useless to me since updating (or deleting) the cached resource would mean that the actual operation would take up to 24 hours to be reflected on the CDN.  But all is well now as the invalidation API available and is, as expected, very responsive.  (Based on initial tests, invalidations take a few minutes to process.)

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 invalidateObject() 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.

Live XML Editor: Version 1.5

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/

Live XML Editor

While I don’t recommend editing XML files by hand, its not an uncommon task and I occasionally find myself having to do it.  As I am a big advocate of web based applications, I was hoping to find a web based XML editor but had trouble finding one.  So I built one.

From the technical point of view, editing the XML directly (rather than translating it to a more edit-friendly format, then converting it back) was something I wanted to explore and jQuery’s fantastic DOM support (which covers XML files as well) seemed to be the right approach.  All of the editing is handled in the browser and each update is reflected in the source XML immediately.  Saving merely consists of pushing the string onto a PHP script which saves the file.

The interface is still a little clunky and could use some visual and functional improvements, but it should get the job done for now.  I’m also planning a number of feature updates.

Let me know how you like.

Go to the Live XML Editor »

Simple JavaScript and CSS File Bundler

Optimizing web page loading is not a new subject, but it remains one that doesn’t get as much attention as it deserves.  Web/UI developers often assume that site performance is mostly attributed to back-end operations (database interactions, processing, etc.), servers themselves (hardware and software) and other variants such as bandwidth, traffic, etc. But there are many ways to optimize client-side code in a way that will result in a noticeable improvement in site loading and performance.

Fortunately, some of these techniques are becoming more common. For example, CSS Sprites are frequently seen now days and are heavily used by Google (sample) and Yahoo (sample).  The reason CSS Sprites are a good idea is because reducing the number of requests means that servers have less to process and deliver, while the browsers have fewer components to download. This point is one particularly worth noting since before Firefox version 3 and Internet Explorer version 8, most browsers supported only 2 concurrent requests per domain. (With new browsers, that number goes up to 6, but the concept is no less important.)

So, loading fewer files is good for both the server and the client. CSS Sprites allow us to cut down the number of images which need to be downloaded (and also prevent having to preload images which are initially hidden, such as rollovers), but how can this technique be applied to other page components?

More