Javascript code explainers

javascript

function createCountdownTimer(durationSeconds, { onTick, onComplete } = {}) {
  let remaining = durationSeconds;
  let intervalId = null;

Building a countdown timer with closures

closures factory-function timers

Intermediate 9 steps

javascript

export function buildPaginationUrl(baseUrl, { page, perPage, filters = {}, sort } = {}) {
  const url = new URL(baseUrl);
  const params = url.searchParams;

Building and parsing pagination URLs

url-parsing query-string pagination

Intermediate 8 steps

javascript

import { useSearchParams } from "react-router-dom";
 
const TABS = [
  { id: "overview", label: "Overview" },

URL-driven tabs with React Router

url-state query-params accessibility

Intermediate 8 steps

javascript

const crypto = require('crypto');
 
function securityHeaders(options = {}) {
  const {

A configurable security-headers middleware in Express

middleware http-headers content-security-policy

Intermediate 7 steps

javascript

import { useRef, useCallback, useEffect, useState } from "react";
 
function useThrottle(callback, delay) {
  const lastRun = useRef(0);

Building a throttle hook in React

throttling custom-hooks refs

Intermediate 8 steps

javascript

async function copyToClipboard(text) {
  if (navigator.clipboard && window.isSecureContext) {
    try {
      await navigator.clipboard.writeText(text);

Copying to the clipboard with a fallback

clipboard progressive-enhancement dom

Intermediate 8 steps

javascript

import { useEffect, useRef, useState } from "react";
 
export function Dropdown({ label, children }) {
  const [open, setOpen] = useState(false);

Closing a dropdown on outside click in React

outside-click event-listeners cleanup

Intermediate 8 steps

javascript

'use server'
 
import { z } from 'zod'
import { redirect } from 'next/navigation'

How a Next.js Server Action validates a form

server-actions form-validation zod

Intermediate 7 steps

javascript

const cache = new Map();
const inflight = new Map();
 
async function fetchResults(query) {

Building a typeahead with an LRU cache

caching lru-eviction request-deduplication

Intermediate 9 steps

javascript

const DIVISIONS = [
  { amount: 60, unit: 'seconds' },
  { amount: 60, unit: 'minutes' },
  { amount: 24, unit: 'hours' },

Building a human-friendly timeAgo formatter

internationalization relative-time lookup-table

Intermediate 6 steps

javascript

export function createSearchClient(baseUrl) {
  let inFlight = null;
 
  async function search(query, { signal } = {}) {

Cancelling stale requests in a search client

closures abortcontroller async

Intermediate 8 steps

javascript

export function cloneState(state) {
  if (typeof structuredClone !== "function") {
    throw new Error("structuredClone is not available in this runtime");
  }

Deep cloning with structuredClone

deep-copy error-handling immutability

Intermediate 7 steps

javascript

function validateSignup({ email, password, confirmPassword, username, age }) {
  const errors = {};
 
  if (!email) {

Building a signup validator in JavaScript

validation regex guard-clauses

Beginner 7 steps

javascript

const { validationResult, matchedData } = require('express-validator');
 
function validate(schema) {
  const runners = schema.map((rule) => rule.run.bind(rule));

A reusable validation middleware in Express

middleware validation higher-order-functions

Intermediate 8 steps

javascript

const STORAGE_KEY = "app_state";
const CURRENT_VERSION = 3;
 
const migrations = {

Versioned state migrations in localStorage

migrations persistence versioning

Intermediate 9 steps

javascript

const asyncHandler = (fn) => (req, res, next) => {
  Promise.resolve(fn(req, res, next)).catch(next);
};

Async error handling in Express routes

async-await error-handling middleware

Intermediate 7 steps

javascript

async function mapWithConcurrency(items, limit, worker) {
  const results = new Array(items.length);
  let nextIndex = 0;

Bounded-concurrency async map in JavaScript

concurrency async-await promises

Intermediate 7 steps

javascript

const RETRIABLE_STATUS = new Set([408, 429, 500, 502, 503, 504]);
 
function sleep(ms, signal) {
  return new Promise((resolve, reject) => {

Retrying fetch with exponential backoff

retry exponential-backoff abort-signal

Advanced 8 steps