Hand-picked tutorials, guides and examples on Web Development — explained simply.
Showing 70 articles
React 19 is mostly about making async work, especially forms and data mutations, simpler. Here are the features you'll use most, with short examples. Actions An Action is an async function used in a transition. React tracks its pending state, errors and optimi...
In the App Router, folders define routes and special files define what renders for them. Once you know the handful of file conventions, the structure of any Next.js app becomes easy to read. Folders are routes app/ layout.tsx -> wraps every page (html, body, h...
TypeScript is JavaScript with types. The types are checked at build time and then removed, so the code that runs is plain JavaScript. What you gain is autocomplete that knows your data and errors before your users find them. Inference does most of the work let...
Tailwind CSS v4 is a ground-up rewrite. The biggest change for day-to-day work: configuration moves from tailwind.config.js into your CSS file. Install with Vite npm install tailwindcss @tailwindcss/vite // vite.config.js import { defineConfig } from 'vite'; i...
If you learned Node.js a few years ago, you probably install packages for things the runtime now does itself. Here's a tour of built-ins in current LTS versions. fetch, WebSocket and Web APIs const res = await fetch('https://api.github.com/repos/nodejs/node');...
FastAPI is a Python web framework built on type hints. You describe your inputs and outputs with types, and FastAPI validates requests, serialises responses and generates interactive API docs for you. Install and run pip install "fastapi[standard]" fastapi dev...
A well-designed REST API is predictable: once a developer has used one endpoint, they can guess how the others work. These conventions get you most of the way there. URLs name resources, not actions GET /orders list orders POST /orders create an order GET /ord...
Before React 19, a form needed state for values, errors, loading and the response. useActionState folds most of that into one hook. The signature const [state, formAction, isPending] = useActionState(actionFn, initialState); // actionFn(previousState, formData...
A Server Action is an async function that runs on the server but can be called from a form or a client component. Next.js creates the endpoint for you. A form that writes to the database // app/todos/page.tsx import { revalidatePath } from 'next/cache'; import...
Generics let you write code that works with many types while keeping the connection between input and output types. Think of them as function parameters, but for types. The problem function first(items: any[]) { return items[0]; } const n = first([1, 2, 3]); /...
Media queries respond to the viewport. But a card might sit in a wide main column on one page and a narrow sidebar on another. Container queries let the card respond to the width of its container instead. 1. Declare a container .card-wrapper { container-type:...
Node.js ships a full test runner. For many backends and libraries it replaces Jest or Mocha entirely, with zero dependencies. Writing tests // test/cart.test.js import { describe, it, beforeEach } from 'node:test'; import assert from 'node:assert/strict'; impo...
Pydantic models are the heart of FastAPI. Every field type and constraint becomes runtime validation and documentation. Field constraints from typing import Annotated from pydantic import BaseModel, EmailStr, Field class SignupRequest(BaseModel): email: EmailS...
Any list endpoint needs pagination. The two main approaches behave very differently on large or fast-changing data. Offset pagination GET /articles?page=3&per_page=20 SELECT * FROM articles ORDER BY published_at DESC LIMIT 20 OFFSET 40; Pros: simple, lets user...
When a user likes a post or sends a message, waiting for the server before updating the screen feels sluggish. Optimistic UI shows the result immediately and corrects it if the request fails. The hook const [optimisticState, addOptimistic] = useOptimistic(actu...
Caching in Next.js used to be implicit and confusing. Recent versions moved to an explicit model: data is fetched fresh by default, and you opt in to caching with the 'use cache' directive. Turn on Cache Components // next.config.ts import type { NextConfig }...
Utility types build new types from existing ones, so you define your data once and derive variations instead of copying fields. interface User { id: number; name: string; email: string; role: 'admin' | 'member'; passwordHash: string; } Partial and Required //...
:has() matches an element if it contains something that matches the selector inside the brackets. For the first time, CSS can style a parent based on its children. Cards with or without an image .card:has(img) { grid-template-rows: 200px auto; } .card:not(:has...
Node.js supports two module systems: the original CommonJS ( require ) and standard ES modules ( import ). New projects should use ESM, but you'll meet both. Turning on ESM // package.json { "type": "module" } With "type": "module" , .js files are ESM. Without...
FastAPI's Depends lets endpoints declare what they need (a database session, the current user, pagination settings) and FastAPI provides it. Dependencies can depend on other dependencies, and they're easy to replace in tests. A simple dependency from typing im...
Once other people depend on your API, every change can break someone. Versioning gives you room to evolve without surprises. First: avoid breaking changes Usually safe (additive): Adding a new endpoint. Adding an optional request field. Adding a field to a res...
use is a React API that reads the value of a resource : a promise or a context. It's unusual because you can call it inside conditions and loops. Reading a promise When the promise is pending, the component suspends and the nearest <Suspense> boundary shows it...
In the App Router you fetch data directly in async Server Components. No useEffect , no API route in between. The main thing to get right is avoiding slow request waterfalls . Fetch where the data is needed export default async function Dashboard() { const sta...
A type annotation checks a value against a type, but then the variable becomes that type, and you lose the specific details. satisfies checks the value without changing its inferred type. The problem with annotations type Route = { path: string; auth: boolean...
Nesting was one of the main reasons people used Sass. It's now part of CSS itself and works in every modern browser. The basics .card { padding: 1rem; border-radius: 12px; h2 { font-size: 1.25rem; /* .card h2 */ } &:hover { box-shadow: 0 4px 20px rgb(0 0 0 / 0...
Configuration such as database URLs and API keys belongs in environment variables, not in code. Node.js can now load .env files itself. Loading from the command line # .env DATABASE_URL=postgres://localhost:5432/app PORT=3000 node --env-file=.env src/server.js...
SQLAlchemy 2.0 brought a cleaner, fully typed API and first-class async support. Combined with the asyncpg driver it's a solid choice for FastAPI apps. Install pip install "sqlalchemy[asyncio]" asyncpg alembic Engine and session # db.py from sqlalchemy.ext.asy...
A client sends POST /payments , the network times out, and it retries. Did the first request succeed? Without protection, the customer may be charged twice. Idempotency keys make retries safe. The contract POST /payments Idempotency-Key: 7f3b2c1e-9a4d-4e8b-a1f...
React Server Components (RSC) render on the server and send their result to the browser, not their JavaScript. They can read databases and files directly, and they add nothing to your client bundle. Server vs client components Server Components (default in fra...
Dynamic routes let one file serve many URLs, such as every blog post or product. With generateStaticParams you can pre-render the popular ones at build time. Segment types [slug] - one segment: /blog/hello . [...slug] - catch-all: /docs/a/b/c gives ['a','b','c...
A union type says "this value is one of several shapes". Narrowing is how TypeScript figures out which one you have inside a branch. Built-in narrowing function format(value: string | number | Date) { if (typeof value === 'string') return value.trim(); // stri...
When two CSS rules conflict, specificity usually decides who wins. That leads to !important and ever-longer selectors. Cascade layers add a level above specificity: rules in a later layer beat rules in an earlier layer, no matter how specific. Declare the orde...
Reading a 5 GB log file with fs.readFile loads all 5 GB into memory. Streams process data in small chunks, so memory use stays flat no matter how big the input is. The four stream types Readable - a source (file, HTTP request, database cursor). Writable - a de...
This guide adds a /auth/token login endpoint that returns a JWT, and a dependency that protects routes. It follows the pattern FastAPI's own docs use. Install pip install pyjwt "pwdlib[argon2]" Hashing and tokens # security.py from datetime import datetime, ti...
Every API needs an error format, and many invent their own. Problem Details (RFC 9457, which replaced RFC 7807) is a standard JSON shape for HTTP API errors that clients and tools already understand. The format HTTP/1.1 403 Forbidden Content-Type: application/...
Re-renders in React are cheap until they aren't. Developers used useMemo , useCallback and React.memo to skip unnecessary work, but getting the dependency arrays right is tedious. React Compiler is a build-time tool that adds this memoization automatically. Wh...
Sometimes you need to act on a request before any page renders: redirect signed-out users, rewrite a path, or add a header. In Next.js 16 this file is called proxy.ts ; earlier versions called it middleware.ts and the idea is the same. A basic proxy // proxy.t...
TypeScript checks your code, not your data. A JSON response, a form submission or an environment variable can be anything at runtime. Zod validates data against a schema and gives you the TypeScript type from that same schema. Define once, get both import { z...
#hex and rgb() describe colours the way screens produce them, not the way people see them. Newer CSS colour functions make palettes more consistent and easier to generate. oklch(): perceptual colour :root { /* oklch(lightness chroma hue) */ --brand-300: oklch(...
Node.js runs your JavaScript on a single thread. That's fine for I/O, but a CPU-heavy task (resizing images, parsing a huge file, heavy maths) blocks the event loop, and every other request waits. Spot the problem app.get('/report', (req, res) => { const resul...
FastAPI apps are easy to test because endpoints are plain functions behind an ASGI app, and dependencies can be swapped per test. A first test # test_books.py from fastapi.testclient import TestClient from main import app client = TestClient(app) def test_crea...
GraphQL and REST both work well. The right choice depends on your clients, your data and your team, not on which one is newer. The core difference With REST, the server decides the shape of each endpoint's response. With GraphQL, the client asks for exactly th...
Passing a ref to a custom component used to require wrapping it in forwardRef . In React 19, function components simply receive ref as a prop. Before and after // React 18 const Input = forwardRef(function Input(props, ref) { return <input ref={ref} className=...
The App Router has built-in tools for everything search engines and social networks need: titles, descriptions, canonical links, sitemaps and share images. Static metadata // app/layout.tsx import type { Metadata } from 'next'; export const metadata: Metadata...
For years, running TypeScript in Node.js meant a compile step or a loader like ts-node or tsx. Recent Node.js versions can run .ts files directly by stripping the type annotations. Try it // greet.ts interface Person { name: string } function greet(p: Person):...
CSS Grid handles two-dimensional layout: rows and columns. These recipes cover most real-world layouts. Responsive cards without media queries .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1.5rem; } Columns...
Express 5 finally handles async route handlers properly: if an async handler throws or returns a rejected promise, the error goes to your error middleware. No more express-async-errors or wrapping every route in try/catch. Async handlers just work app.get('/us...
Two common needs in API servers: running code once when the app starts or stops, and doing a bit of work after the response is sent. Lifespan: startup and shutdown from contextlib import asynccontextmanager import httpx from fastapi import FastAPI @asynccontex...
A GraphQL server needs two things: a schema describing types and operations, and resolvers that fetch the data for each field. Setup npm install @apollo/server graphql Schema and resolvers // server.js import { ApolloServer } from '@apollo/server'; import { st...
Fetching in useEffect means handling loading, errors, caching, refetching and race conditions yourself. TanStack Query (formerly React Query) handles all of that for client-side data. Setup import { QueryClient, QueryClientProvider } from '@tanstack/react-quer...
Route Handlers are the App Router's version of API routes. A route.ts file exports functions named after HTTP methods and uses the standard Web Request and Response APIs. GET and POST // app/api/projects/route.ts import { NextResponse } from 'next/server'; exp...
tsconfig.json has over a hundred options. These are the ones that matter most for catching bugs in a modern project. { "compilerOptions": { "target": "es2022", "module": "nodenext", "strict": true, "noUncheckedIndexedAccess": true, "noImplicitOverride": true,...
Animating from one UI state to another (a thumbnail growing into a detail view, a list reordering) used to need a heavy animation library. The View Transitions API lets the browser do it. Same-page transitions function showDetails(item) { if (!document.startVi...
Most API breaches come from a few well-known mistakes. Work through this checklist for every Node.js service you deploy. 1. Validate every input import { z } from 'zod'; const CreateOrder = z.object({ productId: z.uuid(), quantity: z.number().int().min(1).max(...
Some responses shouldn't wait until everything is ready: large exports, progress updates, or text from an LLM. FastAPI's StreamingResponse sends data as your generator produces it. Streaming a large CSV from fastapi.responses import StreamingResponse @app.get(...
Fetch 50 books with their authors, and a naive server runs 1 query for the books plus 50 queries for authors. That's the N+1 problem , and it's the most common GraphQL performance issue. Why it happens Book: { // called once per book, each with its own query a...
"Which state library should I use?" depends on what kind of state you have. Most apps need less global state than they think. 1. Server state is not app state Data from your API (users, products, orders) belongs in a server-state tool: Server Components, TanSt...
The App Router turns error handling into file conventions. Each route segment can have its own error UI, so one broken widget doesn't take down the whole app. error.tsx: catch unexpected errors // app/dashboard/error.tsx 'use client'; // error boundaries must...
Advanced types let you describe APIs precisely: event names, CSS tokens, route parameters. You won't write these every day, but they make library-style code much safer. Template literal types type Size = 'sm' | 'md' | 'lg'; type Side = 'top' | 'bottom'; type M...
Scroll effects used to mean scroll event listeners or IntersectionObserver. Scroll-driven animations connect a normal CSS animation to the scroll position, and they run off the main thread, so they stay smooth. A reading progress bar .progress { position: fixe...
Containers and process managers stop your app by sending SIGTERM . If you exit immediately, requests in progress fail and database transactions are cut off. A graceful shutdown finishes the current work first. The steps Stop accepting new connections. Let in-f...
A production FastAPI deployment is usually a container running an ASGI server behind a reverse proxy or load balancer. Dockerfile FROM python:3.13-slim # uv for fast, reproducible installs COPY --from=ghcr.io/astral-sh/uv:latest /uv /usr/local/bin/uv WORKDIR /...
OpenAPI (formerly Swagger) is a standard, machine-readable description of a REST API. One spec file can produce interactive docs, client SDKs, mock servers and request validation. A minimal spec openapi: 3.1.0 info: title: Orders API version: 1.0.0 servers: -...
React Testing Library encourages tests that interact with your UI the way users do: find a button by its label, click it, check what appears. Vitest runs those tests quickly and shares config with Vite. Setup npm install -D vitest jsdom @testing-library/react...
Images and fonts are the most common causes of slow Largest Contentful Paint (LCP) and layout shift (CLS). Next.js includes components that fix both with very little effort. next/image import Image from 'next/image'; import hero from './hero.jpg'; // static im...
These three types sit at the edges of TypeScript's type system and are often confused. Using the right one is the difference between real safety and false confidence. any: switch off checking let data: any = JSON.parse(input); data.user.name.toUpperCase(); //...
Good dark mode isn't just inverted colours. It needs its own palette, respects the user's system setting, and lets them override it. 1. Use semantic colour variables :root { --bg: #ffffff; --surface: #f8fafc; --text: #0f172a; --muted: #64748b; --brand: #0d9488...
A memory leak shows up as memory that keeps climbing until the process is killed or restarts. The fix starts with proving where the memory goes. 1. Confirm the leak setInterval(() => { const { heapUsed, rss } = process.memoryUsage(); console.log(`heap ${(heapU...
A single main.py is perfect for a prototype. As the API grows, split it by feature so each area of the product lives together. A feature-based layout app/ main.py # creates the app, includes routers config.py # settings from environment db.py # engine, session...
Rate limits protect your API from abuse, runaway scripts and accidental traffic spikes, and keep things fair between customers. Common algorithms Fixed window - count requests per calendar minute. Simple, but allows bursts at window edges (100 at 12:00:59 and...
