JavaScript code snippet lists an inventory of items with names, types, and quantities, demonstrating `Object.groupBy()` functionality.
Stop writing reduce() just to group an array ✋
`Object.groupBy()` works on all major browsers, helping you group array elements by any key in one line.
Clean, readable, no dependencies.
Learn more 👇
developer.mozilla.org/en-US/docs/...
CSS Container Queries change everything for component-based design 📦
Style elements based on their parent's size, not just the viewport.
⋅ Use @container to scope styles
⋅ Works with inline-size, block-size, and style queries
Learn more 👇
developer.mozilla.org/en-US/docs/...
Are you still not using Iterator instance methods? ✨
They work like array methods — without creating intermediate arrays.
✨ map(), filter(), reduce()
✨ drop(), take(), flatMap()
Chain them on any iterator. Learn more 👇
developer.mozilla.org/en-US/docs/...
Dark code snippet card showing CSS example: "div { top: calc(100px * sign(var(--offset))); }" with title "sign() - MDN" on a blue gradient background.
sign() is Newly Available on Baseline ➖➕
Unlike abs(), which returns a magnitude, sign() returns the direction of a value: -1, 1, 0, or -0.
Useful when layout logic depends on whether a value is positive or negative.
Learn more here 👇
developer.mozilla.org/en-US/docs/...
Thanks for sharing, deleted. ✅
🍪 CookieStore API offers a modern, promise-based way to read, write, update, and delete cookies, all without parsing strings manually.
It brings,
✅ Async operations
✅ Structured data
✅ Service worker support
Learn more 👇
developer.mozilla.org/en-US/docs/...
JavaScript's date object has been tricky for years, but that is changing.
The NEW Temporal API brings,
🌍 Easily handle time zones
📆 Precise date math
🕒 Parse ISO strings without errors
⌛ Durations, date ranges, and more.
Start experimenting 👇
developer.mozilla.org/en-US/docs/...
Dark-themed code snippet showing URLPattern examples on MDN: two JavaScript blocks matching "/books" and "/books/:id" with console.log outputs.
🆕 The URL Pattern API is Newly Available!
Use it to match and extract parts of URLs, no need to reinvent routing logic. Supports literals, wildcards, named groups, and even regex constraints.
Learn how it works 👇
developer.mozilla.org/en-US/docs/...
A code snippet outlines the syntax for the CSS property "print-color-adjust," including various global value options.
Keep your designs looking perfect in print 🖨️
The print-color-adjust property controls whether browsers can optimize colors when printing. Set it to 'exact' to preserve your exact color scheme and prevent unwanted adjustments.
Learn more 👇
developer.mozilla.org/en-US/docs/...
Stylized dark code window showing a CSS rule using abs(var(--font-size)) to set h1 font-size, on a blue gradient background.
➕ Meet abs() in CSS
The abs() function returns the absolute value of a calculation, keeping numbers, lengths, or percentages always positive. Useful for safer layouts and predictable visuals.
Learn more here ↓
developer.mozilla.org/en-US/docs/...
Meet the CSS Custom Highlight API ✨
Style arbitrary text ranges without modifying the DOM.
📝 Great for search results
💻 Syntax highlighting
📚 Text annotations
Learn how it works 👇
developer.mozilla.org/en-US/docs/...
🦊 Firefox 148 is here with exciting updates for web developers!
✨ Key highlights:
• Synchronous about:blank loading
• CSS shape() function
• Iterator.zip() methods
• Trusted Types API
• Enhanced anchor positioning
Full release notes 👇
developer.mozilla.org/en-US/docs/...
📋 Need to check clipboard compatibility?
ClipboardItem.supports() lets you verify if a MIME type can be written to the clipboard before attempting the write - perfect for handling SVG images and custom formats gracefully.
Check it out 👇
developer.mozilla.org/en-US/docs/...
🎨 Meet rcap in CSS
The rcap unit represents the cap height of the root element's font - perfect for typography-based layouts that scale consistently.
Great for responsive designs that respect user font preferences.
Learn more here ↓
developer.mozilla.org/en-US/docs/...
Code snippet showcases how to use the scrollend event in JavaScript, highlighting syntax for adding event listeners.
Know when users finish scrolling 📜
The scrollend event fires when scrolling completes - after gestures end and scroll position stops updating. Perfect for lazy loading, analytics, or finalizing UI updates.
Learn how it works 👇
developer.mozilla.org/en-US/docs/...
Optimize rendering with CSS Containment 📦
Isolate page subtrees from the rest of the DOM so browsers can optimize independently.
🚀 Better performance for large pages
🧩 Modular, reusable components
📐 Enables container queries
Learn more 👇
developer.mozilla.org/en-US/docs/...
The content-visibility: auto property defers rendering for off-screen elements, then automatically renders them when they come into view.
⚡ Faster initial loads
📜 Better scroll performance
♿ Preserves accessibility
Read more ↓
developer.mozilla.org/en-US/docs/...
Meet the CSS Custom Highlight API ✨
Style arbitrary text ranges without modifying the DOM.
📝 Great for search results
💻 Syntax highlighting
📚 Text annotations
Learn how it works 👇
developer.mozilla.org/en-US/docs/...
Code snippet showcasing the syntax for Atomics.pause() with two variations: empty parentheses and parentheses with a duration hint.
Need efficient spinlocks in your multi-threaded code? 🔄
Atomics.pause() provides a micro-wait primitive that hints to the CPU you're spinning while waiting on shared resources. It reduces power consumption without yielding the thread.
Learn more here 👇
developer.mozilla.org/en-US/docs/...
Two layouts comparing link interaction options: a button for copying links versus an anchor link with additional context on MDN sections.
We're exploring ways to make it easier to share specific links to sections on MDN. Which interaction feels most natural to you?
Vote A, or B. 🗳️
A code snippet outlines the syntax for the CSS property "print-color-adjust," including various global value options.
Keep your designs looking perfect in print 🖨️
The print-color-adjust property controls whether browsers can optimize colors when printing. Set it to 'exact' to preserve your exact color scheme and prevent unwanted adjustments.
Learn more 👇
developer.mozilla.org/en-US/docs/...
AI is reshaping democracy whether we like it or not.
So let’s make sure it serves people.
The Democracy x AI Incubator is now open.
Deadline: March 16, 2026
https://bit.ly/406u4yj
Interop 2026 is here! 🌐
After boosting browser compatibility scores from 25 to 95 in 2025, Apple, Google, Igalia, Microsoft, and Mozilla tackle 20 new focus areas to improve web platform consistency.
Read more on what the focus is this year 👇
hacks.mozilla.org/2026/02/lau...
Interop 2026 is here! 🌐
After boosting browser compatibility scores from 25 to 95 in 2025, Apple, Google, Igalia, Microsoft, and Mozilla tackle 20 new focus areas to improve web platform consistency.
Read more on what the focus is this year 👇
hacks.mozilla.org/2026/02/lau...
Code snippet detailing CSS anchor-scope property values, including single, multiple, and global value examples for web development.
Using CSS Anchor Positioning with repeated components?
anchor-scope is now part of Baseline 2026 🆕
It prevents tooltips/popovers from accidentally attaching to the wrong anchor elsewhere in the DOM.
Check it out 👇
developer.mozilla.org/en-US/docs/...
Working with <dialog> elements? 🤔
Don't use .close(), it ends the dialog immediately.
Use HTMLDialogElement.requestClose(), it fires a close event first, giving your app a chance to intercept it, useful for confirmation or animations.
Try now 👇
developer.mozilla.org/en-US/docs/...
we agree 😸
Newly Available: CustomStateSet ✅
What is it? 🤔
It’s a new API that lets developers define and manage custom states on HTML elements, enabling fine-grained styling and behavior control using the :state() CSS pseudo-class.
Start experimenting now 👇
developer.mozilla.org/en-US/docs/...
A colorful infographic titled “MDN HTTP Code Cheatsheet with Emojis.” It categorizes HTTP status codes using emoji-enhanced lists grouped by status code classes.
Ever wish HTTP status codes were easier to remember? 🖼️
Check out this MDN cheatsheet that pairs each status code with an emoji to help you visualize what each one means, from 200 OK ✅ to 418 I’m a teapot 🫖
Check it out 👇
MDN is more than just a resource. It's a community of developers, contributors, and learners passionate about web development.
Contribute to,
📚 MDN documentation
🤝 Help other devs
💟 Localize content
📝 Review or write on MDN
Start now 👇
developer.mozilla.org/en-US/commu...
