Seite 103 - Maxim Mironjuk

Wenn Requests plotzlich haengen, obwohl die CPU-Auslastung niedrig bleibt, steckt oft Lock Contention dahinter. Mit performance_schema in MySQL und pg_locks in PostgreSQL laesst sich Lock Contention systematisch diagnostizieren, statt bei jedem Vorfall aufs Neue zu raten, welche Session welche andere blockiert.

Skeleton-Screens zeigen die spätere Layout-Struktur, bevor echte Daten geladen sind, und reduzieren damit die gefühlte Wartezeit erheblich. Mit Tailwind CSS für Shimmer-Animation und Grundformen sowie Alpine.js für den sauberen Übergang zum echten Inhalt entsteht ein Ladezustand, der Nutzer nicht im Ungewissen lässt.

Klassische Unit-Tests prüfen einzelne, von Hand ausgedachte Beispiele. Property-Based Testing dreht das Prinzip um: Statt Beispiele zu schreiben, definiert man Eigenschaften, die für jede gültige Eingabe gelten müssen, und lässt fast-check tausende zufällige Fälle generieren, um genau die Randfälle zu finden, die ein Mensch beim Schreiben von Tests übersieht.

Ein Dark Mode für Text und Flächen lässt sich mit Tailwinds dark:-Variante meist zügig umsetzen, aber Icons und vor allem komplexe Illustrationen stellen ein eigenes Problem dar. Eine simple CSS-Filter-Invertierung macht aus einer mehrfarbigen Illustration schnell ein unleserliches Farbchaos, weil Invertierung jede Farbe unabhängig von ihrer ursprünglichen Bedeutung umkehrt. Wer stattdessen gezielt mit dark:-Varianten auf SVG-Ebene arbeitet, behält die volle Kontrolle über Fill, Stroke und Kontrast in beiden Modi.

Ein fester Pfad wie /tmp/skript.tmp in einem Shell-Skript ist eine Einladung für Race Conditions, Datenlecks und Symlink-Angriffe. mktemp erstellt garantiert einmalige, sichere temporäre Dateien – und trap EXIT stellt sicher, dass sie in jedem Beendigungsszenario aufgeräumt werden.

Tooltips, Dropdowns und kontextbezogene Overlays wurden jahrelang entweder mit JavaScript oder mit fragilen CSS-Hacks gelöst. CSS Anchor Positioning ändert das grundlegend: anchor(), position-anchor und @position-try ermöglichen präzise, kontextbewusste Positionierung direkt im Stylesheet — ohne eine einzige Zeile JavaScript.

Wer Event-Handler in TypeScript einfach mit any oder dem generischen Event-Typ schreibt, verliert Autovervollstaendigung, riskiert Laufzeitfehler bei falschen Property-Zugriffen und produziert Bugs, die erst im Browser sichtbar werden. Dieser Artikel zeigt, wie MouseEvent, KeyboardEvent und CustomEvent korrekt typisiert werden, wie target und currentTarget sauber genarrowed werden und wie ein typsicherer Event-Emitter Komponenten in Magento- und Hyvae-Frontends robust verbindet.

ARIA überschreibt keine Optik und kein Verhalten, sondern ergänzt ausschließlich den Accessibility Tree um Rollen, Status und Eigenschaften, die Screenreader und andere assistive Technologien auswerten. Wer ARIA einsetzt, ohne die fünf Grundregeln zu kennen, baut oft unzugängliche statt zugängliche Interfaces. Dieser Beitrag zeigt anhand einer echten Tab-Komponente, wann ARIA wirklich nötig ist und wann ein natives HTML-Element die bessere Wahl bleibt.

Vier neue Array-Methoden liefern eine veraenderte Kopie statt das Original zu mutieren. Das macht sort(), reverse() und splice() in State-getriebenem Code endlich ueberfluessig.

Wer eine Factory Funktion, einen Mixin oder einen kleinen Dependency Injection Container baut, stößt schnell auf ein Problem: Der Typ new (...) => T akzeptiert nur konkrete, instanziierbare Klassen. Abstrakte Basisklassen fallen durch das Raster, obwohl man sie oft genau dort braucht, wo man Subklassen generisch verarbeiten will. Genau dafür gibt es seit TypeScript 4.2 die abstract construct signature.