Code, den du sofort einsetzen kannst
Praktische Code-Snippets aus meiner täglichen Arbeit — kopieren, verstehen, einsetzen.
Volltextsuche in SQLite mit FTS5 – schneller und besser als LIKE '%wort%
LIKE '%suchwort%' kann keinen Index nutzen und liest bei jeder Suche die ganze Tabelle. FTS5 ist in SQLite eingebaut, findet auch Wortanfänge und sortiert die Treffer nach Relevanz – ohne Elasticsearch daneben.
JSON in SQLite abfragen – json_extract und der ->>-Operator
Ein JSON-Feld in der Datenbank ist bequem, bis man danach filtern will. SQLite kann direkt hineinschauen – und mit einem Index auf dem richtigen Ausdruck ist das sogar schnell.
accent-color – Checkboxen und Regler in deiner Markenfarbe, in einer Zeile
Checkboxen und Radiobuttons waren jahrelang der Grund, warum Leute sie mit appearance: none nachgebaut haben – und dabei die Tastaturbedienung verloren. Eine einzige CSS-Eigenschaft macht das überflüssig.
Verschachteltes CSS – ganz ohne Sass, direkt im Browser
Das Feature, für das die meisten Leute überhaupt erst einen CSS-Präprozessor eingerichtet haben, kann der Browser inzwischen selbst. Kein Build-Schritt, keine Abhängigkeit – nur ein paar Regeln, die man kennen sollte.
Text nach drei Zeilen abschneiden – line-clamp statt JavaScript
Kartenlisten sehen nur dann ordentlich aus, wenn alle Vorschautexte gleich hoch sind. Das serverseitig auf 120 Zeichen zu kürzen geht schief, sobald die Karte schmaler wird – CSS kann das seit Jahren selbst.
:focus-visible – der Fokusrahmen, den nur Tastaturnutzer sehen
outline: none ist der meistkopierte und schädlichste CSS-Schnipsel überhaupt: Danach kann niemand mehr per Tastatur navigieren. :focus-visible löst genau das Problem, das man damit lösen wollte – ohne den Schaden.
grid-template-areas – ein Layout, das man im Code sehen kann
Statt Zeilen- und Spaltennummern zu zählen, malst du dein Layout als kleine ASCII-Zeichnung ins CSS. Auf dem Handy schreibst du die Zeichnung einfach anders – dieselben Bausteine, andere Anordnung, kein einziger geänderter HTML-Knoten.
requestAnimationFrame – die Animationsschleife, die zum Bildschirm passt
setInterval(schritt, 16) läuft auf einem 144-Hz-Monitor anders als auf einem alten Handy – und im Hintergrundtab einfach weiter. requestAnimationFrame löst beides, wenn man die verstrichene Zeit mitrechnet statt Bilder zu zählen.
Set und Map in JavaScript – doppelte Einträge loswerden und richtig zählen
Ein Objekt als Nachschlagetabelle geht – bis der Schlüssel eine Zahl ist, oder ein Objekt, oder zufällig "constructor" heißt. Set und Map machen genau das, wofür man Objekte bisher zweckentfremdet hat, nur ohne die Überraschungen.
ResizeObserver – auf die Größe eines Elements reagieren, nicht auf die des Fensters
window.onresize feuert nur, wenn sich das Fenster ändert – nicht, wenn eine Seitenleiste aufklappt oder Text nachlädt. ResizeObserver meldet dir die Größe des Elements selbst, und zwar ohne Endlosschleife.
In die Zwischenablage kopieren mit der Clipboard API
Ein Kopieren-Button ist eine Kleinigkeit, die Nutzer sofort bemerken – Rechnungsnummer, Gutscheincode, Link. document.execCommand ist dafür veraltet; navigator.clipboard ist der heutige Weg, braucht aber HTTPS und eine echte Nutzergeste.
localStorage richtig benutzen – JSON, Ausfallsicherheit und der volle Speicher
localStorage speichert nur Text, wirft im privaten Modus Fehler und ist irgendwann voll. Drei Zeilen Absicherung reichen, damit deine Seite deswegen nicht weiß bleibt.