Code Explainers

Browse the library

javascript 
import { useState, useCallback, useRef } from 'react';
 
function LikeButton({ postId, initialLiked, initialCount }) {
  const [liked, setLiked] = useState(initialLiked);

Optimistic like button with React

optimistic-ui abortcontroller error-handling
Advanced 7 steps
java 
@Component
required to import
public class OutboxEventPublisher {
 

The transactional outbox pattern in Spring

transactional-outbox event-driven reliability
Advanced 7 steps
python 
from decimal import Decimal, ROUND_HALF_UP
 
from babel.numbers import format_currency
from flask import Flask

Building a currency Jinja filter in Flask

template filters decimal precision internationalization
Intermediate 6 steps
rust 
use axum::{
    body::Body,
    extract::MatchedPath,
    http::{Request, StatusCode},

An admin route guard in Axum middleware

middleware authorization request-extensions
Intermediate 7 steps
php 
public function transaction(callable $callback, int $maxAttempts = 3): mixed
{
    $attempt = 0;
 

Retrying database deadlocks in PHP

retry transactions deadlock
Intermediate 8 steps
typescript 
import {
  WebSocketGateway,
  WebSocketServer,
  SubscribeMessage,

Building a real-time chat gateway in NestJS

websockets real-time socket.io
Intermediate 8 steps
ruby 
require "bigdecimal"
 
module Money
  CENTS = BigDecimal("0.01")

Handling money safely with BigDecimal in Ruby

bigdecimal rounding currency
Intermediate 7 steps
go 
package handlers
 
import (
	"net/http"

Query-string filtering in Gin with GORM

query-binding validation conditional-queries
Intermediate 8 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
java 
@RestController
@RequestMapping("/api/payments")
public class PaymentController {
 

Polymorphic payment requests in Spring

polymorphic deserialization sealed interfaces bean validation
Advanced 7 steps
python 
from functools import wraps
 
import jwt
from flask import current_app, g, jsonify, request

How a JWT auth decorator works in Flask

decorators authentication jwt
Intermediate 6 steps
javascript 
const UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'];
 
export function formatBytes(bytes, { decimals = 1, binary = false } = {}) {
  if (!Number.isFinite(bytes)) {

Formatting byte counts into human units

logarithms formatting default-parameters
Intermediate 8 steps
rust 
use std::collections::VecDeque;
 
pub struct RollingAverage {
    window: VecDeque<f64>,

A rolling average over a sliding window

sliding-window running-sum ring-buffer
Intermediate 6 steps
typescript 
type CsvRecord = Record<string, string>;
 
function parseCsv(input: string): CsvRecord[] {
  const rows: string[][] = [];

Parsing CSV with a character state machine

state-machine parsing string-processing
Intermediate 8 steps
javascript 
'use client';
 
import { useState, useTransition, useRef, useEffect, useCallback } from 'react';
import { loadMorePosts } from '@/app/actions/posts';

Infinite scroll with Server Actions in Next.js

infinite-scroll intersection-observer server-actions
Intermediate 8 steps
rust 
use std::time::Duration;
 
#[derive(Debug, Clone)]
pub struct ServerConfig {

The builder pattern in Rust

builder-pattern ownership error-handling
Intermediate 8 steps
typescript 
const ISO_DURATION = /^P(?:(\d+(?:\.\d+)?)Y)?(?:(\d+(?:\.\d+)?)M)?(?:(\d+(?:\.\d+)?)W)?(?:(\d+(?:\.\d+)?)D)?(?:T(?:(\d+(?:\.\d+)?)H)?(?:(\d+(?:\.\d+)?)M)?(?:(\d+(?:\.\d+)?)S)?)?$/;
 
const SECONDS_PER = {
  years: 365 * 24 * 60 * 60,

Parsing ISO 8601 durations to seconds

regex parsing iso-8601
Intermediate 7 steps
javascript 
import { createContext, useContext, useEffect, useState, useCallback } from 'react';
 
const ThemeContext = createContext(null);
 

Building a theme provider with React Context

context hooks dark-mode
Intermediate 9 steps