Code snippet demonstrates accessing the clipboard using the modern Clipboard API with async/await syntax.
Read and write to the clipboard with the modern Clipboard API 📋
async/await, permission-aware, and way cleaner than execCommand.
⋅ Supports text, HTML, and images
⋅ Works in secure contexts (HTTPS)
⋅ No Flash. No hacks.
Learn more 👇
developer.mozilla.org/en-US/docs/...
The graphic displays the syntax for the `caretPositionFromPoint()` function in a code snippet format against a blue background.
🆕 Document.caretPositionFromPoint() is Newly Available!
Give it an (x, y) coordinate and get back the exact DOM node and character offset. Perfect for click-to-edit interfaces.
Check it out 👇
developer.mozilla.org/en-US/docs/...
Code snippet demonstrating `Promise.withResolvers()` to transform a stream into an async iterable, utilizing error handling and yielding chunks.
Creating a resolvable Promise just got cleaner 🧹
`Promise.withResolvers()` returns { promise, resolve, reject }
No more wrapping logic inside the constructor.
Learn more 👇
developer.mozilla.org/en-US/docs/...
CSS nesting is now Baseline 🎉
Write nested selectors directly in CSS — just like Sass, but natively.
.card {
color: black;
&:hover { color: blue; }
.title { font-weight: bold; }
}
No preprocessor needed.
Learn more 👇
developer.mozilla.org/en-US/docs/...
CSS subgrid solves the hardest grid alignment problems 🏗️
Child elements can participate in the parent grid — aligning across components without hacks.
grid-template-columns: subgrid;
grid-template-rows: subgrid;
Baseline 2023 ✅
Learn more 👇
developer.mozilla.org/en-US/docs/...
Access array elements from the end with .at() 🎯
arr.at(-1) returns the last element — clean, readable, works on all array-like structures.
const last = [1, 2, 3].at(-1); // 3
No more arr[arr.length - 1] everywhere.
Learn more 👇
developer.mozilla.org/en-US/docs/...
Style native form controls with just one CSS property 🎨
accent-color sets the tint color for checkboxes, radio buttons, range inputs, and progress bars.
accent-color: oklch(60% 0.2 250);
No custom checkbox hacks. Just CSS.
Learn more 👇
developer.mozilla.org/en-US/docs/...
Code snippet demonstrating gzip compression of a stream using the CompressionStream API with an MDN example context.
Compress and decompress data in the browser natively 📦
The Compression Streams API brings gzip and deflate to the web, no libraries needed.
⋅ Works with ReadableStream and WritableStream
⋅ Compresses arbitrary data client-side
Learn more 👇
developer.mozilla.org/en-US/docs/...
Build smooth scroll experiences with CSS scroll snap 📜
Snap scrollable containers to specific positions — carousels, galleries, and paginated views with zero JavaScript.
Learn more 👇
developer.mozilla.org/en-US/docs/...
Code snippet demonstrating the creation of a `WeakRef` object in JavaScript to hold a weak reference to a DOM element within a class.
Hold object references without preventing garbage collection 🗑️
`WeakRef` lets you reference an object while allowing it to be GC’d if nothing else holds a strong reference. Use for caches, and pair with FinalizationRegistry.
Learn more 👇
developer.mozilla.org/en-US/docs/...
Code snippet demonstrates CSS `@starting-style` for transitioning background color from transparent to green over 1.5 seconds.
🆕 Animate elements from display: none
CSS `@starting-style` lets you define the initial style for elements entering the page, enabling enter animations without JavaScript.
⋅ Combine with transition
⋅ Works with popover and dialog
Learn more 👇
developer.mozilla.org/en-US/docs/...
Code snippet demonstrating the use of `performance.mark()` to create named markers for measuring JavaScript code performance.
Measure your own code performance precisely ⏱️
`performance.mark()` and `performance.measure()` let you instrument JavaScript with high-precision timings.
Learn more 👇
developer.mozilla.org/en-US/docs/...
Code snippet demonstrating `Promise.withResolvers()` to transform a stream into an async iterable, utilizing error handling and yielding chunks.
Creating a resolvable Promise just got cleaner 🧹
`Promise.withResolvers()` returns { promise, resolve, reject }
No more wrapping logic inside the constructor.
Learn more 👇
developer.mozilla.org/en-US/docs/...
Syntax for `requestIdleCallback()` shown on a dark background, highlighting its parameters for managing browser idle time efficiently.
Run non-critical work without blocking the UI 💤
`requestIdleCallback()` schedules tasks during browser idle time.
⚠️ Limited Availability
⋅ Runs only when the main thread is free
⋅ Great for analytics, prefetching, and cleanup
Learn more 👇
developer.mozilla.org/en-US/docs/...
Code snippet showcasing various CSS `backdrop-filter` functions like blur, brightness, contrast, and saturation against a blue background.
Create frosted glass effects in CSS 🪟
backdrop-filter applies visual effects to the content behind an element — blur, brightness, contrast, and more.
backdrop-filter: blur(10px) brightness(0.9);
No JavaScript. No canvas tricks.
Learn more 👇
developer.mozilla.org/en-US/docs/...
JavaScript code demonstrating `Promise.allSettled()` handling fulfilled and rejected promises, along with results logging output.
Wait for all promises, even the failing ones 🔄
`Promise.allSettled()` waits for every promise to finish, success or failure.
⋅ Returns { status: 'fulfilled', value } or { status: 'rejected', reason }
⋅ Perfect for batch operations
Learn more 👇
developer.mozilla.org/en-US/docs/...
Code snippet displaying the CSS property "overscroll-behavior" with various keyword, two-value, and global value options on a blue background.
Stop scroll chaining with overscroll-behavior 🛑
Prevent modals and sidebars from accidentally scrolling the page behind them.
⋅ Works on any scrollable element
⋅ Also controls the bounce effect on mobile
Learn more 👇
developer.mozilla.org/en-US/docs/...
A code snippet demonstrates a function that retrieves the last character of a string using the `.at()` method.
Access characters from the end of a string with .at() ✨
str.at(-1) gets the last character, no more str[str.length - 1] gymnastics.
Works on strings, arrays, and typed arrays.
Learn more 👇
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/...
Code snippet demonstrating the use of Object.hasOwn() in JavaScript to check property existence in various scenarios.
📬 Check own properties safely with Object.hasOwn()
A safer alternative to hasOwnProperty, works even on objects with a null prototype.
Baseline since 2022 ✅
Learn more 👇
developer.mozilla.org/en-US/docs/...
A code snippet displays various CSS aspect-ratio settings, including fallback and global values, set against a blue background.
Maintain perfect proportions with CSS aspect-ratio 📍
No more padding-top hacks for 16:9 videos or square avatars.
aspect-ratio: 16 / 9;
⋅ Works with any box model
⋅ Respects min/max dimensions
⋅ Baseline since 2021 ✅
Learn more 👇
developer.mozilla.org/en-US/docs/...
Code snippet demonstrates using `ResizeObserver` to adjust element width dynamically based on its content size.
React to element size changes, not just the window 📐
`ResizeObserver` fires when any element's dimensions change, perfect for responsive components.
⋅ Observe padding box, content box, or border box
⋅ Works with dynamic DOM changes
Learn more 👇
developer.mozilla.org/en-US/docs/...
CSS snippet detailing the `content-visibility` property with keyword and global values for efficient rendering practices.
Speed up rendering with content-visibility: auto ⚡
This CSS property skips rendering off-screen content until needed, giving massive performance wins on long pages.
⋅ Pairs with contain-intrinsic-size
⋅ Zero-effort lazy rendering
Learn more 👇
developer.mozilla.org/en-US/docs/...
Code snippet demonstrating a CSS animation using the Web Animations API with keyframes for color and 3D transformations.
Control animations with JavaScript 🎬
The Web Animations API gives you programmatic control over CSS animations.
⋅ Play, pause, reverse, and seek
⋅ Read animated values in real time
⋅ Combines well with scroll-driven animations
Learn more 👇
developer.mozilla.org/en-US/docs/...
Code snippet demonstrates accessing the clipboard using the modern Clipboard API with async/await syntax.
Read and write to the clipboard with the modern Clipboard API 📋
async/await, permission-aware, and way cleaner than execCommand.
⋅ Supports text, HTML, and images
⋅ Works in secure contexts (HTTPS)
⋅ No Flash. No hacks.
Learn more 👇
developer.mozilla.org/en-US/docs/...
A code snippet highlights the syntax for creating a new AbortController in a dark text box on a gradient blue background.
Cancel fetch requests and async operations cleanly ✋
`AbortController` gives you a signal to pass to fetch(), event listeners, and other async APIs.
⋅ Use AbortSignal.timeout() for timeouts
⋅ Composable with AbortSignal.any()
Learn more 👇
developer.mozilla.org/en-US/docs/...
Code snippet demonstrating the use of `self.crypto.randomUUID()` for generating a UUID in JavaScript, with a sample output shown.
Generate cryptographically secure UUIDs in the browser 🔐
`crypto.randomUUID()` is built into the Web Crypto API, no npm package needed.
Works in all modern browsers and Node.js 14.17+.
Learn more 👇
developer.mozilla.org/en-US/docs/...
Code snippet demonstrating a simple popover with a toggle button, showcasing HTML attributes for functionality.
🆕 The Popover API is Baseline, no JavaScript needed
Tooltips, dropdowns, and menus with just HTML attributes.
⋅ popover attribute on any element
⋅ popovertarget to wire the trigger
⋅ Accessible by default, no ARIA hacks
Learn more 👇
developer.mozilla.org/en-US/docs/...
Code snippet demonstrating error handling in JavaScript using `try`, `catch`, and `Error.cause` for maintaining context during rethrowing.
Better error chaining is finally in JavaScript 🔗
`Error.cause` lets you attach the original error when rethrowing, keeping full context without losing the stack.
Learn more 👇
developer.mozilla.org/en-US/docs/...
