Code Explainers

Javascript code explainers

javascript 
import { createContext, useContext, useReducer } from "react";
 
const WizardContext = createContext(null);
 

Building a form wizard with Context in React

context reducer state-management
Intermediate 10 steps
javascript 
import { createContext, useContext, useReducer } from 'react';
 
const CartContext = createContext(null);
 

Building a shopping cart with Context in React

state management reducer context
Intermediate 10 steps
javascript 
const ESCAPE_MAP = {
  '&': '&',
  '<': '&lt;',
  '>': '&gt;',

Escaping HTML before injecting user content

xss-prevention escaping dom
Intermediate 6 steps
javascript 
function memoize(fn, resolver) {
  const cache = new Map();
 
  function memoized(...args) {

Building a memoize wrapper in JavaScript

memoization closures higher-order-functions
Intermediate 7 steps
javascript 
import { useState, useCallback, useEffect } from 'react';
 
function usePaginatedProducts(pageSize = 20) {
  const [items, setItems] = useState([]);

Cursor-based infinite scroll with a React hook

custom-hooks pagination async-fetching
Intermediate 8 steps
javascript 
import { useCallback, useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
 
const FOCUSABLE = 'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])';

Building an accessible modal in React

focus-trap accessibility portals
Advanced 9 steps
javascript 
'use client';
 
import { useOptimistic, useTransition } from 'react';
import { toggleLike } from '@/app/actions/likes';

Optimistic like buttons in Next.js

optimistic-ui react-hooks server-actions
Intermediate 7 steps
javascript 
const express = require('express');
const router = express.Router();
 
router.get('/articles/:slug', async (req, res, next) => {

Content negotiation with res.format in Express

content-negotiation routing error-handling
Intermediate 9 steps
javascript 
function makeTableSorter(rows) {
  const state = { key: null, dir: 1 };
 
  const compareBy = (key) => (a, b) => {

Building a stateful table sorter in JavaScript

closures stable-sort comparators
Intermediate 7 steps
javascript 
function createAutocomplete(input, resultsList, { minChars = 2, delay = 300 } = {}) {
  let timer = null;
  let controller = null;
 

Building a debounced autocomplete widget

debouncing abortcontroller closures
Intermediate 9 steps
javascript 
import Link from "next/link";
import { prisma } from "@/lib/prisma";
 
const PAGE_SIZE = 20;

A searchable, paginated table as a Next.js Server Component

server-components pagination search
Intermediate 6 steps
javascript 
import { Suspense } from 'react';
import { getProducts } from '@/lib/api/products';
import { formatPrice } from '@/lib/format';
 

Streaming a product list with Suspense in Next.js

server-components suspense streaming
Intermediate 8 steps
javascript 
const DEFAULT_OPTIONS = {
  method: 'GET',
  timeout: 5000,
  retries: 3,

A resilient fetch wrapper with retries and timeout

fetch retry timeout
Intermediate 8 steps
javascript 
import { parsePhoneNumberFromString } from 'libphonenumber-js';
 
export class PhoneValidationError extends Error {
  constructor(message, code) {

Normalizing phone numbers with typed errors

validation error-handling custom-errors
Intermediate 6 steps
javascript 
const express = require('express');
const { z } = require('zod');
const router = express.Router();
 

Validating query params with Zod in Express

validation schema-parsing query-building
Intermediate 9 steps
javascript 
const RESERVED_SLUGS = new Set(['new', 'edit', 'admin', 'api']);
 
function slugify(title) {
  return title

Generating URL-safe unique slugs

string-normalization regex deduplication
Intermediate 9 steps
javascript 
class EventEmitter {
  constructor() {
    this.listeners = new Map();
  }

Building an EventEmitter in JavaScript

pub-sub closures map
Intermediate 7 steps
javascript 
const express = require('express');
const compression = require('compression');
const zlib = require('zlib');
 

Tuning Express response compression

compression middleware http
Intermediate 9 steps