Javascript code explainers

javascript

class RequestDeduplicator {
  constructor(fetcher) {
    this.fetcher = fetcher;
    this.inFlight = new Map();

Deduplicating in-flight requests in JavaScript

promises caching async

Intermediate 6 steps

javascript

import { NextResponse } from 'next/server';
import { readFile, stat } from 'node:fs/promises';
import { join, extname, normalize } from 'node:path';
import { createHash } from 'node:crypto';

Serving private assets from a Next.js route

path-traversal http-caching etag

Intermediate 6 steps

javascript

export default function DashboardLayout({ children, analytics, notifications }) {
  return (
    <div className="flex h-screen overflow-hidden">
      <Sidebar />

Parallel routes in a Next.js layout

parallel-routes layouts app-router

Intermediate 8 steps

javascript

function flatten(obj, prefix = '', result = {}) {
  for (const [key, value] of Object.entries(obj)) {
    const path = prefix ? `${prefix}.${key}` : key;

Flattening nested objects into dotted paths

recursion object-traversal accumulator

Intermediate 6 steps

javascript

function mergeDateRanges(ranges) {
  const parsed = ranges
    .map(({ start, end }) => ({
      start: new Date(start),

Merging overlapping date ranges

intervals sorting dates

Intermediate 8 steps

javascript

'use server'
 
import { z } from 'zod'
import { revalidatePath } from 'next/cache'

Handling form submits with Next.js Server Actions

server-actions validation form-handling

Intermediate 7 steps

javascript

import { cache } from 'react'
import { notFound } from 'next/navigation'
import { db } from '@/lib/db'

Deduping data fetches with React cache in Next.js

request-memoization data-fetching server-components

Intermediate 6 steps

javascript

class LRUCache {
  constructor(capacity) {
    if (capacity < 1) throw new RangeError('capacity must be positive');
    this.capacity = capacity;

Building an LRU cache with a JS Map

lru-cache data-structures insertion-order

Intermediate 8 steps

javascript

import { useState } from 'react';
 
function TreeNode({ node, depth = 0 }) {
  const [expanded, setExpanded] = useState(depth === 0);

How a recursive file tree renders in React

recursion component-composition local-state

Intermediate 8 steps

javascript

class ProblemError extends Error {
  constructor(status, title, detail, extensions = {}) {
    super(detail || title);
    this.status = status;

RFC 7807 problem details in Express

error-handling middleware http-api

Intermediate 8 steps

javascript

import fs from 'node:fs/promises';
import path from 'node:path';
import { notFound } from 'next/navigation';
import matter from 'gray-matter';

Static MDX blog pages in Next.js

static-generation mdx frontmatter

Intermediate 7 steps

javascript

class DownloadTracker {
  constructor(totalBytes, { windowMs = 3000 } = {}) {
    this.totalBytes = totalBytes;
    this.windowMs = windowMs;

Estimating download speed with a sliding window

sliding-window getters rate-calculation

Intermediate 7 steps

javascript

import { useState, useEffect, useRef } from 'react';
 
export function SectionSearch({ sections }) {
  const [query, setQuery] = useState(() => decodeURIComponent(window.location.hash.slice(1)));

Syncing search state with the URL hash in React

debouncing url-state useeffect

Intermediate 7 steps

javascript

import OpenAI from 'openai';
 
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

Streaming OpenAI tokens from a Next.js edge route

streaming edge-runtime readablestream

Advanced 9 steps

javascript

class Carousel {
  constructor(root, { interval = 5000 } = {}) {
    this.root = root;
    this.track = root.querySelector('.carousel__track');

Building an accessible auto-playing carousel

dom state-management timers

Intermediate 9 steps

javascript

class ShortcutManager {
  constructor(target = window) {
    this.target = target;
    this.bindings = new Map();

Building a keyboard shortcut manager in JavaScript

event-handling normalization map

Intermediate 9 steps

javascript

const DISCOUNT_CODES = {
  SAVE10: { type: 'percent', value: 0.1 },
  WELCOME5: { type: 'fixed', value: 5 },
  FREESHIP: { type: 'shipping', value: Infinity },

How a cart total is calculated with discounts

reduce lookup-table options-object

Intermediate 8 steps

javascript

import { createContext, useContext, useState, useCallback, useRef } from "react";
 
const ToastContext = createContext(null);

Building a toast notification system in React

context state-management hooks

Intermediate 7 steps