Tag: JavaScript

1. Web Components ohne Framework: Wiederverwendbare UI-Bausteine mit reinem JavaScript

   13.09.2025

   Web Components sind eine Gruppe nativer Browser-APIs, mit denen sich gekapselte UI-Bausteine bauen lassen, die ohne Framework-Runtime funktionieren. Custom Elements, Shadow DOM und HTML Templates ermöglichen Komponenten, die in React, Vue, Angular und in reinem HTML gleichermaßen einsetzbar sind, ideal für Design-Systeme über Team- und Stack-Grenzen hinweg.

   Read more

2. WeakMap und WeakSet: Private Object-Zustände ohne Memory Leaks

   13.09.2025

   Ein gewöhnliches Map-Objekt als Zuordnung von Objekten zu privatem Zustand verhindert, dass diese Objekte jemals vom Garbage Collector eingesammelt werden, solange die Map existiert. WeakMap und WeakSet lösen genau dieses Problem, indem sie ihre Schlüssel nur schwach referenzieren und damit private Zustände ermöglichen, die automatisch mit dem zugehörigen Objekt verschwinden.

   Read more

3. Accessibility-konformes Modal mit Alpine.js: Fokus-Trap und ARIA

   30.08.2025

   Ein visuell ansprechendes Modal ist nur die halbe Arbeit. Wer Barrierefreiheit nach WCAG 2.1 ernst nimmt, muss Fokus-Management, korrekte ARIA-Rollen und vollständige Keyboard-Navigation implementieren. Alpine.js macht das möglich – ohne jQuery, ohne externe Bibliotheken.

   Read more

4. Monorepo JS Tooling: Grundlagen fuer Workspaces und Task-Runner

   21.08.2025

   Monorepo JS Tooling loest ein Problem, das mit wachsender Anzahl an Paketen in einem Projekt unausweichlich wird: geteilte Abhaengigkeiten, wiederholte Build-Schritte und Versionierung ueber mehrere Packages hinweg. Workspaces in npm, pnpm und yarn legen das Fundament, waehrend Turborepo und Nx als Task-Runner darauf aufbauen und mit Caching die Build-Zeit drastisch senken.

   Read more

5. AbortSignal.timeout() und AbortSignal.any() im Detail

   17.08.2025

   AbortSignal.timeout() ersetzt die manuelle setTimeout-plus-AbortController-Kombination durch einen Einzeiler, und AbortSignal.any() führt mehrere Abbruchquellen zu einem einzigen Signal zusammen. Zusammen lösen beide Methoden eines der hartnäckigsten Boilerplate-Probleme in modernen Fetch-basierten Anwendungen.

   Read more

6. Contract Testing zwischen Frontend und Backend mit Pact.js

   15.08.2025

   Mocks sagen nur, ob das Frontend mit einer angenommenen API-Antwort korrekt umgeht, nicht ob diese Annahme noch stimmt. Contract Testing mit Pact.js schließt genau diese Lücke: Das Frontend definiert seine Erwartungen als ausführbaren Vertrag, und das Backend verifiziert automatisch, ob es diesen Vertrag tatsächlich erfüllt.

   Read more

7. requestIdleCallback: Hintergrundaufgaben ohne UI-Blockade

   12.08.2025

   Der Browser-Main-Thread ist eine geteilte Ressource: Animationen, Event-Handler und Rendering konkurrieren mit eurer Geschäftslogik. requestIdleCallback löst diesen Konflikt, indem es nicht-kritische Aufgaben in die Leerlaufphasen des Browsers verschiebt – ohne dass der Nutzer irgendetwas davon bemerkt.

   Read more

8. JavaScript crypto.randomUUID(): Sichere UUIDs im Browser

   12.08.2025

   Math.random() ist für IDs ungeeignet – es nutzt einen vorhersagbaren Pseudozufallsgenerator. crypto.randomUUID() liefert echte UUID v4 aus einem kryptografisch sicheren Zufallsgenerator, ohne externe Abhängigkeiten, in Browser und Node.js gleichermaßen.

   Read more

9. WeakRef und FinalizationRegistry in JavaScript: Speicherverwaltung meistern

   09.08.2025

   Speicherlecks in JavaScript entstehen selten durch Zufall – sie entstehen durch starke Referenzen, die Objekte im Heap festhalten, obwohl der Code sie längst nicht mehr braucht. WeakRef und FinalizationRegistry sind die offiziellen JavaScript-APIs, um mit dem Garbage Collector zu kooperieren und Ressourcen sauber freizugeben – ohne das Fundament der automatischen Speicherverwaltung zu untergraben.

   Read more

10. Array.fromAsync in der Praxis: Async Iterables sauber in Arrays verwandeln

    07.08.2025

    Wer asynchrone Datenströme bisher mit manuellen Schleifen und push-Aufrufen in ein Array überführt hat, kennt die Race-Conditions und die umständliche Fehlerbehandlung. Array.fromAsync löst genau dieses Problem: eine einzige eingebaute Methode, die Async Iterables, Generatoren und gemischte Promise-Listen kontrolliert und in der richtigen Reihenfolge in ein Array sammelt.

    Read more