Code Explainers

Code explainers tagged #cleanup

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
ruby 
namespace :active_storage do
  desc "Purge blobs that have been unattached for more than 48 hours"
  task purge_stale: :environment do
    cutoff = 48.hours.ago

A Rake task to purge stale Active Storage blobs in Rails

rake active-storage batch-processing
Intermediate 8 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
php 
<?php
 
namespace App\Models;
 

Auto-pruning old records with Laravel's Prunable

pruning eloquent cleanup
Intermediate 5 steps
typescript 
type Countdown = {
  days: number;
  hours: number;
  minutes: number;

Building a self-stopping countdown timer

date-math closures timers
Intermediate 9 steps
javascript 
import { useEffect, useRef } from 'react';
 
export function useRefetchOnFocus(refetch, { staleTime = 30_000 } = {}) {
  const lastFetchedAt = useRef(Date.now());

A React hook that refetches on tab focus

custom-hooks refs event-listeners
Intermediate 6 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 
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 
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
typescript 
type Handler = (event: KeyboardEvent) => void;
 
interface Binding {
  combo: string;

Building a keyboard shortcut manager in TypeScript

event-handling normalization closures
Intermediate 7 steps
javascript 
const express = require('express');
const EventEmitter = require('events');
 
const router = express.Router();

Server-Sent Events with Express

server-sent-events streaming event-emitter
Advanced 8 steps
javascript 
import { useState, useEffect, useCallback } from 'react';
 
export function useCountdown(initialSeconds) {
  const [secondsLeft, setSecondsLeft] = useState(initialSeconds);

Building a useCountdown hook in React

custom-hooks state-management side-effects
Intermediate 8 steps
javascript 
import { useEffect, useRef } from "react";
import { useBlocker } from "react-router-dom";
 
export function useUnsavedChangesPrompt(isDirty, message = "You have unsaved changes. Leave anyway?") {

Guarding unsaved changes with a React hook

custom-hooks navigation-guard event-listeners
Intermediate 7 steps
typescript 
type ResizeCallback = (size: { width: number; height: number }) => void;
 
export function observeResize(callback: ResizeCallback, delay = 150) {
  let timeoutId: ReturnType<typeof setTimeout> | undefined;

Debouncing window resize in TypeScript

debounce closures event-listeners
Intermediate 6 steps
javascript 
import { useState, useRef, useEffect, useCallback } from 'react';
 
export function CopyButton({ text, label = 'Copy' }) {
  const [copied, setCopied] = useState(false);

A copy-to-clipboard button in React

clipboard-api hooks cleanup
Intermediate 7 steps