Cheat Sheets — Manual

Zurück zur Übersicht: Cheat Sheets · Tool live öffnen: www.jpkc.com/tools/cheatsheet/

Dieses Manual beschreibt die Cheat Sheets vollständig: wie du ein Sheet auswählst, wie die beiden Suchen funktionieren, was jeder Befehlseintrag enthält, wie das Tool intern aufgebaut ist und wo seine Grenzen liegen. Die Oberfläche des Tools ist auf Englisch — die Bedienelemente werden hier deshalb in ihrer englischen Original-Schreibweise genannt (mit deutscher Erläuterung), damit du dich im echten Interface zurechtfindest.

Aufbau der Oberfläche

Oben sitzt eine Steuerungs-Karte, die beim Scrollen am oberen Rand kleben bleibt (sticky). Sie enthält drei Bedienelemente nebeneinander:

Cheat Sheet — das Auswahl-Dropdown für eines der 219 Sheets.
Section — ein Sprung-Dropdown zu den Abschnitten des aktuellen Sheets.
Search — das Suchfeld zum Filtern der Befehle im aktuellen Sheet, daneben ein Zähler.

Darunter folgen eine Beschreibungs-Karte (eine Zeile Kontext zum gewählten Sheet) und der Inhaltsbereich, in dem die Abschnitte und Befehle als Karten gerendert werden. Beim Aufruf ohne weitere Angabe lädt das Tool das Git-Sheet als Standard.

Datenstruktur eines Sheets

Jedes Sheet ist eine eigene JSON-Datei mit einem einfachen, durchgängigen Aufbau. Wer eigene Sheets verstehen oder nachbauen will, braucht nur diese vier Ebenen:

{
	"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 — der Slug des Sheets, zugleich der Hash in der URL (#git).
title und description — Anzeigename und die eine Kontextzeile in der Beschreibungs-Karte.
sections[] — die thematischen Abschnitte, jeder mit title und einer Liste commands.
commands[] — pro Eintrag ein command (die Syntax, oft mit Platzhaltern wie <name>), eine description und ein optionales example mit einem realen Aufruf.

Aus dieser Struktur ergibt sich alles Sichtbare: die Abschnittskarten, das Section-Dropdown und die einzelnen Befehlszeilen.

Funktionen im Detail

Cheat-Sheet-Auswahl

Das Cheat Sheet-Dropdown listet alle 219 Sheets, gruppiert nach den 21 Kategorien (z. B. Shells, Development, Networking). Oben im geöffneten Dropdown sitzt ein eigenes Suchfeld mit dem Platzhalter Search cheat sheets…: Es filtert die Sheet-Liste live nach Tool-Name (Titel und id); Kategorie-Überschriften ohne Treffer werden ausgeblendet. Die Bedienung ist voll tastaturfähig — Pfeil hoch/runter wandert durch die Treffer, Enter lädt das markierte Sheet, Escape schließt das Dropdown. Eine unsichtbare Live-Region meldet Screenreadern die Zahl der verfügbaren Sheets.

Wichtig zur Abgrenzung: Diese Dropdown-Suche durchsucht nur die Sheet-Namen, nicht deren Befehlsinhalte. Erst wählst du ein Sheet, dann durchsuchst du dessen Befehle mit der eigentlichen Befehls-Suche.

Befehls-Suche

Das Search-Feld (Platzhalter Filter commands…) filtert die Befehle des aktuell geladenen Sheets. Die Suche ist entprellt (Debounce ~200 ms) und arbeitet als Volltext-Teilstring-Suche über den gesamten sichtbaren Text eines Eintrags — also über Befehl, Beschreibung und Beispiel zugleich. Abschnitte, in denen kein Befehl mehr passt, werden komplett ausgeblendet; passt gar nichts, erscheint die Karte No commands match your search.

Rechts neben dem Feld zeigt ein Zähler den Stand: ungefiltert N commands, gefiltert X / N commands. Ein ×-Button leert die Suche und stellt alle Befehle wieder her.

Das Section-Dropdown wird mit den Abschnitten des geladenen Sheets gefüllt (oben steht -- All sections (N) -- mit der Gesamtzahl). Wählst du einen Abschnitt, scrollt die Seite weich dorthin — der Versatz durch die sticky Steuerungs-Karte wird dabei eingerechnet, sodass die Abschnittsüberschrift nicht verdeckt wird.

Anzeige der Befehle

Jeder Abschnitt erscheint als Karte mit Überschrift. Darin steht pro Eintrag:

der Befehl als hervorgehobener code-Text,
die Beschreibung darunter,
optional ein Beispiel in einem eigenen, syntaxhervorgehobenen Block.

Die Beispiele werden über highlight.js eingefärbt (Theme github-dark). Das Highlighting ist auf Shell-/Bash-Syntax ausgelegt — bei Beispielen, die keine Shell-Befehle sind (etwa Konfigurations-Snippets), ist die Einfärbung daher nur eine grobe Annäherung.

Kopieren

Sowohl die Befehlszeile als auch jedes Beispiel haben einen eigenen Clipboard-Button. Ein Klick kopiert den exakten Text in die Zwischenablage; eine kurze Rückmeldung (Toast) bestätigt den Kopiervorgang. Kopiert wird immer der Originaltext inklusive Platzhaltern wie <name> — die musst du nach dem Einfügen selbst ersetzen.

Deep-Links per URL-Hash

Das aktive Sheet steht im URL-Hash (https://www.jpkc.com/tools/cheatsheet/#docker). Der Hash wird beim Wechsel ohne neuen History-Eintrag aktualisiert (replaceState), sodass der Zurück-Button nicht mit jedem Sheet-Wechsel zugemüllt wird. Rufst du eine solche URL direkt auf, lädt das passende Sheet sofort; ist der Hash leer oder ungültig, fällt das Tool auf Git zurück. Damit lässt sich jedes Sheet teilen und bookmarken.

Architektur

Die Seite liefert das vollständige, nach Kategorien gruppierte Auswahl-Dropdown statisch aus. Die Sheet-Inhalte selbst kommen erst on demand: Beim Wechsel holt das JavaScript die JSON-Datei des Sheets per AJAX (data/<id>.json), legt sie in einem In-Memory-Cache ab (ein zweiter Aufruf desselben Sheets lädt also nicht erneut) und rendert Abschnitte und Befehle direkt im Browser. Es gibt keine serverseitige Render-Logik und keinen Account — nach dem Laden eines Sheets ist alles clientseitig. Scheitert ein Abruf (etwa bei Netzwerkproblemen), meldet das Tool das per Fehler-Toast.

Grenzen

Keine sheetübergreifende Volltextsuche. Die Befehls-Suche wirkt nur im gerade geladenen Sheet; die Dropdown-Suche trifft nur Sheet-Namen. Es gibt keine Suche, die zugleich über die Befehle aller 219 Sheets fahndet — du wählst erst das Tool, dann den Befehl.
Ein Sheet zur Zeit. Es wird immer genau ein Sheet angezeigt; mehrere parallel sind nicht vorgesehen.
Nur Nachschlagen, kein Ausführen. Das Tool ist eine reine Referenz. Es führt nichts aus und prüft nichts — die einzige Ausgabe ist der kopierte Text.
Platzhalter bleiben Platzhalter. Kopierte Befehle enthalten Platzhalter wie <url> oder <name> wörtlich; sie werden nicht automatisch ausgefüllt.
Highlighting ist Shell-orientiert. Die Syntaxfarben gehen von Shell-/Bash-Beispielen aus; andere Sprachen werden nur grob eingefärbt.

Für den Einstieg, die Zielgruppen und das große Bild siehe die Übersichtsseite. Konkrete Abläufe zeigen die Beispiele, Kniffe die Tipps & Tricks. Ausprobieren kannst du alles direkt im Tool.