Für wen
Doku als Markdown, Code behält seine Sprache
Clean Clipper liest die Sprache eines Codeblocks auf der Seite selbst – aus der Klasse am Zaun, aus dem Elternelement, aus der Auszeichnung des Highlighters – und schreibt sie in den Zaun. Auf einem technischen Korpus aus neun Seiten überlebte die Marke in 73 von 156 Zäunen, gegen 20 und 0 bei den beiden verglichenen Engines. Der Rest der Seite kommt als gewöhnliches Markdown an, ohne Seitenleiste.
Was beim Kopieren zerbricht
Dokumentation besteht überwiegend aus Code, und genau der Teil geht bei den meisten Clippern kaputt. Der Zaun landet nackt in der Notiz: In Obsidian steht dort eine graue Wand, im Repository geht der Ausschnitt ohne Hervorhebung durch das Review. Also öffnen Sie jede Notiz noch einmal und tippen js, python oder bash über jeden Zaun. Bei drei Schnipseln fällt das kaum auf, bei dreißig Seiten ist es ein Abend.
Was um den Code herum steht, kommt kein Stück besser an. Versionsauswahl, Seitenleiste und die „Auf dieser Seite“-Spalte landen mitten im Text, und eine Parametertabelle klappt in eine einzige Zeile zusammen, weil in einer Zelle ein Codebeispiel stand. Drei Monate später suchen Sie eine Option in Ihren Notizen und stoßen zuerst auf drei Kopien desselben Menüs. Die Notiz ist da, lesen lässt sie sich nicht.
Später rächt sich das ein zweites Mal. Der Ausschnitt wandert ins Team-Wiki oder in die Beschreibung eines Pull Requests und steht dort grau und ohne Hervorhebung, weil der Zaun keine Sprache trägt. Und wenn zwei Notizen dieselbe Funktion aus zwei Versionen der Referenz beschreiben, sagt keine von beiden, welche Version gemeint war: Die Versionsnummer steckt in der Adresse, und die ist beim Kopieren als Erstes verloren gegangen. Die Notiz beantwortet dann keine Frage, sondern schickt Sie zurück auf die Seite, von der sie stammt.
Was in der Notiz ankommt
- Der Zaun kommt als ```js heraus und nicht nackt – die Hervorhebung wirkt in Obsidian, VS Code und GitHub sofort beim Einfügen
- Die Sprache wird von der Seite gelesen – Klasse am Zaun, Elternelement, Auszeichnung des Highlighters – und nie aus dem Code geraten
- Eine Parametertabelle mit Code in einer Zelle behält ihre Zeilen, statt zusammenzufallen
- Verweise werden zu
[^1]-Fußnoten, deren Definitionen am Ende der Datei stehen - Seitenleiste, Versionsauswahl und „Auf dieser Seite“ werden entfernt, nicht umgewandelt
- Inline-Code bleibt Inline-Code, auch in Überschriften und in Tabellenzellen
- Die Quelladresse steht im Frontmatter – bei versionierter Doku hält sie fest, welche Version die Notiz beschreibt
- Auf einer Paketübersicht oder einer Trefferliste meldet die Erweiterung „kein Artikel“, statt dreihundert Links abzulegen
## Array.prototype.filter() Die Methode `filter()` erzeugt ein neues Array mit allen Elementen, die den Test der übergebenen Funktion bestehen. ```js const zahlen = [12, 5, 8, 130, 44]; const grosse = zahlen.filter((wert) => wert >= 10); // [12, 130, 44] ``` | Parameter | Bedeutung | | --- | --- | | `callbackFn` | wird für jedes Element aufgerufen | | `thisArg` | Wert, der als `this` dient |
Doku erfassen, Schritt für Schritt
Sechs Handgriffe, danach ist die Einrichtung erledigt und jede weitere Doku-Seite kostet einen Tastendruck. Die ersten vier stehen in den Einstellungen, die letzten beiden macht man auf der Seite selbst.
- Öffnen Sie die Einstellungen und wählen Sie unter „Zielordner“ das Verzeichnis, in dem die Doku-Notizen liegen sollen – das darf ein Ordner im Arbeitsbaum eines Projekts sein, etwa
docs/clips. Der Browser fragt einmal nach und merkt sich die Freigabe. - Setzen Sie die Namensvorlage auf
{domain}-{title}. Bei Dokumentation ist die Domain die nützlichere Hälfte des Dateinamens: Sie sagt auf einen Blick, ob der Ausschnitt aus der offiziellen Referenz oder aus einem Forenbeitrag stammt. - Stellen Sie Bilder auf „weglassen“. Abbildungen in Entwicklerdoku sind meist Diagramme, die als Link auf die fremde Website ohnehin nichts nützen, und ohne sie bleibt die Datei frei von Bildzeilen.
- Legen Sie eine Regel für die Referenz an, die Sie am häufigsten lesen: Adressmuster eintragen, Unterordner wählen. Danach landet ein Nachschlagewerk automatisch getrennt von allem anderen, ohne dass Sie beim Erfassen daran denken müssen.
- Gehen Sie auf die Doku-Seite und drücken Sie Alt+Shift+M. Brauchen Sie nur eine einzelne Funktion statt der ganzen Referenzseite, markieren Sie den Abschnitt vorher; der Schalter oben im Fenster zeigt, ob gerade die Auswahl oder die ganze Seite vor Ihnen liegt.
- Sehen Sie im Fenster die Code-Zäune durch. Steht
js,phpoderbashhinter den Backticks, hat die Seite die Sprache ausgezeichnet; steht dort nichts, hat sie es nicht getan, und Sie ergänzen es einmal von Hand, bevor die Datei geschrieben wird.
Fertige Einstellungen für Doku
Diese Werte sind auf Nachschlagen ausgelegt, nicht auf Archivieren: Datum spielt bei Referenzseiten kaum eine Rolle, die Herkunft dafür umso mehr. Wer Blogbeiträge und Referenz in denselben Ordner legt, sucht später zweimal.
| Einstellung | Wert | Warum gerade so |
|---|---|---|
| Klick auf das Symbol | Vorschaufenster | Bei Code lohnt der Blick auf die Zäune, bevor die Datei geschrieben wird |
| Namensvorlage | `{domain}-{title}` | Die Domain trennt offizielle Referenz von Forenbeitrag; ein Datum sagt bei Doku wenig aus |
| Zielordner | ein Verzeichnis im Projekt, etwa `docs/clips` | Die Notiz liegt neben dem Code, den sie erklärt, und wandert mit dem Repository mit |
| Bilder | `weglassen` | Diagramme bleiben als Link auf die fremde Website unbrauchbar und erzeugen nur Bildzeilen |
| Frontmatter | `title`, `source` | Die Adresse hält bei versionierter Doku fest, welche Version die Notiz beschreibt |
| Regel für Website | Muster `developer.mozilla.org` → Unterordner `Referenz` | Nachschlagewerke gehören nicht in denselben Ordner wie flüchtige Fundstücke |
| Tastenkürzel | `Alt+Shift+M` | Beim Lesen von Doku wechselt man ständig zwischen Editor und Browser; die Hand bleibt auf der Tastatur |
--- title: "JavaScript/Objekte/Array/filter" source: "https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Array/filter" extraction: "dom" --- ## Syntax ``` arr.filter(callback) ``` ```js const zahlen = [1, 2, 3, 42]; const grosse = zahlen.filter((n) => n > 10); ``` **Rückgabewert**: ein neues Array mit den Elementen, die den Test bestanden haben
Drei Wege durch den Tag
Eine unbekannte Bibliothek bewerten
Sie prüfen, ob eine Bibliothek ins Projekt passt, und lesen dafür Einstieg, Konfiguration und die Seite über die Grenzen. Drei Seiten, drei Mal Alt+Shift+M, drei Dateien im Unterordner Referenz – mit {domain}-{title} im Namen, also alle drei nebeneinander sortiert.
Am Abend liegt die Entscheidung im Editor statt in fünfzehn offenen Tabs. Die Codebeispiele haben ihre Sprachmarke, die Optionstabelle ihre Zeilen, und die Quelladresse in jedem Frontmatter sagt, welche Version der Doku Sie gelesen haben – die Zahl steht im Pfad der Adresse und wandert damit in die Notiz.
Einen Fehler festhalten, der aus einem Forum kam
Die Lösung für ein sperriges Problem steht nicht in der offiziellen Doku, sondern in einem Beitrag mit vierzig Antworten. Sie markieren die eine Antwort, die funktioniert, und erfassen die Auswahl: In die Datei kommt der Codeblock samt Sprachmarke, nicht der ganze Strang und nicht die Seitenleiste mit den ähnlichen Fragen.
Weil die Regel für diese Website in einen anderen Unterordner zeigt als die Referenz, ist beim späteren Nachschlagen sofort klar, dass diese Lösung von einer fremden Person stammt und nicht vom Hersteller. Das ist derselbe Unterschied, den man in einem Review begründen muss.
Einen Ausschnitt in ein README übernehmen
Im README soll ein Beispiel aus der offiziellen Referenz stehen. Sie stellen den Klick auf das Symbol für diesen einen Fall auf „Zwischenablage“, erfassen die Auswahl mit dem Beispiel und fügen sie direkt in die Datei ein, ohne dass eine Notiz gespeichert wird.
Der eingefügte Zaun kommt als ```js an und wird auf GitHub sofort hervorgehoben. Die Quelladresse holen Sie sich aus dem Frontmatter des Clips, wenn Sie darunter einen Verweis auf die Referenz setzen wollen – die Zeile steht im Fenster über dem Text.
Gegen die üblichen Wege
Die Alternativen sind nicht schlecht, sie lösen nur andere Aufgaben – und für Code lösen sie ausgerechnet den Teil nicht, auf den es ankommt. Die letzte Zeile nennt auch, was dieser Weg kostet.
| Weg | Was dabei herauskommt | Was es kostet |
|---|---|---|
| Markieren und in den Editor kopieren | Der Text kommt an, die Zäune kommen nackt, Parametertabellen fallen in eine Zeile | Sprachmarke an jedem Zaun nachtippen; die Quelladresse fehlt vollständig |
| Seite als PDF drucken | Das Aussehen bleibt erhalten, der Code wird Teil des Seitenlayouts | Nicht einfügbar, nicht versionierbar, und die Suche des Editors greift nicht hinein |
| Lesezeichen setzen | Ein Link und ein Titel | Die Seite wird mit der nächsten Version umgeschrieben, das Lesezeichen zeigt dann auf etwas anderes |
| Andere Markdown-Erweiterungen | Markdown, aber mit dem Beiwerk der Seite darin | Auf demselben technischen Korpus überlebte die Sprachmarke in 20 von 156 Zäunen, bei einer weiteren Engine in keinem einzigen |
| Clean Clipper | Markdown mit Sprachmarken, erhaltenen Tabellen und Frontmatter | Eine Seite nach der anderen, kein Stapelbetrieb; ein Zaun, den die Seite nicht auszeichnet, bleibt auch hier nackt |
Wenn etwas schiefgeht
Warum steht hinter meinen Backticks keine Sprache?
Weil die Seite selbst keine angibt. Clean Clipper liest die Klasse, die der Highlighter der Website am Zaun hinterlassen hat, und rät nicht aus dem Code – auf dem technischen Korpus trugen 73 von 156 Zäunen überhaupt eine solche Klasse. Bei den übrigen bleibt der Zaun nackt, und das ist die richtige Antwort: Eine erfundene Marke schaltet die Hervorhebung auf die falsche Sprache und ist schlechter als gar keine.
Warum meldet die Erweiterung auf der Doku-Startseite „kein Artikel“?
Weil dort keiner steht. Eine Übersichtsseite besteht fast nur aus Linkbeschriftungen, und die Erweiterung prüft das fertige Markdown: Sitzt mehr als ein Viertel davon in Links, verweigert sie den Clip. Gehen Sie eine Ebene tiefer auf die Seite mit dem eigentlichen Text, dann läuft es.
Die Doku wird per JavaScript aufgebaut – warum fehlt der halbe Inhalt?
Erfasst wird das DOM in dem Zustand, in dem es steht, wenn Sie klicken. Eine Single-Page-Doku wird deshalb korrekt erfasst, aber Registerkarten und Aufklapper, die geschlossen sind, existieren im DOM oft gar nicht. Klappen Sie den Abschnitt auf und wechseln Sie auf die Registerkarte, die Sie brauchen, bevor Sie erfassen.
Warum ist aus dem Hinweiskasten ein Zitatblock geworden?
Weil Markdown keine Standardsyntax für Hinweisboxen hat. Der Inhalt bleibt vollständig erhalten, die Auszeichnung als „Warnung“ oder „Achtung“ nicht – sie wird zu >. In Obsidian lässt sich daraus mit einer Zeile ein Callout machen, die Erweiterung entscheidet das aber nicht für Sie.
Was es nicht tut
Es rät die Sprache eines Zauns nicht, den die Seite selbst nicht auszeichnet: Wo eine Website Code ohne Klasse ausliefert, bleibt der Zaun nackt, und das ist Absicht – eine erfundene Marke kostet mehr als eine fehlende. Es läuft nicht über eine ganze Doku-Website: eine Seite nach der anderen, und zwar die, auf der Sie stehen, ohne Crawler und ohne Stapelbetrieb. Es lädt weder Diagramme noch Bildschirmfotos herunter; Bilder bleiben Links auf die ursprüngliche Website. Und auf Seiten, die der Browser schützt, etwa chrome:// und dem Erweiterungsstore, läuft es gar nicht.