Posted on

Optimize using dictionaries

There is a jQuery plugin for simplifying access to a select box. It’s very useful and I tried to use it in a prioject where I had to show hundreds of options at once. It worked pretty well with a few options, but as soon as those many options started to come in, performance fell down.

Let’s have a look at the implementation of the addOption function.

{[.addOption_original /enzymes/chili-js.php]}

Off Topic: The code above is a bit complex at first sight. The reason it seems complex is due to unneeded recursion, so common among jQuery developers. In fact the jQuery library itself makes use of unneeded recursion whenever possible…

Look at the snippet below the comment // loop through existing options. What’s going on here? A select box is treated like a database table where an option is a record and its value is the primary key. When an option is added to a select box, the everlasting dilemma arises: Is it an INSERT or an UPDATE?

The solution implemented here is to loop through existing options and break if a match is found between the new option value and the old ones. Sadly enough, this is the optimal (linear length) solution if you are adding just one option, but it’s the worst (quadratic length) one when you are adding many options at once.

Here is a replacement using a dictionary for storing and retrieving existing options. It’s an inner refactoring with no change on the interface, so it’s pretty simple to copy and use it in your own projects.

{[.addOption_replacement /enzymes/chili-js.php]}

The performance improvement is huge. Here are some figures I got on my PC by means of the Firebug Profiler.

  • all INSERTs: adding 1000 options to an empty select box needed 15234.375 milliseconds using the original code and 234.375 milliseconds using the replacement code, thus accounting for a 65 times improvement
  • all UPDATEs: replacing all the 1000 options of a select box needed 16578.125 milliseconds using the original code and 796.875 milliseconds using the replacement code, thus accounting for a 20 times improvement

If you want to test it by yourself here is the simple page I used:

{[.testpage /enzymes/chili-web.php]}

Posted on

How to add semantics to WordPress posts

Browsing the WordPress’ ideas repository I’ve found one that could make WordPress fill the gap between a blog tool and a knowledge base: Structured Blogging.

The fact that it got 60 votes but only 50% stars means two things:

  1. voting people are lazy thinkers
  2. it’s a difficult task at many levels

Nonetheless it’s a good idea because this is and will be for many years to come the blogging era, where millions of authors post content to the Internet. There is no good reason for that content to be unstructured except lazyness and complexity.

Nothing can be done about lazyness but complexity can be substantially reduced. The solution needs:

  • a mechanism for adding XML tags from some dictionary
  • a template system for showing XML content appropiately

On the path to something readily usable (I hope Matt will provide it in WordPress 3.0), a mechanism could be a jQuery plugin for the visual editor, and a template system could be based on Enzymes.

Autocompletion

I think that tinyMCE can be extended by plugins, but I don’t know how to. jQuery itself has an autocompletion plugin that could be used this way. When an author presses a < key, the autocompletion gets triggered and the popup … pops up 🙂

If you have ever used IME (for Japanese for example), you should know what I mean. Options are organized in a hierarchy and you get the most relevant at the top, depending on the few characters already typed. XML dictionaries could be ajaxed and locally cached; they could be plugins that you install into your blog, or be web services too; they could be international standards compliant or be completely custom.

The most-relevant-first feature of the autocompletion popup would be a big help for authors. If I already opened a Tag, then the most relevant options after pressing < could be:

  1. the closing tag for that Tag
  2. any tag that could be inside that Tag (properly sorted if needed)
  3. any root of the cached dictionaries (if possible in Tag)
  4. an option for accessing additional dictionaries (if possible in Tag)

Templates

A PHP template for properly rendering XML content is very easy to write, and Enzymes could be used in the clockwork. In fact an Enzymes feature is the possibility of easily transcluding all the content of a post or a page by means of the special char *

The XML to HTML template can be transformed in an Enzymes template with a couple of PHP instructions, thus allowing you to almost copy and paste already available templates. Then you could apply a solution like this:

  1. write a private post or page with the XML content, using the autocompletion feature described above (say this post is #123)
  2. write a public post or page with the Enzymes statement {[123.* /template.php]} in its content

The post in 1. needs to be private because you don’t want it to appear on the blog as is, and 2. makes the transformation happen. As an added benefit, you can display that semantic content inside of a greater context, and you can transclude it wherever you want in your WordPress blog (as many times as you like).