Intermediate code explainers

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

java

import java.util.Map;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

Rendering ${} templates with regex in Java

regex string-templating matcher-api

Intermediate 8 steps

python

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, BooleanField
from wtforms.validators import (
    DataRequired,

Building a signup form with Flask-WTF

form validation declarative fields validators

Intermediate 7 steps

typescript

import {
  MiddlewareConsumer,
  Module,
  NestModule,

How middleware binds to routes in NestJS

middleware routing modules

Intermediate 6 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

python

from django.db import models
 
 
class Order(models.Model):

Tracking field changes in a Django model

change-tracking audit-log model-lifecycle

Intermediate 8 steps

typescript

interface Reading {
  timestamp: number;
  value: number;
}

A weighted moving average in TypeScript

moving-average sliding-window smoothing

Intermediate 6 steps

python

from fastapi import APIRouter, Depends, HTTPException, status
 
from app.config import settings
from app.dependencies import get_current_user

Gating a FastAPI route behind a feature flag

feature-flags dependency-injection authorization

Intermediate 7 steps

typescript

export interface FormatBytesOptions {
  decimals?: number;
  binary?: boolean;
}

Formatting byte counts into human-readable sizes

formatting logarithms default-parameters

Intermediate 8 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

python

import logging
import uuid
from flask import Flask, request, g

Adding correlation IDs to Flask logs

logging request-lifecycle observability

Intermediate 7 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

python

import random
from dataclasses import dataclass

Weighted loot drops in Python

weighted-random dataclasses sampling

Intermediate 7 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

python

from datetime import datetime
 
from flask import Blueprint, abort, redirect, request
from sqlalchemy import func

Building a URL shortener redirect in Flask

routing url-shortener orm

Intermediate 6 steps

typescript

type Bucket = { start: number; count: number };
 
export class SlidingWindowCounter {
  private readonly windowMs: number;

A sliding window rate counter in TypeScript

sliding-window ring-buffer rate-limiting

Intermediate 7 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

python

import csv
import io
from typing import Annotated

Content negotiation in FastAPI

content-negotiation dependency-injection http-headers

Intermediate 5 steps