Search

Lessons (19)

• Frontend Security

  … What can go wrong in the browser and how to defend against it. The big idea The browser …

• How Browsers Render a Page

  … HTML → DOM The browser reads HTML top to bottom and builds the Document Object Model , a tree of …

• Next.js Rendering: CSR, SSR, SSG, ISR & Server Components

  … The browser downloads JavaScript, runs it, fetches data, then builds the page. mermaid sequenceDiagram participant B as Browser …

• How a Web Request Works

  Follow one click from the browser to the server and back, through DNS, TCP, TLS, HTTP, load balancers …

• Microkernel (Plugin) Architecture

  … How VS Code, browsers, Webpack and ESLint are built, how to design a plug-in contract, and the …

• Real-Time, Pub/Sub, Webhooks and CDC

  … Pattern Best for Key rule --- --- --- SSE Server-to-browser updates One-way stream; reconnect with event ID Webhook …

• Frontend Performance & Core Web Vitals

  … the browser can't respond to a click until the current task finishes. mermaid gantt title A click …

• Stacks & Queues

  … Two simple structures behind undo buttons, browser history, task scheduling and many interview problems. The big idea ![A …

• REST vs GraphQL vs gRPC

  … connection, and nothing is parsed from text. Limits: browsers can't call gRPC directly (you need gRPC-Web …

• Authentication, Authorization & API Security

  … the browser holds only a random ID in a cookie. mermaid sequenceDiagram participant B as Browser participant S …

• Frontend Testing Strategy

  … one set of mocks for everything. End-to-end tests with Playwright E2E tests drive a real browser …

• Linked Lists

  … last points to first"] c1[A] -- c2[B] -- c3[C] -- c1 end Real uses: browser back/forward history …

• JavaScript Essentials: Event Loop, Closures & this

  … code, one function at a time Web APIs (browser) / libuv (Node) Oven, timer, delivery driver Do slow work …

• Layered (N-Tier) Architecture

  … machines. mermaid flowchart LR subgraph T1["Tier 1: browser"] UI[React app] end subgraph T2["Tier 2: app …

• TypeScript Essentials

  … js<br/ plain JavaScript"] JS -- Run[Runs in browser / Node] Types exist only at compile time . They're …

• React Hooks in Practice

  … subscriptions, timers, browser APIs, non-React widgets. jsx useEffect(() = { // setup const onResize = () = setWidth(window.innerWidth); window.addEventListener("resize …

• Caching & Redis

  … caches live mermaid flowchart LR U[👤 User] -- BC["Browser cache<br/ Cache-Control"] -- CDN["CDN edge<br/ images …

• Behavioral Patterns II: Chain, Template, Iterator, Mediator, Memento, Visitor

  … pop()); // ⏪ back to "Hello" You've used it: browser history, "Restore previous version" in Google Docs, Redux DevTools …

• Structural Patterns: How to Connect Objects

  … You've used it: jQuery ( $(".x").hide() hid browser differences), fetch() over raw sockets, an SDK over a …