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.

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.

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.

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

Download the latest jQuery spy

Examples

Import the plug-in, and call the code on the spy container div (assuming you've imported jQuery already).

<script type="text/javascript" src="spy.js"></script>
<script type="text/javascript">
  $(function() {
    /* returns a selection of HTML DIVs to be inserted in to 
        the #spyContainer in a spy-style */
    $('#spyContainer').spy({'ajax': '/ajax/news.php'}); 
  });
</script>
<div id="spyContainer"></div>

Working Examples

• Example spy with dummy data
• The AJAX URL being used to return the dummy data (view the source of the page)
• Source code to the HTML example
• Same example as above, except using a JSON driven spy
• Source code to the JSON example
• Real life example on Arsenal web site: Arsenal news spy

Support

• Multiple items from AJAX request and shows one at a time, reducing the load on your servers
• Custom timestamp function available upon AJAX request to control the content appearing in the spy
• Custom is duplicate function to allow better handling on JSON objects from the server

Prerequisites

You must be using the latest stable version of jQuery.

If you return JSON content, then you must provide the following:

• Method: 'json'
• Custom push function
• Custom isDupe function (if you don't want duplicates sitting next to each other)

These are explained below.

Usage

Simple Parameters

• ajax - required - the URL to server side script that will return the content
• limit - default 10 - the total number of rows to show
• fadeLast - default 5 - the number of rows to fade out, i.e. the last 5 rows
• fadeInSpeed - default 'slow' (600) - the speed, in milliseconds to use for the first row to fade in with
• timeout - default 3000 (3 seconds) - the time in milliseconds between showing a new row
• method - default to HTML - should be the AJAX response type, valid values are: HTML or JSON

For example:

$(function() {
  $('#spyContainer').spy({
      'ajax': '/jquery_spy/out.php',  // return type is HTML
      'fadeInSpeed': '1400', // crawl
      'timeout': 2000 // new item every 2 seconds
  });
});

Custom Functionality

• push - custom push on function, this must be customised if using JSON
• timestamp - custom timestamp function, defaults to return seconds from 1978.
• isDupe - custom duplicate check function. This will work if not specified for HTML, but not JSON.
• pushTimeout - control the time between individual items being pushed on to the spy stack.

Custom Push

If you don't want to return HTML to the spy, you can write your own push method.

Your custom method will have access to 'this' which is the DOM element (i.e. the contain div) and 'response' which is the response in plain text.

Here is an example using JSON:

$(function() { 
  $('#spyContainer').spy({
    'ajax': '/jquery_spy/out_json.php', 
    'push': custom_push });
});

function custom_push(response) {
  eval("var json = " + response); // convert to JSON

  // I'm being lazy here, but you get the idea:
  // Build the HTML
  var html = '<div style="display:none">'
  html += '<span class="ctr">' + json.num;
  html += '</span><span class="content">';
  html += json.string + '</span></div>';
  // Prepend the HTML inside the container
  $('#' + this.id).prepend(html);
}

See the an example JSON push in action.

Custom timestamp

Most developers have their own system for tracking the latest items, so I had this in to it's own pass in function. The example should explain the usage. The return value from the 'timestamp' value will be what is passed in to the AJAX request via the 'timestamp' posted value.

$(function() { 
  $('#spyContainer').spy({
    'limit': 25,
    'fadeLast': 3,
    'ajax': '/jquery_spy/out.php', 
    'fadeInSpeed': 'slow',
    'timeout': 3000,
    'timestamp' : myTimestamp }; 
});

function myTimestamp() {
  var d = new Date();
  // formated as yyyy-mm-dd HH:MM:ss
  return d.getFullYear() + '-' +
    pad(d.getMonth()+1) + '-' + // because month starts at zero
    pad(d.getDate()) + ' ' +
    pad(d.getHours()) + ':' +
    pad(d.getMinutes()) + ':' +
    pad(d.getSeconds());
}

function pad(n) {
  n = n.toString();
  return n.length == 1 ? '0' + n : n;
}

Custom isDupe

This function allows you compare the latest item against the last item to flag for a duplicate. This customisation really comes in to it's own if you're using JSON. If give the JSON object an ID, then you can compare the ID between the latest and the last items and chose not to show it.

Continuing in the Digg spy fashion, this spy does allow duplicates to appear in the list, but not next to each other.

If the return value is true the latest item is not shown. If the return value is false, the item is shown.

The function takes two parameters: latest item and last item.

Here's an example using JSON (assuming our JSON output object has an ID attribute):

$(function() { 
  $('#spyContainer').spy({
    'limit': 25,
    'fadeLast': 3,
    'ajax': '/jquery_spy/out_json.php', 
    'fadeInSpeed': 'slow',
    'timeout': 3000,
    'method': 'json',   // JSON output
    'isDupe': myIsDupe };
});

function myIsDupe(latest, last) {
  return !!(latest.id == last.id); // return boolean
}

Custom pushTimeout

The custom pustTimeout is particularly useful if you want to show all the items returned from the Ajax call to be pushed on to the stack straight away (rather than evenly one at a time).

The best way to do this is:

$(function () {
  $('spyContainer').spy({
    ... normal settings ...
    'pushTimeout': 1 // gives the appearance of all coming in at once
  });
});

Pause and Play Buttons

Included in the plug-in are pause: pauseSpy() and play: playSpy() functions.

These will, as the digg spy does, pause the flow of new content and start it up again. You can see these in use in the simple example

Usability

I touched on this before, but I would strongly recommend that you think about those users that will have JavaScript disabled for whatever reason. Your spy page should still work.

Here's what I would recommend:

1. Pre-populate the page. If you are going to limit to 10 items in the spy, start off with 10 items on the page.
2. Use a meta refresh in a <noscript> tag to automatically have the page reload.

Here's an example:

<script type="text/javascript">
  // the index starts at zero - so fade down all 
  // the divs after the 5th one
  $(function() { 
  $('#spyContainer > div:gt(4)').fadeEachDown(); // initial fade
  $('#spyContainer').spy({
    'limit': 8,
    'fadeLast': 3,
    'ajax': '/jquery_spy/out.php', 
    'fadeInSpeed': 1400,
    'timeout': 3500 };
  });
</script>

<noscript>
  This browser does not support JavaScript - 
  which is used to automatically update the content.
  Therefore this page will automatically refresh
  every 1 minute.
  <meta http-equiv="refresh" content="60" />
</noscript>

Bookmarklet

To use the bookmarklet, drag the link below on to your bookmark toolbar:

Microformats

Originally I had intended for the entire logic behind the Microformats overlay to be within the bookmarklet. However, it’s particularly difficult to get all the code on one line, and this more simplistic bookmarklet means upgrades will take automatic effect.

Usage

The bookmarklet has been primarily been designed for Safari, as Firefox has Tails. However, the Microformats Bookmarklet supports Safari, Firefox and IE (both 6 and 7).

Click on the bookmarklet once it has been saved, to bring up an overlay window of all the hCards and hCalendars within the current page.

To save an individual item, click on the item heading and it will automatically (if you’re using Safari) save the .vcf or .ics files and import them in to Address Book or iCal.

If you are saving your vcard or vevent in IE, it will prompt you to save an HTML file - make sure that when you save, you name it appropriately so that you can import it properly.

To close the overlay, click anywhere outside of the window (i.e. in the darkened area).

The Logic

If anyone is interested, here’s roughly what is happening behind the scenes for the bookmarklet to work:

1. Load external module: jQuery^†.
2. Load second external module: microformats.js (the main module).
3. Apply a new inline CSS styles (because IE doesn't support CSS style sheet injection).
4. Load the new HTML for the overlay.
5. Search for vCard and vCalendar classes and capture all the information according to the guidelines laid out by Microformats^††.

† Because jQuery saves so much coding time, and it’s a superb library to use.

†† The bookmarklet currently only supports hCards and hCalendars, but should be straight forward to support more formats where appropriate.

Known Issues

A lot of cross site testing took place for this bookmarklet, so I do know of a few places it doesn’t work.

I’ve seen a problem where the overlay simply doesn’t appear. I think this may be due to the site also using Prototype (since I’m using jQuery which may be conflicting). I have only seen this occur on Multipack members page.

Since hCards and hCalendars are defined using classes, a page with a lot of markup can take a number of seconds to parse all the information.

I have tried to parse all the different fields in the hCards and hCalendars, but I may have missed a few, particularly in the hCard. All sites I tested had all the information correctly imported.

If you see any other issues or have any suggestions, or just feedback, please feel free to leave a comment below.

Yes, that's right kids, you know you love that Digg spy effect. The real time news, as it rolls in, and how cool does it look? It looks pretty cool, that's how.

Now there is a plug-in for jQuery that means you can have your very own spy, for anything, with only a few lines of JavaScript^†.

† Obviously you'll need something on the server side to respond to the AJAX request, but really it's still kinda only a few lines...

Download the jQuery spy plug-in

See the jQuery spy example

Prerequisites

Okay campers, here's what you'll need to make this work:

1. A container div to hold your 'spy' - this can be pre-filled or empty
2. A server side script that returns the HTML of your spied content (article or what have you) - note that this can only be one row at a time (something I may work to upgrade)
3. A single div must wrap the content returned from the AJAX (or AJAH) - and it should contain a style attribute of 'display: none;' - this is explained in more detail later

The Examples

Import the plug-in, and call the code on the spy contain div (I'm assuming you've imported jQuery already).

Simple eh?

<script type="text/javascript" src="spy.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#spyContainer').spy({'ajax': '/ajax/news.php'})
  });
</script>
<div id="spyContainer"></div>

Here are a couple of examples of the spy in action.

• Example spy with dummy data
• The AJAX URL being used to return the dummy data (view the source of the page)
• Real life example on Arsenal-Now.com

Usage

Now you've seen the examples, I can hear some of you thinking: "that's all well and good, but what if I don't want to return the HTML, what if I want to return JSON?". No problem, use a custom push method.

Simple Parameters

All the parameters (the few that there are) are passed in via object notation (i.e. with curly brackets).

• limit - default 10 - the total number of rows to show
• fadeLast - default 5 - the number of rows to fade out, i.e. the last 5 rows
• ajax - required - the URL to server side script that will return the content
• fadeInSpeed - default 'slow' - the speed, in jQuery notation to use for the first row to fade in with (currently: crawl, xslow, slow, medium, fast, xfast, normal - though note that the pre-version 1 jQuery only currently supports slow, normal and fast)
• timeout - default 3000 - the time in milliseconds between requests for a new row

For example:

$(document).ready(function() {
  $('#spyContainer').spy(
    { 'limit': 25,
      'fadeLast': 3,
      'ajax': '/jquery_spy/out_json.php',
      'fadeInSpeed': 'slow',
      'timeout': 3000 }) // 3 seconds
});

Custom Push

If you don't want to return HTML to the spy, you can write your own push method.

Your custom method will have access to 'this' which is the DOM element (i.e. the contain div) and 'r' which is the response in plain text.

Here is an example using JSON:

$(document).ready(function() { 
  $('#spyContainer').spy(
    { 'ajax': '/jquery_spy/out_json.php', 
      'push': custom_push });
});

function custom_push(r) {
  eval("var json = " + r); // convert to JSON

  // I'm being lazy here, but you get the idea:
  // Build the HTML
  var html = '<div style="display:none">'
  html += '<span class="ctr">' + json.num;

  html += '</span><span class="content">';
  html += json.string + '</span></div>';
  // Prepend the HTML inside the container
  $('#' + this.id).prepend(html);
}

See the custom JSON push in action.

Pause & Play Buttons

Included in the plug-in are pause: pauseSpy() and play: playSpy() functions.

These will, as the digg spy does, pause the flow of new content and start it up again. You can see these in use in the simple example

Spy Detail

This section is a bunch of quick bullet points to help explain a few key points.

• Each new row should be wrapped in a single DIV with the style coded inline to 'display:none;'
• The plug-in is specifically searching for the child div elements to the container to correctly limit and fade the rows away
• The 'display: none' is required to fade the new row in properly, otherwise you might see some strange flashing effects
• The spy only supports one row at a time. If I get requests to upgrade this, I'll take a look
• The AJAX request is made using a POST
• The AJAX request is posted one variable: timestamp - note that this is not the current time, and in fact the time of the last request - so that you may grab the latest row in a database after the timestamp
• If the same content appears more than once in sequence, it is ignored, i.e. don't show the same row twice
• I have purposely tried to keep this plug-in simple and easy to use, as this is the fun nature behind jQuery (that I interpreted)

For accessibility, I would recommend loading the page you plan to use the spy on, with the limit number of rows (e.g. 10 news stories), and detect whether JavaScript is enabled. If it is not, using a noscript tag, insert a 'meta refresh' tag and display a message explaining the page will auto-refresh to offer the latest content.

If you plan to pre-load the page with the rows, you can apply the fade down effect, as shown in the code example below.

<script type="text/javascript">
  // the index starts at zero - so fade down all
  // the divs after the 5th one
  $('#spyContainer > div:gt(4)').fadeEachDown();
</script>
<noscript>

This browser does not support JavaScript - 
which is used to automatically update the content.
Therefore this page will automatically refresh every 1 minute.
<meta http-equiv="refresh" content="60" />
</noscript>

Feel free to add comments, suggestions, ask questions, point out any errors - and I will try my best to get back to you.

So, 3 years later, I've taught myself those basics, and I thought it would be worth sharing my Mac tips.

Note come disclaimer: this article isn't intended as comprehensive, just a starting point to help answer some questions you may have in your migration to your new Mac.

Symbols

Apple have different names and symbols for the keys, so here's a quick intro:

1. ctrl is called Control, and the symbol is
2. alt is called Option, and the symbol is
3. The 'apple key' is called Command (cmd), and the symbol is
4. shift is called Shift, and the symbol is
5. The backspace key is called Reset, and the symbol is
6. esc is called Escape, and the symbol is

The Operating System

Example dock with open apps

• The hash (#) is alt + 3.

  Editor's note: yeah: random, I know.

• The ticks under the icons on the dock mean the application is open.
• Finder is always open (it's what the desktop runs through for example).
• iCal's default icon is July 17th - it only changes when it's open!

Keyboard Navigation & Shortcuts

Since this article is for PC users, I'm going to keep this simple and refer to the keys in PC talk rather than Mac.

apple + tab: cycle open programs - not open windows.

apple + ` (backtick): cycle open windows within a program.

apple + shift + 3: capture the screen to a file (saved to the desktop).

apple + shift + 4: capture a selected area of the screen.

apple + down in Finder: open the selected file or folder.

apple + up in Finder: go to the parent folder.

alt + left (or right): move the cursor left or right one word at a time (add shift to select).

up and down, or apple + left and apple + right in a text field: put the cursor at the start or end of a field respectively, i.e. equivalent to the home and end PC keys.

space and shift + space in Safari or Mail (and others): page up or down respectively.

Drag & Drop

Drag and copy

By default dragging and dropping a file moves the file.

To drag and copy a file, hold the alt key down.

To create a shortcut to the file, hold down apple + alt keys.

The Problem

Any web developer, or designer that wants to offer some visual indication which page the we are on, they will probably use a combination of 'selected' and possibly 'unselected' classed on the link or tab.

The developer's task is to ensure that the right link or tab is highlighted when we are viewing the page.

The Old Solution

The way that I have solved this problem in the past (being a developer), either using Perl or PHP, would be to use a hash to track which page is selected, and when I print each link or tab, I would reference the hash with the key value of the current element name.

For example (in PHP, in Perl):

$selected = Array('articles' => ' class="selected"');

foreach ($links as $link) 
{
  echo '<a href="' . $link->href . '" ' . 
    $selected[$link->name] . '>' . 
    $link->name . '</a>';
}

my $selected = { articles => ' class="selected"'};

foreach my $link (@links)
{
  print qq{<a href="$link->{'href'}" 
    $selected->{$link->{'name'}}>$link->{'name'}</a>};
}

The New Solution

The new solution really comes about, because as a developer I really want to avoid doing the dull work, and separating the layout code from the application code is what we all really want to do.

In this solution, you create all the HTML, either through static files, or as you like, and add some JavaScript seasoning to make the the navigation automatically highlight itself.

Prerequisites

1. You are happy that when we don't have JavaScript enabled, the navigation doesn't highlight. I justify this by the simple fact as users, we're more interested in the page content, than which page link is highlighted.
2. The navigation sits cleanly in one DIV under one ID.

The Code

Notice that this is we've done away with our backend solution altogether.

<h3>Info</h3>
<ul id="sidebar_content">
  <li><a href="/info/news">News</a></li>
  <li><a href="/info/articles">Articles</a></li>
  <li><a href="/info/resources">Resources</a></li>
  <li><a href="/info/about">About</a></li>
</ul>

Now we add our dash of JavaScript spice...

function select_nav() {
  var nav_links = document.getElementById('sidebar_content').getElementsByTagName('a');
  var selected = location.pathname;

  for (var i = 0; i < nav_links.length; i++) {
    var link = nav_links[i].pathname;
    if (link.substring(0, 1) != '/') link = '/' + link; // fiddle IE's view of the link
    if (link == selected) nav_links[i].setAttribute(cattr, 'selected');
  }
}

window.onload = function() {
  select_nav();
};

...and Bob's your father's brother. The link will automatically select itself.

For those of you using jQuery, here's the same solution, but on a lot less lines (you've got hand it to those jQuery chaps):

$(function(){ if (location.pathname.substring(1))
  $('#sidebar_content a[@href$="' + location.pathname.substring(1) + '"]')
    .attr('class', 'selected')
});

Updated 25th Sep '06 - with thanks to Kevin, Fallo and Steve.

Note: the a[@href$= part is saying that any anchor tag whose "href" attribute value ends exactly with the string location.pathname.substring(1).

Feel free to add comments, suggestions, ask questions, point out any errors or suggest a better alternative.