Javascript code explainers

javascript

import { NextResponse } from 'next/server';
import { Redis } from '@upstash/redis';
 
export const runtime = 'edge';

A deduped page-view counter in Next.js

edge-runtime redis rate-limiting

Intermediate 8 steps

javascript

const express = require('express');
const createError = require('http-errors');
const { Article } = require('../models');

Sharing route logic with router.param in Express

middleware authorization dry

Intermediate 10 steps

javascript

import { useState, useEffect, useRef, useCallback } from 'react';
 
export default function Carousel({ images }) {
  const [index, setIndex] = useState(0);

Building a wrap-around Carousel in React

hooks usecallback event-listeners

Intermediate 9 steps

javascript

import { useEffect, useRef } from 'react';
 
export function useOnClickOutside(handler) {
  const ref = useRef(null);

A click-outside hook in React

custom-hooks refs event-listeners

Intermediate 7 steps

javascript

const express = require('express');
const cors = require('cors');
 
const app = express();

Configuring a CORS allowlist in Express

cors middleware security

Intermediate 8 steps

javascript

const progressBar = document.getElementById('reading-progress');
const article = document.querySelector('article');
 
function updateProgress() {

Building a scroll-driven reading progress bar

dom scroll-events throttling

Intermediate 9 steps

javascript

function sparkline(values, { width = 200, height = 40, stroke = '#2563eb', fill = 'rgba(37,99,235,0.12)' } = {}) {
  if (!Array.isArray(values) || values.length < 2) {
    throw new RangeError('sparkline requires at least two data points');
  }

Rendering a sparkline as SVG

svg data-visualization coordinate-mapping

Intermediate 8 steps

javascript

import { NextResponse } from 'next/server';
import { revalidatePath } from 'next/cache';
import crypto from 'node:crypto';

A GitHub webhook that revalidates Next.js docs

webhooks hmac-verification cache-revalidation

Intermediate 8 steps

javascript

import { after } from "next/server";
import { NextResponse } from "next/server";
import { z } from "zod";
import { resend } from "@/lib/resend";

Deferring work with after() in Next.js

validation background-tasks route-handlers

Intermediate 8 steps

javascript

const legacyRedirects = [
  { from: '/blog/:slug', to: '/articles/:slug' },
  { from: '/shop/product/:id', to: '/store/items/:id' },
  { from: '/about-us', to: '/about' },

How redirects work in Next.js config

redirects routing configuration

Intermediate 7 steps

javascript

import { createContext, useContext, useReducer, useCallback, useEffect } from 'react';
 
const AuthContext = createContext(null);

Building an auth context in React

context usereducer authentication

Intermediate 8 steps

javascript

import { useDeferredValue, useMemo, useState } from "react";
 
function ProductSearch({ products }) {
  const [query, setQuery] = useState("");

Keeping search input snappy with useDeferredValue in React

concurrent-rendering deferred-value memoization

Intermediate 7 steps

javascript

const IBAN_LENGTHS = {
  DE: 22, FR: 27, GB: 22, ES: 24, IT: 27,
  NL: 18, BE: 16, CH: 21, AT: 20, PT: 25,
};

How IBAN validation works in JavaScript

validation checksum modular-arithmetic

Intermediate 8 steps

javascript

class ToastQueue {
  constructor(container, { duration = 4000, max = 3 } = {}) {
    this.container = container;
    this.duration = duration;

Building a rate-limited toast queue

queue dom manipulation throttling

Intermediate 8 steps

javascript

import { useCallback, useState } from "react";
 
const MIN = 0;
const MAX = 1000;

Building a dual-thumb price slider in React

controlled-components state-clamping usecallback

Intermediate 8 steps

javascript

class LyricsSync {
  constructor(audio, container, lines) {
    this.audio = audio;
    this.container = container;

Building a synced lyrics highlighter

binary-search dom-manipulation event-handling

Intermediate 9 steps

javascript

const express = require('express');
 
const app = express();

Enforcing HTTPS with Express middleware

middleware https security

Intermediate 6 steps

javascript

const express = require('express');
const router = express.Router();
 
router.get('/articles/:slug', async (req, res, next) => {

Conditional GET caching in Express

http-caching conditional-get routing

Intermediate 8 steps