YUI Modal Dialog

At Xebidy we’ve written and released a javascript modal dialog library that wraps Control.Modal. That’s been a huge help in a couple of websites we’ve done, it’s one of those point and shoot sort of things. It handles the Ajax submission of the forms and work just as it’s supposed to. But recently we’ve been working with the YUI library and have found that they’ve got an implementation of a dialog which basically works the same way. Anyway, it works a treat as well so if you are in the hunt for something like that, check it out.

Control.Modal.Dialog updates

So we have finally launched the Oz Experience website. Amongst many other things this is the first website we have launched which contains the travel planner originally built by the talented Ondra Medek. Anyway the point is we have written a whole heap of software for this launch and the easiest to package up and send out to the rest of the world is the latest updates to Control.Modal.Dialog.js. I have simplified the API a whole heap and generally made it do a lot more with a whole heap less code.

GDirections 25 element limit

There’s an undocumented feature in the Google Maps API when retrieve driving direction wherein any GDirections request with more than 25 elements returns an error with code G_GEO_BAD_REQUEST (400). This isn’t particularly helpful but I found the answer in the Google Maps forums somewhere. So the trick is to partition your array of waypoints into 25 part segments. Using Prototype 1.5 this is really simple using the inGroupsOf method, however using earlier Prototype versions is a little more tricky. I’m including a function that can do it with either.

function doDirections(elements) {
  var mapLimit = 25;
  elements = $A(elements);
  var groups = null;
  if('inGroupsOf' in elements) {
    groups = elements.inGroupsOf(mapLimit);
  } else {
    groups = [];
    var tempGroup = [];
    elements.each(function(point, index) {
      if(index == mapLimit) {
        groups.push(tempGroup);
        tempGroup = [];
      }
      tempGroup.push(point);
    }
  }

  groups.each(function(i) {
    var direction = new GDirections();
    //Insert your options for directions objects here.
    direction.loadFromWaypoints(i);
  }
}

Control.Modal.Dialog – a lightweight javascript modal dialog library

Recently we realised that we were in need of a modal form/dialog. Sure there is a javascript “dialog” function however it is completely useless in IE7 and what’s more it’s not really ideal in other browsers. Most of our work is based on Prototype/Scriptaculous and we have used Control.Modal in other projects so I went about writing a small layer that can sit on top of it to provide an easy to use modal dialog. Control.Modal.Dialog was born.

At the same time, I’ve spent about 3 minutes setting up Xebidy’s Code Library, we are planning on releasing more and more of the code we are writing internally to the world under Open Source licenses and hopefully Bootstrap will be one of those. Sadly, other things tend to get in the road, like clients.

Update 4/06/2008: We have released a new much better version of this. It still lives at the same place.

APIs are Hard but fun

Currently I’m working on an abstraction layer for the Google Maps API, this is purely written in Javascript, allowing any language to produce JSON objects and pass them quite seemlessly onto a Google Map. Originally this was planned to be able to be used across maps APIs (Virtual Earth, Yahoo Maps) but has descended into just being Google Maps – to begin with anyway. Currently the plan is to provide a set of handlers that know how to process specific datatypes and interact with the map ie. placing the markers, drawing the routes and monitoring changes. I think going forward, this can really help us at Xebidy move quickly, building rich location based applications very quickly.

It has been mentioned a number of times recently (though I can’t think who, probably John Resig) that building API’s is hard and I can’t help but agree. While it’s definitely challenging, I think it can be an extremely rewarding thing to get right. Developers really do feel the benefits of having a well thought out APIs with productivity gains and less headaches.

One of the biggest curses yet greatest benefits of using Javascript is the many ways you can morph the language. Using ‘apply’ and ‘call’ you can provide a developer down the track some powerful built-in functionality. Throughout the XEMap API I’ve tried to avoid any developers ever instantiating a handler of their own (no new XELocationHandler). This lets me rewrite the this variable whenever or however I please. To store configuration variables I pass an options array to each function. This in turn leaves those functions to be reusable out of the context of the API.

Facebook wall-to-wall and the back button

I’ve recently been working with the awesome Really Simple History javascript library to make Ajax loaded pages bookmarkable, it’s a bit confusing at times, but really not too hard. But it’s amazing when you work on something like that, how much it makes you notice when other websites don’t execute the little things well. For example, when you go to your wall-to-wall with someone in Facebook, post a message and then hit back nothing changes. You have to hit back again to get back to your profile. Essentially, the interface is wasting the fact that the roundtrip to the server has been done with Ajax. Grr.

What I hate in Javascript

The thing that gets on my nerves the most about javascript, is it’s silent deaths. I have a function XpathAttr that if you don’t pass it the correct parameter, In this case a XMLHTTPRequest object, it dies. No error, no Exception, no nothing.

Now I realise I could throw my own exception, or check that the xml parameter is actually the right type of object. But I really don’t care. I just want it to let me know execution has halted, here. Grr.