Effizientes Caching von Schriftarten mit Service Workern

2025-09-04

Dieser Code-Snippet zeigt, wie ein Service Worker Schriftarten effizient cached. Er verwendet `CacheStorage` zum Cachen von Schriftarten und beinhaltet einen Versionsmechanismus, um veraltete Caches zu vermeiden. Bei einer Schriftartenanforderung prüft der Service Worker zuerst den Cache; bei einem Treffer wird die Schriftart direkt zurückgegeben; andernfalls wird die Schriftart aus dem Netzwerk abgerufen und dem Cache hinzugefügt, wobei Netzwerkfehler während des Vorgangs behandelt werden. Der Code verwendet geschickt die `clone()`-Methode, um Probleme mit dem Ressourcenverbrauch zu vermeiden.

(developer.mozilla.org)

Entwicklung

Das HTML `<template>`-Element beherrschen: Deklaratives Shadow DOM und DocumentFragment-Tricks

2025-09-03

Dieser Artikel befasst sich eingehend mit den leistungsfähigen Möglichkeiten des HTML ``-Elements, insbesondere mit der Verwendung des Attributs `shadowrootmode` zur deklarativen Erstellung von Shadow DOM. Er erklärt detailliert die Werte `open` und `closed` von `shadowrootmode` sowie die Verwendung von Attributen wie `shadowrootclonable`, `shadowrootdelegatesfocus` und `shadowrootserializable`. Darüber hinaus wird gezeigt, wie man DocumentFragment mithilfe der `content`-Eigenschaft des ``-Elements manipuliert und dabei mögliche Probleme mit DocumentFragment geschickt umgeht. Anhand konkreter Codebeispiele wird demonstriert, wie man DOM-Elemente dynamisch einfügt und aktualisiert und wie man Shadow DOM für die Kapselung von Stilen und komponentenbasierte Entwicklung nutzt.

(developer.mozilla.org)

Entwicklung HTML-Template

Debouncing in der Programmierung: Effizientes Verarbeiten von Benutzereingaben

2025-08-07

In der Programmierung ist Debouncing eine Technik zum Umgang mit häufigen Ereignissen, wie kontinuierlichen Benutzereingaben. Sie verwirft Operationen, die zu dicht beieinander in einem bestimmten Zeitintervall auftreten, und fasst sie zu einem einzigen Aufruf zusammen, um Verzögerungen der Benutzeroberfläche zu vermeiden. Wenn beispielsweise ein Benutzer eine Suchabfrage eingibt, wartet Debouncing auf eine Pause, bevor die Suche ausgeführt wird, wodurch die Effizienz und die Benutzererfahrung verbessert werden. Ähnlich wie Throttling, aber im Gegensatz zu Throttling, das die Häufigkeit kontinuierlicher Operationen begrenzt, wartet Debouncing auf eine Periode der Inaktivität, bevor es reagiert.

(developer.mozilla.org)

Entwicklung Benutzereingabe Ereignisbehandlung

MDNs Geburtstag: Kuchen, Zusammenarbeit und Community

2025-07-25

In der Webwelt ist der Austausch von Kuchen zur Feier von Meilensteinen eine geschätzte Tradition unter Browserherstellern. Microsoft hat bekanntlich Kuchen an Mozilla für Firefox-Versionen geschickt, und jetzt hat web.dev MDN einen Geburtstagskuchen geschenkt, um MDNs bedeutenden Beitrag zur globalen Entwickler-Community anzuerkennen. MDN erreicht monatlich Millionen von Entwicklern und verfügt über über 100.000 Mitwirkende. MDN drückt seine Dankbarkeit gegenüber seiner leidenschaftlichen Community aus und blickt auf weitere 20 Jahre der Stärkung von Entwicklern und des gemeinsamen Aufbaus eines besseren Webs.

(developer.mozilla.org)

Entwicklung

CSS Paint Worklet: Individuelle Hintergrundbilder gestalten

2025-05-26

Dieses Beispiel zeigt, wie man dynamische Hintergrundbilder mit CSS Paint Worklet erstellt. Durch die Definition der benutzerdefinierten Eigenschaften `--boxColor` und `--widthSubtractor` und die Verwendung des CSS-Selectors `nth-of-type` generieren wir Hintergrundbilder mit verschiedenen Farben und Breiten für Listenelemente. Das JavaScript registriert ein externes Paint-Worklet-Skript, `boxbg.js`, das die Logik zum Zeichnen des Hintergrunds enthält. Das Endergebnis ist anpassbar; ändern Sie die Werte der benutzerdefinierten Eigenschaften in den Entwicklertools, um Farben und Breiten zu ändern.

(developer.mozilla.org)

Entwicklung Benutzerdefiniertes Hintergrundbild

Entfernung der impliziten Überschriftenebenen in HTML

2025-04-11

Die HTML-Spezifikation definierte früher einen Outline-Algorithmus, der die semantische Überschriftenebene von

-Elementen implizit anhand der Schachtelung in Abschnitts-Elementen (, , , ) bestimmte. Browser rendern section > h1 mit derselben Schriftgröße und den gleichen Rändern wie

, section > section > h1 als

usw. Dieses Standard-Rendering befand sich in den UA-Stylesheets des Browsers, aber nicht im Accessibility Tree (verwendet von Screenreadern). Websites, die Abschnitts-Elemente verwendeten, sahen unerwartet diese automatisch generierten Überschriftenebenen. Dies führte zu Verwirrung über die Verwendung von

, inkonsistente Werkzeugbehandlung und der Algorithmus wurde als problematisch angesehen. Der Algorithmus wurde 2022 entfernt, aber die UA-Stylesheet-Regeln blieben bestehen. Jetzt entfernen Browser-Anbieter diese Standardstile.

(developer.mozilla.org)

Entwicklung

Globale Datenschutzkontrolle (GPC): Eine Lösung für Webtracking?

2025-03-16

Im Gegensatz zu seinem Vorgänger, „Nicht verfolgen“ (DNT), hat das Signal der Globalen Datenschutzkontrolle (GPC) die Unterstützung des kalifornischen Generalstaatsanwalts und zielt auf eine Ausrichtung an der EU-DSGVO ab, wodurch den Nutzern beispiellose Macht verliehen wird. Die Ineffektivität von DNT resultierte aus dem Mangel an rechtlicher Durchsetzung, aber GPC ändert das. Es übermittelt die „Nicht verkaufen“-Anfragen der Nutzer an Websites und zwingt sie zur Einhaltung. Mit der Unterstützung von Browsern wie Mozilla Firefox, Brave und DuckDuckGo Privacy Browser signalisiert GPC einen möglichen Wendepunkt im Kampf gegen Webtracking.

(developer.mozilla.org)

Technologie Webtracking

Temporal API: Revolutioniert die Daten- und Zeitbehandlung in JavaScript

2025-01-30

Die Temporal API vereinfacht die Bearbeitung von Daten und Zeiten in JavaScript. Sie unterstützt verschiedene Kalendersysteme (wie den chinesischen Mondkalender), handhabt Zeitzonenumrechnungen nahtlos und bietet intuitive Vergleichsmethoden. Sie kann beispielsweise das nächste chinesische Neujahr berechnen oder die Dauer bis zu einem zukünftigen Unix-Timestamp ermitteln. Obwohl sich das Verhalten von `toLocaleString` je nach Browserimplementierung geringfügig unterscheidet, bietet die Temporal API robuste Daten- und Zeitfunktionen und ist damit ein Segen für Entwickler.

(developer.mozilla.org)

Entwicklung Datum Zeit

MDN-Lernressourcen erhalten ein großes Update: Neue Lernerfahrung gestartet

2024-12-25

Im Dezember 2024 veröffentlichte MDN ein großes Update seines Abschnitts „Webentwicklung lernen“, in dem der MDN-Lehrplan mit bestehenden Lerninhalten zusammengeführt wurde, um einen optimierten Lernpfad zu schaffen. Dieses Update behebt frühere Probleme wie überfüllte Inhalte und unklare Lernpfade und bietet Anfängern ein klareres und zugänglicheres Lernerlebnis. Die neue Website verwendet eine modulare Struktur mit den Abschnitten „Erste Schritte“, „Kern“ und „Erweiterungen“, die klare Lernziele und interaktive Inhalte beinhalten. MDN wird die Inhalte und das Design weiterhin verbessern, um zukünftig noch bessere Lernressourcen bereitzustellen.

(developer.mozilla.org)

Entwicklung Webentwicklung lernen Update der Lernressourcen