Intermediate code explainers

javascript

import { useState, useRef } from "react";
 
export function TagInput({ initialTags = [], onChange }) {
  const [tags, setTags] = useState(initialTags);

Building a tag input in React

controlled-inputs state-management keyboard-handling

Intermediate 8 steps

python

import smtplib
from email.message import EmailMessage
from threading import Thread

Sending welcome emails off the request thread in Flask

background-threads app-context email

Intermediate 8 steps

rust

use axum::{
    extract::Path,
    http::StatusCode,
    routing::{get, post},

Building a REST resource in Axum

rest-api routing serialization

Intermediate 9 steps

javascript

import { NavLink, useLocation } from 'react-router-dom';
 
const NAV_ITEMS = [
  { to: '/', label: 'Dashboard', end: true },

Building an accessible Sidebar in React

routing accessibility declarative-ui

Intermediate 6 steps

php

function fuzzySearch(string $query, array $items, int $limit = 10): array
{
    $query = mb_strtolower(trim($query));

Building a ranked fuzzy search in PHP

fuzzy-search string-matching ranking

Intermediate 7 steps

python

from django.contrib.auth.mixins import LoginRequiredMixin, UserPassesTestMixin
from django.shortcuts import get_object_or_404
from django.views.generic import DetailView

Team membership access control in Django

access-control mixins class-based-views

Intermediate 7 steps

typescript

type CurrencyFormatOptions = {
  locale?: string;
  currency: string;
  showDecimals?: boolean;

Caching Intl.NumberFormat for currency

memoization internationalization caching

Intermediate 9 steps

rust

use chrono::NaiveDate;
use serde::{Deserialize, Deserializer};
 
#[derive(Debug, Deserialize)]

Custom date parsing with serde in Rust

serde deserialization csv-parsing

Intermediate 7 steps

javascript

function escapeHtml(str) {
  return str.replace(/[&<>"']/g, (ch) => ({
    '&': '&amp;',
    '<': '&lt;',

Safely highlighting search matches in text

html-escaping regex search-highlighting

Intermediate 7 steps

python

import uuid
from pathlib import Path
 
from fastapi import APIRouter, File, Form, HTTPException, UploadFile

Handling multipart file uploads in FastAPI

file-upload validation multipart-form

Intermediate 6 steps

typescript

import { Component, ChangeDetectionStrategy } from '@angular/core';
 
@Component({
  selector: 'app-card',

Multi-slot content projection in Angular

content-projection components templates

Intermediate 7 steps

rust

use axum::{extract::State, http::StatusCode, Json};
use serde::{Deserialize, Serialize};
use sqlx::PgPool;
use uuid::Uuid;

An atomic money transfer handler in Axum

database-transactions atomicity error-handling

Intermediate 9 steps

go

package security
 
import (
	"crypto/hmac"

Signing and verifying payloads with HMAC in Go

hmac cryptography authentication

Intermediate 5 steps

typescript

import { Injectable, NotFoundException, ConflictException } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository, DeepPartial } from 'typeorm';
import { User } from './entities/user.entity';

Building a CRUD service in NestJS

crud dependency-injection repository-pattern

Intermediate 7 steps

python

from copy import deepcopy
from typing import Any, Mapping

How a recursive deep merge works in Python

recursion immutability dictionaries

Intermediate 6 steps

php

<?php
 
namespace App\Http\Controllers\Api;

Cursor pagination in a Laravel API

pagination cursor keyset

Intermediate 9 steps

javascript

import { useEffect, useRef } from "react";
import { useBlocker } from "react-router-dom";
 
export function useUnsavedChangesPrompt(isDirty, message = "You have unsaved changes. Leave anyway?") {

Guarding unsaved changes with a React hook

custom-hooks navigation-guard event-listeners

Intermediate 7 steps

go

package handlers
 
import (
	"context"

Liveness vs readiness health checks in Gin

health-checks dependency-injection context-timeout

Intermediate 7 steps