Code Explainers

Browse the library

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

Adding correlation IDs to Flask logs

logging request-lifecycle observability
Intermediate 7 steps
typescript 
import { Injectable } from '@angular/core';
import {
  ActivatedRouteSnapshot,
  DetachedRouteHandle,

A scroll-preserving RouteReuseStrategy in Angular

route-reuse scroll-restoration caching
Advanced 10 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
typescript 
import {
  Directive,
  ElementRef,
  EventEmitter,

An infinite-scroll directive in Angular

intersectionobserver directives performance
Advanced 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
typescript 
import {
  Component,
  ComponentRef,
  Injector,

Dynamic component rendering in Angular

dynamic-components viewcontainerref lifecycle-hooks
Advanced 7 steps
typescript 
import { Routes } from '@angular/router';
import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { REPORT_API_URL } from './reports/report.tokens';

Route-scoped providers and lazy loading in Angular

routing dependency-injection lazy-loading
Intermediate 8 steps
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
python 
from decimal import Decimal
from typing import Annotated
 
from fastapi import APIRouter, status

Cross-field order validation in FastAPI

validation pydantic-models decimal-money
Intermediate 7 steps
typescript 
import { Component } from '@angular/core';
import {
  AbstractControl,
  FormBuilder,

Cross-field password validation in Angular

reactive-forms custom-validators cross-field-validation
Intermediate 7 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
python 
from functools import wraps
from flask import request, jsonify
 
 

A parameterized query-param decorator in Flask

decorators validation type-casting
Intermediate 8 steps
typescript 
import { Component, inject } from '@angular/core';
import { combineLatest, map, startWith } from 'rxjs';
import { UserStore } from './user.store';
import { CartStore } from './cart.store';

The view model pattern in Angular

rxjs view-model reactive-streams
Intermediate 6 steps