Efficient Font Caching with Service Workers

2025-09-04

This code snippet demonstrates how a service worker efficiently caches font resources. It uses `CacheStorage` to cache fonts and includes a versioning mechanism to prevent stale caches from interfering. When a font is requested, the service worker first checks the cache; if a hit occurs, it returns the font directly; otherwise, it fetches the font from the network and adds it to the cache, handling network request errors along the way. The code cleverly uses the `clone()` method to prevent resource consumption issues.

(developer.mozilla.org)

Development Fonts

Mastering the HTML `<template>` Element: Declarative Shadow DOM and DocumentFragment Tricks

2025-09-03

This article delves into the powerful capabilities of the HTML `` element, focusing on its use with the `shadowrootmode` attribute for declarative Shadow DOM creation. It thoroughly explains the `open` and `closed` values of `shadowrootmode`, and the usage of attributes like `shadowrootclonable`, `shadowrootdelegatesfocus`, and `shadowrootserializable`. Furthermore, the article illustrates how to manipulate DocumentFragment using the `` element's `content` property, cleverly avoiding potential DocumentFragment pitfalls. Through concrete code examples, it demonstrates how to dynamically insert and update DOM elements, and how to leverage Shadow DOM for style encapsulation and component-based development.

(developer.mozilla.org)

Development HTML template

Debouncing in Programming: Efficiently Handling User Input

2025-08-07

In programming, debouncing is a technique used to handle frequent events, such as continuous user input. It discards operations that occur too closely together within a specified time interval, consolidating them into a single invocation to prevent UI lag. For example, when a user types a search query, debouncing waits for a pause before executing the search, improving efficiency and user experience. Similar to throttling, but unlike throttling which limits the frequency of continuous operations, debouncing waits for a period of inactivity before acting.

(developer.mozilla.org)

Development user input event handling

MDN's Birthday: Cakes, Collaboration, and Community

2025-07-25

In the web world, exchanging cakes to mark milestones is a cherished tradition among browser makers. Microsoft famously sent cakes to Mozilla for Firefox releases, and now web.dev has gifted MDN a birthday cake, acknowledging MDN's significant contribution to the global developer community. Reaching millions of developers monthly and boasting over 100,000 contributors, MDN expresses gratitude to its passionate community, looking forward to 20 more years of empowering developers and building a better web together.

(developer.mozilla.org)

Development

CSS Paint Worklet: Level Up Your Background Images

2025-05-26

This example demonstrates creating dynamic background images using CSS Paint Worklet. By defining custom properties `--boxColor` and `--widthSubtractor`, and using the CSS `nth-of-type` selector, we generate background images with varying colors and widths for list items. The JavaScript registers an external paint worklet script, `boxbg.js`, which contains the logic for drawing the background. The final result is customizable; tweak the custom property values in DevTools to alter the colors and widths.

(developer.mozilla.org)

Development Custom Background

HTML's Implicit Heading Levels Removed

2025-04-11

The HTML specification previously defined an outline algorithm that implicitly determined the semantic heading level of

elements based on nesting within sectioning elements (, , , ). Browsers rendered section > h1 with the same font-size and margins as

, section > section > h1 as

, and so on. This default rendering was in browser UA stylesheets, but not the accessibility tree (used by screen readers). Websites using sectioning elements unexpectedly saw these auto-generated heading levels. This caused confusion over

usage, inconsistent tool handling, and the algorithm was deemed problematic. The algorithm was removed in 2022, but UA stylesheet rules remained. Now, browser vendors are removing those default styles.

(developer.mozilla.org)

Development

Global Privacy Control (GPC): A User-Powered Solution to Web Tracking?

2025-03-16

Unlike its predecessor, Do Not Track (DNT), the Global Privacy Control (GPC) signal has backing from the California Attorney General and aims for alignment with the EU's GDPR, empowering users like never before. DNT's ineffectiveness stemmed from its lack of legal enforcement, but GPC changes that. It transmits users' "Do Not Sell" requests to websites, compelling compliance. With support from browsers like Mozilla Firefox, Brave, and DuckDuckGo's Privacy Browser, GPC signals a potential turning point in the fight against web tracking.

(developer.mozilla.org)

Tech web tracking

Temporal API: Revolutionizing Date and Time Handling in JavaScript

2025-01-30

The Temporal API simplifies date and time manipulation in JavaScript. It supports various calendar systems (like the Chinese Lunar calendar), handles time zone conversions seamlessly, and offers intuitive comparison methods. For example, it can calculate the next Chinese New Year or determine the duration until a future Unix timestamp. While `toLocaleString` behavior varies slightly across browser implementations, the Temporal API offers robust date and time operations, making it a boon for developers.

(developer.mozilla.org)

Development Date Time

MDN Learning Resources Get a Major Overhaul: New Learning Experience Launched

2024-12-25

In December 2024, MDN launched a major update to its "Learn Web Development" section, merging the MDN Curriculum with existing learning content to create a more streamlined learning path. This upgrade addresses previous issues like bloated content and unclear learning pathways, providing a clearer and more accessible experience for beginners. The new site uses a modular structure with "Getting Started," "Core," and "Extensions" sections, incorporating clear learning objectives and interactive content. MDN will continue to improve content and design, aiming to deliver even better learning resources in the future.

(developer.mozilla.org)

Development Web Development Learning Learning Resource Upgrade