They can be little snippets of code, or more complex applications such as the Microformats or the Speech Bubble bookmarklets that entirely hijack the web page for a new function.

Here I'll share my experience writing bookmarklets and offer some tips for development.

Think BIG, code small

The majority of bookmarklets are tiny pieces of JavaScript, succinctly written for a single task. A few others will be more complicated and rely on a much larger library behind the scenes. Either way, developing your bookmarklet you will be faced with a series of limitations.

Limitations

First and foremost, if you want your bookmarklet to work in all browsers, it has to adhere to length limits:

• IE 5 - 2084 bytes
• IE 6 - 508 bytes
• IE 6 SP 2 - 488 bytes
• IE 7 - 2084 bytes
• Firefox + Safari - > 2000 bytes

IE6 has the smallest length, and that includes the javascript: pseudo protocol.

Don't quote me

Avoid the double quote character ("). Since the user is going to install your bookmarklet from a link, it will be wrapped with quotes (assuming xhtml). If you absolutely require quotes, try using the entity: %22

Optimise to be short

When you declare your variable, do it all at once. i.e.:

var ctr, doc, loc = window.location, max = 23, user = "remy";

This should be taken as far as possible. You can also consider whether you want to reuse variables to reduce the number you have to declare (watch out for inadvertently obfuscating your own code!).

Minify is your friend

Minify your code, and compare the benefit of Base62 encoding over shrinking variables. I highly recommend Dean Edwards' Packer.

If it just doesn't fit...

If you simply can't meet the length restrictions, you can load your bookmarklet externally (see below). However, if you do, make sure that you let your users see the source if they want to because your bookmarklet will have to act responsibly.

Installation

Most browsers will allow the user to drag the bookmarklet to their bookmark bar - however, IE is slightly different. To install in IE, you will need to right click on the link (that holds the bookmarklet) and add to favourites.

Play Nice

If you want your bookmarklet to interact with the existing page (rather than just redirecting off elsewhere), think about variable scope, in particular you may need to be careful not to overwrite existing variables.

Encapsulate

Rather than using void to run your bookmarklet, use the following:

javascript:(function(){ /* bookmarklet code */ })()

Then when you declare your variables, they'll be within the private scope of the anonymous function.

Style injection

If supporting IE6, and you need to apply new styles, you'll have to set them directly on the element, rather than injecting a link tag. i.e.

element.style.display = 'none';

Script Injection

Using script injection is a perfectly legitimate way to get your code to run on the page when it's longer than 488 bytes.

However, if your bookmarklet depends on external libraries (e.g. jQuery or Prototype) you need to be wary of race conditions if your code relies on these being in place first.

In this case, you need to use a test & callback/load combo as shown below in multi-script inject.

Single script injection

If you're only loading a single script that will execute or offer functionality when loaded, then the following will do fine (obviously all on one line):

javascript:(function () {
  var s=document.createElement('script');
  s.src='http://www.mysite.com/js/script.js';
  document.body.appendChild(s);
})();

There's some argument to insert the script in to the head tag. I disagree. With bookmarklets like these, we're hijacking the web page, so perfect and semantic html doesn't have such a big play. I'd like to hear other people's thought on this.

Multi-script injection

The following function is the best way I've found to inject an external script and continue once it's confirmed to have been loaded.

Note: this is the server side bookmarklet code.

function MyBookmarklet() {
  console.log('Testing whether jQuery is loaded (' + !!(typeof jQuery == 'function') + ')');

  if (waitingForScript('http://jquery.com/src/jquery-latest.js', 'jQuery')) return;

  console.log('Do some action with jQuery');
}

/**
* Only returns true when the external script has been loaded
* in to the DOM.  It uses arguments.callee.caller to work out
* which function is the callback.
*
* @param url {String} URL of external script
* @param obj {String} The name of a function or variable within
* the external script to test for.
* @license: Creative Commons License - 
*   ShareAlike http://creativecommons.org/licenses/by-sa/3.0/
* @author Remy Sharp / leftlogic.com
*/
function waitingForScript(url, obj) {
  function lateLoader(u,id,test,fn){            
    var d = document;
    if (!d.getElementById(i)) {
      var s = d.createElement('script');
      s.src = u;
      s.id = id;
      d.body.appendChild(s);
    }

    var timer = setInterval(function (){
      var ok = false;
      try {
        ok = t.call();
      } catch(e) {}

      if (ok) {
        clearInterval(timer);
        fn.call();
      }
    }, 10);
  }

  var callback = arguments.callee.caller;

  if ((typeof window[obj] == 'undefined') && !window['loading' + obj]) {
    window['loading' + obj] = true;
    lateLoader(url, '_' + obj, function () {
      return (typeof window[obj] != 'undefined');
    }, callback);
    return true;
  } else if (typeof window[obj] == 'undefined') {
    return true;
  } else {
    return false;
  }
}

Bookmarklet Examples

Some personal favourites:

• Microformats - displays Microformats on the page and allows individual download (IE, FF & Safari)
• jQueryify - loads jQuery for console debugging
• Prototypeify - loads Prototype for console debugging
• del.icio.us - bookmarks a page on del.icio.us
• Firebug - dynamically loads Firebug Lite (IE + Safari)
• Globals - dumps global variables in Firebug console (FF only)
• Wikipedia - takes a selection on the page and loads the wiki entry for it.

The feature tweaks have been entirely down to feedback in the Microformats universe by Jeremy Keith.

Here's a quick summary:

1. Using abbr to use more natural language when referencing the .fn - i.e. <abbr class="fn" title="Joe Blogs">Joe</abbr>
2. The bookmarklet will now also delve in to iframes on the page, at any depth, and so long as the browser has permission to access the content, it will pull out the hCard - as seen on the Google personalised map pages.
3. Fixed a bug, that if the notes contained breaks it may not import the hCard correctly.
4. Fixed the URL length for IE6.

Read more to add the Microformats Bookmarklet to your browser

In particular, due to some key work by Mark McLaren and some steep learning on IE + JavaScript based CSS injection, you can now use the Microformats bookmarklet in IE6 and IE7 as you would in Safari and Firefox.

The only gripe I have is that I can't specify the filename that IE prompts for and it defaults to an HTML filename - so you need to name the file appropriately. This said, I'm am looking at alternatives to this.

I've also had a chance to address a couple of bug that have been bothering me, in particular, the bookmarklet now works in the Microformat heavy site of Jeremy Keith: Overload of Microformats, as you can see below:

Here's the bookmarklet if you don't have it already:

Microformats Bookmarklet

Now you can, to any picture on the Internet - and you can share it with friends, or even start your own competition if you like.

How to install & demonstration

The following short video shows how to easily install speech bubbles, and how they work. Once you've copied the link, you can then email the speech bubbles to your friends.

Install speech bubbles

To install, in Firefox and Safari, drag the link below to your bookmarks bar. In Internet Explorer, right click and 'Add to favourites' and select 'Links'.

» Speech Bubbles «

Please note that currently, we are not storing the speech bubbles that are created. The web sites that the bubble is created on could replicate the speech bubble (by checking through their referrer logs), but with larger web sites like Flickr and Facebook it would be extremely unlikely.

There are plans in the future to allow you to save a history of speech bubbles.

Usage

The speech bubbles are very easy to use.

1. Click on the bookmarked link (from above) on the page you wish to add the speech bubble on to.
2. Move the speech bubble to the right place, by clicking and dragging.
3. Enter your text.
4. To share either click the 'copy' link and a link to the speech bubble is automatically created and copied to your clipboard - or - right click on the 'copy' link and manually copy to your clipboard.
5. To close, click the 'x'.

How does it work?

The speech bubble is broken in to two sections. The bookmarklet and the public speech bubble.

Bookmarklet

The bookmarklet firstly loads in jQuery for simplified DOM access, then loads in the speech bubble code. Once loaded it fires the creation function within the bubble code.

There are some security concerns that loading an external library could be considered a bad idea from the browsers point of view. Originally I had designed the whole bubble code as a bookmarklet, but IE being the browser it is, doesn't support long strings as locations (lending weight to the idea that browsers just aren't supposed to do this kind of stuff).

Anyone is welcome to host the bubble.js on their own server and change the link in the bookmarklet.

However, the natural upside of the file being loaded from Left Logic's servers, is that you will receive an automatic upgrade as features are extended or bugs are fixed.

Public Speech Bubble

Using the information in the URL, we load one large iframe containing the source URL, then load over the bubble, creating the effect that allows us to run our script on another web site.

Compatibility

The speech bubbles supports the latest versions of Internet Explorer, Safari, Firefox and Opera.

Internet Explorer 6 is not currently supported as it doesn't appear to load in the external scripts when required. On going testing and development will aim to include IE6 if possible.

Although your browser should automatically detect the search plugin, you can directly install the HTML character code search plugin.

The upgrades to the web front end include:

• The ability to associate your own keywords or characters to a result. This is stored in the cookie, so if you need to reset, simply clear the cookie out.
• Copy the entity to your clipboard.
• Optional output view to allow more items to appear above the fold.
• The total number of matches displayed.
• Support for the extended Latin entity block.
• Partial matching - so you can search for 'cop', or 'copy' or 'copyrig' to match the copyright symbol.
• The find and results code has been optimised to run a little faster during matches.

The dashboard widget hasn't been upgraded to support the custom keywords as yet, but it will do.

We are also looking at supporting the widget as a Yahoo! widget for PC users too - so keep an ear out.

This lookup allows you to quickly find the entity based on how it looks, e.g. like an < or the letter c.

HTML Entity Lookup

Dashboard Widget

The HTML entity lookup is also available as a Dashboard widget.

The widget works in the same way the web version does, and does not require an Internet connection to function.

Clicking on the particular row will copy the html entity code to the clipboard.

Download the dashboard Entity Lookup widget

Features

• Search for entity characters based on how they look (taken from the W3C list of entities)
• Switch between standard and compressed views
• Copy the HTML entity to the clipboard
• Add your own keyword terms and characters to entities
• Settings stored in a browser cookie
• Available to be installed as a search plugin
• Available as a Firefox plugin - thanks to Yining

To reset the keywords, clear your cookies for this page and the default keyword dictionary.

How it Works

The lookup searches the html entities for matches to the searched character based on how your character looks. For instance, the letter c would match © and ¢ entity, because of the way they look.

There's no clever logic behind this, only the most powerful computer known to man - man's own brain.

Each entity has had a list of 'like' matches added to them by hand and eye. This is stored in a local dictionary file and loaded in during start-up (since it's so small there's no point in using an AJAX like solution).

The entity lookup also supports word searches and multiple searches space separated, such as copy and cent.

Comments, feedback and suggestions are welcome.

The focus of the new design was to a) add the content that explains the services offered and show some of the recent work, and b) improve the readability of the articles section.

Other particular areas that have been upgraded include:

• New print style sheet taking advantage of the full width of the page.
• Large and normal font zoom in the header - with a touch of extra code, the logo also zooms cleanly.
• Tags on the articles.
• Comments support markdown.
• del.icio.us links that we think are noteworthy.

Finally - if you notice any problems please drop a comment here or get in contact and it will be looked in to as soon as possible.

This is particularly useful for search boxes or tagging entry boxes, though the only downfall (I think) of del.icio.us's entry box is that it can grow to become wider than the entire page width.

I've written a jQuery plugin that plugs the same functionality in to any text box - but also includes the max-width limiting functionality.

Download textGrow

Example

Search web site:

Usage

jQuery('input').textGrow({
  pad: 25, min_width: 25, max_width: 300
});

• pad: trailing padding in pixels - default 25
• min_width: minimum width of the text box in pixels
• max_width: maximum width of the text box in pixels

However, you don't need to pass the min and max width via the JavaScript, to offer even more flexibility this can be read through the CSS (and it’s legal CSS too). This will be read from the style attribute, or the class definitions in the CSS.

You can use min-width and max-width to apply specific control to text boxes, for example:

<input type="text" 
  style="min-width: 25px; max-width: 300px"
  name="s" />

How it Works

Following in del.icio.us's example, when you type in to the text input box, behind the scenes an invisible (rather than hidden) is matching the content.

The width of that DIV is read in pixels and used to style the width of the input box.

If you have any comments, bugs or suggestions please drop me a comment below.

On first inspection it doesn't resemble any typical OO language, but if you scratch a little under the surface, you'll see there's nothing really to them.

This tutorial assumes you have an understanding of Perl and have a basic grasp of object orientated programming, but want a quick step introduction to Perl objects.

Example Class

If you know a little about OO, then you'll recognise pretty much all of this code with the exception of the new function.

use strict; # strict error handling

package MyClass; # the class name

sub new
{
  # get a reference to the object
  # class from the implicit @_ variable
  my $class = shift;

  # collect the parameters passed in via a hash
  my %params = @_;

  # bind the class methods and attributes
  # to $self using bless
  my $self = {};
  bless $self, $class;

  # arbitrary start up functions - always referring
  # to $self to change the state of our object
  $self->setValue(%params{'value'} || '13');

  # return the reference to the object
  return $self;
}

# class methods
sub setValue
{
  my $self = shift; # reference to object instance
  $self->{'my_value'} = shift;
}

sub timesTen
{
  my $self = shift;
  return $self->{'my_value'} * 10;
}

Example Usage

#!/usr/local/bin/perl
use strict;

# create a new instance of 'MyClass'
my $obj = MyClass->new(value => 13);

# simple example of method execution
print $obj->timesTen();
print " ";

$obj->setValue(35);
print $obj->timesTen();
print " ";

# Output of script:
# > 130
# > 350

Conventions

There's a few conventions used by Perl OO.

1. Packages (aka class names) are written in title case with no underscores, e.g. MyReallyCoolClass. If the class resides in a sub directory, the naming conventions follow and the paths are separated by '::', e.g. GenericClasses::MyReallyCoolClass.
2. Perl uses $self as the reference that most people will know as 'this'.
3. To create a new object the call is generally: my $obj = MyClass->new(); rather than my $obj = new MyClass;

Further Reading

• Perl Objects on search.cpan.org
• Perl function list by category
• Object-oriented tutorial for perl: from the command line, type: perldoc perltoot