Code Explainers

Browse the library

javascript 
import { useState, useEffect, useRef, useCallback } from 'react';
 
export default function Carousel({ images }) {
  const [index, setIndex] = useState(0);

Building a wrap-around Carousel in React

hooks usecallback event-listeners
Intermediate 9 steps
python 
from fastapi import APIRouter, status
from fastapi.responses import JSONResponse
from sqlalchemy import text
from sqlalchemy.exc import SQLAlchemyError

Liveness vs readiness health checks in FastAPI

health-checks dependency-injection async
Intermediate 6 steps
typescript 
import { Injectable, UnauthorizedException } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { Strategy } from 'passport-headerapikey';
import { ConfigService } from '@nestjs/config';

Building an API-key auth strategy in NestJS

authentication passport dependency-injection
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
python 
from typing import Optional
 
from fastapi import APIRouter, Depends, HTTPException, status
from pydantic import BaseModel, EmailStr, Field

How PATCH partial updates work in FastAPI

partial-update validation dependency-injection
Intermediate 8 steps
rust 
use itertools::Itertools;
use std::cmp::Ordering;
 
#[derive(Debug, Clone)]

Merging sorted event streams with itertools

iterators merge deduplication
Intermediate 7 steps
php 
<?php
 
namespace App\Http\Middleware;
 

Enforcing upload quotas with Laravel middleware

middleware quota-enforcement collections
Intermediate 8 steps
typescript 
import { Type, applyDecorators } from '@nestjs/common';
import {
  ApiExtraModels,
  ApiOkResponse,

A reusable paginated Swagger decorator in NestJS

decorators generics openapi
Intermediate 6 steps
javascript 
const express = require('express');
const cors = require('cors');
 
const app = express();

Configuring a CORS allowlist in Express

cors middleware security
Intermediate 8 steps
python 
from fastapi import APIRouter, Depends, HTTPException, status
from pydantic import BaseModel
 
from .dependencies import get_current_user, get_project_service

Building a CRUD router with FastAPI

dependency-injection rest-api authentication
Intermediate 6 steps
typescript 
import { Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { finalize } from 'rxjs';

A reactive signup form in Angular

reactive-forms validation dependency-injection
Intermediate 10 steps
go 
package storage
 
import (
	"errors"

Preventing path traversal in Go

path-traversal input-validation security
Intermediate 9 steps
rust 
use std::sync::Arc;
 
use axum::{
    extract::{FromRef, State},

Substate extraction with FromRef in Axum

state-management routing middleware
Intermediate 8 steps
php 
<?php
 
function timeAgo(DateTimeInterface $past, ?DateTimeInterface $now = null): string
{

Building a timeAgo helper in PHP

datetime formatting pluralization
Beginner 6 steps
python 
from flask import Blueprint, render_template, request, redirect, url_for, flash, abort
from .models import User, AuditLog
from .extensions import db
from .decorators import admin_required

Nesting Flask Blueprints for an admin panel

blueprints route-guards pagination
Intermediate 8 steps
javascript 
const progressBar = document.getElementById('reading-progress');
const article = document.querySelector('article');
 
function updateProgress() {

Building a scroll-driven reading progress bar

dom scroll-events throttling
Intermediate 9 steps
typescript 
import { Directive, ElementRef, EventEmitter, inject, NgZone, OnDestroy, Output } from '@angular/core';
 
@Directive({
  selector: '[appResizeDebounced]',

A debounced resize directive in Angular

debounce change-detection host-bindings
Advanced 7 steps
go 
package logsample
 
import (
	"sync"

A per-key rate limiter for log sampling

rate-limiting concurrency time-windows
Intermediate 7 steps