Once you’ve got the command installed you can lookup PHP functions by simply opening Ubiquity (CTRL+SPACE) and typing “php [function]“. This one was pretty simple to do, but very useful already. I look up syntax for PHP functions several times a day and saving my “Google step” is really nice.

Let me know what you think.

• Document.write() method
• element.innerHTML (before element is in the DOM)
• element.innerHTML (after element is in the DOM)
• DOM manipulations on the element (before element is in the DOM)
• DOM manipulations on the element (after the element is in the DOM)

So the first thing to note is that whenever you’re faced with the question of adding/editing html before or after adding it to the DOM you should always make any changes BEFORE adding it to the DOM. The performance difference of this is pretty significant as if the element is in the DOM the browser must immediately render the changes as the edits are taking place. If you modify the html before attaching the element to the DOM, however, the updates stay only in memory and don’t get rendered until the edits are in place.

This is the single most important factor for performance in this task. In fact, the difference is often so drastic (particularly in IE browsers) that in many cases it’s actually better to remove the element from the DOM, edit the contents, and re-attach it instead of editing it directly. This also allows you to sidestep odd inconsistencies in IE with the innerHTML method (in some cases editing the innerHTML attribut7e of an object can cause a browser cache in IE – in particular when the element is a child of a table element).

Now that we know to edit contents before attaching elements to the DOM, which method should we use? In general, the order of speeds of the methods is as follows:

1. document.write() method
2. element.innerHTML attribute
3. DOM manipulations

Document.write is consistently the fastest across browsers and is often the best method to use when it’s possible. The main drawback of this method, however, is that it can only be used during initial browser load/rendering. If the method is used after the page has been initially rendered it will have the undesirable effect of either crashing the browser or clearing the current page and replacing the entire page contents with the write statement instead. This makes it unusable for adding elements after initial page load or editing the contents of an element after page load, but the pure speed/flexibility (it basically allows you to write any html to the page including inline css and javascript – though javascript tags must be written as a combined string instead a standard script tag [for example "<scr"+"ipt>"]) make it an option worth using when possible.

The next fastest method is the element.innerHTML method. This method is very readable and easy to construct quickly in general. One other suggestion is when concatenating strings to form the innerHTML use a temporary variable and apply it to the element only once. For example:
var innerHTML = "<div>";
innerHTML += "Inner Contents";
innerHTML += "</div>";
element.innerHTML = innerHTML;

This speeds up rendering (since it only has to update the DOM/render the change once) and prevents some inconsistencies when using the concatenation/assignment operators in certain browsers.

The last, and by far the slowest, method is to do direct DOM manipulations. This is a broad categorization of using methods like the following:
var element = document.createElement('DIV');
var element2 = document.createElement('DIV');
element.appendChild(element2);
This technique has many disadvantages. It renders slowly as each element is added and styled as it is appended to the DOM. Although you can improve this drastically by waiting to attach the top level element to the DOM until all the inner elements are completed, it still doesn’t compare with the previous methods described above. This code is also much harder to read (in general) than the above methods as each style, class, and attribute of the element must be assigned individually. This also leads to much larger code than the previous methods which adds to download time and parsing time. This method is really only suitable when you’re editing specific attributes or doing very minor manipulations.

And that wraps up the 5 different methods. Hopefully someone out there finds this helpful.

Once you’ve got the initial command setup you can generate a password by simply opening Ubiquity (CTRL+SPACE) and typing “password”. You can specify the site by adding it as a parameter after “password” or the command will use the current window’s location href as the default. Passwords are an 8 character hash based on the site and the “mypass” key set at install. The password will then be pasted at the current cursor location for your convenience.

Let me know what you think.

Overall I think this project is very interesting. For the techies/power users out there it provides a much more efficient way to do complex tasks. This type of UI lends itself well to the repetitive tasks that you face on a daily basis (in particular the email commands in Ubiquity are a great example of this). The real power of Ubiquity comes from its expandability though. New commands can be added by adding simple javascript functions to the addon. These additional commands can then be shared with a special link tag in a document and can even be automatically updated (if the user has given permissions for this).

I’ve taken a stab at my first Ubiquity command. You can get it here. It adds a command to add RSS feeds to Newsgator (my RSS reader of choice). Just hit CTRL+SPACE (to open Ubiquity) then execute the command “add-to-newsgator” and it’ll search the current page for an RSS feed and add it to your Newsgator account.

What do you think of Ubiquity?