~//guides
Guides
Long-form, practical guides for every technology on the roadmap. Pick a topic and go deep, or follow the roadmap in order.
125 guides
Internet & How it Works
How the Internet Works
The internet is a network of networks that moves packets between computers. Understanding clients, servers, IP and the request/response cycle makes the whole web less mysterious.
15 min readHTTP & HTTPS
HTTP is the protocol of the web. Methods, status codes, headers and caching are the vocabulary every API and every page load is built from.
16 min readDNS & Domains
DNS is the internet's phone book. It turns human names like example.com into the IP addresses machines use, and a handful of record types cover almost every setup.
13 min readBrowsers & Rendering
A browser turns HTML, CSS and JavaScript into pixels. Understanding parsing, the DOM, the critical rendering path and reflows makes performance work far less mysterious.
15 min readHTML
HTML
HTML is the markup language that gives every web page its structure and meaning. Here's what it is, how it works, and how to start using it today.
14 min readSemantic HTML
Semantic HTML uses elements that describe their meaning. It makes pages accessible, findable and easier to maintain, with no extra cost.
14 min readForms & Validation
Forms are how users send data to your app. Labels, the right input types and native validation get you most of the way before you write any JavaScript.
14 min readAccessibility (a11y)
Accessibility is not an add-on. Semantic markup, keyboard support and clear contrast make your site usable by everyone, and they improve it for every user.
15 min readSEO Basics
Search engines crawl pages, understand them and rank them. Good technical foundations, clear content and structured data give you the best chance of being found.
14 min readCSS
CSS
CSS is the language that controls how your HTML looks and lays out on screen. Here's what it is, how it works, and how to start using it today.
14 min readCSS Box Model
The box model is the foundation of CSS layout. Every element is a box with content, padding, border and margin — learn how it works and how to control it.
14 min readFlexbox
Flexbox is a CSS layout model that makes it easy to align and distribute space among items in a container. Here's how it works and how to use it.
14 min readCSS Grid
CSS Grid is a two-dimensional layout system that lets you arrange elements in rows and columns. Learn how it works, when to use it, and how to build modern layouts without hacks.
14 min readResponsive Design
Responsive design makes one layout work on every screen. A viewport tag, fluid units and mobile-first media queries cover the vast majority of cases.
15 min readAnimations & Transitions
CSS transitions and keyframes bring interfaces to life with no JavaScript. Animate the right properties and motion stays smooth and accessible.
14 min readCSS Variables
Custom properties are values you define once and reuse anywhere. Unlike preprocessor variables, they live in the browser and can change at runtime.
13 min readCSS Frameworks & Styling
Tailwind CSS
Utility-first CSS lets you style directly in your markup with small, composable classes. Here is how it works, why it took over, and how to use it without making a mess.
14 min readCSS Modules
CSS Modules give you plain, hand-written CSS with class names scoped to a single component, so styles never leak or collide across a large codebase.
12 min readSass
Sass is a CSS preprocessor that adds power and elegance to plain CSS. Here's what it is, how it works, and why developers use it to write better stylesheets.
16 min readBootstrap
Bootstrap is the component-first CSS framework that ships a complete design system: a responsive grid, ready-made components and a deep layer of utilities.
13 min readstyled-components
styled-components is the CSS-in-JS library that lets you write real CSS inside JavaScript, scoped to a component and driven by its props.
13 min readPostCSS
PostCSS is a tool that transforms CSS with JavaScript plugins. It is the quiet engine behind Autoprefixer, Tailwind and most modern build pipelines.
12 min readJavaScript
JavaScript
JavaScript is the programming language of the web. It turns static pages into interactive experiences — here is what it is, where it runs, and how to start writing it today.
16 min readThe DOM
The Document Object Model is the bridge between your HTML and your JavaScript. Learn how to select, create, update and remove elements, and how to respond to what users do.
15 min readModern JavaScript (ES6+)
ES6 and the releases that followed transformed JavaScript from a quirky scripting language into a joy to write. Here are the features you will use every single day.
15 min readAsynchronous JavaScript
JavaScript runs one thing at a time, yet it never freezes while waiting. The event loop, callbacks, promises and async/await are the machinery that makes that possible.
16 min readFetch API & AJAX
Every modern web app talks to a server. The Fetch API is the standard way to send requests, read responses and update the page without a full reload.
15 min readError Handling in JavaScript
Things go wrong. Networks drop, inputs surprise you, APIs change. Good error handling keeps those failures from becoming outages and angry users.
14 min readGit & Version Control
Git
Git is the world's most popular version control system. Here's what it is, how it works, and how to start using it to track changes and collaborate with others.
18 min readGitHub
GitHub is where the world builds software. Here's what it is, how it works, and how to use it to collaborate, host code and build your developer career.
16 min readTypeScript
TypeScript
TypeScript adds static types to JavaScript, catching bugs before they reach production. Here's what it is, how it works, and how to start using it today.
20 min readAdvanced TypeScript Types
Utility types, conditional types and mapped types let you transform and compose types with precision. Here's how they work and when to reach for them.
16 min readJavaScript Frameworks
React
React is the component library that made declarative UI mainstream. Describe what the screen should look like for a given state, and let React work out how to update it.
16 min readVue
Vue is the progressive framework: adopt as little or as much as you need, with a template syntax that feels like writing HTML and reactivity that just works.
15 min readAngular
Angular is the batteries-included framework: TypeScript first, dependency injection built in, and an opinionated structure that scales from a small app to a large enterprise codebase.
16 min readSvelte
Svelte is a compiler, not a runtime. It turns your components into efficient DOM code at build time, so the browser ships less JavaScript and does less work.
14 min readSolidJS
SolidJS looks like React but behaves like a fine-grained reactive system. Components run once, and updates go straight to the DOM nodes that depend on a signal.
13 min readPreact
Preact is a 3kB alternative to React with the same modern API. Same components, same hooks, a fraction of the size — ideal when every kilobyte counts.
12 min readState Management
React Context API
The Context API is React's built-in way to share state across a tree without passing props through every level. Used well, it removes prop drilling; used carelessly, it re-renders everything.
13 min readRedux Toolkit
Redux Toolkit is the modern, official way to write Redux. It removes the boilerplate, includes Immer for immutable updates and ships devtools, middleware and RTK Query.
15 min readZustand
Zustand is a tiny, fast and unopinionated state store for React. No providers, no boilerplate, and selector-based subscriptions that keep re-renders minimal.
13 min readMobX
MobX is reactive state management: annotate your data, and everything that depends on it updates automatically. No selectors, no reducers, just observables.
13 min readTanStack Query
TanStack Query is the missing data-fetching layer for React. It turns server data into a cache with loading, error, refetching and invalidation handled for you.
14 min readPinia
Pinia is the official Vue store: simple, type-safe and built on the Composition API. State, getters and actions in one place, with no providers or boilerplate.
12 min readMeta-frameworks
Next.js
Next.js is the React framework that adds routing, server rendering, data fetching and a server runtime, so you build a full application instead of assembling one.
16 min readNuxt
Nuxt is the Vue framework that adds file-based routing, auto-imports, server rendering and a built-in server engine, so a Vue app becomes a full-stack project.
14 min readSvelteKit
SvelteKit is Svelte's official application framework. It adds file-based routing, server-side load functions, form actions and adapters that deploy anywhere.
14 min readAstro
Astro is the content-first framework that ships zero JavaScript by default. Build pages as HTML and add interactivity only where you need it, with any UI library.
14 min readRemix
Remix is the web-standards-first React framework. It leans on HTTP, forms and progressive enhancement so your app works before the JavaScript arrives.
13 min readTesting
Vitest
Vitest is the fast, Vite-native test runner. It reuses your build config, runs tests in parallel and ships Jest-compatible APIs with first-class TypeScript support.
13 min readJest
Jest is the classic JavaScript test runner: batteries-included, snapshot-capable and still the default in countless Node and React codebases.
13 min readTesting Library
Testing Library helps you test components the way a user experiences them. Query by role and text, interact with real events, and stop testing implementation details.
13 min readPlaywright
Playwright is cross-browser end-to-end testing with auto-waiting, powerful locators and tooling for tracing, codegen and visual comparisons — all in one package.
14 min readCypress
Cypress runs tests inside the browser with an interactive runner, automatic retries and a time-travel debugger that makes end-to-end testing unusually approachable.
13 min readStorybook
Storybook is a workshop for UI components. Build and test them in isolation, document every state, and catch accessibility and visual regressions before they reach users.
12 min readBuild Tools & Tooling
Vite
Vite is the modern build tool that serves your source over native ES modules in development and bundles it with Rollup for production. Fast to start, fast to iterate.
14 min readnpm
npm is the default package manager and the largest software registry in the world. Learn how it installs dependencies, resolves versions and runs your project scripts.
13 min readpnpm
pnpm is a fast, disk-efficient package manager that uses a content-addressable store and strict symlinked node_modules. It is the go-to choice for monorepos.
13 min readESLint
ESLint is the pluggable linter that catches bugs and enforces conventions before they reach review. With flat config and TypeScript support, it fits any modern stack.
13 min readPrettier
Prettier is the opinionated code formatter that ends style debates. It parses your code and reprints it consistently, so nobody argues about spacing, quotes or semicolons.
12 min readWebpack
Webpack is the battle-tested module bundler. It turns a graph of modules, assets and dependencies into optimised bundles — and understanding it makes every other build tool clearer.
14 min readTurborepo
Turborepo is a high-performance build system for JavaScript monorepos. It runs tasks across packages, caches the results and skips anything that has not changed.
13 min readNext Steps
Web Performance
Performance is a feature. Core Web Vitals, lazy loading, smaller bundles and smarter caching decide whether users stay or leave before your page even renders.
15 min readWeb Security
Security is not a feature you add at the end. XSS, CSRF, CORS and safe authentication are the baseline every web developer needs to understand.
15 min readPWA & Service Workers
A Progressive Web App installs like a native app, works offline and loads instantly on repeat visits. Service workers and a web manifest make it possible.
14 min readGraphQL
GraphQL lets clients ask for exactly the data they need, in one request. A typed schema describes the API, and resolvers fetch the data behind it.
14 min readGSAP
GSAP is the animation library behind polished, scroll-driven web experiences. Timelines, easing and ScrollTrigger give you frame-perfect control without fighting CSS.
13 min readThree.js
Three.js makes WebGL approachable: a scene graph, cameras, materials and lights let you build 3D experiences for the browser in plain JavaScript.
14 min readDocker & Deployment
Docker packages your app and its environment into an image that runs the same everywhere. Multi-stage builds, caching and CI/CD turn deployment into a repeatable step.
14 min readInternet & Networking
TCP/IP & Sockets
TCP/IP is the transport layer under every HTTP request, database connection and WebSocket. Sockets are how your code talks to it directly.
14 min readWebSockets
WebSockets keep one connection open in both directions, so the server can push data the moment it changes instead of waiting to be asked.
14 min readNode.js Fundamentals
Node.js Basics
Node.js runs JavaScript outside the browser, on the server. Its non-blocking I/O and huge ecosystem make it a natural choice for APIs, tools and full-stack apps.
15 min readNode.js Event Loop
Node runs your JavaScript on a single thread, yet handles thousands of connections. The event loop and its phases are why that works — and why blocking it hurts.
15 min readNode.js Streams
Streams process data in chunks instead of loading it all into memory. They are how Node copies files, compresses payloads and pipes HTTP bodies efficiently.
15 min readNode.js File System
The fs module reads, writes and watches files. Use the promise API, handle paths safely, and stream anything that might be large.
14 min readAPI Design
REST APIs
REST is a style for designing HTTP APIs around resources. Get the nouns, methods and status codes right and your API feels obvious to every client.
15 min readOpenAPI
OpenAPI is a machine-readable description of an HTTP API. One spec can generate documentation, clients, servers and tests — if you keep it accurate.
14 min readAPI Versioning
APIs change. Versioning is how you ship improvements without breaking the clients that already depend on you — and how you retire old versions on purpose.
13 min readRate Limiting
Rate limiting protects an API from abuse, bugs and runaway clients. A few algorithms and clear headers keep your service available for everyone.
14 min readWeb Frameworks
Express
Express is the minimal, unopinionated Node.js web framework. A route, a function and a middleware chain — that is the whole mental model, and it still powers a huge share of the web.
16 min readFastify
Fastify is a fast, schema-first Node.js web framework. JSON Schema compiles your validation and serialization, and encapsulated plugins keep large services honest.
15 min readNestJS
NestJS is an opinionated, Angular-inspired Node.js framework. Modules, controllers and providers give large teams a shared architecture and dependency injection out of the box.
16 min readHono
Hono is an ultrafast web framework built on the standard Request and Response objects. Write once, run on Cloudflare Workers, Deno, Bun or Node, with end-to-end types through RPC.
14 min readKoa
Koa is the tiny async/await rewrite of Express by its original authors. One context object and an onion of middleware — everything else is a package you choose.
14 min readLaravel
Laravel is the PHP framework built for developer happiness: expressive routing, the Eloquent ORM, Blade templates and an ecosystem that covers everything from auth to deployment.
16 min readSymfony
Symfony is both a set of reusable PHP components and a full framework built from them. It trades convenience for structure, stability and long-term maintainability at scale.
15 min readDjango
Django is the batteries-included Python web framework. Models, migrations, an ORM, templates, auth and a production admin ship together, so you describe your data and Django handles the rest.
16 min readFlask
Flask is the minimal Python micro-framework. You get routing, a request object and Jinja templates in a single file, then add exactly the extensions you need as the app grows.
14 min readFastAPI
FastAPI is the async Python framework built on type hints. Pydantic validates your data, Starlette handles the HTTP, and the OpenAPI docs write themselves.
15 min readRuby on Rails
Rails is the full-stack Ruby framework built on convention over configuration. It decides the boring parts — file names, table names, routes — so you can spend your time on the product.
15 min readSpring Boot
Spring Boot is the opinionated layer on top of the Spring Framework that turns a pile of configuration into a running application: starters, auto-configuration and an embedded server.
16 min readDatabases
SQL
SQL is the declarative language for asking questions of relational data. You describe the result you want and the database decides how to compute it.
14 min readPostgreSQL
PostgreSQL is the relational database that takes correctness seriously. Strong types, real transactions, JSONB and an extension system make it the default choice for new applications.
16 min readMySQL
MySQL is the relational database behind a huge share of the web. InnoDB gives it real transactions, replication makes it easy to scale reads, and its ecosystem is enormous.
15 min readMongoDB
MongoDB is a document database: flexible BSON documents live in collections, are queried with a JavaScript-like language, and scale out with replica sets and sharding.
15 min readRedis
Redis is an in-memory data-structure server: keys map to strings, hashes, lists, sets, sorted sets and streams, served from RAM by a single-threaded command loop.
14 min readORMs & Query Builders
Prisma
Prisma is a schema-first ORM for TypeScript. Describe your models in schema.prisma, generate a fully typed client, and let migrations keep the database in step.
15 min readDrizzle ORM
Drizzle is a TypeScript-first ORM that keeps SQL in plain sight. Define tables in TypeScript, compose queries that mirror the SQL they generate, and run it all on a thin, edge-friendly runtime.
14 min readTypeORM
TypeORM maps TypeScript classes to database tables with decorators. It supports both the Data Mapper and Active Record patterns, and ships repositories, a QueryBuilder and migrations in one package.
15 min readKnex.js
Knex.js is a SQL query builder, not a full ORM. It composes queries as JavaScript, binds every value safely, speaks several dialects and ships migrations and seeds alongside the queries.
14 min readAuthentication & Authorization
Password Hashing
Passwords are the one secret you should never store. A slow, salted hash turns a stolen database into a pile of guesses that never finish.
14 min readJWT
A JSON Web Token is a signed, URL-safe string that carries claims about a user. Compact and self-contained, it scales beautifully and is easy to get wrong.
15 min readOAuth 2.0
OAuth 2.0 is a framework for delegated authorization, not authentication. It lets a user grant an app limited access to their data without sharing a password.
16 min readOpenID Connect
OAuth 2.0 authorizes access; OpenID Connect adds the identity layer that lets you log users in. It is the protocol behind the 'Sign in with...' button.
15 min readSession Authentication
Session auth keeps the truth on the server. A random session id travels in an HttpOnly cookie while the user's identity and permissions live in a store you control and can revoke at any moment.
14 min readRBAC
RBAC answers one question per request: is this principal allowed to do this thing to this resource? Roles bundle permissions, and a single can() check keeps the answer consistent everywhere.
15 min readAPI Keys
An API key is a long-lived credential for machines. Issue it once, store only a hash, scope it tightly, and give yourself a way to rotate and revoke it before you ever need to.
14 min readTesting
Supertest
Supertest drives your Node HTTP app in-process and turns API tests into plain assertions on status, headers and body — no server to start, no port to manage, no network to mock.
14 min readEnd-to-End Testing
End-to-end tests drive the real system the way a user does. They are slow, few and irreplaceable: the only tests that can prove a person can actually finish a task.
15 min readCaching & Performance
Caching Strategies
Caching is how systems stay fast under load. The patterns are simple; the hard part is knowing what to keep, for how long, and when to throw it away.
15 min readPagination
Every collection endpoint needs a limit. Pagination turns an unbounded query into a predictable one, and the choice between offset and cursor decides whether it stays fast.
14 min readBatch Processing
Batch processing moves slow, retryable work out of the request path and onto workers. The queue in between is what makes the system resilient, observable and safe to run at scale.
15 min readConnection Pooling
Opening a database connection is expensive. A pool keeps a small set of them open and reuses them, turning a per-request cost into a one-time setup and protecting the database from connection storms.
14 min readMessage Queues & Real-time
Redis Queues
A Redis job queue puts slow, retryable work behind a durable buffer. BullMQ turns Redis lists and streams into delayed jobs, retries, priorities and repeatable schedules.
14 min readRabbitMQ
RabbitMQ is an AMQP message broker that routes messages through exchanges into queues. Acknowledgements, prefetch and dead-lettering make it a precise tool for work that must not be lost.
15 min readApache Kafka
Kafka is a distributed, append-only commit log, not a queue. Records are written once and read many times, which is what gives it replay, fan-out and ordering guarantees a classic broker cannot match.
15 min readSocket.IO
Socket.IO is a real-time event framework on top of WebSockets. It adds rooms, acknowledgements, automatic reconnection and a polling fallback, so you spend your time on features instead of connection plumbing.
14 min readDevOps & Deployment
CI/CD Pipelines
CI/CD turns every change into a tested, immutable artifact and ships that same artifact the same way every time. A pipeline is just a sequence of jobs that runs whenever the code moves.
15 min readLinux
Linux runs the vast majority of servers, containers and cloud machines. The handful of ideas behind it — everything is a file, processes are cheap, permissions are explicit — unlock every machine you will ever SSH into.
15 min readNginx
Nginx is the event-driven web server that sits in front of almost every Node, Python and Go app in production. It terminates TLS, serves static files, balances load and shields your process from the internet.
15 min readCloud Platforms
Cloud deployment is the art of choosing how much infrastructure to manage. From a raw VPS to a managed PaaS to Kubernetes, the trade is the same: control and cost against the time you spend keeping it alive.
14 min readArchitecture & Patterns
Microservices
Microservices split an application into independently deployable services around business capabilities. The point is team autonomy and independent releases, not scaling for its own sake — and the network between them is the price.
16 min readModular Monolith
A modular monolith is one deployable with hard internal boundaries. You keep in-process calls, one transaction and one pipeline, while each business module owns its data and exposes a small public interface — so it can become a service later if it ever needs to.
14 min readEvent-Driven Architecture
Event-driven architecture replaces direct calls with facts. A service records that something happened and moves on, while other services react on their own time. The coupling drops — and so does the certainty.
15 min readClean Architecture
Clean Architecture is one rule with large consequences: dependencies point inward. The domain knows nothing about the database, the framework or HTTP, so the business rules can be tested and changed without dragging the infrastructure along.
14 min read