Check what you actually know
31 quizzes. Every answer explained as you go, with a reference — and no account needed.
You're collecting async iterable results with a for-await loop. Array.fromAsync does it in one call.
A for-await loop that pushes into an array, or the `await Promise.all([...asyncIterable])` workaround that silently fails — `Array.fromAsync` replaces both with a single awaited call. It's Baseline 2024.
Take the quiz →
Your browser renders everything, even what you can't see — content-visibility: auto fixes that
Browsers lay out and paint the entire page on load, including the 80% below the fold. `content-visibility: auto` tells the browser to skip that work for off-screen elements — and it's Baseline 2024.
Take the quiz →
CORS Explained: The Complete Guide (with Cheat Sheet)
A complete guide to CORS: the same-origin policy, preflight requests, and Access-Control-Allow-Origin headers — with worked examples and a cheat sheet.
Take the quiz →
Your UI is freezing because you never gave the browser a break
Long synchronous tasks block the main thread and make your interface unresponsive. `scheduler.yield()` is the native way to hand control back to the browser mid-task so it can paint, handle input, and resume your work exactly where it left off.
Take the quiz →
You're writing dark-mode colors twice. light-dark() fixes that.
Every `@media (prefers-color-scheme: dark)` block duplicates your color definitions. `light-dark()` lets you write both values on the same line, in the same rule, with no separate block and no build step. Baseline 2024.
Take the quiz →
You've been wrapping new URL() in try/catch. URL.parse() does it natively.
Validating an untrusted URL before parsing it used to mean a try/catch wrapper or a regex. `URL.canParse()` checks validity without constructing. `URL.parse()` parses and returns null on failure. Both are Baseline 2024 — no wrapper needed.
Take the quiz →
CSS has no native scoping. @scope changes that.
BEM, CSS Modules, and scoped component styles all exist because CSS leaks — a rule written for one component can silently affect another. `@scope` gives the cascade a lower boundary so styles stay where you put them, natively, with no build step.
Take the quiz →
Array methods are eager. Iterator helpers are lazy. Here's why that matters.
Every `.map()` and `.filter()` on an array creates a new intermediate array. Iterator helpers — built into JavaScript since 2024 — give you the same pipeline but evaluate one element at a time, with no wasted allocations.
Take the quiz →
You reach for Sass to mix colors. color-mix() does it natively.
Sass's `darken()`, `lighten()`, and `mix()` functions solved real problems CSS couldn't handle for decades. `color-mix()` is the native answer, and it ships in every modern browser with no build step required.
Take the quiz →
You hand-edit headlines to avoid orphaned words. text-wrap: balance does it natively.
The classic fix for a headline that breaks awkwardly — a manual `<br>`, a `­`, or a max-width tweak — exists because CSS had no way to distribute line breaks evenly. `text-wrap: balance` and `text-wrap: pretty` are the native answers.
Take the quiz →
You're watching window to detect element size changes. ResizeObserver watches the element itself.
A `window` resize listener only fires when the viewport changes. ResizeObserver fires whenever the element's own box changes — from content loading, parent reflow, container queries, or anything else.
Take the quiz →
You use a setTimeout to trigger CSS entry animations. @starting-style makes it unnecessary.
Before `@starting-style`, the moment an element entered the DOM was invisible to CSS — transitions had no 'before' state to interpolate from. The at-rule gives you one, natively, with no JavaScript required.
Take the quiz →
You still write finally { resource.close() }. The using keyword does it automatically.
The Explicit Resource Management proposal adds a `using` declaration that calls cleanup the moment a scope exits — normal return, early return, or throw. No more try/finally boilerplate for timers, event listeners, connections, or any other resource you need to release.
Take the quiz →
You've been doing Set math by hand. JavaScript finally shipped .union(), .intersection(), and friends.
Set has always been missing its obvious operations. ES2025 adds `.union()`, `.intersection()`, `.difference()`, `.symmetricDifference()`, and three boolean predicates — native methods that used to require four lines of spread syntax each.
Take the quiz →
You keep escaping the Promise constructor. Promise.withResolvers does it right.
The 'deferred promise' pattern — storing resolve and reject outside the constructor so you can call them later — is a daily JavaScript idiom that's always felt awkward. ES2024 added a one-liner for it.
Take the quiz →
You're rethrowing errors and losing context. Error.cause fixes that.
Every time you catch an error and rethrow a new one without forwarding the original, you lose the stack trace, the error type, and everything useful about what actually went wrong. ES2022 added `Error.cause` to fix exactly this.
Take the quiz →
TypeScript Generics: The Complete Guide (with Cheat Sheet)
Learn TypeScript generics from the ground up — generic functions, constraints, defaults, and classes — with worked examples and a copy-paste cheat sheet.
Take the quiz →
Your scroll listener fires on every pixel. IntersectionObserver fires when visibility actually changes.
Detecting whether an element is in the viewport by listening to scroll events runs an expensive layout calculation on every frame. `IntersectionObserver` is the browser-native alternative — it fires only when visibility changes, off the main thread, with no scroll handler involved.
Take the quiz →
You're using Floating UI to position your tooltip. The browser does it natively now.
CSS Anchor Positioning is Baseline 2026 — it lets any element declare itself an anchor and any floating element position relative to it in pure CSS. No JavaScript, no layout math, no ResizeObserver wiring.
Take the quiz →
Your margin-left doesn't exist in Arabic. CSS logical properties fix that.
Physical CSS properties like `margin-left` and `padding-right` break silently when a layout needs to support right-to-left languages. Logical properties replace the physical axis with a writing-mode-aware model — one codebase, every direction.
Take the quiz →
Your CSS Grid cards look misaligned. subgrid is the fix you didn't know existed.
CSS Grid controls your outer container, but its children can't participate in the same tracks. `subgrid` closes that gap — nested elements align to the parent grid's rows and columns without padding hacks, fixed heights, or JavaScript measurements.
Take the quiz →
Your .sort() is mutating state. JavaScript finally gave you the fix.
The classic array methods — sort, reverse, splice — mutate the original array, silently breaking React state updates and surprising anyone who forgot to spread first. ES2023 added four immutable counterparts: toSorted, toReversed, toSpliced, and with.
Take the quiz →
You've been writing this reduce a hundred times. Object.groupBy does it in one.
Grouping an array by a key is one of the most common data transforms in frontend code. You've been wiring it by hand with `reduce` for years. `Object.groupBy` is the native version — no helper, no library, no ceremony.
Take the quiz →
JavaScript Event Loop Explained: The Complete Guide
Learn how the JavaScript event loop really works — call stack, microtasks, and macrotasks — with worked examples, edge cases, and a cheat sheet.
Take the quiz →
You reach for Promise.all for every concurrent request. Here's when to use the other three.
`Promise.all` fails the moment any one request fails. `allSettled`, `any`, and `race` each solve a different concurrency problem — dashboard partial results, CDN failover, and timeouts. Here's the taxonomy.
Take the quiz →
Your dropdown is a div. The browser has a native popover now.
Custom dropdowns, tooltips, and menus built with stacked divs and click-outside listeners — the Popover API landed in every browser in 2024, and the baseline version is two HTML attributes.
Take the quiz →
Your TypeScript config objects are losing type information. satisfies fixes it.
Type annotations widen your object types and erase the precise values TypeScript inferred. The `satisfies` operator validates against a type without changing what TypeScript keeps — you get the check without the widening.
Take the quiz →
You've been deep-cloning objects with a JSON hack. structuredClone does it right.
JSON.parse(JSON.stringify(obj)) silently corrupts Dates, Maps, Sets, and undefined values. structuredClone is the native replacement — no library, no import, no surprises.
Take the quiz →
You kept Sass for one reason. Native CSS nesting just ended it.
CSS has supported nesting natively since 2023 — pseudo-classes, pseudo-elements, and @media queries nested inside the rules they belong to. No compiler required.
Take the quiz →
You can't transition a CSS variable. @property says otherwise.
CSS custom properties are string substitution — the browser doesn't know a number from a color. Register one with @property and it gains a real type, an initial value, and the ability to animate.
Take the quiz →
Your scroll listener is doing CSS's job
Reading progress bars, reveal-on-scroll effects, parallax — you've been writing these in JavaScript. CSS scroll-driven animations bind them directly to scroll position, off the main thread, in a handful of lines.
Take the quiz →