Archive for the ‘Javascript’ category

« Abundance Affordance home page

Pesterfish

August 28, 2008

In my research for what data serialisation models to use to represent our repository data, I was hunting down some XML to JSON conversions. For the past few months I have been hell-bent on using JSON as the representations, because it is far more useful to me than chunks of XML, and closer to the nature of the data being represented. As Steve Yegge says:
“XML is better if you have more text and fewer tags. And JSON is better if you have more tags and less text”.

The problem is however that almost all the tools out there in Fedora-Commons land are biased towards XML, and have (almost) never heard of JSON. So if I only have some basic Dublic Core and a gob of JSON in my objects, that is not going to help very much. The other extreme, and undoubtedly “The Right Way To Do It” is to have a lovely shiny Content Model and define everything in an ontology and RDF and then my brain melts. And we want to migrate our repository sooner rather than later and don’t have the time to remain in la-la land designing around our navels forever.

So now I am swinging back the other way and have decided to store the data in the objects as simple stupid XML with a smattering of tags, and at least have some XSLT disseminators to provide more buzzword compliant FOAF, Bibliontology, OAI-ORE etc. And JSON. Via XSLT. Which brings me to http://code.google.com/p/xml2json-xslt/ which pointed at http://badgerfish.ning.com/ and finally to pesterfish:

Jacob Smullyan wrote a related Python model, pesterfish, which he describes as: “a quick Python module which is uses the same xml object model as the dominant xml module in the Python world, elementtree; Some elementtree implementation (there are several) and simplejson are required. BTW, elementtree stores namespaces in Clark notation: {http://www.w3.org/1999/xhtml}br and so does this.”. pesterfish also lets you round trip XML through it without any data loss.

I like the ElementTree API. Lots. It is very elegant and a joy to work with, especially if you have ever had to use any other XML APIs like DOM or SAX that makes you want to gnaw your own arm to the bone out of frustration. So the chance of having an ElementTree-like way of consuming XML in Javascript expecially appeals to me. (well until http://en.wikipedia.org/wiki/E4X E4X is widely supported)

And so, with this long-winded preamble I would like to present pesterfish on AppEngine:

http://epoz.appspot.com/pesterfish/

You can POST an XML file to it, and it will return the pesterfish application/json.

Or you can call it with a URL for the XML file specified in the ‘in=’ parameter, like this.

http://epoz.appspot.com/pesterfish/?in=http://www.w3schools.com/XML/note.xml

It turns this XML:

<note>

	<to>Tove</to>

	<from>Jani</from>

	<heading>Reminder</heading>

	<body>Don't forget me this weekend!</body>

</note>

Into this JSON:

{"text": "\n\t", "tag": "note", "children":
 [{"text": "Tove", "tail": "\n\t", "tag": "to"},
 {"text": "Jani", "tail": "\n\t", "tag": "from"},
 {"text": "Reminder", "tail": "\n\t", "tag": "heading"},
 {"text": "Don't forget me this weekend!
", "tail": "\n", "tag": "body"}]}

And it supports JSONP:

http://epoz.appspot.com/pesterfish/?in=http://www.w3schools.com/XML/note.xml&callback=some_callback

Thanks Jacob!

Categories: Javascript, Python, Uncategorized, Web, Work
Tags: , , , ,

Comments: 1 Comment

Making better auto-complete INPUT text fields

January 29, 2008

The first time you see an AJAXy drop-down auto-complete text input field as a web developer, you just have to make one yourself. It is a compulsion. But then you make it, and it seems clunky. Here is a tip to improve the usability: use the current word your cursor is positioned on to retrieve the list of suggestions from your database, and not the entire text field.

I did this yesterday and am delighted with the results. You can see how it works on the Arkyves welcome page, just type some words in the search box in the top left-hand corner of the page. You will notice how the suggestions are based on what word your cursor is positioned at. Nifty, eh?

Here is the crucial snippet of Javascript to make this happen:

(pasting this code stripped the angle brackets, I really need to figure out a better way of posting code snippets. Grrrr. I will leave this snippet below for now, but please note that you can’t just cut-and-paste it and expect it to work. )

getSpaceChunk = function(textElem) {
var v = textElem.value;
if (v.length s1) {
return v.substr(s1, (s2-s1))
}
var startSpaceFound = 0;
for(var i=0; i= s1) break;
if(v.charAt(i) == ' ') {
startSpaceFound = i+1;
}
}
var lastSpaceFound = v.length;
for(var i=startSpaceFound+1; i<v.length; i++) {
if(v.charAt(i) == ' ') {
lastSpaceFound = i;
break;
}
}
return v.substr(startSpaceFound, (lastSpaceFound-startSpaceFound));
}

If someone has suggestions how this function can be improved, ping me. I don’t claim to be a Javascript guru. And credit where credit is due, I first saw this kind of niftyness on del.icio.us, so they inspired me to fix mine.

Categories: Arkyves, Javascript, Uncategorized
Tags: , , , , , ,

Comments: Be the first to comment