Code, den du sofort einsetzen kannst
Praktische Code-Snippets aus meiner täglichen Arbeit — kopieren, verstehen, einsetzen.
Throttle in Vanilla JavaScript – höchstens alle X Millisekunden feuern
Beim Scrollen oder bei Mausbewegung feuern Events dutzendfach pro Sekunde. Mit Throttle begrenzt du das auf einen Aufruf alle X Millisekunden – der Bruder von Debounce, aber fürs Dauerfeuer.
Tiefe Kopien in JavaScript mit structuredClone
Ein Spread `{...obj}` kopiert nur die oberste Ebene – verschachtelte Objekte teilen sich weiter denselben Speicher. structuredClone macht eine echte tiefe Kopie, eingebaut und ohne JSON-Umweg.
Zahlen, Währung und Datum formatieren mit Intl
1234.5 als „1.234,50 €" anzeigen? Mit dem eingebauten Intl-Objekt formatierst du Zahlen, Währungen und Datum korrekt für jede Sprache – ohne Bibliothek und ohne selbstgebaute Punkt-Komma-Logik.
fetch() abbrechen und mit Timeout absichern – AbortController
Ein fetch(), das ewig lädt, oder eine veraltete Suchanfrage – mit AbortController brichst du laufende Requests sauber ab und gibst ihnen ein Zeitlimit.
Ordner sicher übertragen und deployen mit rsync
rsync kopiert nur, was sich wirklich geändert hat – ideal fürs Deployen einer Website oder ein schnelles Backup. Mit --dry-run siehst du vorher genau, was passieren würde, bevor etwas überschrieben oder gelöscht wird.
Container Queries – Komponenten, die auf ihren Platz reagieren, nicht auf den Bildschirm
Media Queries fragen die Bildschirmbreite ab. Container Queries fragen, wie breit der Container einer Komponente gerade ist – so passt sich eine Karte in der Sidebar anders an als dieselbe Karte im Hauptbereich. Endlich wirklich wiederverwendbare Bausteine.
Viele Dateien auf einmal bearbeiten mit find und xargs
find sucht Dateien nach Namen, Alter oder Größe – und mit xargs schickst du die Treffer stapelweise an einen anderen Befehl. So löschst, verschiebst oder konvertierst du hunderte Dateien mit einer Zeile. Inklusive der wichtigsten Sicherheits-Regel.
Sanfte Übergänge in CSS – Hover-Effekte mit transition statt harter Sprünge
Ein guter Hover-Effekt springt nicht, er gleitet. Mit transition animierst du Farbe, Größe und Schatten weich – in einer Zeile. Ich zeige das Muster, warum du niemals transition: all nimmst und wie du Nutzer mit Bewegungsempfindlichkeit respektierst.
Im ganzen Projekt suchen mit grep -rn (und warum ripgrep schneller ist)
„Wo steht dieser Text nochmal?" – mit grep -rn durchsuchst du in Sekunden dein ganzes Projekt inklusive Zeilennummern. Und mit ripgrep (rg) geht es noch schneller, weil es .gitignore automatisch beachtet.
position: sticky – ein Header, der beim Scrollen oben kleben bleibt
Für einen mitfahrenden Header brauchst du kein JavaScript. Zwei CSS-Zeilen genügen mit position: sticky. Ich zeige das Muster, erkläre die eine Voraussetzung, die oft vergessen wird, und den häufigsten Grund, warum es „nicht klebt".
Auswerten mit GROUP BY, COUNT und HAVING – Daten gruppieren und filtern
Wie viele Einträge pro Kategorie? Welche Kunden haben mehr als drei Bestellungen? Genau dafür sind GROUP BY und HAVING da. Ich zeige dir an einem kleinen Beispiel, wie du aus rohen Zeilen eine echte Auswertung machst.
CSS-Variablen und Dark Mode – ein Theme, das sich selbst umschaltet
Mit CSS Custom Properties definierst du Farben an einer Stelle und nutzt sie überall. Der Clou: Für den Dark Mode überschreibst du nur die Variablen – nicht jede einzelne Regel. Ich zeige beides, inklusive automatischer System-Erkennung.