Javascript code explainers

javascript

import { NextResponse } from 'next/server'
 
const UPSTREAM = 'https://api.exchangerate.host/latest'

A cached exchange-rate proxy in Next.js

route-handler caching revalidation

Intermediate 7 steps

javascript

const logger = require('./logger');
 
class AppError extends Error {
  constructor(message, statusCode = 500, details = null) {

Centralized error handling in Express

error-handling middleware custom-errors

Intermediate 8 steps

javascript

const formatters = new Map();
 
function getFormatter(locale, currency) {
  const key = `${locale}:${currency}`;

Caching Intl.NumberFormat for currency formatting

memoization internationalization caching

Intermediate 8 steps

javascript

class DOMBatcher {
  constructor() {
    this.reads = [];
    this.writes = [];

Batching DOM reads and writes to avoid layout thrash

batching requestanimationframe layout-thrashing

Intermediate 8 steps

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