Javascript code explainers

javascript

import { Component } from 'react';
import { reportError } from './services/telemetry';
 
export class ErrorBoundary extends Component {

How a React ErrorBoundary works

error-handling lifecycle-methods render-props

Intermediate 8 steps

javascript

const FOCUSABLE = [
  'a[href]',
  'button:not([disabled])',
  'input:not([disabled])',

How to trap keyboard focus in a dialog

accessibility dom event-handling

Intermediate 8 steps

javascript

function generateCalendarGrid(year, month) {
  const firstDay = new Date(year, month, 1);
  const lastDay = new Date(year, month + 1, 0);
  const daysInMonth = lastDay.getDate();

Building a text calendar in JavaScript

date-handling grid-layout modular-arithmetic

Intermediate 9 steps

javascript

function initScrollSpy() {
  const links = Array.from(document.querySelectorAll('.nav a[href^="#"]'));
  const sections = links
    .map((link) => document.querySelector(link.getAttribute('href')))

Building a scroll spy with IntersectionObserver

intersectionobserver dom event-driven

Intermediate 7 steps

javascript

const ROLE_PERMISSIONS = {
  admin: ['users:read', 'users:write', 'billing:read', 'billing:write'],
  manager: ['users:read', 'billing:read'],
  member: ['users:read'],

Role-based permissions middleware in Express

authorization middleware rbac

Intermediate 9 steps

javascript

function attachThousandSeparators(input, { locale = 'en-US' } = {}) {
  const formatter = new Intl.NumberFormat(locale);
  const groupSep = formatter.format(11111).replace(/\d/g, '')[0] || ',';
  const decimalSep = formatter.format(1.1).replace(/\d/g, '')[0] || '.';

Live thousand separators without losing the caret

dom intl caret-preservation

Advanced 8 steps

javascript

import { useReducer, useEffect } from "react";
 
const initialState = { status: "idle", data: null, error: null };

Building a data-fetching hook in React

custom-hooks usereducer data-fetching

Intermediate 9 steps

javascript

const express = require('express');
const app = express();
 
app.get('/health', (req, res) => res.json({ status: 'ok' }));

Graceful shutdown in an Express server

graceful-shutdown signal-handling connection-tracking

Advanced 9 steps

javascript

import { useState, useEffect, useCallback } from 'react';
 
function getColumnCount(width) {
  if (width < 640) return 1;

A responsive column hook in React

custom-hooks debouncing responsive-design

Intermediate 7 steps

javascript

function initCharacterCounter(textarea, options = {}) {
  const maxLength = options.maxLength ?? 280;
  const warnThreshold = options.warnThreshold ?? 0.9;

A live character counter for textareas

dom closures accessibility

Intermediate 7 steps

javascript

function autoResizeTextarea(textarea, { maxHeight = Infinity } = {}) {
  const resize = () => {
    textarea.style.height = 'auto';
    const contentHeight = textarea.scrollHeight;

Auto-resizing a textarea to fit its content

dom event-listener cleanup

Intermediate 7 steps

javascript

const zxcvbn = require('zxcvbn');
 
const STRENGTH_LABELS = ['Very weak', 'Weak', 'Fair', 'Strong', 'Very strong'];
const STRENGTH_COLORS = ['#d64545', '#e0803c', '#d9c94c', '#5aa84f', '#2f8f3a'];

Building a live password strength meter

debounce closures dom-events

Intermediate 8 steps

javascript

function usePagination(items, pageSize = 10) {
  let currentPage = 1;
  const totalPages = Math.max(1, Math.ceil(items.length / pageSize));

A closure-based pagination helper in JS

closures encapsulation factory-function

Intermediate 9 steps

javascript

const FRONTMATTER_RE = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/;
 
function coerce(value) {
  const trimmed = value.trim();

Parsing YAML-style frontmatter in JavaScript

parsing regular-expressions type-coercion

Intermediate 9 steps

javascript

const IDLE_TIMEOUT = 15 * 60 * 1000;
const WARNING_BEFORE = 60 * 1000;
const ACTIVITY_EVENTS = ['mousemove', 'keydown', 'scroll', 'touchstart', 'click'];

How an idle-session monitor logs you out

timers throttling broadcastchannel

Intermediate 8 steps

javascript

import { ImageResponse } from 'next/og'
 
export function manifest() {
  return {

Generating a PWA manifest and icon in Next.js

pwa metadata og-image

Intermediate 9 steps

javascript

function isValidCardNumber(input) {
  const digits = String(input).replace(/[\s-]/g, '');
 
  if (!/^\d{13,19}$/.test(digits)) {

Validating card numbers with Luhn

checksum validation luhn-algorithm

Intermediate 7 steps

javascript

import { useEffect, useState } from 'react';
 
export function useJobStatus(jobId, { interval = 3000 } = {}) {
  const [status, setStatus] = useState('pending');

Polling a job status with a React hook

custom-hooks polling cleanup

Intermediate 8 steps