A few users reported that Chrome choked on the bookmarklet. I found that the bookmarklet builder does not produce the output that Chrome expects. I was using Chrome 15.0.874.54 beta.

For example, take this simple script.

(function () {
  // what is 1+1?
  alert(["1+1=",(1+1)].join(''));
})()

Gruber’s script produces this bookmarklet: Example 1

javascript:(function%20()%20{alert([%221+1=%22,(1+1)].join(%27%27));})()

If you drag this example to your bookmark bar in Chrome, it will produce this error when invoked.

Uncaught SyntaxError: Unexpected token %

What happened? If you edit the bookmark, you will see that Chrome double-escaped the string,

javascript:(function%2520()%2520%7Balert(%5B%25221+1=%2522,(1+1)%5D.join(%2527%2527));%7D)()

I believe this happened because the string contained some non-escaped characters such as parentheses.

Gruber points out in a footnote that his script intentionally leaves some characters unescaped for the purpose of readability.

It’s unclear to me what characters must be escaped in a bookmarklet URL. Some sources suggest that other punctuation characters, such as brackets and semicolons, ought to be escaped, too, but I can see no practical reason to do so. If you want to be really conservative and escape just about everything, change this line:

uri_escape_utf8($bookmarklet, qq('" \x00-\x1f\x7f-\xff));

to:

uri_escape_utf8($bookmarklet);

Personally, I prefer to keep the bookmarklet URL itself as readable as possible.

With this change, we get this bookmarklet: Example 2

javascript:%28function%20%28%29%20%7Balert%28%5B%221%2B1%3D%22%2C%281%2B1%29%5D.join%28%27%27%29%29%3B%7D%29%28%29

It may not be as readable as “Example 1″, but it works.

Find my modifications to Gruber’s JavaScript Bookmarklet Builder on GitHub

Here are some quick examples to get you started.

Ringo

    #!/usr/bin/env ringo
    print("ringo");

Narwhal

    #!/usr/bin/env narwhal
    print("narwhal");

Node

    #!/usr/bin/env node
    require("sys").print("node\n");

JavaScriptCore

    #!/usr/bin/env jsc
    print("jsc");

JavaScriptCore nightly added support for shebangs on 6 December 2010.

Since Node and JavaScriptCore are binaries, you can use the full path instead of env.

Anonymous closure module pattern

My example module will be implemented as an anonymous closure. It will have one public class and a private member.

    (function () {
      var PublicClass = function () {};
      var PrivateMember = new Object();
    })();

I will incrementally add support for each environment by detecting whether that environment is present.

Web browsers

Web browsers do not support importing into a local namespace, so I simply add PublicClass to the global window namespace.

    (function () {
      var PublicClass = function () {};
      var PrivateMember = new Object();

      if (typeof(window) !== 'undefined') {
        // browser
        window.PublicClass = PublicClass;
      }
    })();

Client must first include the module with a script HTML tag.

    <script type="text/javascript" src="sample-module.js"></script>
    <script type="text/javascript">
      var instance = new PublicClass();
    </script>

CommonJS

CommonJS is a pattern implemented by some server-side JavaScript engines such as Node and Narwhal. In this model, a module assigns its public interface to a special exports object.

    (function () {
      var PublicClass = function () {};
      var PrivateMember = new Object();

      if (typeof(window) !== 'undefined') {
        // browser
        window.PublicClass = PublicClass;
      } else if (typeof(exports) !== 'undefined') {
        // commonjs
        exports.PublicClass = PublicClass;
      }
    })();

Clients require the module, which returns the module’s exports.

    var PublicClass = require('./sample-module').PublicClass;
    var instance = new PublicClass();

JavaScriptCore

JavaScriptCore (or “jsc”) does not follow the CommonJS pattern. Instead, when a file is included with the load function, the last value in the file is returned to the caller.

I return an object literal from the anonymous function which simulates the exports object in CommonJS. Since the anonymous function is executed as the last statement in the file, the exports are returned to the client. This case doesn’t rely on any special variable such as window or exports, so I will make it default rather than detecting the JavaScriptCore environment.

    (function () {
      var PublicClass = function () {};
      var PrivateMember = new Object();

      if (typeof(window) !== 'undefined') {
        // browser
        window.PublicClass = PublicClass;
      } else if (typeof(exports) !== 'undefined') {
        // commonjs
        exports.PublicClass = PublicClass;
      } else {
        // jsc (default)
        return {
          "PublicClass": PublicClass
        };
      }
    })();

Clients load the module, which returns the module’s exports.

    var PublicClass = load('sample-module.js').PublicClass;
    var instance = new PublicClass();

Why not use a global variable?

There is another JavaScript module pattern that declares a global variable to contain the module’s public interface, as in this example.

    var PublicClass = (function () {
      var PublicClass = function () {};
      var PrivateMember = new Object();
      return PublicClass;
    })();

This pattern will work perfectly in web browsers and JavaScriptCore, but it also pollutes JavaScriptCore’s global namespace. Since JavaScriptCore supports local imports, global variables should be avoided. Furthermore, this pattern does not support multiple public interfaces, e.g., a single anonymous closure that exports two public classes.

Example: GraphJS

GraphJS is a JavaScript module of mine that uses the module deployment pattern I described. It works with Node, Narwhal, Ringo, JSC, and in web browsers.

There are, of course, readily available implementations of OAuth in python, even some specifically engineered for App Engine with lovely persistence and caching and KILL ME NOW.

I gave up after a couple hours of staring at this nonsense. I grew so displeased because my app doesn’t need 95% of what these libraries offer. I only need to sign requests with a fixed oauth_consumer_key, oauth_consumer_secret, oauth_token, and oauth_token_secret. However, this simple task would require me to subclass or instantiate several object with Culver’s library, and I can’t even begin to fathom what I’d need to do with Knapp’s offering.

(Aside: if you want to authorize and build access tokens for your app, I highly recommend this excellent OAuth test client)

I finally teased apart the core function of signing requests, thanks in large part to the great reference example. If all you need is to access a protected resource, this will get the job done with a single function call, no object-orientation required.

Source code and unit test of short and sweet OAuth.

This is fine unless you really want to friggin’ strip out the tags, like I needed for Emend. The following is my solution.

Source code for stripping tags with html5lib and unit test.

For example,

>>> from strip_tags import strip_tags
>>> strip_tags('<p>foo</p> <script>bar</script>')
u'foo bar'

Thanks go to Edward O’Connor for pointing me towards html5lib in the first place. It’s a huge improvement over HTMLParser.

I present the IPA (International Phonetic Alphabet) TTS (text-to-speech) bookmarklet. (Source)

Bookmarklet: IPA TTS (drag to your bookmark bar)

How to use: select any text that contains IPA and click on the bookmarklet. Wait a second for the iframe at the bottom of the page to load.

Try these examples: /ˌɪntəˈnæʃnəl/, /ˌɪntɚˈnæʃnəl/

How does this work?

The bookmark creates a POST request to the AT&T Natural Voices® Text-to-Speech Demo with the IPA text in SSML. The AT&T demo has modest support for IPA, but often fails. If you know of another IPA TTS engine, please let me know or fork the bookmarklet and add it.

The solution is simple and intuitive: eliminate unassociated submit inputs and submit buttons.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/DTD/strict.dtd">
<input type="text"/>
<input type="submit" onclick="this.value='clicked';" />

Demo (IE only)

John Resig’s jQuery uses a standard technique of anonymous function closures to namespace its internal functionality.

(function(){
  // jQuery stuff goes here...
})();

This is all well and good until you want to inline this code under some of your application code, as I did while working on Eventful’s MySpace application. Consider this example, written in standard Javascript style.

var foo = function(bar) {
  console.log("foo");
  return bar;
}

(function(){
  console.log("bar")
})();

What do you expect this code to print? If you say “bar”, you’re wrong. It prints “foo bar” because in this context the anonymous function closure becomes a call to the function that prints “foo” and returns the function that prints “bar”, which is then called.

Most of us probably wouldn’t notice what just happened because we are so used to Javascript interpreters automatically inserting semicolons after function definitions.

The danger is assuming, as John Resig and hundreds others have, that your anonymous function closure is the first token in a new line. In my case, it wasn’t. The solution? Either start meticulously sprinkling semicolons in your application code, or just add a single semicolon before your parenthetical block, guaranteeing it’s the first token in the line.

;(function(){
  // jQuery stuff goes here...
})();