Javascript code explainers

javascript

function evaluate(expression) {
  const tokens = tokenize(expression);
  let pos = 0;

Building a recursive descent calculator

parsing recursion operator-precedence

Intermediate 8 steps

javascript

import { useState, useEffect, useCallback, useRef } from 'react';
 
const cache = new Map();
const inflight = new Map();

Building a stale-while-revalidate hook in React

caching request-deduplication custom-hooks

Advanced 10 steps

javascript

import { useEffect, useRef, useState } from 'react';
 
export function useDelayedFlag(active, delay = 300) {
  const [visible, setVisible] = useState(false);

Delaying a loading spinner with a React hook

custom-hooks debouncing cleanup

Intermediate 8 steps

javascript

const SWIPE_THRESHOLD = 80;
const MAX_TRANSLATE = 120;
 
export function attachSwipeToDismiss(element, onDismiss) {

Building a swipe-to-dismiss gesture in JS

touch-events gesture-detection dom-manipulation

Intermediate 10 steps

javascript

const { pool } = require('./db');
 
function withTransaction() {
  return async (req, res, next) => {

A per-request transaction middleware in Express

middleware database-transactions connection-pooling

Advanced 7 steps

javascript

function collapseConsecutiveLogs(lines, { keyFn = (l) => l.message } = {}) {
  const groups = [];
 
  for (const line of lines) {

Collapsing consecutive log lines in JavaScript

grouping run-length-encoding data-transformation

Intermediate 7 steps

javascript

const express = require('express');
const crypto = require('crypto');
const router = express.Router();

Optimistic locking with ETags in Express

optimistic-locking etag conditional-requests

Intermediate 7 steps

javascript

class Sheet {
  constructor() {
    this.cells = new Map();
    this.computing = new Set();

Building a reactive spreadsheet engine

reactivity dependency-tracking graph-traversal

Advanced 9 steps

javascript

const express = require('express');
const router = express.Router();
 
router.get('/exports/orders', async (req, res) => {

Streaming a large JSON export in Express

streaming backpressure cursors

Advanced 9 steps

javascript

const crypto = require('crypto');
 
function idempotency({ store, ttlMs = 24 * 60 * 60 * 1000 }) {
  return async function idempotencyMiddleware(req, res, next) {

Idempotent POST requests in Express

idempotency middleware caching

Advanced 8 steps

javascript

import type { MetadataRoute } from 'next'
import { db } from '@/lib/db'
 
const URLS_PER_SITEMAP = 50_000

Sharding a large sitemap in Next.js

sitemap pagination seo

Intermediate 6 steps

javascript

'use client';
 
import { useActionState } from 'react';
import { submitSignup } from './actions';

Multi-step forms with useActionState in Next.js

server-actions form-state progressive-enhancement

Intermediate 10 steps

javascript

import { notFound } from 'next/navigation'
import { getPhotoById } from '@/lib/photos'
import Modal from '@/components/modal'
import Image from 'next/image'

An intercepted photo modal route in Next.js

dynamic-routes async-components metadata

Intermediate 6 steps

javascript

const form = document.querySelector('#profile-form');
let isDirty = false;
 
form.addEventListener('input', () => {

Warn before leaving a form with unsaved edits

event-listeners dom state-tracking

Beginner 5 steps

javascript

import type { MetadataRoute } from 'next'
 
const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? 'https://example.com'

Environment-aware robots.txt in Next.js

seo environment-config web-crawlers

Intermediate 6 steps

javascript

const fs = require('fs');
const path = require('path');
const express = require('express');

Streaming video with HTTP range requests in Express

http-range-requests streaming path-traversal

Intermediate 8 steps

javascript

const { z, ZodError } = require('zod');
 
function validate(schemas) {
  return (req, res, next) => {

A reusable Zod validation middleware for Express

middleware validation schema

Intermediate 8 steps

javascript

const UNIT_MULTIPLIERS = {
  ms: 1,
  s: 1000,
};

Parsing CSS durations into milliseconds

parsing regular-expressions validation

Intermediate 6 steps