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 searching works within one sheet and across all of them, 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 titled "Cheat Sheets". From a window width of 768 pixels it sticks to the top edge as you scroll; on narrower screens the mobile mini bar takes over that job. The card holds three controls:

1. Cheat Sheet — the picker dropdown for one of the 220 sheets.
2. Section — a jump dropdown for the sections of the current sheet.
3. Search — the field that filters the commands, with the × button and a counter next to it. Below it sit the Search all cheat sheets switch and the hint All words must match · "exact phrase".

Below the card come — only while the search across all sheets is on — the Results in all cheat sheets card, then 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, which is also the file name (data/git.json) and the hash in the URL (#git).
• title and description — the display name (the same as the label in the picker menu) and the single context line in the description card.
• sections[] — the thematic sections, each with a title and a list of commands. The section title is what the anchor for deep links is built from.
• 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, the individual command lines, and the search hits. Together, the 220 sheets hold roughly 9,150 commands.

The features in detail

Cheat sheet picker

The Cheat Sheet dropdown lists all 220 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 the menu label and the sheet's id. Several words narrow it down further — each one has to match; category headers with no match are hidden.

It's fully keyboard-operable: Up/Down arrows move through the matches (wrapping around at the end), Enter loads the highlighted sheet — or the first match if nothing is highlighted — and Escape closes the dropdown. Clicking an entry loads the sheet just the same, clears the menu search, and takes you back to the top of the page. For screen readers, a hidden live region announces the number of matching sheets (N cheat sheets available), and the highlighted entry is tied to the search field via aria-activedescendant.

An important distinction: this dropdown search only searches sheet names, not their command contents. Commands are found with the command search in the loaded sheet or with the search across all sheets.

Command search

The Search field (placeholder Filter commands… (press /)) filters the commands of the currently loaded sheet. It reacts after a short pause in typing (150 ms debounce) and follows three rules:

• Every word has to match. The input is split into words at spaces; a command only counts as a hit if each word appears somewhere in its command, description, or example. Word order doesn't matter, and neither does case. Each word is matched as a substring — so rev also finds revert.
• Phrases in quotes stay together: "dry run" only hits entries containing exactly that sequence of words, whereas dry run without quotes also finds --dry-run.
• Matches are highlighted — in the command line and the description, not in the syntax-highlighted example.

There's no OR, no regular expressions, and no fuzzy matching. Sections in which no command matches any more are hidden entirely. If nothing in the whole sheet matches, the card No commands in this cheat sheet match your search. appears, with a Search all cheat sheets button that widens the same query to every sheet.

To the right of the field a counter shows the state: unfiltered N commands, filtered X / N commands (on narrow screens as a badge below the field). The × button (Clear search (Esc)) clears the search and puts the cursor back in the field. Two keyboard shortcuts save you trips:

• / jumps into the search field from anywhere on the page and selects its contents — unless you're currently typing in another input field.
• Esc in the search field clears an active search.

Switching to another sheet clears the command search — unless the search across all sheets is switched on.

Search across all sheets

The Search all cheat sheets switch below the search field widens the search to the commands of all 220 sheets. The same rules apply as for the command search (all words, phrases, highlighting). Above the description card, the Results in all cheat sheets card then appears:

• Empty search field: the status reads Type to search all 220 cheat sheets.
• First search: the tool fetches every sheet file that isn't in memory yet — six at a time, with progress in the status (Loading cheat sheets… x / y). Compressed, that's roughly 400 KB. After that the data stays in memory for the rest of your visit, and every further search is instant. If individual sheets fail to load, a notice warns that the results may be incomplete.
• Result list: hits where every search word already appears in the command line come first, followed by the rest, which only match fully once the description or example is included. Within each of the two blocks the order of the picker menu applies, and a new group with a sheet heading starts whenever the sheet changes. A sheet with both kinds of hits therefore shows up twice. Each row shows the command with highlighting and its own copy button, and below it the description and the section name.
• Scope: the status gives the total, e.g. 11 commands in 5 sheets. At most 150 hits are shown; beyond that the status adds — showing the first 150, refine your search. With no hits it reports No command in any cheat sheet matches.

From the result list you jump straight into a sheet: clicking the sheet name opens the sheet and keeps your query as its filter; clicking the section name opens the sheet right at that section, without a filter. Either way, the search across all sheets switches off and the results card disappears.

While the switch is on, the same input also filters the sheet shown below; the "no matches in this sheet" card stays hidden in the meantime.

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 or the mobile mini bar is factored in so the section heading isn't covered. At the same time the tool writes the section into the URL (#git/branching) without creating a new history entry.

Command display

Each section appears as a card with a heading; on the right of the header sits a link button that copies the URL of that section (see deep links). Inside, every entry shows:

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

Placeholders like <file>, <commit>, or <commit message> are set off in orange italics in the command line, so you can see what to replace before running it. This only applies to shell commands: in Apache or nginx configuration, <VirtualHost …> is syntax, not a placeholder, and stays unmarked. The example blocks usually come with real values already filled in.

Examples are colored via highlight.js (theme github-dark). The tool picks the language per sheet or per snippet:

In those other sheets, examples that are really YAML, SQL, or JSON get shell coloring too — there the highlighting is only an approximation.

Copy

The command line (Copy command) and each example (Copy example) have their own clipboard button; every row in the all-sheets result list has one as well. 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. The search highlighting isn't copied along.

Deep links via the URL hash

The active sheet is held in the URL hash (https://www.jpkc.com/tools/cheatsheet/#docker), and a section follows after a slash (#git/undoing-changes). The tool builds the section anchor from its title: lowercase, & becomes and, every other special character and space becomes a hyphen — "Staging & Commits" turns into staging-and-commits. If a title appears twice in the same sheet, the second one gets a -2 suffix.

• Switching sheets (via the menu or the result list) creates a new history entry. The browser's back button therefore takes you to the sheet you had open before.
• Picking a section (via the Section dropdown or the link button) only replaces the current entry and doesn't fill up your history.
• The link button in a section header writes the section URL into the address bar and copies it at the same time (Link to section copied!).

Open such a URL directly and the matching sheet loads right away and scrolls to the section. If the sheet part is empty or unknown, the tool falls back to Git; an unknown section is ignored, and the sheet loads without jumping. That lets you share and bookmark any sheet and any section.

Mobile mini bar

Below 768 pixels wide, the controls card scrolls away with the page. As soon as it's out of view, a slim, fixed mini bar slides in at the top:

• Sheet button showing the current sheet's name — scrolls to the top and opens the picker menu,
• section picker (Jump to section) — jumps straight to the chosen section,
• magnifier (Search) — scrolls to the top and puts the cursor in the search field.

Architecture

The page serves the full, category-grouped picker menu statically. The sheet contents themselves arrive on demand: on switch, the JavaScript fetches the sheet's JSON file via fetch (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 — strictly as text, never as HTML taken from the data. The search across all sheets uses the same cache: it fetches the missing files and searches them locally. While loading, the content area shows Loading…; if a fetch fails, an error toast reports Failed to load cheat sheet: ….

There is no server-side logic, no API, no rate limit, and no account. The tool stores nothing — neither search terms nor the last sheet you opened; the cache only lives as long as the page is open. The URL alone carries the state.

Limits

• No fuzzy matching, no OR. The search requires every word (as a substring); it won't find typos, synonyms, or alternatives. If a term matches too much, a quoted phrase helps.
• At most 150 hits across all sheets. Generic terms return more; the status gives the full count, but the list shows only the first 150. Add another word to narrow it down.
• The first search across all sheets fetches data. The first time, every sheet file not yet loaded comes over the wire; on a slow connection that takes a moment.
• One sheet at a time. Exactly one sheet is shown in full; the search across all sheets shows hits from many, but not several sheets side by side.
• 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 only for the recognized languages. Dedicated grammars exist for Apache, nginx, and PowerShell; HTTP Status Codes, MIME Types, and Regex Reference stay plain, uncolored text, and everything else is colored as shell, YAML, SQL, and JSON examples included.

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.