JavaScript Fundamentals
More to discover ↗An AbortController can remove a group of DOM event listeners when a widget is finished. Try a small browser-console example, then learn where this cleanup pattern helps and what it does not clean up.
Read article ↗
Browser APIs
More to discover
A practical guide to tracing browser requests, distinguishing HTTP errors from connection failures, and checking response bodies and headers when an interface receives the wrong data.
Read article · 4 min↗Learn a repeatable way to investigate JavaScript bugs in browser DevTools. Follow a small example from an unexpected result to a fix using breakpoints, stepping controls, the call stack, and variable inspection.
Read article · 4 min↗A bug report becomes more useful when it identifies an input, an expected result, and an actual result. Follow a small JavaScript example from reported failure to failing test, focused fix, and lasting regression coverage.
Read article · 4 min↗Coverage reports show which code ran during a test suite, not whether the tests checked the right behavior. Learn how to read common coverage measures, investigate gaps, and use the report to guide better tests.
Read article · 4 min↗End-to-end tests become less fragile when they identify controls by meaningful attributes and wait for observable results instead of elapsed time. Learn how to choose selectors, handle asynchronous updates, isolate test data, and diagnose failures with a practical Playwright example.
Read article · 4 min↗A practical way to decide whether a web feature needs a unit, integration, or end-to-end test, using a searchable list as an example. Learn what each level can prove, where to place test doubles, and how to keep the suite useful.
Read article · 4 min↗A practical way to test a component is to start with what a user can do, then check what appears on the page. Build a small counter in the browser and use it to test initial state, clicks, cleanup, and the limits of automated interaction.
Read article · 3 min↗DOM tests give fast feedback on interface logic, while real-browser tests check behavior that depends on layout, input, and browser rendering. Learn where each belongs, using a disclosure component as a practical example.
Read article · 4 min↗A test double should answer a specific question, not imitate an entire dependency. Learn when to observe a real function with a spy, supply a predictable result with a stub, or enforce an interaction with a mock, using a small JavaScript example.
Read article · 4 min↗A small injectable fetch function makes three important outcomes easy to test: a successful response, an HTTP error response, and a rejected request. Follow a reproducible example using Node’s built-in test runner.
Read article · 4 min↗Fake timers let you test debouncing, delayed updates, and other timer-driven behavior without making your test suite wait. Learn how to advance time deliberately, check boundary conditions, handle promises, and restore the real clock after each test.
Read article · 3 min↗Promise tests need to observe both outcomes: a fulfilled value and a rejected promise. Learn how to use Node.js’s built-in test runner to await results, assert errors, and avoid tests that pass before asynchronous work finishes.
Read article · 3 min↗Parameterized tests run the same assertion with a table of inputs and expected results. Learn how to write them with Node.js, choose useful cases, and keep failures easy to diagnose.
Read article · 3 min↗A test should pass whether it runs alone or alongside the rest of the suite. Learn when to reset shared values, how to remove listeners and timers after a test, and why creating fresh state for each test is often the stronger design.
Read article · 4 min↗A function can pass every typical example and still fail at its limits. Learn how to turn a small input contract into focused tests for boundary values, malformed input, and nearby valid cases, using only Node.js and its built-in test runner.
Read article · 4 min↗A practical way to structure JavaScript tests so their setup, behavior, and expectations are easy to follow. Build a small fixture, test a calculation, and learn when to keep setup inside the test.
Read article · 4 min↗A useful test tells you which behavior broke, not which line of code changed. Learn how to assert observable results, choose the right level of detail, and write failure messages that speed up debugging without making refactoring painful.
Read article · 4 min↗Create a small JavaScript function, test it with Node.js’s built-in test runner and strict assertions, then use a failing test to understand what the result tells you. No testing package or project setup is required.
Read article · 4 min↗JSON is a useful format for moving data between systems, but JavaScript objects do not always survive a JSON round trip unchanged. Learn which values JSON supports, what JSON.stringify omits or converts, and how to handle JSON.parse errors.
Read article · 4 min↗Learn how JavaScript errors move through a program, when to throw your own Error, how to handle a failure with try and catch, and where finally fits into cleanup. Examples work in a modern browser console or a recent Node.js environment.
Read article · 4 min↗Learn how JavaScript promises carry future results, how async/await makes dependent steps easier to read, and when independent operations can run together. Reproducible examples use only features available in a modern browser console or a current Node.js environment.
Read article · 4 min↗ES modules let you divide JavaScript into files with clear responsibilities. Learn when to use named or default exports, how to import them, and how to run a small browser example without common path and loading mistakes.
Read article · 3 min↗A JavaScript class provides a convenient way to create objects, but method sharing still happens through prototypes. Learn where properties live, how lookup works, and how to inspect the chain with a small reproducible example.
Read article · 4 min↗The value of this depends on how a regular function is called, while an arrow function takes this from where it was created. Learn how that difference affects methods, callbacks, event listeners, and common fixes for lost context.
Read article · 4 min↗A closure lets a JavaScript function use variables from the place where it was created, even after the surrounding function returns. Learn how lexical scope works, why captured values can change, and where closures are useful in everyday code.
Read article · 4 min↗Learn what happens when a JavaScript function receives fewer or more arguments than expected, how default and rest parameters work, and why an explicit return value makes a function easier to use.
Read article · 3 min↗Learn how to unpack arrays and objects with destructuring, gather remaining values with rest syntax, and use spread syntax to create shallow copies. Practical examples show where defaults help and where nested references still matter.
Read article · 4 min↗Learn when to use bracket notation for dynamic property names and when optional chaining prevents a missing object from throwing an error. Reproducible examples show how to combine both forms, provide defaults, and distinguish a missing property from a property whose value is undefined.
Read article · 4 min↗Use map when every item becomes a new value, filter when some items should be kept, and reduce when many items must become one result. A small, runnable example shows how to choose between them and avoid common mistakes.
Read article · 4 min↗Learn which array methods change the original array and which return a copy. Use slice, splice, sort, toSpliced, and toSorted to make updates predictable, with examples that also explain shallow copying and browser compatibility.
Read article · 4 min↗These three loops answer different questions: do you need an index, a value from an iterable, or a property name? Learn how to choose a loop for arrays, strings, and objects, and where sparse arrays and inherited properties can surprise you.
Read article · 4 min↗JavaScript offers several ways to choose between outcomes. Learn when an if statement, a switch statement, or the conditional operator makes a branch easiest to understand, with examples you can run in a modern browser console or Node.js.
Read article · 4 min↗Learn how to build readable strings with template literals, extract text with slice(), and avoid off-by-one and Unicode indexing surprises. Examples run in a modern browser console or a Node.js environment that supports modern JavaScript.
Read article · 4 min↗The || and ?? operators can both provide fallback values, but they disagree about when a fallback is needed. Learn how to preserve meaningful values such as 0, false and an empty string while still handling missing data.
Read article · 4 min↗JavaScript has three common ways to compare values, and they do not always agree. Learn how type conversion, NaN, signed zero, and object identity affect the result, with examples you can run in a browser console.
Read article · 4 min↗Learn when to use String(), Number(), and Boolean(), why some inputs produce surprising results, and how to validate numeric text before it becomes NaN.
Read article · 4 min↗Why does changing one variable sometimes affect another? Learn how JavaScript copies primitive values, shares references to objects, and handles mutation, reassignment, and shallow copies.
Read article · 4 min↗Learn how JavaScript’s three variable declarations differ, with small examples you can run in a browser console. See when reassignment is allowed, why blocks matter, and what “hoisting” means in practice.
Read article · 4 min↗Build a reorderable list with native browser drag-and-drop and Up and Down buttons. Both interactions use the same move function, so the list order and screen-reader announcement stay consistent.
Read article · 4 min↗A progress indicator is useful only when it reflects what the application knows. Learn when to show a percentage, when to show an ongoing activity without a value, and how to keep both understandable to people using assistive technology.
Read article · 4 min↗Create a small tree view in plain JavaScript, then add predictable pointer and keyboard behavior. This example keeps expansion, focus, and selection separate so each interaction has a clear purpose.
Read article · 4 min↗A skeleton should reserve space for content, not promise an exact shape the content cannot keep. Learn how to size placeholders, handle variable text and images, and test loading states across screen widths and accessibility settings.
Read article · 5 min↗A multi-step form should let people move forward and backward without losing what they typed. Build one with a single state object, step-specific validation, predictable focus, and optional session storage for reloads.
Read article · 4 min↗A sortable list should make its current direction obvious and keep equal items in a predictable order. Build one with native buttons, an explicit tie-breaker, and a status message that works for sighted and screen-reader users.
Read article · 4 min↗Build a small paginated list whose controls and URL stay in sync. This browser-console example covers page boundaries, Back and Forward navigation, and a few accessible defaults.
Read article · 4 min↗Create a small, dependency-free autocomplete that filters suggestions as someone types. This example covers the input and listbox relationship, arrow-key navigation, selection, pointer interaction, and practical checks for accessible behavior.
Read article · 4 min↗A small carousel does not need a timer. Build one with native buttons, predictable boundaries, a visible position indicator, and slides that stay put until a visitor chooses to move.
Read article · 4 min↗Tooltips and popovers both reveal extra information, but they serve different tasks. Learn when a brief, noninteractive tooltip is enough, when a popover is a better fit, and how to make either pattern usable with a keyboard and assistive technology.
Read article · 4 min↗A responsive menu needs more than a mobile layout. Learn how to use one set of links, a real toggle button, predictable focus behavior, and a small amount of JavaScript to make navigation usable across input methods.
Read article · 4 min↗Build a small JavaScript tab component in which each tab controls one panel. This example covers the relationship between tabs and panels, keyboard navigation, focus, and the state changes that keep the interface coordinated.
Read article · 4 min↗A practical pattern for expandable sections that uses native buttons, clear focus behavior and a small amount of JavaScript. Build a multi-open accordion and test it with both keyboard and pointer input.
Read article · 4 min↗A text field can hold its own value in the browser, or a component can keep that value in state. Learn how each approach works, when to choose one, and how to avoid common mistakes with defaults, resets, validation, and file inputs.
Read article · 4 min↗A component with too many flags and modes becomes hard to understand. Learn how to separate shared behavior from page-specific composition, with a small browser example and practical tests.
Read article · 4 min↗Keep component CSS predictable by using a root class for ownership, classes for variants, and custom properties for values that should change. This guide builds a reusable notice component and explains how to avoid accidental styling across a page.
Read article · 4 min↗A component can disappear from the page while its callbacks keep running. Learn how to give each listener, observer, and timer a clear owner and stop it when the component is removed.
Read article · 4 min↗A practical approach to component state: store only what the interface cannot derive, render the DOM from that state, and route changes through clear event handlers. Includes a small browser example and guidance for inputs, asynchronous work, and testing.
Read article · 4 min↗Build a small counter component that accepts options, reports changes through a custom event, and cleans up its browser event listener. The example shows how to keep configuration, state, and communication separate.
Read article · 4 min↗Reusable components are easier to build and maintain when each one has a clear job and owns a defined part of the DOM. Learn how to separate configuration from state, handle events within a component boundary, and clean up when a component is removed.
Read article · 4 min↗Learn how to request a one-time location after a user action, distinguish permission denial from other geolocation errors, and design a useful fallback when location is unavailable.
Read article · 4 min↗A hidden tab may still have JavaScript work scheduled. Learn how to use the Page Visibility API to pause optional work, resume it without duplicate timers, and handle the limits of visibility events.
Read article · 3 min↗A Web Worker can keep an interface responsive while JavaScript performs a substantial calculation. Learn how to send work to a worker, return a result, and handle practical limits such as message overhead and cancellation.
Read article · 4 min↗A browser can read a file that a visitor chooses without sending it to a server. Learn how to select a text file, read it with the File API, display it safely, and account for file size and reading errors.
Read article · 3 min↗Learn how to use the browser Clipboard API for copy and paste controls, when permission or user interaction may be required, and how to keep the interface useful when clipboard access fails.
Read article · 4 min↗Learn what browser timers do, why their delays are not exact, and how to cancel or reschedule work safely. Includes small examples you can try in a browser console.
Read article · 4 min↗Learn how to schedule visual updates with requestAnimationFrame, use its timestamp for consistent motion, and stop a loop cleanly. A self-contained browser-console example demonstrates the pattern.
Read article · 4 min↗MutationObserver lets browser code respond when elements, attributes, or text nodes change. Learn what it observes, how to set it up, and how to keep the callback focused.
Read article · 4 min↗ResizeObserver lets a JavaScript interface respond when an element changes size, even if the browser window stays the same. Learn when to use it, how to observe a panel, and how to avoid layout feedback loops.
Read article · 4 min↗Learn how to use IntersectionObserver to detect when page elements enter the viewport, understand its options, and clean up observers when they are no longer needed.
Read article · 4 min↗Learn when to use pushState and replaceState, how to render a view after Back or Forward navigation, and what the History API does not do for you.
Read article · 4 min↗Learn how to read, change, and remove query parameters in the browser using URL and URLSearchParams. Includes reproducible examples, guidance for repeated keys, and a practical way to update the address bar without reloading the page.
Read article · 4 min↗Learn when IndexedDB is useful, how databases and object stores fit together, and how to save and retrieve a JavaScript object with a reproducible browser example.
Read article · 4 min↗localStorage and sessionStorage share a simple API, but they differ in lifetime and how data is shared between tabs. Learn when each fits, why either can be unavailable, and how to provide a predictable fallback.
Read article · 4 min↗A practical guide to the browser’s cross-origin request rules. Learn how origins are defined, why a request can reach a server but still fail in JavaScript, when preflight happens, and which response headers a server needs to send.
Read article · 4 min↗A successful fetch call does not necessarily mean a successful HTTP response. Learn how to check response.ok, distinguish request failures from invalid JSON, and test each case in a browser.
Read article · 4 min↗A practical guide to the path a browser event takes through the DOM, with console examples that distinguish propagation from default browser behavior.
Read article · 4 min↗A click listener attached directly to a button cannot handle a different button created later. Learn how to listen on a stable parent, identify the intended target, and keep dynamic interfaces manageable.
Read article · 3 min↗DOMContentLoaded and load mark different milestones in a browser page’s startup. Learn which event to use for DOM setup, when to wait for images and other resources, and how script placement and document.readyState affect reliable initialization.
Read article · 4 min↗Learn how to find an element with querySelector, change its text with textContent, and represent interface state with classList. A small browser-console example shows how the three APIs work together.
Read article · 4 min↗A practical workflow for checking focus order, visible focus, labels, structure, and dynamic updates. Use a small sample page to compare what a keyboard user can do with what a screen reader user can understand.
Read article · 4 min↗An icon can suggest what a control does, but it may not tell every user its purpose. Learn how to name icon-only buttons, when tooltips help, and how to check the result with a keyboard and accessibility inspector.
Read article · 4 min↗A page can be visually readable yet sound wrong when a screen reader encounters text in another language. Learn how to set a document’s language, mark changes within a page, and test pronunciation without confusing language with text direction.
Read article · 4 min↗A practical guide to making data tables easier to understand and navigate. Learn when to use a caption, how to associate header cells with data cells, and what to check when a table becomes more complex.
Read article · 4 min↗A page can change without moving keyboard focus or reloading. Learn when ARIA live regions help, how to announce updates without overwhelming people, and how to test the result in a simple browser example.
Read article · 4 min↗Motion can help explain an interface, but it can also distract or cause discomfort. Learn how to use CSS and browser APIs to respect reduced-motion preferences without hiding content or losing important feedback.
Read article · 4 min↗Captions, transcripts, and audio descriptions serve different purposes. Learn how to choose the right combination for videos, podcasts, and other web media, then check that people can find and use it.
Read article · 4 min↗A page can look responsive at a narrow viewport yet break when someone enlarges its text. Learn how to build flexible layouts, protect component content, and test zoom and text resizing in a reproducible browser setup.
Read article · 4 min↗A green banner or red border may look clear, but color should not carry a status message by itself. Learn how to pair color with readable text, useful placement, and appropriate screen-reader announcements.
Read article · 4 min↗Learn what to compare when checking contrast in a web interface, how text and control requirements differ, and how to test real component states rather than isolated color swatches.
Read article · 4 min↗A skip link lets keyboard users move past a repeated header or navigation menu and reach the main content. Learn where to place one, how to make it visible on focus, and how to check that it works.
Read article · 4 min↗Use a link when someone is going somewhere and a button when they are doing something. Learn how that distinction affects keyboard behavior, forms, client-side routing, disabled states, and accessible testing.
Read article · 4 min↗A modal dialog should bring keyboard focus into the dialog, keep the rest of the page unavailable while it is open, and return focus to a sensible place when it closes. Learn a practical approach using the native HTML dialog element and a small amount of JavaScript.
Read article · 4 min↗Keyboard navigation is easier to build when you start with the document’s natural order, keep focus visible, and test what happens when an interface changes. Learn a repeatable way to check links, forms, menus, and dialogs without making assumptions about how people navigate.
Read article · 4 min↗A practical approach to form validation that makes errors discoverable, connects each message to its field, and lets people correct mistakes without starting over.
Read article · 4 min↗A form is easier to use when each input has a clear name, nearby instructions, and useful feedback. Learn how to label fields, explain formats, group related choices, and connect errors to the inputs they describe.
Read article · 4 min↗An image does not need a spoken description simply because it appears on a page. Learn how to decide whether an image is decorative, give decorative HTML images empty alternative text, and check that meaningful content remains available to everyone.
Read article · 3 min↗Alternative text helps people understand an image when they cannot see it. Learn how to identify an image’s purpose, write concise descriptions that fit the surrounding content, and check your choices in a web interface.
Read article · 4 min↗A clear page outline helps people scan content, move between sections, and find the main task. Learn how to combine descriptive headings with HTML landmarks, then check the result using keyboard navigation and accessibility tools.
Read article · 4 min↗Semantic HTML gives a page a structure that browsers and assistive technologies can interpret. Learn how to choose landmarks, headings, lists, links, buttons, and form controls by the job they do, then check whether the resulting page makes sense without its visual styling.
Read article · 4 min↗
