Thema: javascript
-
Browser-Speicher im Vergleich: Cookies, Web Storage und IndexedDB
Cookies werden bei jeder Anfrage mitgeschickt und sind laut Spezifikation klein; localStorage und sessionStorage sind synchrone String-Speicher mit wenigen MiB je Origin; IndexedDB ist asynchron, transaktional und teilt sich das grosse Kontingent der Origin. Jeglicher Browser-Speicher ist Best-Effort, sofern keine Persistenz gewährt wurde, und er ist nach Origin abgegrenzt.
-
fetch mit Timeouts und AbortController einsetzen
Ein fetch-Promise wird nur bei einem Netzwerkfehler abgelehnt, nicht bei einem HTTP-Fehlerstatus, und besitzt von sich aus kein Timeout. Ein AbortSignal übergeben, das aus AbortSignal.timeout und dem Controller einer aufrufenden Stelle kombiniert ist, response.ok prüfen und im catch-Block TimeoutError, AbortError, Netzwerkfehler und HTTP-Fehler auseinanderhalten.
-
ES-Module-Builds mit deklarierten Nebenwirkungen verkleinern Consumer-Bundles stärker als CommonJS-Builds
Hypothese: Bei einer Bibliothek mit vielen unabhängigen Funktionen erhält ein Consumer, der nur einige davon importiert, ein kleineres Bundle, wenn die Bibliothek als ES-Module mit einer sideEffects-Deklaration ausgeliefert wird, als wenn sie als CommonJS ausgeliefert wird, weil Tree Shaking von der statischen Import/Export-Struktur abhängt; ein auf Fixtures basierender Vergleich wird vorgeschlagen.
-
Web Components: Custom Elements, Shadow DOM und wo die Kapselung endet
Custom Elements registrieren eine Klasse unter einem Tag-Namen mit Bindestrich samt Lifecycle-Callbacks; Shadow DOM gibt ihr einen abgegrenzten Teilbaum, dessen Stile in keine Richtung durchsickern; Templates und deklarative Shadow Roots liefern Markup. Jedes grenzüberschreitende Anliegen, vom Styling über Parts und Custom Properties bis zur Formularteilnahme via ElementInternals und Label-Zuordnung, muss bewusst geöffnet werden.
-
Wann lohnt sich clientseitiges Routing noch, jetzt, da Browser bfcache, Prerendering und dokumentübergreifende View Transitions bieten?
Offene Frage: In-Page-Router wurden eingeführt, um vollständige Seitenaufrufe zu vermeiden, auf Kosten von Shell-Auslieferung, 404-Behandlung, Scroll- und Fokus-Wiederherstellung und eines Bundles, das zuerst eintreffen muss; der Back/Forward-Cache, die Speculation-Rules-API und dokumentübergreifende View Transitions adressieren die ursprünglichen Beweggründe inzwischen auf Mehrseiten-Websites. Für welche Websites und Interaktionsmuster gewinnt ein In-Page-Router noch messbar?
-
Lokalisierungsfähige Oberflächen: Intl-Pluralregeln, Datumsformate und Rechts-nach-links-Layout
Zahlen, Daten und relative Zeitangaben mit den Intl-Objekten des Browsers formatieren statt mit Zeichenketten-Arithmetik, Pluralformen anhand der Kategorien von Intl.PluralRules statt anhand von n == 1 wählen, mit logischen CSS-Eigenschaften layouten, damit sich ein dir=rtl-Dokument selbst spiegelt, und Platz für Text lassen, der bei der Übersetzung länger wird.
-
ES-Module versus CommonJS in Node.js
CommonJS verwendet synchrones require und module.exports; ES-Module verwenden statisches import/export, Top-Level-await und import.meta. Node entscheidet pro Datei anhand der Dateiendung und des type-Felds der nächstgelegenen package.json; ES-Module brauchen vollständige Dateiendungen und kennen __dirname und require nicht, wofür es dokumentierte Ersatzlösungen gibt.
-
JavaScript-Textversätze: UTF-16-Einheiten, Codepoints und sichtbare Zeichen unterscheiden
An jeder Editor- oder API-Grenze die Versatzeinheit benennen und vor dem Zerschneiden von Text gezielt umrechnen.
-
Einen Service Worker sicher ausrollen: Scope, versionierte Caches, der wartende Worker und ein Notausschalter
Ein Service Worker, der HTML cacht, kann Nutzerinnen und Nutzer nach einem Deployment an alten Code binden. Ihn mit explizitem Scope registrieren, das Skript bei jeder Update-Prüfung frisch abrufen, Caches pro Build versionieren und alte beim Aktivieren löschen, Strategien pro Ressourcentyp wählen, entscheiden, wie der wartende Worker übernimmt, und vor dem ersten Release einen getesteten Notausschalter ausliefern.
-
Tastaturnavigation in zusammengesetzten Widgets: Roving Tabindex, Pfeiltasten und Escape
Tab und Umschalt+Tab bewegen sich zwischen Komponenten; Pfeiltasten bewegen sich innerhalb einer Komponente wie einer Tab-Liste, Symbolleiste, einem Menü oder einer Radiogruppe. Umsetzen lässt sich das mit einem Roving Tabindex (ein Element mit tabindex=0, alle übrigen mit -1) oder mit aria-activedescendant; vorübergehende Oberflächen mit Escape schliessen und den Fokus nie ohne angekündigten Ausweg einsperren.
-
Fokus-Management bei Single-Page-Interaktionen: Dialoge, Routenwechsel und entfernte Elemente
Ändert sich eine Seite ohne vollständigen Ladevorgang, muss der Tastaturfokus gezielt bewegt werden: in einen Dialog hinein, wenn er sich öffnet, und zurück zu seinem Auslöser, wenn er sich schliesst, zur Überschrift der neuen Ansicht nach einem clientseitigen Routenwechsel, und zu einem sinnvollen Nachbarn, wenn das fokussierte Element gelöscht wird. Andernfalls fällt der Fokus auf den Document Body zurück, und Screenreader-Nutzende werden an den Seitenanfang zurückgeschickt.
-
Fehlerbehandlung bei Promises und async/await
Eine async-Funktion verwandelt ein throw in eine Ablehnung (rejection), und await wirft sie erneut; jede Ablehnung braucht einen Verantwortlichen. Nur das abfangen, wovon man sich erholen kann, nie ein Promise unbehandelt schweben lassen, allSettled verwenden, wenn Teilausfälle akzeptabel sind, und als letzte Instanz einen unhandledrejection-Handler registrieren.
-
Die JavaScript-Ereignisschleife: Tasks, Microtasks und Rendering
JavaScript führt jeweils einen Job aus; die HTML-Ereignisschleife nimmt einen Task und leert dann die gesamte Microtask-Warteschlange (Promise-Reaktionen, queueMicrotask), bevor der nächste Task oder eine Rendering-Gelegenheit an die Reihe kommt. Lange synchrone Arbeit und endlose Microtask-Ketten blockieren Eingaben und das Zeichnen.
-
BigInt über JSON: einen verlustfreien Feldvertrag definieren, bevor ein Replacer hinzugefügt wird
Grosse Ganzzahlen mit einem expliziten Schema kodieren und sie wiederherstellen, ohne sie stillschweigend über Number zu leiten.
-
Grundlagen der Bitmanipulation: Flags, Masken und Shifts ohne Überraschungen
Flags sind Zweierpotenzen, die mit OR kombiniert, mit AND geprüft und mit AND NOT gelöscht werden; Masken und Shifts extrahieren Felder. Die Fallen sind Operatorpriorität, vorzeichenbehaftete Rechts-Shifts, die feste 32-Bit-Umwandlung in JavaScript und unbegrenzte Ganzzahlen in Python; jedes Flag benennen und jeden Test klammern.
Maschinenlesbar: JSON