Blog it better
![JavaScript Temporal is coming title. A JavaScript logo, a clock graphic and a globe with orbiting bodies symbolizing calendars and time.](./javascript-temporal-is-coming/featured.png)
JavaScript Temporal is coming
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.
![Text reads Fix your website's Largest Contentful Paint.](./fix-image-lcp/featured.png)
Fix your website's Largest Contentful Paint by optimizing image loading
Learn techniques to improve the Largest Contentful Paint metric, a part of Core Web Vitals, for your website.
![MDN 2024 content updates title. A JavaScript logo, a pi mathematical symbol, an icon representing the web, and artwork of a smartphone.](./mdn-2024-content-projects/featured.png)
MDN 2024 content projects
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 title. Common programming syntax used in CSS, HTML, Bash, and a star. A browser window in the top right with some code and a lightbulb signifying learning.](./curriculum-learn-web-development/featured.png)
A new learning experience on MDN
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 title. Seasonal artwork in the corners and artwork of a person coding.](./daily-holiday-javascript-challenges/featured.png)
Countdown to the holidays with daily coding challenges
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!
![Text reads monitoring and optimizing website performance. A graphic of a person sitting at a desk and working using desktop and keyboard](./optimize-web-performance/featured.png)
Monitoring and optimizing website performance
Learn about reading network request waterfalls, identifying common network performance issues, and optimizing page rendering.
![How to land your first developer job title. Hand-clapping icons on a colorful background.](./how-to-land-your-first-developer-job/featured.jpg)
How to land your first developer job
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 title on a gradient background. Image in the top right corner of two people planting a sapling. Image in the bottom left corner of four people greeting each other.](./new-community-page/featured.png)
Introducing the new MDN Community page
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.
![Fix JavaScript performance title. For modern web apps subtitle. The background image is a path through a forest.](./fix-javascript-performance/featured.png)
Fixing your website's JavaScript performance
Learn about lesser-known web performance bottlenecks connected to excessive JavaScript usage, like long tasks, large bundle sizes, and hydration issues.
![Back to school: Supercharge your learning with MDN and Scrimba title. A vibrant gradient with pencil and paper graphic in the bottom-left corner and a graphic with a laptop wearing a mortarboard academic cap in the top-right corner.](./mdn-scrimba-back2school/featured.png)
Get back to school! Supercharge your learning with MDN and Scrimba
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 title. A vibrant gradient with a JavaScript logo in the bottom-left corner and a graphic representing data being processed in a browser in the top-right corner.](./efficient-data-handling-with-the-streams-api/featured.png)
Efficient data handling with the Streams API
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 title. A vibrant gradient with a JavaScript logo in the bottom-left corner and a graphic representing localization in the top-right corner.](./javascript-intl-segmenter-i18n/featured.png)
Locale-sensitive text segmentation in JavaScript with Intl.Segmenter
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 title over a gradient background. A git icon in the bottom-left corner. A git "branch" icon in the top-right corner.](./optimize-your-workflow-git-stash/featured.png)
Optimize your workflow with Git stash
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 title. A magnifying glass over a bug icon in the bottom-left corner. The top-right corner has an icon of a mobile device.](./debug-mobile-apps-across-devices/featured.png)
How to debug mobile apps across devices
This post explores what mobile app debugging is, commonly used techniques, and how you can debug mobile apps on multiple devices.
![Exclusive accordions using the HTML 'details' element title. A vibrant gradient with a HTML and color picker logo in the bottom-left corner.](./html-details-exclusive-accordions/featured.png)
Exclusive accordions using the HTML details element
The 'name' attribute of the HTML details element is gaining more support across browsers. Learn how this feature allows creating exclusive accordions without scripting widgets from scratch.
![Exploring the Broadcast Channel API for cross-tab communication title. A gradient background with a JavaScript logo in the bottom-left corner and an icon representing a browser in the top-right corner.](./exploring-the-broadcast-channel-api-for-cross-tab-communication/featured.png)
Exploring the Broadcast Channel API for cross-tab communication
This article explains how to use the Broadcast Channel API to build synchronized and interconnected web applications.
![Illustration of two computer screens giving a high-five. The left screen displays the MDN Web Docs logo, while the right screen shows the Scrimba logo. The background is a light peach color with small decorative elements, suggesting a collaboration or partnership between MDN Web Docs and Scrimba.](./mdn-scrimba-partnership/featured.png)
MDN partners with Scrimba to enhance web development learning
We have chosen Scrimba as a course partner for the MDN Curriculum. This blog post explores what the partnership means practically, and how we will provide an even better web education experience together.
![Introducing the MDN HTTP Observatory title, with a pretty starry night sky background, a telescope, and a security shield](./mdn-http-observatory-launch/featured.png)
Introducing the MDN HTTP Observatory
First released in 2016, the HTTP Observatory became popular in the web community with a combination of helpful security audits and educational material. Fast forward to 2024, and we are delighted to announce that Observatory's new home is MDN. Read on to find out more about what this entails, and give the HTTP Observatory a warm welcome!
![Article Cover Image - Static Site Generation (SSG) with Next.js](./static-site-generation-with-nextjs/featured.png)
Static Site Generation (SSG) with Next.js
This guide explains how to use Static Site Generation in Next.js to build scalable and secure web applications with fast loading times and a focus on performance.
![New JavaScript Set methods title. A vibrant gradient with a JavaScript logo in the bottom-left corner and a venn diagram in the top-right corner.](./javascript-set-methods/featured.png)
New JavaScript Set methods
New JavaScript Set methods are landing across browsers. Learn about sets, how you can use these methods to compare different sets, create new sets with specific properties, and more.
![Article Cover Image - Securing APIs: Express rate limit and slow down](./securing-apis-express-rate-limit-and-slow-down/featured.png)
Securing APIs: Express rate limit and slow down
This guide introduces you to rate limits and slow down mechanisms. Learn how to apply slow down and rate limit mechanisms in Express applications.
![Using the Page Visibility API title. A vibrant gradient background with artwork of a laptop in the top-right corner and a JavaScript logo in the bottom-left corner.](./using-the-page-visibility-api/featured.png)
Using the Page Visibility API
This post takes a look at what page visibility is, how you can use the Page Visibility API in your applications, and describes pitfalls to avoid if you build features around this functionality.
![A year of publishing the MDN blog title. A vibrant gradient behind artwork representing different web technologies and categories including JavaScript, HTML, CSS, accessibility, and a running computer terminal.](./mdn-blog-one-year-on/featured.png)
A year of publishing the MDN Blog
We've been writing about web development and the web platform on the MDN Blog since May 2023. Here's our highlights and top posts along with our favorites.
![Setting up service workers on Vultr title. A gradient background with a shield icon in the top right and a JavaScript logo in the bottom right corner.](./setting-up-service-workers-on-vultr/vultr-service-workers-featured.png)
Setting up service workers on Vultr
This guide introduces you to service workers and their lifecycle. Learn how to deploy a project using service workers with HTTPS on Vultr.
![Interop 2023 MDN updates title. A vibrant gradient behind artwork representing mechanical compatibility in the top right corner and an upwards-trending graph in the bottom left corner.](./interop2023-mdn-doc-updates/interop.png)
Interop 2023: MDN updates
Interop 2023 has successfully concluded, and the Interop 2024 project is now officially underway. Learn what Interop is, discover the updates from Interop 2023 now on MDN, and find out what's coming to the web next.
![Title text reads Testing JavaScript with Jest on Vultr. The yellow background contains an icon depicting jest in the top right corner and the letters JS in the bottom left corner.](./test-javascript-with-jest-on-vultr/vultr-jest-featured.png)
Testing JavaScript with Jest on Vultr
This guide introduces you to the common types of tests and the testing conventions. Learn how to test JavaScript with Jest on Vultr.
![Text reading Creating color palettes with the CSS color-mix() function. A vibrant gradient behind the artwork of CSS in the top right corner and a graphic of a website with a color palette in the bottom left corner.](./color-palettes-css-color-mix/color-mix-featured.png)
Creating color palettes with the CSS color-mix() function
Working with colors on the web just got more interesting! In this article, we’ll explore how to use the CSS color-mix() function to create variations in color palettes.
![Title text reads modernizing conventional test automation with TestGrid. The graphics on the top right and bottom left corners depict test automation for mobile and web applications, respectively.](./modernizing-test-automation-with-test-grid/testgrid-featured.png)
Modernizing conventional test automation with TestGrid
This post reflects on the conventional test automation methods using Selenium and Appium. Learn how you can use TestGrid's unified testing platform to enhance the conventional methods and also leverage the modern codeless testing techniques.
![A desk with a laptop and a coffee cup on it, a lightbulb above, and books and a blackboard nearby](./mdn-curriculum-launch/featured.png)
Lift-off: The MDN Curriculum launch
The long-awaited MDN Curriculum is now live on MDN, providing a structured guide to the essential front-end development skills and best practices for industry newcomers. Learn all the key details in this article.
![Title text reading Creating effective technical documentation. A vibrant gradient behind the artwork of a checklist in the top right corner and the picture of a laptop next to a coffee mug in the bottom left corner.](./technical-writing/featured.png)
Creating effective technical documentation
This article provides an overview of the core components required for creating effective technical documentation. Learn the best practices to make your documentation clear, consistent, and well-structured.
![Title text reads Leveraging Bun on Vultr: A superior Node.js alternative. On a blue background, there's a playful bunny icon in the top right corner and the JavaScript logo in the bottom left corner.](./leveraging-bun-on-vultr-a-superior-node-js-alternative/vultr-featured.png)
Leveraging Bun on Vultr: A superior Node.js alternative
This guide explains Bun functionalities as a runtime package manager and a bundler. It also explains the benefits of built-in Bun APIs and how to use Bun's Vultr marketplace application.
![Title text reading Border images in CSS: A key focus area for Interop 2023. A vibrant gradient behind artwork of computer monitor with code in the top right corner and a stylized border image in the bottom left corner.](./border-images-interop-2023/featured.png)
Border images in CSS: A key focus area for Interop 2023
Aligning with Interop 2023's emphasis on cross-browser consistency, this post walks you through various `border-image` properties that you can control to create captivating web designs. Learn how to use custom graphics for enhancing the look of your websites that appear consistent across different browsers.
![Title text reading Build AI-powered applications using OpenLLM and Vultr Cloud GPU. The peach colored background contains icons depicting code stack in the top right corner and a microprocessor icon in the bottom left corner.](./build-ai-powered-apps-openllm-vultr-gpu/featured.png)
Build AI-powered applications using OpenLLM and Vultr Cloud GPU
Learn how to build AI-powered apps using OpenLLM and Vultr Cloud GPU. This guide shows how to generate API responses using a Large Language Model. It also covers instructions for setting up an Nginx server and implementing SSL security.
![Saying goodbye to third-party cookies in 2024 title. A vibrant gradient behind artwork of a cookie and a web browser.](./goodbye-third-party-cookies/third-party-cookies-featured.png)
Saying goodbye to third-party cookies in 2024
The tail end of 2023 welcomes positive news for web privacy, as Chrome announces it is to join Firefox and Safari in deprecating third-party cookies in 2024. Find out more details about these changes, and what they mean for web developers.
![Baseline's ongoing evolution. Updated widgets and definition. December 5, 2023. A vibrant gradient going from blue to green Baseline checkmarks.](./baseline-evolution-on-mdn/cover.png)
Baseline's evolution on MDN
Today we're updating the Baseline widgets and introducing a new one, along with the updated definition of Baseline.
![Developer essentials: JavaScript console methods title. A vibrant gradient behind artwork of a terminal with some example commands and a keyboard.](./learn-javascript-console-methods/console-logging-featured.png)
Developer essentials: JavaScript console methods
The JavaScript console is an essential tool for web development. Learn new and fun ways to use the console to display data and debug your code.
![Getting started with CSS container queries title. A vibrant gradient behind artwork representing a web browser and a mechanical keyboard.](./getting-started-with-css-container-queries/css-container-queries.png)
Getting started with CSS container queries
CSS container queries are a powerful new tool for our CSS layout toolbox. In this post we'll dive into the practicalities of building a layout with container queries.
![Image text reads Deploy Node.js applications with PM2 on Vultr. Learn how to deploy and monitor applications using PM2 and enable SSL protection with Let's Encrypt. The image has light blue and white color background. In the bottom left corner, there's a blue magnifying glass icon, and in the top right corner, there's a shield icon.](./deploying-node-js-applications-with-pm2-on-vultr/featured.png)
Deploying Node.js applications with PM2 on Vultr
Learn how to deploy a Node.js application on Vultr using PM2 to create persistent services. This guide shows how to efficiently use resources via PM2 cluster mode. It also covers Nginx server setup and SSL security.
![Image text reads "VS Code: tips and tricks for beginners. Learn about built-in features and useful extensions." The image has a vibrant gradient background with a vs code window at the bottom left and a graphic of a computer screen displaying a terminal window at the top right.](./vs-code-tips-tricks/vscode-featured.png)
VS Code: Tips and tricks for beginners
Discover essential tips and tricks for using Visual Studio Code (VS Code), a powerful IDE. Learn how to leverage its integrated editing features and Git support, and explore a few extensions.
![MDN Observatory 2.0 title. Coming soon subtitle. Gradient background with icon of a lock and an icon of a server and shield.](./mdn-observatory/mdn-observatory.png)
Coming Soon: MDN Observatory 2.0
Observatory 2.0 is launching soon as part of the Mozilla Developer Network as the MDN Observatory with new security scoring standards and other exciting updates.
![Three gear icons in different colors to represent optimization of DevSecOps workflows](./optimizing-devsecops-workflows-with-gitlab-conditional-ci-cd-pipelines/featured.png)
Optimizing DevSecOps workflows with GitLab's conditional CI/CD pipelines
This guide explores the various types of CI/CD pipelines and helps you understand their specific use cases. Learn how to leverage rules to create highly efficient DevSecOps workflows.
![Introduction to web sustainability. Learn how you can contribute to building a greener and sustainable web. A vibrant gradient background with one artwork of two hands cradling the image of planet and the other artwork of a green recycle symbol.](./introduction-to-web-sustainability/web-sustainability-featured.png)
Introduction to web sustainability
What can web designers and developers do to build a more sustainable web? This post explores the environmental impacts of web technologies and looks at some of the ways we can build greener websites.
![A group of pink-colored birds with wings outstretched flying in a formation, against a backdrop of a blue sky.](./migrating-from-github-to-gitlab-seamlessly-a-step-by-step-guide/featured.jpg)
Migrating from GitHub to GitLab seamlessly: A step-by-step guide
Thinking about making the move from GitHub to GitLab? This guide demystifies the migration process, addressing common concerns for DevSecOps teams that are looking to seamlessly transition between the two platforms. This post provides a step-by-step guided tutorial on how to migrate your data from GitHub into GitLab.
![A mandala pattern created out of plain text characters.](./announcing-mdn-front-end-developer-curriculum/mandala.png)
Announcing the MDN front-end developer curriculum
MDN has created a curriculum for aspiring front-end developers to build a rewarding and successful career. Take a look at the curriculum, who it's for, and the research it's based on.
![Creating custom easing effects in CSS animations using the linear() function. Learn how to have more control over your CSS animations by using the linear() function. A vibrant gradient behind artwork of CSS and a line graph chart.](./custom-easing-in-css-with-linear/linear-easing-featured.png)
Creating custom easing effects in CSS animations using the linear() function
The new CSS linear() timing function enables custom easing in animations. Explore how linear() works compared with other timing functions used for easing, with practical examples.
![Securing your CDN: Why and how you should use SRI title. Using SRI to verify scripts and resources subtitle. A gradient background with a padlock and a keyboard artwork.](./securing-cdn-using-sri-why-how/sri.png)
Securing your CDN: Why and how should you use SRI
Relying on external resources for your website is always fraught with risks. Learn how to protect your website and its visitors by using SRI to secure third-party content.
![Scroll progress animations in CSS. Learn how to link animations to the scroll progress of a container. A vibrant gradient behind artwork of computer graphic with code and a window with a scrollbar.](./scroll-progress-animations-in-css/scroll-animations.png)
Scroll progress animations in CSS
Scroll-driven animations are coming to CSS! In this post, we'll look at a few types of animations and learn how to link them to the scroll progress of a container.
![A mandala pattern created out of plain text characters.](./ai-explain-postmortem/mandala.png)
Reflections on AI Explain: A postmortem
We recently launched a feature called AI Explain, but we have rolled this back for now. In this post, we look into the story behind AI Explain: its development, launch, and the reasons that led us to press the pause button.
![Dev essentials: how to search code using grep title. Learn how to use fast and powerful search in the terminal subtitle. A vibrant gradient behind artwork of a terminal with some example commands and a keyboard.](./searching-code-with-grep/search-code-using-grep.png)
Developer essentials: How to search code using grep
grep is a powerful tool for searching code from the terminal. This post will show you how to use grep and why it's an essential developer tool.
![Image of OpenAI logo with MDN design](./introducing-ai-help/mdn-ai-help.png)
Introducing AI Help (Beta): Your Companion for Web Development
We're introducing an AI assistant powered by MDN and OpenAI GPT 3.5 to answer all your web development questions in real time.
![Learn how to use hue in CSS colors title. Explore color wheels and hues with HSL subtitle. A vibrant gradient behind artwork of a laptop and keyboard.](./learn-css-hues-colors-hsl/css-hues-colors.png)
Learn how to use hue in CSS colors with HSL
Hues are a bright way to define colors in CSS. Learn about hues, color wheels, how to use color functions, and how you can create vibrant color palettes for your website using hue.
![](./introducing-the-mdn-playground/play.png)
Introducing the MDN Playground: Bring your code to life!
MDN is launching a code Playground. Users can prototype ideas and expand all live samples into an interactive experience.
![MDN doc updates: CSS selectors and media queries, WebGPU and WebTransport APIS, Progressive web apps. June 12, 2023. A vibrant gradient behind artwork of a stack of books and a magnifying glass.](./mdn-docs-june-2023/mdn-june-2023.png)
MDN doc updates: CSS selectors & media queries, WebGPU & WebTransport APIs, Progressive web apps
Discover CSS :lang(), experimental media queries, manipulating graphics with WebGPU, client-server communication with WebTransport, ECMAScript module support, and more.
![A yellow and purple gradient, with hexagon shape highlights background, with the words 'How to draw any regular shape with one JavaScript function' and the date May 26, 2023](./javascript-shape-drawing-function/shape-drawing.png)
How to draw any regular shape with just one JavaScript function
Learn how to use JavaScript to draw any regular shape to a HTML canvas with a single function, and how to modify it to draw multiple shapes.
![JavaScript regular expressions reference pages, updates, browser compatibility, May 23, 2023](./regular-expressions-reference-updates/regex-reference-updates.png)
New reference pages on MDN for JavaScript regular expressions
See the latest updates to the MDN reference pages about JavaScript regular expressions, including new sections on sub-features and browser compatibility information.
![Global Accessibility Awareness Day, tools, hints, and guidelines, May 18, 2023](./accessibility-celebrating-gaad-2023/accessibility-awareness-day.png)
Celebrating Global Accessibility Awareness Day
In celebration of Global Accessibility Awareness Day in 2023, we share some tools and guidelines to help you make the web more accessible.
![HTML landmark roles for improved accessibility, learn about landmark roles and how to use them, May 15, 2023](./aria-accessibility-html-landmark-roles/html-landmark-roles.png)
Using HTML landmark roles to improve accessibility
Learn what HTML landmark roles are, how they improve accessibility, and how you can include them on your website effectively.
![](./baseline-unified-view-stable-web-features/baseline.png)
Introducing Baseline: a unified view of stable web features
MDN leads the way in implementing WebDX community group's efforts, delivering a clear and simple baseline for the web platform to developers.
![](./css-not-pseudo-multiple-selectors/css-not-pseudo-class.png)
How :not() chains multiple selectors
Learn how the CSS `:not()` pseudo-class behaves when multiple selectors are passed as argument.
![CSS color functions, gradients, color spaces title. What's new in CSS Colors Module Level 4 subtitle. A vibrant gradient behind artwork of a laptop and keyboard](./css-color-module-level-4/css-color-functions-lvl4.png)
New functions, gradients, and hues in CSS colors (Level 4)
Learn what's new in CSS Colors Module Level 4, including color spaces, color functions, fancy gradients, and support for wide-gamut displays.
![A mandala pattern created out of plain text characters.](./welcome-to-the-MDN-blog/mandala.png)
Welcome to the MDN blog
The MDN blog publishes web development news, tutorials, and insights as an extension of MDN Web Docs, helping you discover, learn, and create for the web.