Search

Lessons (40)

• Hash Maps & Sets

  … any key type, keeps insertion order, has .size const ages = new Map(); ages.set("ana", 31).set("bo …

• React Hooks in Practice

  … the function runs only on the first render const [settings, setSettings] = useState(() = JSON.parse(localStorage.getItem("settings") ?? "{}")); For …

• L — Liskov Substitution Principle

  … So inheritance seems natural: js class Rectangle { setWidth(w) { this.width = w; } setHeight(h) { this.height = h; } area …

• JavaScript Essentials: Event Loop, Closures & this

  … run all microtasks, then one task The famous quiz js console.log("1"); setTimeout(() = console.log("2"), 0 …

• React Fundamentals

  … const [count, setCount] = useState(0); return ( <div <p You clicked {count} times</p <button onClick={() = setCount(count + 1 …

• ConfigMaps, Secrets & Storage

  … settings mountPath: /etc/shop → /etc/shop/app-settings.json volumes: - name: settings configMap: { name: shop-api-config, items …

• MVC, MVP & MVVM

  … the <script setup part acts as the ViewModel -- <script setup import { ref, computed } from "vue"; const email = ref …

• Brokers, Replication & Durability

  … The leader plus all caught-up followers form the ISR (in-sync replica set). mermaid flowchart LR L …

• State Management (Redux, Zustand, TanStack Query)

  … state.items.filter((i) = i.id !== id) })), clear: () = set({ items: [] }), })); // Any component, no Provider needed. Select only what …

• Data Structures for Scale

  … spatial indexes locate nearby items; probabilistic sketches answer large-set questions cheaply](/img/system-design-l6/scale-data …

• Graphs: BFS & DFS

  … a set of nodes (vertices) connected by edges . mermaid flowchart LR A((Home)) --- B((Park)) A --- C((School …

• Caching & Redis

  … SET product:42 (expires in 300 s) end js async function getProduct(id) { const key = product:${id} ; const …

• Frontend Performance & Core Web Vitals

  … update the input now startTransition(() = setFilter(e.target.value)); // non-urgent: filter 10,000 rows later } Fixing CLS …

• Pods

  … Great for setup work. yaml spec: initContainers: - name: wait-for-db image: busybox:1.36 command: ["sh", "-c …

• Helm, kubectl Cheat Sheet & Best Practices

  … package of templated Kubernetes YAML A package Values Settings that fill the templates ( values.yaml ) Config options Release …

• SQL vs NoSQL Databases

  … four families mermaid mindmap root((NoSQL)) Document MongoDB Firestore JSON documents Key-value Redis DynamoDB get / set by …

• Structural Patterns: How to Connect Objects

  … sequenceDiagram Client- Proxy: set balance = -10 Proxy- Proxy: validate ❌ Proxy-- Client: Error Client- Proxy: set balance = 50 Proxy …

• Big-O Notation Made Simple

  … push(x); // ✅ O(n) with a Set const uniqueFast = [...new Set(arr)]; Space complexity Big-O also measures …

• Services & Ingress

  … a stable name and IP that load-balances across a changing set of pods. An Ingress is the …

• React vs Vue vs Angular

  … Counter() { const [count, setCount] = useState(0); const double = count 2; return ( <button onClick={() = setCount(count + 1)} Clicked {count …

• Frontend Testing Strategy

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

• Batch vs Stream and Data Modeling

  … denormalize proven read bottlenecks. ![Batch runs a bounded set later; streaming handles events continuously while data modeling controls …

• Delivery Guarantees: At-Most, At-Least & Exactly Once

  … already processed → skip await tx.query("UPDATE accounts SET balance = balance + $1 WHERE id = $2", [amount, accountId]); }); // Option …

• DSA Interview Patterns Cheat Sheet

  … of seen values?} G -- yes HM[Hash map / Set] G -- no ST{Matching pairs, next greater,<br/ undo …

• Kafka Producers

  … batching, compression, partitioning, the acks setting that trades speed for safety, retries, and the idempotent producer. The big …

• What Is Software Architecture?

  Architecture is the set of big decisions that are expensive to change later. Learn quality attributes, trade-offs …

• Views, Triggers & Stored Procedures

  … Prefer set-based updates, clear ownership and auditability. Use triggers for local data rules, not cross-service workflows …

• Creational Patterns: How to Make Objects

  … a Modern chair + Modern sofa + Modern table, or a Victorian set. You never mix a Victorian chair with …

• Flash Sale: 10 Million Buyers, No Oversell

  … a durable owner and reconciliation. sql UPDATE inventory SET available = available - 1 WHERE sku = :sku AND available 0 …

• S — Single Responsibility Principle

  … const [user, setUser] = useState(null); useEffect(() = { fetch( /api/users/${id} ).then((r) = r.json()).then(setUser); }, [id]); if …

• Database Indexing & Transactions

  … let the database do it atomically sql UPDATE flights SET seats left = seats left - 1 WHERE id = 42 …

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

  … string }) { const [added, setAdded] = useState(false); return <button onClick={() = setAdded(true)} {added ? "✓ Added" : "Add to cart"}</button ; } mermaid …

• Data in Microservices: Sagas & the Outbox Pattern

  … publish unsent outbox rows, then mark them as sent setInterval(async () = { const rows = await db.query( "SELECT FROM …

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

  … New inspectors (health, fire safety) can visit without changing the businesses. Problem: add new operations to a set …

• Storage Engines & Database Operations

  … Bound pool size, reserve capacity for critical traffic, set deadlines and investigate long transactions or slow queries. Backups …

• How a Web Request Works

  … faster setup, no head-of-line blocking Where time goes A typical 200 ms page request might be …

• Behavioral Patterns I: Observer, Strategy, Command, State

  … if (!this. listeners.has(event)) this. listeners.set(event, new Set()); this. listeners.get(event).add(listener); return …

• ACID, Transactions & Locks

  … UPDATE inventory SET available = available - 1 WHERE sku = :sku AND available 0; If zero rows change, inventory was …

• Deploying & Operating Microservices

  … pass. The big idea A theatre changes the set between scenes without stopping the play: the curtain drops …

• Scaling & Health Probes

  … on("SIGTERM", () = { isShuttingDown = true; // readiness now returns 503 setTimeout(() = { // give load balancers a moment to notice server.close …