W3CCheat sheet

Developer documentation of the W3C Cheat Sheet on the Web

Want to contribute to the cheat sheet’s development? Here are some notes on how the source code is organized.

See also the end user documentation.

Note that if things look more complicated than needed, sometimes they are, sometimes they're lessons of previous problems; let’s discuss it!

Main components

For efficiency reasons, a lot of the components of the cheat sheet are minified, and for maintainability, a number of others are automatically generated. This can makes it daunting to figure what are the actual pieces of code that one can contribute to.

HTML frame: index.html
This is where the static content (mobile best practices, accessibility guidelines at a glance, internationalization quicktips, typography memento) is manually maintained; this is as well obviously where the other pieces (style and scripts) get plugged in.
CSS Style sheet: style/style.css
Takes care of styling the cheat sheet, with tabs effects, sprites, etc; gets minified through YUIcompressor (in Makefile) into style/all.css (the one referred from the HTML frame)
Script: js/start.js
This scripts handles most of the logic/control of the cheatsheet, in particular for the autocompletion search box; it gets minified through YUIcompressor (in Makefile) into js/all.js, with all the generated data prepended, and the JQuery framework on which it relies.

Cheatsheet Data

The data used by the cheat sheet is first extracted from various sources into an custom XML format (that comes with a RelaxNG schema), and then turned into various pieces of JavaScript code that js/start.js relies on.

This double-step process facilitates maintenance of the data — the source of the data being in HTML, turning them directly into JSON makes it painful to update the underlying schema of the data; also, while we want to be as concise as possible in JavaScript, we can afford to be verbose in the XML data, which helps when debbuging.

Both the extraction and the transformation into JavaScript are done with XSLT, through a series of transformation stylesheets.

The extraction is done (in Makefile) with:

The generated XML files follow the rules defined in the RelaxNG schema.

Each for the extraction stylesheets relies on a variety of sources to get the data, most of the time the specifications themselves; the HTML extraction also refers to other data for linking the accessibility, internationalization and mobile techniques.

The resulting data files are turned into JavaScript data:

(the names of the data files and XSLT stylesheets could use both more consistency and less resemblance among themselves — the current names can be relatively confusing)

Coding conventions


The cheat sheet uses JQuery for simplified/cross-browsers DOM and AJAX manipulations, as well as for the following UI functionalities:

Dominique Hazaël-Massieux <dom@w3.org>
Last Modified: $Date: 2010-07-20 12:43:30 $