Cheat sheet practical use example output
A cheatsheet here is composed rather than screenshotted. This site is the documentation for the layer that composes one, the catalog it reads from, the command line that writes one to a file, and the tool that reads a whole other site and writes cheatsheets out of it.
Nothing has to be installed to read a cheatsheet and nothing has to be
installed to draw one. The browser imports the drawing surface by relative path
with no build step, and php -S localhost:8000 is the whole local
workflow.
The four surfaces
| Surface | What it is | Start at |
|---|---|---|
| The page | A hand written HTML page that reads the catalog, composes the sheet you pick and runs the example behind it | Viewing the examples |
| The API | api/cheatsheet/, which knows what a sheet is, over
api/napkin-sketch/, which draws |
Drawing a sheet |
| The command line | tools/cheatsheet.mjs, which composes a sheet and writes it
in one of four formats |
Rendering outside the page |
| The site reader | tools/cheatsheet-site.mjs, which crawls somebody else's
site and writes a cheatsheet page per folder of it |
Generating from another site |
Where to go
- Quickstart is the essentials: see a sheet, serve the page, draw one of your own.
- Cheatsheet is the reference card - the commands, the flags, the model shapes - for someone who has read the rest.
- The three models is the public input surface: a document, a theme and a layout.
- The catalog is how a cheatsheet is stored and how the manifest the page reads is built.
What is drawn, and what is evidence
The eleven images in
javaScriptArrays/
were composed by hand, and they are reference rather than any cheatsheet's
graphic: they are what the global design language was measured off, and what a
composed sheet is aimed at reproducing. Everything the site shows a reader is
drawn in the browser from a sheet.json and the record in
DESIGN_LANGUAGE.md.
Part of the cheatsheets documentation. The repository is on GitHub, and the example page it documents is here.