Aus dem OpenReplay Blog
Wie man Komponenten in Svelte Lazy Loading anwendet
Svelte-Komponenten per dynamischer Imports und bedingtem Rendering lazy laden hält initiale Bundles in SvelteKit- und Vite-Projekten schlank.
So beheben Sie 'Cannot use import statement outside a module'
Den Fehler 'cannot use import statement outside a module' in Node.js, Browsern und Jest behebt man durch die korrekte Diagnose des Modulsystem-Konflikts.
Chromes Local Network Access (LNA) Berechtigung erklärt
Chrome Local Network Access schützt lokale Geräte vor öffentlichen Websites. Hier wird erklärt, was den LNA-Prompt auslöst und wie Web-Apps damit umgehen.
ASCII-Art im Browser und Terminal
Der Artikel zeigt, wie Pixelhelligkeit auf Zeichen abgebildet wird, Unicode-Braille ASCII-Art erweitert und Canvas, WebGL sowie ANSI-Terminals alles rendern.
Reaktivitätsmodelle im Vergleich: React, Vue, Angular, Svelte
Verglichen wird, wie React, Vue, Angular und Svelte Reaktivität umsetzen – von groben Render-Zyklen über Signals bis zu compiler-gesteuerten DOM-Updates.
So tippen Sie API-Antworten in TypeScript
API-Antworten in TypeScript mit Interfaces, Zod-Schemas und OpenAPI-Generierung zu typisieren verhindert Laufzeitfehler und hält Typen akkurat.
Ripple: Ein neues TypeScript-UI-Framework, das man im Auge behalten sollte
Ripple ist ein compilergesteuertes TypeScript-UI-Framework, das Virtual-DOM-Diffing und manuelles Dependency-Tracking durch reaktive Primitive eliminiert.
So implementieren Sie Drag and Drop in Svelte
Drag and Drop in Svelte gelingt mit der nativen HTML5 API oder svelte-dnd-action für Animationen, Touch-Unterstützung und Multi-Listen-Boards.
Anwendungsfälle für JavaScript-Generatoren
JavaScript-Generatoren liefern Werte bei Bedarf und eignen sich für Lazy Iteration, asynchrone Paginierung und Pipelines mit der Iterator Helpers API.
Wenn 100vh lügt: Mobile Viewport-Probleme beheben
Dieser Beitrag erklärt, wie svh, dvh und lvh sich von vh unterscheiden und wann welche Einheit für stabile Vollbild-Layouts ohne Viewport-Clipping passt.
So organisieren Sie Typdefinitionen in einem TypeScript-Projekt
TypeScript-Typdefinitionen lassen sich durch eine klare Strategie mit Inline-Dateien, gemeinsamen Verzeichnissen und Deklarationsdateien strukturiert verwalten.
MCP Apps: Interaktive Benutzeroberflächen zu KI-Konversationen hinzufügen
MCP Apps ermöglichen interaktive UI-Komponenten in KI-Konversationen. Der Artikel zeigt, wie MCP-Server mit dem ext-apps SDK Dashboards und Formulare rendern.
Eine bessere Möglichkeit, Fehler in VS Code mit Error Lens zu sehen
Error Lens blendet ESLint- und TypeScript-Diagnosen inline in VS Code ein, sodass Frontend-Entwickler Fehler schneller finden und beheben können.
Erstellen Sie Ihre erste API mit Koa
Eine REST-API mit Koa entwickeln: Routing einrichten, JSON-Bodys parsen und das Middleware-Kaskadenmodell für GET- und POST-Endpunkte nutzen.
Wann man user-select: none verwenden sollte (und wann es zur UX/Accessibility-Falle wird)
Der Beitrag zeigt, wann CSS user-select none bei interaktiven Elementen hilft und wann es Barrierefreiheit sowie Textauswahl beeinträchtigt.
So messen Sie die JavaScript-Performance
JavaScript-Performance mit DevTools, der Performance API und Core Web Vitals analysieren, Engpässe erkennen und den realen INP-Wert präzise messen.
Virtuelles Scrollen für hochperformante Benutzeroberflächen
Virtuelles Scrollen rendert nur sichtbare DOM-Knoten und beschleunigt große Datensätze. Der Artikel erklärt Windowing, Overscan und TanStack Virtual.
OpenClaw: Ein neuer Open-Source-KI-Assistent
OpenClaw ist ein selbst gehosteter KI-Agent, der Shell-Befehle ausführt, Browser steuert und auf eigener Hardware mit Slack, Telegram und WhatsApp arbeitet.
Streams für Webentwickler erklärt
Mit der Web Streams API, ReadableStream und TransformStream lassen sich Fetch-Antworten stückweise verarbeiten, um Speicherbedarf und Performance zu optimieren.
Wie Key-Value-Datenbanken (z. B. Redis, Memcached) funktionieren
Redis, Memcached und Key-Value-Datenbanken nutzen In-Memory-Hashtabellen für schnelle Lookups, Caching und Session-Speicherung in Backend-Systemen.
Was ist Lynx.js? Ein Leitfaden für Einsteiger
Lynx.js ist ein plattformübergreifendes Framework von ByteDance, das native iOS- und Android-UIs mit React, echtem CSS und Dual-Thread-Architektur rendert.
Absolute Werte in CSS mit abs()
Die CSS-Funktion abs() verarbeitet vorzeichenbehaftete Custom Properties sicher für Abstände, Animationstiming und Layout-Berechnungen ohne JavaScript.
Typsichere API-Clients mit OpenAPI und TypeScript erstellen
TypeScript-Typen aus OpenAPI-Specs mit openapi-typescript, openapi-fetch und Orval generieren, typsichere API-Clients bauen und Laufzeitfehler eliminieren.
Implementierung der binären Suche in JavaScript
Der Beitrag zeigt iterative und rekursive binäre Suche in JavaScript, erklärt sortierte Arrays als Voraussetzung und wann sie der linearen Suche überlegen ist.