Cross-Domain Portlets with Gadgets/Widgets/Startlets

Scott Isaacs on a new feature (quoted on Ajaxian):

DHTML-based Gadgets: consumes DHTML-based components called Gadgets. These Gadgets can be created by any developer, hosted on any site, and consumed into the experience. The model is completely distributed. You can develop components derived from other components on the web.

Remote portlets take the Ajax portals to another level. In fact, the whole concept is one of the biggest developments in the history of the web. A9 pre-empted it with their “Open Search” capability, which allows developers to hook into the A9 interface with live search results. Now MS is going a step further, with Konfabulator-style interaction directly on the web. It’s likely Yahoo has similar plans, given that it’s now the owner of Konfabulator. What Google does is anyone’s guess. Strategically, MS has a big edge here because of its experience working with Developers, Developers, Developers! (YES!)

The idea combines [Cross-Domain Mediator]( Mediator) with Portlet. Those patterns have subsumed a now-deleted pattern that previous covered this kind of thing:

Cross-Domain Portlet: Introduce Interactive Portlets to facilitate a conversation between the user and a third-party, e.g. for services or “advertising as conversation” (

Ajax makes it possible because there’s no page refresh. Conceptually, each portlet is autonomous and capable of conducting a conversation with another domain in parallel with other portlets. When a result comes back to one portal, the other portlets are unaffected. (You can obviously yoke portals together if you want to.) In practice, there are a couple of finer implementation points:

  • You can’t make an XMLHttpRequest Call to an external domain. Hence, the portal server must mediate.
  • Conducting parallel conversations, you’ll need some form of Call Tracking. Hopefully, you’re using a library that abstracts those details from you.

Now that a happening, here are a few things I’d like to see:

  • An open standard for conducting cross-domain conversations, one that protects the end-user and the portal host, but provides sufficient functionality to the
  • Useful ads (the advertising as conversation) concept. There’s definitely a business model here for opt-in advertising. That is, users would be willing to add advertising portlets that offer genuinely useful information. e.g. a travel portlet that lets you check flight availability.
  • RSS aggregator integration The nature of a portal can change, right? So RSS aggregators should be able to include remote portlets.
  • End-user-created portlets. Make it easy for end-users to construct their own gadgets. This idea is inspired by Charlene Li’s comments on Konfabulator: “The problem is I already know what the ultimate widget would be me … There’s only one small problem — I don’t know JavaScript! So I am at the mercy of app developers …”

A Few Ajax Gotchas At Jalecode

Andrew Sutherland offers a few Ajax Gotchas/Tips. I’ll add some comments.

  • Escape content with encodeURIComponent() which is superior to escape.

  • XMLHttpRequest’s readyState tells you how far the request has progressed. MM: If you’re confused about readyState‘s transition from 0 to 4, you have good reason to be. Read the recent posting and comments on David Flanagan’s blog, and you’ll learn that 2 and 3 are ambiguous to the point of being unusable. Essentially, you want to wait for either 4 or timeout, and probably ignore everything else.

  • Permission Denied” for XMLHttpRequest is usually due to trying to call another domain. MM: The standard security policy is that requests can only be sent to the originating server, just like the traditional policy for Java applets. To get to another domain, you can set up a Cross-Domain Mediator. This security issue has become interesting with the growing popularity of Single Page Applications (SPA). What can an HTML page sitting on you hard drive access? All domains or no domains? It would certainly be convenient if it could access the web at large. I don’t think it can access any domains on standard browsers, but it’s still possible if the user wants it to happen. Here’s what Steve Yen (TrimPath) says on this issue: “I’m shooting for now to have explicity user-driven synchronization working, which my experiments lead me to believe is workable.”

  • MM: Finally, I’ll add another gotcha-inspired tip to Andrew’s collection: Set content type to XML (in the case where you want to treat the response as XML), e.g. in PHP, header("Content-Type: text/xml");.

A Fading Habit

I’ve noticed that I’ve recently habitualised the Yellow Fade Technique, or what the Ajax patterns refer to as One-Second Spotlight.

The typical Fade example is a form field. When you change it, the field is suddenly highlighted, then gradually fades back to its original form. This tells the user that “the computer” knows something’s happened, and also serves to draw their attention to a particular element.

This is one of those things that could have been big years ago, but never happened. Despite the fact it’s only become popular recently, it’s all quite simple from a technical perspective, even more so with the new libraries coming out. I created a couple of demos a while back – one is powered by Scriptaculous, the other uses a custom-built fading engine. The first demo runs opacity through a sequence, the second demo does the same to colour, rather than opacity.

In the Scriptaculous case, running the effect is mind-numbingly simple to invoke:

new Effect.Appear(“defaultTimeLabel”);

And likewise in the case of my custom fader (which lets the user specify colour preferences):

fader.fade(defaultTimeLabel, $(“startColor”).value, $(“endColor”).value);

Anyway, I’ve lately been coding some more dynamic DOM manipulations, and it’s occurred to me that I now ask myself, whenever I add or remove an element, if I need to run an effect. Having scriptaculous handy makes it so easy to do. So fading started off as a bit of a novelty and is now standard practice.

I can hear people saying, “not the blink tag” and re-living 1995-esque motion sickness. That will definitely happen on some Ajaxian sites, but let me clarify that I’m only asking the question each time a change comes up, not actually implementing the change. Apps using the One-Second” visual effects include TiddlyWiki and Backpack (one of the first uses). They show how it can be used effectively and without going overboard.

Of all the new JS libs coming out, I haven’t seen any that augment or replace basic XHTML DOM manipulation. If one does emerge, I’d like to see it provide support for auto-effects and perhaps a parameter to indicate the effect. e.g. el.hide(Effect.FadeOut); el1.add(el2, Effect.BlindDown).

Ajax Periodic Refresh, Chat, and Multiplayer Gaming

First, a quick update on yesterday’s book anouncement: Thanks for your interest. Yes, it will be published as a physical book. In the O’Reilly animal format. And no, I don’t know which animal.

Periodic Refresh is a pattern where the page runs a loop to continuously grab fresh data from the server (Ajaxify Time Demo).

As that pattern explains, there are quite a few chat systems that work that way. And a slashdot poster pointed out that many Japanese chat apps worked the same way in the late-90s, albeit with full page refreshes instead of [XMLHttpRequest](XMLHttpRequest Calls), because the web handled the character set better than desktop GUIs.

When I first heard of Google Talk, I thought “Hello, Google’s doing Ajaxian chat”. But, no, the text/IM component for now is a windows-only Jabber client. There’s a great opportunity for a hybrid approach here – provide a rich client which will stay on 24×7, pop up when a message occurs, and show an appropriate icon in the system tray, and also provide a web client which can be used wherever you are. Google is well-placed to do it because (a) they certainly know how to Ajaxify; (b) they need to Ajaxify – windows clients are fine and dandy, but in order to sustain its advantage, Google has to change the rules of the game by establishing the web as the platform, not the desktop; (c) Periodic Refresh is expensive because frequent requests must be handled and Google, well, they can take the hit better than most.

So in a way, I feel like Google’s missed a trick here (but then, you can never be sure what they have up their sleeves). There’s already JWChat, an open-source Ajaxian Jabber Client. While JWChat’s demo is really just a demo, I wouldn’t be surprised to see someone picking it up and creating a serious public website based on it. Meanwhile, there are offerings like QWAD Chat which are taking the business model for Ajaxian chat very seriously.

Yesterday, another interesting announcement:

We are working on an open source project to develop a peer to peer graphical adventure game, using AJAX! Looking for AJAX developers of any skill level who want to pitch in and help out! Interested? Download the first version (single player) at

With Periodic Refresh, Ajaxian multi-player is feasible. I’m curious to see how far it can go. There’s a few game examples already, including Crisp’s stupendous DHTML Lemmings effort. In their inaugural Ajaxian podcast, the Ajaxians discuss SVG, which is finally about to become a reality on Firefox 1.1. Combine SVG with Periodic Refresh and we’ll be gaming like it’s 1995. (But without the sound effects. Playstation and X-Box have nothing to fear.)

As an aside, a thread a while back on Google Groups discussed whether unique URLs are worthwhile for Ajax apps. The argument was, why bookmark your state within an app? Of course, one answer is that you want to bookmark a particular object, like a location in Google Maps. But, when you think about it, why not bookmark the state in an app. I mention this because it would be sweet if you could have a unique URL for a position in a game. So you just bookmark it instead of saving it or you can mail it to your mates.

As another aside, I’m glad Google Talk went with Jabber and I hope they really do move to SIP for voice as they’ve hinted. IM today is popular, but it could easily have been ubiquitous by now if not for the fragmentation caused by AIM/ICQ/MSN/Yahoo/IRC/Jabber splitting the market, thus exponentially dropping the value of using a given solution. Now, voice has skype, Gizmo (SIP-based), Google Talk, as well as the offerings from the IM incumbents.

Ajax Design Patterns Book

Click to download the Podcast. You can also subscribe to the
feed if you want future podcasts automatically downloaded - check out the
podcast FAQ at

I’m pleased to announce the in-progress patterns at will be completed and published as an O’Reilly book: “Ajax Design Patterns”. The accompanying podcast explains the details, here’s a summary:

  • I’ll be completing full-text descriptions for all the listed patterns, give or take some restructuring.
  • will remain online, with full content – before, during and after the book’s release. I’ll continue building up the text on there. O’Reilly’s fully on board with this.
  • A Creative Commons license will apply throughout, with the non-commercial restriction possibly lifted after the book’s published. Contrary to John Dvorak’s recent rant, the CC license cannot, should not, and does not, preclude others from reusing the content commercially under fair use.
  • Some pages on the wiki are already open The main pattern pages will remain me-only until full-text is there, at which time I am hoping to take a branch, refine some things offline (mediawiki is painful for batch changes), and open everything up for editing.
  • The editor is Brett Mclaughlin and he too will be able to make edits. You might have seen that I’m highlighting patterns with full text on the main page. Brett will highlight them in a different colour once edited, hopefully leading to something resembling a “progress heatmap” and not a pile of visual mess.
  • I’ll continue to post updates about the patterns here, using the tags “Ajax”, “Patterns”, and, I’ve decided, “AjaxPatterns”.
  • I intend to podcast about the patterns and the corresponding examples at Ajaxify. I’m looking forward to being able to supplement the text with audio commentaries. Some prefer audio, some prefer text, but I think the best learning style is a multimodal combo deal.
  • Writing this in public will allow ample opportunity for feedback – as Dan Gillmor says, my readers are smarter than me. I know lots of you are using Ajax in different ways and for different tasks, so please tell me what sucks about the patterns. Comment in the Discussion tab for a given pattern (which I’ll pick up via RSS), leave a comment on my blog, or mail to [email protected].
  • Do you have any comments or suggestions about this writing strategy? Please leave them here or mail [email protected].

Click to download the Podcast. You can also subscribe to the
feed if you want future podcasts automatically downloaded - check out the
podcast FAQ at

This entry has a Podcast attached- an embedded MP3 link. On Internet Explorer, Click on the Podcast icon to listen, or click the right mouse button and “Save As…” to download. Better yet, you can subscribe for updates straight into your PC or ipod – it’s easy, open, and free. Install the free, open-source, Ipodder client and when it starts, just paste this in: “”. Or search for “software” under the ITunes Podcast Directory. More info in the Podcast FAQ.