Category: JavaScript


Thomas and Amy apparently don’t have enough awesome stuff going on yet, so they’ve decided to release a book on JavaScript performance. Thomas tells me his findings have some implications for how we package Prototype &


Code: Disabling text selection

Inspired by Thomas’s classic and event delegation.

 *  Element.enableTextSelection(element, isEnabled)
 *  Enables or disables text selection within the given element.
 *  - element (Element): The element within which a dragging motion
 *    _should_ or _should not_ behave like text selection.
 *  - isEnabled (boolean): Whether to enable or disable text selection.
(function() {
  function _textSelectionHandler(event) {
    var element = Event.element(event);
    if (!element) return;
    for (var i = 0, node; node = IGNORED_ELEMENTS[i]; i++) {
      if (element === node || element.descendantOf(node)) {
  if (document.attachEvent)
    document.onselectstart = _textSelectionHandler.bindAsEventListener(window);    
    document.observe('mousedown', _textSelectionHandler);

    enableTextSelection: function(element, isEnabled) {
      if (isEnabled) {
        IGNORED_ELEMENTS = IGNORED_ELEMENTS.without(element);
      } else {
        if (!IGNORED_ELEMENTS.include(element))

This image “evolution” simulator would be a good benchmark for the up‐and‐coming JavaScript engines… but, sadly, Google Chrome doesn’t yet support Canvas#getImageData. Anyway, both Firefox 3.1b2 and the latest WebKit nightly do very well.


No Labs Love for Google Apps. This domain’s e‐mail account is hosted by Google Apps — and I use to read my e‐mail — so the fact that GApps seems to be branched off from all the cool Gmail features is an annoyance for me, too. Good to hear that someone’s trying to fix it.


Auto-format Tweets

Used on my “About” page.

(function() {  
  var USERNAMES = /@([A-Za-z0-9_]*)\b/;
  var URLS      = /https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w\/_\.]*(\?\S+)?)?)?/;
  function getInnerText(element) {
    element = $(element);
    return element.innerText && !window.opera ? element.innerText :
     element.innerHTML.stripScripts().unescapeHTML().replace(/[\n\r\s]+/g, ' ');
  function linkifyTweet(li) {
    var html = li.innerHTML, text = getInnerText(li);

    text.scan(URLS, function(match) {
      html = html.sub(match[0], '<a href="#{0}">#{0}');
    html = html.gsub(USERNAMES, '<a href="{1}/">#{0}');
  function init() {
    $('twitter').select('li > span.tweet').each(linkifyTweet);

  document.observe('dom:loaded', init);  

Animating the YouTube Arrow

Posted in JavaScript, Web

Whenever I drift into one of my twice‐weekly YouTube stream‐of‐consciousness video‐watching binges, I let myself be bothered by a small, inconsequential nitpick. Here’s the “Related Videos” heading in its collapsed state: And here it is in its expanded state: Though there’s no animation between these two states, I’ve always considered

Read more →