Code Explainers

Browse the library

java 
public List<int[]> merge(int[][] intervals) {
    if (intervals.length == 0) {
        return new ArrayList<>();
    }

Merging overlapping intervals in Java

intervals sorting greedy
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
typescript 
import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RevenueChartComponent } from './revenue-chart.component';
import { ReportService, RevenueReport } from './report.service';

Deferred chart loading with @defer in Angular

lazy-loading signals dependency-injection
Intermediate 8 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
typescript 
export const OrderStatus = {
  Pending: 'pending',
  Paid: 'paid',
  Shipped: 'shipped',

A type-safe order state machine in TypeScript

state-machine union-types type-guards
Intermediate 8 steps
python 
import signal
import time
import logging
 

Graceful shutdown in a queue worker

signals graceful-shutdown message-queue
Intermediate 7 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
typescript 
export async function copyToClipboard(text: string): Promise<boolean> {
  if (navigator.clipboard && window.isSecureContext) {
    try {
      await navigator.clipboard.writeText(text);

Clipboard copy with a legacy fallback

clipboard feature-detection graceful-degradation
Intermediate 7 steps
python 
from functools import lru_cache
 
 
class SpellingSuggester:

A spelling suggester with edit distance

edit-distance dynamic-programming memoization
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
typescript 
import { Exclude, Expose, Transform, Type } from 'class-transformer';
 
export class AddressEntity {
  street: string;

Shaping API responses with class-transformer in NestJS

serialization decorators dto
Intermediate 10 steps
python 
import asyncio
import json
 
from fastapi import APIRouter, Depends, HTTPException

Streaming export progress with SSE in FastAPI

server-sent-events async-generators streaming
Advanced 8 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
typescript 
import { Injectable, inject } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of, Subject } from 'rxjs';
import { filter, switchMap, take } from 'rxjs/operators';

A hover-triggered preloading strategy in Angular

lazy-loading rxjs preloading
Advanced 8 steps
python 
from decimal import Decimal, ROUND_HALF_UP
 
from django.db import transaction
from django.db.models import F

Batch price updates safely in Django

decimal-precision batch-processing transactions
Advanced 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
rust 
use axum::{
    extract::{Path, State},
    http::StatusCode,
    response::IntoResponse,

Building a GitHub proxy handler in Axum

shared-state http-client error-mapping
Intermediate 9 steps
typescript 
import { Injectable, inject } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';

A reusable confirmation dialog service in Angular

dependency-injection observables dialog
Intermediate 6 steps