I just booked my tickets for Mashup Camp in Mountain View, California on the 20th and 21st of February. Mashups are about combining content from different sources to create new applications (e.g. Google Maps + LCBO = The Ontario Beer Hunter).

I’m hoping to meet some of the big brains of the mashup world, talk about JAHAH and a new application I’m developing using that and the BlogMatrix platform and microformats.

Tagged: jahah, microformats, blogmatrix, mashup camp.

JAHAH 0.1.2 is available. It features:

• much improved error trapping/reporting in jahah-include
• absolute URI rewriting in jahah-include
• a partial failure mode (that returns the body) for unparsable HTML documents
• a new demo that you can easily copy to your own site to show the cross-scripting

Tagged: jahah.

CSS2 has a neat ability to do something called a selector. A selector allows you (amongst other things) to define CSS rules that match things other than classes and tag names.

For example this defines a CSS rule that says all JAJAH include blocks are to be hidden.

a[rel=jahah-include] {
    display: none;
}

But what if we want to have other types of inclusions, say for AHAH? And what if we want to have a general concept of “follow the link” when we see an include?

CSS defines a special attribute selector rule for matching called ”|=” which means:

Match when the element’s “att” attribute value is a hyphen-separated list of “words”, beginning with “val”. The match always starts at the beginning of the attribute value. [...]

So, in the spirit of being a team player. I’m going to reverse the order of the words. My new rule is

a[rel|=include] {
    display: none;
}

and hence forth the include marker will be rel=“include-jahah”

Tagged: css, jahah, ahah.

(This is from a posting to the microformats-rest group).

I came to this by a slightly strange path—I wanted a way of providing webservices that others could load into their own webpages. “traditional” AJAX, if there is such a beast, cannot do this because of limitations with cross site scripting.

I mulled this over for a while and discovered at Christmas time that one can use the SCRIPT element to dynamically load scripts from anywhere. I had also been looking at a technology called JSON which has huge replacement to be a widely used net transport language, as it’s much easier to deal with that XML. JSON led me to Bob Ippolito’s JSONP, which lets me combine the SCRIPT with JSON with a callback.

Finally, looking back through my notes, I revisited AHAH which provided an easy method for producers and consumers to use HTML in “AJAX-y” applications.

Combining them all together, I’ve produced JAHAH (pronounced the German way):

• it allows cross site scripting
• if the “jsonp” parameter is not passed to the webservice, HTML documents are returned
• if it is, a simple JSON payload is returned with “html” holding the HTML document; arbitrary other data can be added to the payload

I’ve written a deeper description here, the official home (please don’t like to the temporary redirect) and I’m providing code samples, JAHAH webservices for extracting HTML from files or looking at RSS feeds, and all my sources. If you’d like to publicly comment or link to it on a blog, please also link to here. My code also builds on Ippolito’s MochiKit.

Tagged: ajax, ahah, json, jsonp, web2.0, jahah, microformats.

This page is permanently available here.

What is JAHAH?

JAHAH is an AJAX-like technology for 'mashing' web pages together.

• It is easy for web page authors to include JAHAH documents
• It is easy for content producers to create JAHAH documents
• JAHAH documents can be included "cross-domain", unlike most AJAX technologies
• JAHAH documents are search engine friendly

Where does JAHAH come from?

JAHAH is based on existing ideas and technology:

• AHAH is technology for directly including HTML fragments using AJAX
• JSON is a scripting-language friendly way of transmitting data across the web (that works cross-domain)
• JSONP is an incremental improvement to JSON that allows the document requestor to specify an arbitrary prefix to be returned prepended to the result

JAHAH Web Service Description

A web service that provides JAHAH documents must behave as following:

• If there is a 'jsonp' parameter, it must return:
  • the value of that parameter, followed by
  • if everything's OK, a dictionary with 'html' containing the payload
  • if there's a problem, a dictionary with 'error' containing the error message
• If there is no 'jsonp' parameter, or it is empty, the webservice must return an HTML document, where the BODY of the document is the payload

It is also acceptable, though not encouraged, to return only a string with the payload rather than a dictionary. It is OK to return other values with the dictionary, excepting that all single letter keys are reserved.

How do I include JAHAH in my document?

You are free to do this anyway you like if you don't care for what we've done here. However, we do provide some pretty nifty tools if you want to try them. Note that do not add the 'jsonp' parameter to URIs here -- our code provides this function automatically to callback to the correct places.

NOTE: our JAHAH tools use MochiKit. We include a copy in our little source distribution for now, but we may take it out if this thing starts rolling.

Automatically load by magically marked likes

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

<a rel="jahah-include" href="http://www.example.com/jhah-service/">loading...</a>

Load a JAHAH document into a element (by ID)

<script type="text/javascript">
loadJSONDoc("http://www.example.com/jhah-service/", "element-id")
</script>

Show me something

Demos 3, 4 and 5 are the best

• Demo 1 — call document.write to synchronously load a document
• Demo 2 — call loadJSONDoc asychronously load a JAHAH document
• Demo 3 — include three different documents using rel="jahah-incldue"
• Demo 4 — include a RSS feed in a document
• Demo 5 — chose a URI an watch it get included

What JAHAH web services are available?

Our web services include a little form interface so you can play around with them. Remember that if you don't place something in the 'jsonp' parameter, a HTML document will be returned.

• jahah-include — extract the body or a fragment of another document and return it as a JAHAH document
• jahah-feed — convert an RSS/Atom feed into a JAHAH document. This needs some presentation options added, such as to return the doc XOXO microformatted.

Where can I get the source?

http://www.blogmatrix.com/tools/src/

Problems?

• Errors in loading the JAHAH document are not handled at all. This is very very bad. It's a matter of trapping 'document.onerror' and doing something with it
• Post-loading of content is imcompatable with Greasemonkey, which means tools such as microformat-action do not work.
• Mashing documents means that microformatted content cannot be directly recognized. HOWEVER, since all JAHAH documents are available as HTML documents (just omit the 'jsonp' parameter), we could add rel="jahah-include hatom xfolk" to indicate that there's 'hatom' and 'xfolk' content at the other side of the link.
• We're not in the business of providing a webservice so others can take other's content. At some point 'jahah-include' will block strange referrers
• 'jahah-include' does not rewrite URIs and thus links and images are often broken. We're going to fix this

Tagged: ajax, ahah, json, jsonp, web2.0, jahah, microformats.

So here’s my latest mini project, which I’m hoping is going to change the world and suck a max of 8 hours out of my time:

JAHAH—AHAH/HTML transported as a JSON(P) string.

Benefits:

• cross site scripting, as per On-Demand Javascript (not available in AHAH)
• data is basically HTML so it’s easy construct and consume, as per AHAH (not so with JSON)
• flexible end-use, as per JSONP

It would be nice if Javascript provided a way to “vet” the return results of script inclusions for security reasons, but we’ll do without. There will also be some unique considerations for microformats and Greasemonkey; we’ll cross that bridge when we get to it.

I’m trying to hack a demo together with MochiKit today to show the power of this idea.

Tagged: ajax, ahah, json, jsonp, web2.0, jahah, microformats.