# MDN Blog The MDN Web Docs blog publishes articles about web development, open source software, web platform updates, tutorials, changes and updates to MDN, and more. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Introducing the MDN MCP server DevFeed: [Introducing the MDN MCP server]() Original publisher: [Read original article]() Author: mdn-team Published: 2026-06-15T00:00:00Z Content type: release Language: en Sources: [MDN Blog]() Topics: [Model Context Protocol](), [MCP Server](), [Web Development](), [Web platform](), [browser](), [AI Agent](), [ide](), [Claude Code](), [codex]() Tags: [ai](), [ai-agent](), [browser](), [claude-code](), [cli](), [codex](), [coding](), [documentation](), [firefox](), [ide](), [llm](), [mcp](), [mcp-server](), [model-context-protocol](), [vs-code](), [web](), [web-platform]() ### AI overview MDN announces an experimental MCP server that connects AI tools, editors, and coding agents to MDN documentation and browser compatibility data. The article explains its supported clients and reports initial comparisons of Claude Code responses with and without the MCP enabled. ### Source excerpt MDN's MCP server brings MDN's documentation and browser compatibility data directly into your editor or IDE, giving your LLM or coding agent access to accurate, up-to-date web platform information. ## Under the hood of MDN's new frontend DevFeed: [Under the hood of MDN's new frontend]() Original publisher: [Read original article]() Author: leo-mcardle Published: 2026-04-08T00:00:00Z Content type: article Language: en Sources: [MDN Blog]() Topics: [Front end](), [Web Development](), [Server-side rendering](), [React](), [Markdown](), [CSS](), [HTML](), [JavaScript](), [Webpack](), [Git](), [JSON](), [Cloud]() Tags: [architecture](), [code](), [css](), [frontend](), [git](), [html](), [javascript](), [json](), [markdown](), [react](), [tool]() ### AI overview MDN's article explains the rebuild of its frontend, covering the architecture that transforms Markdown documentation into JSON and server-rendered HTML before global delivery. It discusses the limitations of the previous React application, including technical debt, complex Webpack configuration, build scripts, and inconsistent CSS practices. ### Source excerpt You may have spotted that MDN has a new frontend. There's plenty happening under the surface, so let's unpack the technologies we chose, the architectural decisions we made, and why we did a rebuild at all. ## Image formats: Codecs and compression tools DevFeed: [Image formats: Codecs and compression tools]() Original publisher: [Read original article]() Author: polina-gurtovaia Published: 2025-11-05T00:00:00Z Content type: article Language: en Sources: [MDN Blog]() Topics: [Transcodings]() Tags: [compression](), [experiment](), [image-processing](), [images](), [metrics](), [speed](), [tools]() ### AI overview The article examines practical trade-offs in image compression, including codec choice, image quality, file size, encoding speed, and processing costs. ### Source excerpt Image compression involves countless trade-offs between quality, size, and speed. In this final part of the series, we experiment with codecs, metrics, and tools to find practical ways to balance efficiency and visual fidelity. ## A beginner-friendly guide to view transitions in CSS DevFeed: [A beginner-friendly guide to view transitions in CSS]() Original publisher: [Read original article]() Author: yash-raj-bharti Published: 2025-10-09T00:00:00Z Content type: tutorial Language: en Sources: [MDN Blog]() Topics: [view transitions](), [CSS](), [Web Development](), [browser](), [Single-page application (SPA)]() Tags: [beginner](), [chrome](), [css](), [edge](), [firefox](), [guide](), [how-to](), [navigation](), [safari](), [user-experience](), [view-transitions](), [web-development]() ### AI overview A beginner-friendly tutorial on using CSS view transitions to add smooth animated navigation between pages in multi-page applications. It explains how the View Transition API and CSS view transitions support progressive enhancement across modern browsers, including Chrome, Edge, Safari, and developing Firefox support. ### Source excerpt Learn how to bring smooth, animated navigation to multi-page apps with view transitions. With just one line of CSS, you can enable seamless transitions between pages. ## Launching MDN's new front end DevFeed: [Launching MDN's new front end]() Original publisher: [Read original article]() Author: mdn-team Published: 2025-08-19T00:00:00Z Content type: article Language: en Sources: [MDN Blog]() Topics: [Front end](), [Web Development](), [Web platform](), [Web Components](), [CSS](), [Web APIs](), [HTML](), [User interface design](), [Usability](), [Library]() Tags: [article](), [code](), [components](), [css](), [developers](), [front-end](), [github](), [library](), [ui](), [usability](), [web](), [web-apis]() ### AI overview MDN has launched a rebuilt front end with a cleaner interface, improved usability, and support for modern CSS and web components. The update also improves typography, code rendering, search, icons, and navigation. ### Source excerpt MDN is getting a facelift 🎉. Discover what's changed, what's improved, and how navigating the site just got smoother. ## Image formats: Pixel data from encoders to decoders DevFeed: [Image formats: Pixel data from encoders to decoders]() Original publisher: [Read original article]() Author: polina-gurtovaia Published: 2025-08-04T00:00:00Z Content type: article Language: en Sources: [MDN Blog]() Topics: [Web Development](), [modern web development]() Tags: [data](), [devices](), [hardware](), [images](), [javascript](), [techniques](), [web]() ### AI overview An overview of image pixels, color data, image formats, and how pixel information is represented and manipulated in JavaScript. ### Source excerpt From individual pixels to fully decoded images on your screen, raw pixel data gets transformed, compressed, and efficiently delivered. Learn about the techniques and optimizations that shrink image information without any perceivable loss in quality. ## Celebrating 20 years of MDN DevFeed: [Celebrating 20 years of MDN]() Original publisher: [Read original article]() Author: joe-walker Published: 2025-07-23T00:00:00Z Content type: article Language: en Sources: [MDN Blog]() Topics: [Interop2027]() Tags: [collaboration](), [community](), [contributors](), [developers](), [docs](), [documentation](), [ecosystem](), [firefox](), [github](), [mozilla](), [open](), [platform](), [web](), [web-developers](), [web-platform](), [web-standards]() ### AI overview MDN marks its 20th anniversary, reflecting on its evolution from a community wiki into a broad resource for web developers and web-platform documentation. The article thanks its contributors and celebrates collaboration across the open web. ### Source excerpt MDN turns 20! Let's look at how we started, how MDN became the most trusted resource for web developers, the impact it's had on the open web, and yes, there's cake, too. ## Image formats: Color models for humans and devices DevFeed: [Image formats: Color models for humans and devices]() Original publisher: [Read original article]() Author: polina-gurtovaia Published: 2025-05-06T00:00:00Z Content type: article Language: en Sources: [MDN Blog]() Topics: [Web](), [Mathematics]() Tags: [developer](), [devices](), [image](), [images](), [models](), [vision](), [web]() ### AI overview This article introduces a series on the core principles behind image formats and color models. It explains how humans perceive light and color through the eye and brain, and how devices represent and reproduce color across screens. ### Source excerpt Images help bring more color and life to the web. This post describes how images are represented by humans and on different devices, with details about color spaces and vision theory. ## Default styles for h1 elements are changing DevFeed: [Default styles for h1 elements are changing]() Original publisher: [Read original article]() Author: simon-pieters Published: 2025-04-11T00:00:00Z Content type: article Language: en Sources: [MDN Blog]() Topics: [modern web development](), [Web Development](), [User interface design]() Tags: [accessibility](), [browsers](), [firefox](), [html](), [tools]() ### AI overview Browser default styles for nested h1 headings are changing as obsolete HTML outline-related UA stylesheet rules are removed. The article explains the impact on pages, Lighthouse warnings, and how to use explicit styling and better heading structure. ### Source excerpt Browsers are starting to roll out changes in default UA styles for nested section headings. This post describes the incoming changes, how to identify if it's an issue on your websites, and hints for conformant and better-structured pages. ## Implications of Global Privacy Control DevFeed: [Implications of Global Privacy Control]() Original publisher: [Read original article]() Author: lola-odelola Published: 2025-03-15T00:00:00Z Content type: article Language: en Sources: [MDN Blog]() Topics: [browser](), [Web](), [browsers](), [data]() Tags: [article](), [browser](), [browsers](), [data](), [developers](), [legal](), [privacy](), [regulatory](), [standards](), [web]() ### AI overview This article examines Global Privacy Control (GPC), a proposed web privacy standard intended to let users communicate preferences about the sale and sharing of their personal data. It discusses the first W3C working draft, implications for website owners and users, browser support, and how GPC differs from Do Not Track through legal and regulatory backing such as California's CCPA and the EU GDPR. ### Source excerpt Global Privacy Control (GPC) is on the way to becoming a formal privacy standard with the recent publication of its first working draft. Let's take a look at what the implications are for developers and users. ## JavaScript Temporal is coming DevFeed: [JavaScript Temporal is coming]() Original publisher: [Read original article]() Author: brian-smith Published: 2025-01-24T00:00:00Z Content type: article Language: en Sources: [MDN Blog]() Topics: [Web Development]() Tags: [apis](), [browsers](), [documentation](), [javascript]() ### AI overview JavaScript Temporal is beginning to ship experimentally in browsers, offering built-in, more reliable handling of dates, times, durations, time zones, and calendars. The article explains the shortcomings of the existing date API and introduces the new Temporal documentation on MDN. ### Source excerpt A new way to handle dates and times is being added to JavaScript. Let's take a look at Temporal, what problems it solves, the current state, and what you'll find in the new documentation about it on MDN. ## Fix your website's Largest Contentful Paint by optimizing image loading DevFeed: [Fix your website's Largest Contentful Paint by optimizing image loading]() Original publisher: [Read original article]() Author: debugbear Published: 2025-01-13T00:00:00Z Content type: tutorial Language: en Sources: [MDN Blog]() Topics: [Core Web Vitals](), [Website](), [Image](), [Optimization](), [HTML](), [Performance Testing](), [real user monitoring](), [Network](), [browser](), [JavaScript](), [CSS]() Tags: [article](), [browser](), [core-web-vitals](), [css](), [how-to](), [html](), [javascript](), [network](), [optimization](), [performance](), [performance-testing](), [user-experience](), [web]() ### AI overview This tutorial explains how image loading affects Largest Contentful Paint and Core Web Vitals. It covers image discovery through HTML, CSS, and JavaScript, request chains, network waterfalls, browser image-processing stages, and techniques for diagnosing and improving loading performance. ### Source excerpt Learn techniques to improve the Largest Contentful Paint metric, a part of Core Web Vitals, for your website. ## MDN 2024 content projects DevFeed: [MDN 2024 content projects]() Original publisher: [Read original article]() Author: vadim-makeev Published: 2025-01-08T00:00:00Z Content type: article Language: en Sources: [MDN Blog]() Topics: [Documentation](), [Web platform](), [HTTP](), [XML](), [Accessibility](), [LaTeX](), [math](), [HTML](), [Markdown]() Tags: [2025](), [accessibility](), [docs](), [html](), [http](), [latex](), [markdown](), [math](), [web-platform]() ### AI overview MDN Web Docs reviews its 2024 content projects, describing audits and updates to popular but outdated or incomplete material. The work focused on HTTP, MathML, and web Manifests, with particular detail on improved MathML documentation, examples, LaTeX annotations, browser compatibility data, and accessibility information. ### Source excerpt Let's have a look at MDN Web Docs content projects in 2024, with highlights of our top picks and recommended reading, and at what's next on MDN for 2025. ## A new learning experience on MDN DevFeed: [A new learning experience on MDN]() Original publisher: [Read original article]() Author: ruth-john Published: 2024-12-20T00:00:00Z Content type: article Language: en Sources: [MDN Blog]() Topics: [Learning](), [Web Development](), [Development]() Tags: [beginner](), [guide](), [learn-web-development](), [learning](), [multimedia](), [partner]() ### AI overview MDN merged its Curriculum into the Learn Web Development section to create a more streamlined learning experience. The update addresses bloated content, unclear learning paths, and demand for interactive multimedia resources. ### Source excerpt There's a new Learn Web Development section on MDN that merges the MDN Curriculum with the Learn section. Here's the background to these changes, what's new, and what you can expect to see in the future. ## Countdown to the holidays with daily coding challenges DevFeed: [Countdown to the holidays with daily coding challenges]() Original publisher: [Read original article]() Author: sonal-sood Published: 2024-12-01T00:00:00Z Content type: news Language: en Sources: [MDN Blog]() Topics: [Web Development](), [User interface design]() Tags: [accessibility](), [algorithms](), [coding](), [css](), [javascript](), [learn](), [ui-design](), [web-development]() ### AI overview MDN and Scrimba announce JavaScriptmas, a December series of daily coding challenges with introductory screencasts and starter code. The challenges focus mainly on JavaScript algorithms and also cover DOM manipulation, UI design, CSS, accessibility, and some cybersecurity. ### Source excerpt Join JavaScriptmas this December for daily coding challenges designed to boost your skills and bring festive fun. Solve challenges on Scrimba, learn something new, and take part for a chance to win exciting prizes! ## Monitoring and optimizing website performance DevFeed: [Monitoring and optimizing website performance]() Original publisher: [Read original article]() Author: debugbear Published: 2024-11-11T00:00:00Z Content type: tutorial Language: en Sources: [MDN Blog]() Topics: [Website](), [Network](), [browser](), [Interaction to Next Paint](), [JavaScript]() Tags: [interaction-to-next-paint](), [monitoring](), [network](), [performance](), [web-performance]() ### AI overview This tutorial explains how to monitor and optimize website performance. It covers network request waterfalls, page-load and runtime performance metrics, common issues, resource handling, testing tools, and optimization techniques. ### Source excerpt Learn about reading network request waterfalls, identifying common network performance issues, and optimizing page rendering. ## How to land your first developer job DevFeed: [How to land your first developer job]() Original publisher: [Read original article]() Author: per-borgen Published: 2024-11-01T00:00:00Z Content type: article Language: en Sources: [MDN Blog]() Topics: [coding](), [Code]() Tags: [article](), [career](), [developer](), [how-to](), [learning](), [linkedin](), [skills](), [tech](), [work]() ### AI overview The article presents six strategies for landing a first developer job, especially for self-taught programmers and people without a traditional computer science degree. It emphasizes combining prior industry experience with coding skills, using professional networks for referrals, and proactively contacting employees and following up during the application process. ### Source excerpt Here are six effective strategies for landing your first developer job. These are especially relevant if you're self-taught or breaking into the tech industry without a traditional CS degree. ## Introducing the new MDN Community page DevFeed: [Introducing the new MDN Community page]() Original publisher: [Read original article]() Author: pranshu-khanna Published: 2024-10-15T00:00:00Z Content type: article Language: en Sources: [MDN Blog]() Topics: [Open Source](), [Web](), [GitHub](), [Localization (l10n)](), [Discord](), [Internet]() Tags: [bugs](), [community](), [content](), [contribute](), [contributors](), [developers](), [discord](), [diversity](), [documentation](), [github](), [hub](), [internet](), [learn](), [open](), [open-source](), [platform](), [resources](), [skills](), [web](), [writing]() ### AI overview MDN introduces a new community page designed to recognize contributors, highlight their work, and help people connect and participate. The page features contributor profiles and stories, while inviting developers, writers, learners, and translators to contribute through activities such as improving documentation, fixing bugs, localization, GitHub work, and answering questions on Discord. ### Source excerpt We are thrilled to announce the new MDN community page that will be a hub to recognize our contributors and a place for contributors to get involved. ## Fixing your website's JavaScript performance DevFeed: [Fixing your website's JavaScript performance]() Original publisher: [Read original article]() Author: debugbear Published: 2024-10-09T00:00:00Z Content type: tutorial Language: en Sources: [MDN Blog]() Topics: [modern web development](), [Web platform](), [interactive website]() Tags: [browser](), [javascript](), [next-js](), [optimization](), [payload](), [performance](), [user-interfaces](), [web]() ### AI overview The article explains JavaScript-related web performance bottlenecks: long main-thread tasks, large bundles, and client-side hydration. It shows how slow parsing and execution can leave server-rendered content visible but temporarily unresponsive. ### Source excerpt Learn about lesser-known web performance bottlenecks connected to excessive JavaScript usage, like long tasks, large bundle sizes, and hydration issues. ## Get back to school! Supercharge your learning with MDN and Scrimba DevFeed: [Get back to school! Supercharge your learning with MDN and Scrimba]() Original publisher: [Read original article]() Author: hermina-condei Published: 2024-09-12T00:00:00Z Content type: news Language: en Sources: [MDN Blog]() Topics: [Learning](), [Front end](), [Web Development](), [CSS](), [HTML](), [JavaScript](), [Accessibility](), [React](), [Responsive Design](), [Git](), [GitHub](), [Netlify]() Tags: [accessibility](), [apis](), [courses](), [deployment](), [development](), [git](), [github](), [html](), [javascript](), [learning](), [netlify](), [react](), [responsive-design](), [web-development]() ### AI overview MDN announces a 30% discount on Scrimba's Frontend Developer Career Path for one month. The program covers HTML, CSS, JavaScript, APIs, accessibility, responsive design, React, Git, GitHub, Netlify deployment, user interface design, and career guidance, with interactive lessons and a live IDE. ### Source excerpt For many of us, the holidays are over, and the time has come to focus. Now is an ideal time to dive into learning web development, and you're in luck -- MDN and Scrimba are offering a 30% discount on select courses for the next month! ## Efficient data handling with the Streams API DevFeed: [Efficient data handling with the Streams API]() Original publisher: [Read original article]() Author: vultr Published: 2024-09-06T00:00:00Z Content type: article Language: en Sources: [MDN Blog]() Topics: [Streaming](), [JavaScript](), [web applications](), [API](), [Web Development](), [Command-line interface](), [Firewall](), [ssh]() Tags: [api](), [backpressure](), [data](), [efficiency](), [how-to](), [javascript](), [performance](), [stream](), [streaming](), [streams](), [web-applications]() ### AI overview This article explains how the Streams API lets JavaScript process network data incrementally as it arrives, instead of waiting for an entire resource to download. It covers chunk-based processing, backpressure, piping, and stream abstractions, then demonstrates a web application that transforms a data stream. ### Source excerpt This post demonstrates how to use the Streams API in a web application to fetch and transform text on the fly. By processing the data as it arrives, this approach enhances performance, responsiveness, and resource efficiency. ## Locale-sensitive text segmentation in JavaScript with Intl.Segmenter DevFeed: [Locale-sensitive text segmentation in JavaScript with Intl.Segmenter]() Original publisher: [Read original article]() Author: brian-smith Published: 2024-09-03T00:00:00Z Content type: tutorial Language: en Sources: [MDN Blog]() Topics: [JavaScript](), [Localization (l10n)](), [Web Development](), [browser]() Tags: [applications](), [browsers](), [how-to](), [javascript](), [learn](), [locale]() ### AI overview This tutorial explains how to use JavaScript's Intl.Segmenter to perform locale-sensitive text segmentation. It demonstrates structured, locale-aware word segmentation for Japanese text and shows how the results can support reliable word counts and other localization-aware application features. ### Source excerpt Learn how to use Intl.Segmenter for locale-sensitive text segmentation in JavaScript to simplify localization, count words or sentences in different languages, and more. ## Optimize your workflow with Git stash DevFeed: [Optimize your workflow with Git stash]() Original publisher: [Read original article]() Author: gitlab Published: 2024-08-28T00:00:00Z Content type: tutorial Language: en Sources: [MDN Blog]() Topics: [Git](), [Code]() Tags: [code](), [git](), [how-to](), [local](), [switching](), [workflow]() ### AI overview This tutorial explains how Git stash stores uncommitted local changes and examines its use when switching branches. It also presents temporary WIP commits as a safer, more convenient alternative because they are easier to track and can preserve changes on the branch. ### Source excerpt Learn how to use Git stash to break down large commits. Discover a better approach for saving work when switching branches. ## How to debug mobile apps across devices DevFeed: [How to debug mobile apps across devices]() Original publisher: [Read original article]() Author: testmuai Published: 2024-08-07T00:00:00Z Content type: tutorial Language: en Sources: [MDN Blog]() Topics: [debugging](), [Mobile](), [Testing](), [User interface design](), [App](), [Development](), [real-time](), [API]() Tags: [api](), [debug](), [debugging](), [how-to](), [mobile](), [mobile-apps](), [real-time](), [testing](), [ui](), [ui-design]() ### AI overview This post explains mobile app debugging, including how bugs can affect user experience, retention, and revenue. It describes debugging as finding and fixing application issues, covers the roles of developers and testers, and emphasizes testing across real devices and diverse device configurations. ### Source excerpt This post explores what mobile app debugging is, commonly used techniques, and how you can debug mobile apps on multiple devices. [Next page]()