Seite 4 - JavaScript

State Machines modellieren erlaubte Zustände und Übergänge explizit, statt sie implizit über verstreute Boolean-Flags zu erraten. XState bringt dieses Konzept als framework-unabhängige Bibliothek nach JavaScript, mit States, Events, Guards und hierarchischen Statecharts, die in React, Vue oder purem JavaScript gleichermaßen funktionieren.

Wenn mehrere Spiegel-APIs dieselbe Antwort liefern koennten und nur das schnellste erfolgreiche Ergebnis zaehlt, ist Promise.any() der richtige Kombinator, klar abgegrenzt von Promise.race() und Promise.allSettled().

Svelte kompiliert Komponenten weg, statt sie zur Laufzeit zu interpretieren, und genau dieses Prinzip lässt sich auf das Styling übertragen, wenn Tailwind CSS über Vite korrekt eingebunden ist. Dieser Artikel zeigt das Setup in SvelteKit, das Zusammenspiel von Scoped Styles und Utility-Klassen, Reactive Statements für Klassenlogik und die serverseitigen Rendering-Fallstricke, die bei SvelteKit besonders häufig auftreten.

Ein grosses JavaScript-Bundle kostet nicht nur Download-Zeit, sondern blockiert den Main Thread beim Parsen und Kompilieren. Mit dynamic import(), Vendor-Chunk-Splitting und gezieltem Nachladen schwerer Widgets unterhalb des Folds laesst sich die initiale Bundle-Groesse spuerbar senken, ohne Funktionalitaet zu verlieren, auch in server-gerenderten Hyva-Shops mit Alpine.js.

DOM basiertes Cross Site Scripting entsteht meist nicht durch fehlende serverseitige Filterung, sondern durch unsichere Zuweisungen an innerHTML, document.write oder eval mitten im Frontend Code. Die Trusted Types API schließt diese Lücke strukturell, indem der Browser gefährliche Zuweisungen an DOM Sinks nur noch akzeptiert, wenn der Wert vorher durch eine definierte Policy in einen speziellen Typ umgewandelt wurde.

Ohne den key-Modifier verwechselt Alpine bei x-for-Listen DOM-Elemente mit dem falschen Datensatz, sobald Einträge eingefügt, entfernt oder sortiert werden. Ein stabiler, eindeutiger key löst dieses Diffing-Problem und verhindert Fokus-Sprünge, falsche Animationen und vertauschten Formular-Zustand.

Die meisten Entwickler nutzen DevTools nur als Console-Tab. Dabei stecken in den Chrome DevTools Techniken, die Debugging-Zeiten halbieren, Performance-Probleme in Sekunden sichtbar machen und den gesamten Netzwerk-Stack eines JavaScript-Projekts durchleuchten – ohne eine einzige Zeile Zusatzcode.

switch/case behandelt nur primitive Gleichheit, verschachtelte Bedingungen werden schnell unlesbar, und der Ausdruck-Charakter fehlt komplett. Das TC39 Pattern Matching Proposal ändert das: Ein match-Ausdruck prüft Struktur, Typ, Form und Wert eines Objekts gleichzeitig – deklarativ, exhaustiv und ohne Fallthrough-Bug.

Wer Reports, Rechnungen oder Zertifikate als PDF erzeugen muss, kann dafür dieselbe Tailwind-CSS-Vorlage nutzen, die auch im Browser läuft. Puppeteer steuert Headless Chrome fern und ruft page.pdf() auf, wodurch das Layout inklusive Flexbox, Grid und Custom Properties originalgetreu ins PDF übernommen wird.

Die Konsole gibt 0.30000000000000004 aus, ein Preisvergleich schlägt fehl, eine Summe von Rechnungsposten weicht um einen Cent ab. Gleitkomma-Präzision ist keine Eigenheit von JavaScript, sondern eine Konsequenz von IEEE 754, betrifft aber gerade JavaScript-Entwickler besonders oft, weil die Sprache nur einen einzigen Zahlentyp kennt. Dieser Artikel erklärt die Ursache und zeigt robuste Lösungen.