Aus dem OpenReplay Blog
WebSockets vs. SSE vs. Long Polling: Welche Technologie sollten Sie verwenden?
WebSockets, SSE und Long Polling im Vergleich: Welche Echtzeit-Methode für Chat-Apps, Dashboards und Live-Benachrichtigungen am besten passt.
Erste Schritte mit TanStack DB für reaktive UIs
TanStack DB ergänzt TanStack Query um Collections und Live Queries für differenziellen Datenfluss und schnelle reaktive UIs mit minimalem Boilerplate.
Nicht-mutierende Arrays: Sichereren JavaScript-Code schreiben
Nicht-mutierende Methoden wie map, filter, reduce und slice helfen, Seiteneffekte in React-Anwendungen zu vermeiden und Code sicherer zu machen.
Moderne CSS-Hintergrundeffekte ohne Bilder
Reine CSS-Hintergründe mit Farbverläufen, Streifenmustern und Texturen vermeiden HTTP-Anfragen für Bilder und verbessern Core Web Vitals-Werte.
Text-Styling mit der CSS Custom Highlight API
Die CSS Custom Highlight API styled Textbereiche ohne DOM-Wrapper-Elemente und steigert die Performance in Suchoberflächen, Texteditoren und Annotation-Tools.
Leichtgewichtige Internationalisierung: Bibliotheken durch die Intl API ersetzen
Moment.js, date-fns und numeral.js durch die native Intl API ersetzen, Bundle-Größe senken und Datums-, Währungs- sowie Zahlenformatierung gratis nutzen.
Praktische Frontend-Tipps für bessere Core Web Vitals-Werte
LCP-, INP- und CLS-Werte verbessern mit fetchpriority, scheduler.yield und Bilddimensionen für einen reaktiven Haupt-Thread und stabile Layouts.
'Permission denied (publickey)' beim Push zu GitHub beheben
Der Beitrag erklärt, wie SSH-Schlüssel generiert, bei GitHub hinterlegt und die Verbindung geprüft wird, um den Fehler Permission denied (publickey) zu beheben.
Fallstricke beim resize-Event in JavaScript vermeiden
Throttling, Debouncing, ResizeObserver und CSS-Media-Queries vermeiden resize-Event-Fallstricke, verhindern Layout Thrashing und verbessern die Performance.
So erstellen Sie Glassmorphismus-UI-Effekte mit reinem CSS
Glassmorphismus-Effekte lassen sich mit CSS backdrop-filter, rgba-Hintergründen und Schatten umsetzen, mit Blick auf Browserkompatibilität und Barrierefreiheit.
Eine Schnellanleitung zur Lokalisierung einer Astro-Website
Astro i18n-Routing konfigurieren, Locale-Ordner strukturieren und UI-Strings mit Paraglide verwalten – für eine produktionsreife mehrsprachige Astro-Website.
Live Browser Preview in VS Code: Eine Kurzanleitung
Microsoft Live Preview und Live Server für VS Code im Vergleich, Live Browser Reloading einrichten und häufige Workspace-Pfadfehler beheben.
5 moderne CSS-Features, die jeder Entwickler kennen sollte
Container Queries, Cascade Layers, CSS Custom Properties und der has-Selektor ermöglichen responsives, wartbares CSS ohne den Einsatz von Frameworks.
Erkennung von Elementen im Viewport mit Intersection Observer
Die Intersection Observer API ersetzt Scroll-Events und erkennt Elementsichtbarkeit für Lazy Loading, Animationen und Video-Autoplay effizient.
Vergleich von 11ty und WordPress für moderne Webprojekte
Eleventy und WordPress im Vergleich nach Performance, Sicherheit und Kosten – für die Wahl der passenden statischen oder dynamischen Architektur.
Moderne SVG-Animationstechniken
CSS-Animationen, GSAP und die Web Animations API im Vergleich für performante, barrierefreie SVG-Animationen mit optimierten Pfaden und Element-Reuse.
Formularvalidierung leicht gemacht mit htmx
Formulare mit htmx sauber umsetzen: HTML5-Validierungsattribute und serverseitiges Inline-Feedback kombinieren, ohne viel JavaScript schreiben zu müssen.
Barrierefreie Popovers mit modernem CSS & JS erstellen
Dieser Beitrag zeigt, wie die native Popover API, CSS-Positionierung und ARIA-Attribute Tastaturnavigation und Fokus-Management in Popovers ermöglichen.
KI-Browser und die Zukunft der Webentwicklung
KI-fähige Webseiten mit semantischem HTML und Schema.org-Markup helfen KI-Browsern wie Comet und Edge Copilot, Inhalte effektiv zu analysieren.
Storybook: Bessere UI-Dokumentation erstellen
Storybook ermöglicht lebendige UI-Dokumentation mit Autodocs, MDX und Controls, die Komponentendoks automatisch mit der Codebasis synchronisiert hält.
Zeilenlänge in CSS kontrollieren für bessere Lesbarkeit
Zeilenlängen in CSS mit ch-Einheiten, clamp() und Container Queries steuern, um Lesbarkeit und Barrierefreiheit für verschiedene Zielgruppen zu verbessern.
Dark Mode zu Ihrer Website mit Tailwind hinzufügen
Dark Mode per Tailwind CSS dark-Variante einbinden, mit Systempräferenzen, manuellen Toggles und localStorage-Persistenz für Nutzereinstellungen.
Reverse Proxy Server für Webentwickler erklärt
Reverse Proxies wie Nginx, Caddy und Traefik leiten Traffic weiter, übernehmen HTTPS-Terminierung und stellen React- und Node.js-Apps unter einer Domain bereit.
Core Web Vitals: So optimieren Sie LCP
Langsame LCP-Werte lassen sich durch Optimierung von TTFB, Ressourcenerkennung, Ladezeit und Render-Blocking via CDN-Caching und Image-Preload beheben.