Javascript code explainers

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

javascript

const express = require('express');
const Stripe = require('stripe');
 
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

Verifying Stripe webhooks in Express

webhooks signature-verification raw-body

Intermediate 7 steps

javascript

import { cookies } from 'next/headers';
import { NextResponse } from 'next/server';
import { SignJWT, jwtVerify } from 'jose';

JWT session cookies in a Next.js Route Handler

authentication jwt cookies

Intermediate 8 steps

javascript

'use server'
 
import { revalidatePath } from 'next/cache'
import { redirect } from 'next/navigation'

How a Next.js Server Action updates a post

server-actions authorization validation

Intermediate 7 steps

javascript

const express = require('express');
 
const v1 = express.Router();

Versioning an API with Express Routers

api versioning routing modularity

Intermediate 10 steps

javascript

const RATE_LIMIT = 100;
const WINDOW_MS = 60 * 1000;
const BLOCK_MS = 5 * 60 * 1000;

Building a rate-limiting middleware in Express

rate-limiting middleware closures

Intermediate 9 steps

javascript

const transitions = {
  cart: { checkout: 'shipping' },
  shipping: { submitAddress: 'payment', back: 'cart' },
  payment: { submitPayment: 'review', back: 'shipping' },

A finite state machine for checkout flow

state-machine event-driven data-driven-design

Intermediate 7 steps

javascript

import { useState, useEffect, useCallback, useRef } from "react";
 
export function usePersistentForm(storageKey, initialValues) {
  const [values, setValues] = useState(() => {

A React hook that persists form state to localStorage

custom-hooks localstorage debounce

Intermediate 9 steps

javascript

function groupBy(items, keySelector) {
  const resolveKey = typeof keySelector === 'function'
    ? keySelector
    : (item) => item[keySelector];

Building a flexible groupBy in JavaScript

higher-order-functions reduce data-transformation

Intermediate 6 steps

javascript

function makeReorderableList(listEl, onReorder) {
  let draggedItem = null;
 
  listEl.addEventListener('dragstart', (e) => {

Drag-to-reorder lists with the HTML5 drag API

drag-and-drop event-delegation dom-manipulation

Intermediate 8 steps

javascript

import Papa from 'papaparse';
 
const MAX_SIZE = 5 * 1024 * 1024;

Validating and parsing CSV uploads in the browser

promises csv-parsing validation

Intermediate 8 steps

javascript

async function fetchAllPages(baseUrl, { pageSize = 100, headers = {} } = {}) {
  const results = [];
  let cursor = null;

Cursor-based pagination with fetch

pagination async-await fetch

Intermediate 6 steps

javascript

import { useCallback, useEffect, useRef, useState } from 'react';
 
export function useInfiniteScroll(fetchPage) {
  const [items, setItems] = useState([]);

Building an infinite scroll hook in React

custom-hooks intersection-observer pagination

Advanced 6 steps

javascript

import { useState, useEffect, useMemo } from 'react';
 
function useDebounce(value, delay = 300) {
  const [debounced, setDebounced] = useState(value);

Debounced search with cancellation in React

custom-hooks debounce abortcontroller

Intermediate 9 steps

javascript

import { useState, useEffect } from "react";
 
export function useUser(userId) {
  const [user, setUser] = useState(null);

How a data-fetching hook works in React

custom-hooks data-fetching abortcontroller

Intermediate 8 steps