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.
-
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.
-
Handling errors in Promises and async/await
An async function turns a throw into a rejection and await rethrows it; every rejection needs an owner. Wrap only what you can recover from, never leave a promise floating, use allSettled when partial failure is acceptable, and register a last-resort unhandledrejection handler.
-
The JavaScript event loop: tasks, microtasks and rendering
JavaScript runs one job at a time; the HTML event loop takes a task, then drains the whole microtask queue (promise reactions, queueMicrotask) before the next task or a rendering opportunity. Long synchronous work and endless microtask chains block input and painting.
-
Bit manipulation basics: flags, masks and shifts without surprises
Flags are powers of two combined with OR, tested with AND and cleared with AND NOT; masks and shifts extract fields. The traps are operator precedence, signed right shifts, fixed 32-bit conversion in JavaScript and unbounded integers in Python; name every flag and parenthesise every test.
Maschinenlesbar: JSON