ActionScript’s ExternalInterface is a powerful tool, allowing you to execute and retrieve results from JavaScript in the browser.

Recently however, a strange bug was encountered where Flash running in one part of a page was exhibiting strange rendering issues, such as pieces of the background failing to draw, and Sprites flickering when ExternalInterface calls were made. To make things even more puzzling, the Flash exhibiting the rendering issues was not the one making the calls.

At first it seemed the issue was caused by css, as it only appeared when adding DOM nodes to a parent node styled overflow: auto. After further investigation, it was found found that manipulating the DOM within the ExternalInterface callback was the culprit.

In order to prevent the flickering, it was necessary to decouple the ExternalInterface call from the DOM work. The fix itself was simple.

var client = new Client();
function notifyClient() {
  var arg = arguments[0];
  setTimeout(function() { client.notify(arg); }, 0);
}

Notice how a local is explicitly created to lift out the first argument passed to the JavaScript function instead of using a named argument. In some browsers it was found that named locals were not threaded through to the client.

Using setTimeout with a delay of 0 simply schedules the provided anonymous function to be executed as soon as the singly-threaded JavaScript interpreter is available.

Whenever the result of an ExternalInterface call is not needed for consumption by ActionScript, consider using setTimeout to decouple the work performed by each component.

I really like Ruby, and I really like how the Prototype library makes javascript more Ruby-like. Ruby’s Hash provides a number of convenient methods that Prototype doesn’t ship with. Here is a small extension that borrows a little from Ruby.

Hash.prototype = Object.extend(Hash.prototype, {
  hasKey: function(key) {
    return this._object.hasOwnProperty(key);
  },
  fetch: function(key, fallback) {
    return (this.hasKey(key) ? this.get(key) : fallback);
  },
  getWithDefault: function(key, fn) {
    return (this.hasKey(key) ? this.get(key) : this.set(key, fn()));
  },
  getOrSet: function(key, val) {
    return (this.hasKey(key) ? this.get(key) : this.set(key, val));
  }
});

First, it should be simple to check for the existence of a key in a Hash, whether or not that key contains a falsy value. Since Prototype 1.6, a Hash’s inner object is stored independently of the Hash objects real keys, such as its methods, so the hasKey implementation will only work with Prototype 1.6.

Next up is fetch, which behaves the same as Ruby’s fetch, returning the value present in the Hash for the provided key if a value exists, and providing your supplied alternative otherwise.

getOrSet does essentially the same thing, but adds the alternative value to the Hash if no value was previously present.

Finally, getWithDefault takes a functional 2nd argument which is invoked only if the provided key is not present in the Hash, which is useful for memoizing expensive work.

Array.prototype.binarySearch = function(find, comparator) {
  var low = 0, high = this.length - 1,
      i, comparison;
  while (low <= high) {
    i = Math.floor((low + high) / 2);
    comparison = comparator(this[i], find);
    if (comparison < 0) { low = i + 1; continue; };
    if (comparison > 0) { high = i - 1; continue; };
    return i;
  }
  return null;
};

Extending Array with this binarySearch method allows you to re-use the functional arguments to passed to sort to generate the sorted array in the first place.

def with_cwd dir
  original_dir = Dir.pwd
  begin
    Dir.chdir dir
    yield
  ensure
    Dir.chdir original_dir
  end
end

When working remotely from the product stakeholders, its important to be able to iterate rapidly over designs, and to capture evidence of, and reproduce tricky bugs.

A great way to do this is by sharing screenshots, and the best tool for quickly sharing screenshots on Mac is GrabUp.

The tool is implemented as a Preference Pane and monitors for screenshots. When a screenshot is taken (using ⌘ ⇧ 3 for full-screen screenshots, ⌘ ⇧ 4 for regional screenshots, and ⌘ ⇧ 4, space for single-window screenshots) the image is automatically uploaded either to GrabUp’s servers, or to your own FTP server*, and the URL to access the image is placed on your system’s clipboard for pasting.

The free version of GrabUp provides a URL which looks like a PNG, but is actually an ordinary web-page containing your image. Pasting these links in Campfire leaves empty rows, so either upgrade to the Pro version which doesn’t have this problem, or remove the “http://” from the beginning of the link before you send it.