Tag: JavaScript

1. Fetch und Netzwerk in Tests mocken mit MSW

   09.04.2025

   Wer in Unit-Tests einfach globalThis.fetch überschreibt, baut fragile Mocks, die bei jeder Code-Änderung neu angepasst werden müssen. Mock Service Worker fängt Netzwerk-Requests stattdessen auf HTTP-Ebene ab, testet den echten Fetch-Aufruf und lässt sich für Erfolgs- wie Fehlerfälle präzise konfigurieren, ohne den Anwendungscode selbst zu verändern.

   Read more

2. Network Information API und Battery API: adaptive Web-Apps bauen

   06.04.2025

   Die Network Information API liefert mit navigator.connection Informationen über Verbindungstyp, geschätzte Bandbreite und aktivierten Datensparmodus, damit Anwendungen Bildqualität, Prefetching und Video-Auflösung dynamisch anpassen können. Die einst parallel existierende Battery Status API wurde dagegen aus Datenschutzgründen aus den meisten Browsern entfernt, dieser Artikel ordnet beide APIs realistisch ein und zeigt praxistaugliche Alternativen.

   Read more

3. JavaScript Nullish Coalescing und Optional Chaining erklärt

   02.04.2025

   Nullish Coalescing (??) und Optional Chaining (?.) sind die wichtigsten Ergänzungen zu JavaScript seit ES2020. Sie ersetzen fragile &&-Ketten und ||-Fallbacks durch präzise, lesbare Operatoren – mit dem entscheidenden Unterschied, dass sie nur auf null und undefined reagieren, nicht auf alle falschen Werte.

   Read more

4. Top-Level Await in JavaScript: ES-Module ohne async-Wrapper

   30.03.2025

   Top-Level Await war einer der meistgewünschten Features in JavaScript-Modulen: Direkt im Modul-Scope auf asynchrone Initialisierung warten, ohne das gesamte Modul in eine async-Funktion zu hüllen. Die Auswirkungen auf den Modul-Graphen und mögliche Deadlocks verstehen die wenigsten — dieser Guide erklärt beides.

   Read more

5. JavaScript Proxy und Reflect: Meta-Programmierung für fortgeschrittene Muster

   29.03.2025

   JavaScript Proxy erlaubt es, einen Stellvertreter vor ein Objekt zu schalten, der jeden Lese-, Schreib-, Lösch- und Funktionsaufruf abfängt. Reflect ist das symmetrische Gegenstück: Es ruft die Standardverhalten der Sprache als erstklassige Funktionen auf. Zusammen bilden sie die Grundlage für reaktive Datensysteme, Validierungsschichten, Logging-Proxies und virtuelle Objekte in modernem JavaScript.

   Read more

6. JavaScript Set Methods: union, intersection, difference & Co.

   25.03.2025

   Jahrelang mussten Mengenoperationen in JavaScript mühsam mit filter() und has() zusammengebaut werden. Die neuen JavaScript Set Methods lösen dieses Problem mit einer sauberen, lesbaren API – direkt auf dem Set-Objekt, ohne externe Bibliotheken und ohne Workarounds.

   Read more

7. JavaScript Tree Shaking: Bundle-Größe halbieren mit toten Code entfernen

   19.03.2025

   Tree Shaking ist der Prozess, mit dem moderne Bundler ungenutzten JavaScript-Code aus dem finalen Bundle entfernen. Was simpel klingt, hat komplexe Voraussetzungen: ES-Module sind Pflicht, bestimmte Code-Muster blockieren Tree Shaking, und falsch konfigurierte sideEffects-Flags können gesamte Module eliminieren oder bewahren — mit messbaren Auswirkungen auf Ladezeiten.

   Read more

8. JavaScript Memory Leaks mit Chrome DevTools finden und beheben

   14.03.2025

   Memory Leaks in JavaScript-Anwendungen sind unsichtbar – bis der Browser abstürzt oder die Seite nach Minuten spürbar langsamer wird. Heap Snapshots, Allocation Timelines und das Retainer-Diagramm in Chrome DevTools machen unsichtbare Speicherlecks sichtbar, lokalisierbar und behebbar.

   Read more

9. Event Delegation für dynamische Listen in JavaScript

   08.03.2025

   Wer für jedes Listenelement einen eigenen Event-Listener registriert, baut eine Speicher- und Performance-Falle. Event Delegation nutzt Event Bubbling und ermöglicht mit einem einzigen Listener die Behandlung von Events auf beliebig vielen Elementen – auch auf solchen, die erst später dynamisch zum DOM hinzugefügt werden.

   Read more

10. navigator.sendBeacon: zuverlässige Daten beim Seitenende senden

    05.03.2025

    Fetch und XHR beim Seitenende zu nutzen ist eine Race-Condition gegen den Browser. Wenn der Tab geschlossen oder die Seite entladen wird, bricht der Browser offene Anfragen ab. navigator.sendBeacon überträgt Daten garantiert, ohne die Navigation zu verzögern – das ist die richtige Lösung für Analytics, Session-Daten und Exit-Tracking.

    Read more