Cheat Sheets — Manual

Back to the overview: Cheat Sheets · Open the tool live: www.jpkc.com/tools/cheatsheet/

This manual describes the Cheat Sheets in full: how you pick a sheet, how the two searches work, what each command entry contains, how the tool is built internally, and where its limits are.

How the interface is laid out

At the top sits a controls card that sticks to the top edge as you scroll. It holds three controls side by side:

1. Cheat Sheet — the picker dropdown for one of the 219 sheets.
2. Section — a jump dropdown for the sections of the current sheet.
3. Search — the field that filters the commands of the current sheet, with a counter next to it.

Below that come a description card (one line of context for the chosen sheet) and the content area, where sections and commands are rendered as cards. With no further input, the tool loads the Git sheet by default.

A sheet's data structure

Each sheet is its own JSON file with a simple, consistent shape. To understand or rebuild a sheet, you only need these four levels:

{
	"id": "git",
	"title": "Git",
	"description": "Distributed version control system for tracking changes in source code.",
	"sections": [
		{
			"title": "Configuration",
			"commands": [
				{
					"command": "git config --global user.name \"<name>\"",
					"description": "Set your global username for all repositories.",
					"example": "git config --global user.name \"John Doe\""
				}
			]
		}
	]
}

• id — the sheet's slug, and at the same time the hash in the URL (#git).
• title and description — the display name and the single context line in the description card.
• sections[] — the thematic sections, each with a title and a list of commands.
• commands[] — per entry a command (the syntax, often with placeholders like <name>), a description, and an optional example with a real invocation.

Everything visible derives from this structure: the section cards, the Section dropdown, and the individual command lines.

The features in detail

Cheat sheet picker

The Cheat Sheet dropdown lists all 219 sheets, grouped by the 21 categories (e.g. Shells, Development, Networking). At the top of the open dropdown sits its own search field with the placeholder Search cheat sheets…: it filters the sheet list live by tool name (title and id); category headers with no match are hidden. It's fully keyboard-operable — Up/Down arrows move through the matches, Enter loads the highlighted sheet, Escape closes the dropdown. A hidden live region announces the number of available sheets to screen readers.

An important distinction: this dropdown search only searches sheet names, not their command contents. First you pick a sheet, then you search its commands with the actual command search.

Command search

The Search field (placeholder Filter commands…) filters the commands of the currently loaded sheet. The search is debounced (~200 ms) and works as a full-text substring search over an entry's entire visible text — that is, across the command, description, and example at once. Sections where no command matches are hidden entirely; if nothing matches, the No commands match your search. card appears.

To the right of the field a counter shows the state: unfiltered N commands, filtered X / N commands. An × button clears the search and restores all commands.

Section navigation

The Section dropdown is populated with the sections of the loaded sheet (the top entry reads -- All sections (N) -- with the total count). Pick a section and the page scrolls there smoothly — the offset from the sticky controls card is factored in so the section heading isn't covered.

Command display

Each section appears as a card with a heading. Inside, every entry shows:

• the command as highlighted code text,
• the description below it,
• optionally an example in its own, syntax-highlighted block.

Examples are colored via highlight.js (theme github-dark). The highlighting targets shell/Bash syntax — for examples that aren't shell commands (configuration snippets, say), the coloring is only a rough approximation.

Copy

Both the command line and each example have their own clipboard button. A click copies the exact text to the clipboard; a brief toast confirms the copy. What's copied is always the original text including placeholders like <name> — you replace those yourself after pasting.

Deep links via the URL hash

The active sheet is held in the URL hash (https://www.jpkc.com/tools/cheatsheet/#docker). The hash is updated without a new history entry on switch (replaceState), so the back button isn't cluttered with every sheet change. Open such a URL directly and the matching sheet loads immediately; if the hash is empty or invalid, the tool falls back to Git. This lets you share and bookmark any sheet.

Architecture

The page serves the full, category-grouped picker dropdown statically. The sheet contents themselves arrive on demand: on switch, the JavaScript fetches the sheet's JSON file via AJAX (data/<id>.json), stores it in an in-memory cache (so a second visit to the same sheet doesn't refetch), and renders sections and commands right in the browser. There is no server-side render logic and no account — once a sheet has loaded, everything is client-side. If a fetch fails (a network problem, say), the tool reports it via an error toast.

Limits

• No cross-sheet full-text search. The command search only acts on the currently loaded sheet; the dropdown search only matches sheet names. There's no search that scans the commands of all 219 sheets at once — you pick the tool first, then the command.
• One sheet at a time. Exactly one sheet is shown; several in parallel isn't supported.
• Lookup only, no execution. The tool is a pure reference. It runs nothing and checks nothing — the only output is the copied text.
• Placeholders stay placeholders. Copied commands contain placeholders like <url> or <name> verbatim; they aren't filled in automatically.
• Highlighting is shell-oriented. The syntax colors assume shell/Bash examples; other languages are only colored roughly.

For the introduction, the audience, and the big picture see the overview page. Concrete workflows are in the examples, and the knacks in tips & tricks. You can try all of it right in the tool.