jQuery: API documentation /2

Still about improving the official documentation.
|modified content, my style – snapshot for jQuery $( String, Object )
|official content, my style – snapshot for jQuery $( String, Object )
|official content & stylesnapshot for jQuery $( String, Object )

Functionality VS function
As an example of something that needs a rewrite take the $ function, which accepts many inputs and mostly does one of two things: either selects a group of elements into a DOM (possibly all of them), or creates a group of elements from scratch.

In the official documentation these two functionalities are mixed up in the filecard with one string argument, whereas the selection functionality with a string argument is split among two filecards, depending on wether there is only one argument for the string or also a second argument for the context. In case of one argument, the functionality does not change because a default value is used for the context.

The signature of a function
A very good thing in the official documentation is the use of type declarations for functions and arguments. Javascript is loosely typed and this is just a handy trick. I think I found a problem related to how much it is used.

The name of a function cannot be adapted in the documentation to reflect its type, so a declaration like Array<Element> get() makes a lot of sense. A different approach is needed for an argument name, which certainly can get a new name in the documentation. For the sake of readers, the same pseudo types should be used as much as possible for arguments as well. In fact, if an argument can get different types without changing the functionality of the function, then it’s much better to use a generic Object type and add a comment than it is to use a more specifiic Element type just because it is the most frequent use of that argument. In the former case the reader gets a hint at a nuance to whatch out, in the latter they need to carefully read the filecard to get the nuance.

The pseudo signature of a function can be augmented also with default values for optional arguments, like other languages do. This improves the readability a bit more, because less words are needed in the documentation, as it is a visual device.

An id for each functionality
Having each functionality documented in its own filecard, a unique identifier for referencing them is then needed. For example, see also the code in 2 could be a short comment of an example in a filecard, where the reader can be made aware of watchouts related to that code. The longer see also the code in ‘jQuery $( String, Object )’ is more informative but would be harder to add in the source of jQuery and to create an hyperlink in the documentation. To implement: longer form automatically built from id

The benefits of an id for each functionality go well beyond that. When speaking or writing about jQuery functions, the use of an id could simplify the reference, though something like calling 32 from 154 causes 9 to hang should definitely be avoided, and for posterity is to be preferred something like (this purely fictitious) calling toggle (32) from oneunload (154) causes serialize (9) to hang (using Rev:123)

For a working sample, I’ve added an id attribute to the method element of the documentation XML. It’s now a decimal number, starting from 1, which I’ve assigned to the most used function of jQuery: jQuery $( String, Object ). For making straighforward the referencing in the documentation XML and hence in the js sources, you simply have to wrap a grave accent (`) around the id of a function, like see also the code in `2`. This works inside the description of a function or example, and inside the comment of an example.

XML Editors Comparison

I want to browse and edit some XML tagged content: the jQuery API documentation, a 170KB XML file. I’m not interested here in XML language features. I just want to access the content in a tree / grid view and be able to edit it without much effort.
I wandered around the Internet looking for alternatives, and here are my findings.

EditPlus 2.20
editplus1.pngI use to use EditPlus for editing text files, because it loads fast and although it is a basic script editor it has syntax coloring and many interesting features, like search and replace using regular expressions.

I found: shareware (30 USD); no entities rendering; newlines preserved; no pretty format; editing an element’s attributes and content is basic; no tree view; no grid view.

Microsoft Word 2003
microsoftword1.pngThis was just a try I gave to my preferred doc editor. I recently discovered that the HTML output is now considerably better than it was before, with a perfect rendering in Internet Explorer. So I thought that maybe I could find what I was after.

I found: shopware (229 USD); entities rendering; newlines not preserved; cristal clear pretty format (boxed tags); editing an element’s attributes is not practical (via a modal dialog box via the contextual menu); editing an element’s content is very easy; element’s block doesn’t collapse; no tree view; no grid view; structure protected.

Peter’s XML Editor
petersxmleditor1.pngpetersxmleditor2.pngThis is a free piece of software, with some of the features I need, just a bit old-looking.

I found: freeware; entities rendering (only in tree view); newlines preserved (in source and tree view); very good pretty format (bold tags); element’s block doesn’t collapse; tree view available (not related to source view); no children count; presentation of attributes and content is almost practical (both pairs the tree structure, but content is not shown until a text leaf is reached); editing an element’s attributes is not practical (via a modal dialog box via a double-click, within a fixed size layout); editing an element’s content is not practical (via a modal dialog box via a double click, but in an expandable layout); dialog boxes open slower for elements at the end of the tree; no grid view; drag and drop in the tree view is a buggy feature.

EditiX 5.0
editix1.pngThis is a professional looking shareware, with many many features, and a 30 days trial period.

I found: shareware (39 USD for home users); no entities rendering; newlines preserved; good pretty format (contextually highlighted tags); element’s block doesn’t collapse; tree view available (related to source view); children count; presentation of content limited to source view; editing an element’s attributes and content is practical; no grid view; drag and drop in the tree view is available (but something weird can happen, for example a move needs to be undone twice).

Aptana
aptana1.pngThis is a beautiful sofware for developing Javascript programs, highly configurable.

I found: opensource; no entities rendering; newlines preserved; no pretty format; element’s block collapses; tree view available (related to source view, but not from it); no children count; presentation of attributes and content limited to source view; editing an element’s attributes and content is practical; no grid view; no drag and drop in the tree view; Lexeme tooltip very annoying (cannot be disabled).

Altova XMLSpy
altovaxmlspy1.pngaltovaxmlspy2.pngThis is the new XMLSpy Editor, features packed, free to home users.

I found: shopware (399 EUR) / free to home users (licensing via register and activate); no entities rendering; newlines preserved; pretty format available; element’s block doesn’t collapse; no tree view; grid view available (related to source view; not available to home users); children count available; presentation of attributes and content is almost practical (at each level, children are rows of a grid and their attributes and contents are columns); shape of cells is almost practical (can be adapted via a button, but it’s reset to default fixed size when changing view); editing an element’s attributes and content is practical (via a double-click, within an expandable cell); drag and drop in the grid view is available.

Microsoft XML Notepad 2006
microsoftxmlnotepad1.pngmicrosoftxmlnotepad2.pngThe best for what I was after. Free, fast, functional.

I found: freeware; entities rendering; newlines preserved; no source view; tree view available; no children count (what a pity!); presentation of attributes and content is very practical (both pairs the tree structure, and content is shown a step before a text leaf is reached); editing an element’s attributes and content is very practical (via a single-click if selected, within an expandable cell); drag and drop in the tree view is available.

jQuery: API documentation /1

jQuery is pure enjoyment: you try something and it works.

But the jQuery API documentation needs improvements on interface and content.

The interface is a bit annoying, because of the drawer metaphor. The user must always open a drawer to see what’s inside and close it again to tidy up.

This problem affects both the description of a function and the alphabetical grouping of all the functions. So each function description is actually hidden inside two drawers, one for the tab of the first letter of the function name, and the other for the function itself. A bit more complicated than it should be for browsing an API documentation.

Visual jQuery is a replacement of the official interface and content. It’s based on the drawer metaphore as well, but with a twist. The user, knowing what is looking for, imagines a path of predefined categories, and opens all of their drawers to get there. It’s less weird than it seems from this description, but there is some additional problem.

The header eats up almost an half of the vertical space, and it’s not very useful.
Scrolling the page down makes the content disappear under the header.
Any drawer appears at the top, so after opening a drawer at the bottom the user must scroll the page up to see its content.

Simple Style

I’ve just made yet another replacement of the jQuery API documentation.

It’s based on a two columns layout hosting a list of links on the left and the linked content on the right: basic web metaphor.

It’s still far from completion. This is a partial list of what must be done.

  1. add alphabetical positioning for the links on the left; should be something similar to the original alphabetical tabs, just not tabs: clicking on a letter would cause the left pane to scroll
  2. make the functionality the main concept of the documentation and separate functionalities from functions, each in its own filing card: for example, “$( expr )” has now two different functionalities, so they should be represented by two separate filing cards;
  3. add a unique and persistent ID number to each functionality, so that they can be referenced from inside the documentation, and in the wild by means of a an URL ending with this ID; it would appear where now is a #
  4. check the description of any argument; should be very focused about what the function expects, how it’s related to the functionality
  5. add keywords to highlight documentation wide aspects; it would appear where now is the category; should be a comma separated list, with a fixed precedence
  6. check the description, and edit it thinking about the functionality, being very specific on what gets changed and what is returned
  7. find better and useful examples, always involving a DOM context that can be expressed by HTML markup, both in the Before and After sections.
  8. add a comment to a solution, relating it to “synonyms and antonyms”-like solutions
  9. developed at 1024×768 screen resolution using IE6: check others
  10. template adapted to CSS from one generated by Microsoft Word: refine