Search

Lessons (37)

• React vs Vue vs Angular

  The same counter in three frameworks, a side-by-side comparison of reactivity, templates, state and tooling, and …

• React Fundamentals

  … When state changes, React re-renders that component (and its children). jsx import { useState } from "react"; function Counter …

• React Hooks in Practice

  … 2. Only call hooks from React functions (components or custom hooks). Why? React identifies each hook by its …

• Event-Driven Architecture

  Build systems where components react to events instead of calling each other. Broker vs mediator topologies, the four …

• Frontend Performance & Core Web Vitals

  … render only the ~20 visible rows (TanStack Virtual, react-window) Context updates re-render everything Split contexts, or …

• MVC, MVP & MVVM

  … How each works, how data flows, and where you meet them in Rails, Express, Angular, Vue and React …

• Service Communication: Sync vs Async

  … dancers react to each other"] ORD[Orders] -- OrderPlaced INV2[Inventory] INV2 -- StockReserved PAY2[Payments] PAY2 -- PaymentCompleted SHIP2[Shipping …

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

  … deliver delivered -- [ ] cancelled -- [ ] You've used it: useReducer in React, XState state machines, TCP connection states, order and …

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

  Where and when is your HTML created? Compare client-side, server-side, static and incremental rendering, plus React …

• Choosing an Architecture

  … Distributed-systems complexity Event-driven Components react to published facts Many reactions to the same facts, integration, buffering …

• Structural Patterns: How to Connect Objects

  … balance = 50 ✅ You've used it: Vue 3 reactivity (built on Proxy ), MobX, API gateways, CDNs (a caching …

• JavaScript Essentials: Event Loop, Closures & this

  … userName) { button.addEventListener("click", () = alert( Hi ${userName} )); } // 4. React hooks: every render's handlers close over that render …

• Graphs: BFS & DFS

  … JavaScript → TypeScript → React → Next.js. js function topoSort(graph) { // graph: node → nodes that depend on it const visited …

• What Are Design Patterns?

  … P["❓ Problem<br/ many objects need to<br/ react to one change"] P -- S["💡 Solution<br/ subscribers register …

• Views, Triggers & Stored Procedures

  … Trigger guidance A trigger can react to a department change, but row-by-row cursor updates are often …

• Frontend Security

  … script runs as the victim How React protects you (mostly) React escapes everything you put in {} : <script becomes …

• S — Single Responsibility Principle

  … split.svg) A frontend example SRP applies to React components too. jsx // ❌ Fetching + state + formatting + rendering in one …

• Clean Error Handling

  … Custom error classes let them react precisely. js class AppError extends Error { constructor(message, statusCode) { super(message); this …

• Kubernetes Cluster Architecture

  … server , and every component watches for changes and reacts. That's what makes Kubernetes so extensible and resilient …

• Kafka vs RabbitMQ & the Kafka Ecosystem

  … Pick what<br/ your team can operate well"] ✅ Kafka shines for: event-driven microservices where many services react …

• Layered (N-Tier) Architecture

  … browser"] UI[React app] end subgraph T2["Tier 2: app server"] API["Controllers + services + repositories<br/ (3 layers …

• Frontend Testing Strategy

  … test.tsx import { render, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { LoginForm …

• SOLID at a Glance

  … an interface. - SOLID applies to modules, functions and React components too, not only classes. Common misunderstandings - ❌ "SOLID means …

• O — Open/Closed Principle

  … VS Code Extensions Webpack / Vite Plugins and loaders React Components via children and render props ESLint Custom rules …

• I — Interface Segregation Principle

  … Change fax()"] -.affects only.- D3 end ISP in React: props A component's props are its interface. Don …

• Which Pattern Do I Need?

  … items and groups"] -- CO[Composite] P9["Many things react<br/ to one change"] -- OB[Observer] P10["Swap algorithms …

• DRY: Don't Repeat Yourself

  … types] ts // schemas/user.ts — used by the React form AND the API route import { z } from "zod …

• What Is Apache Kafka?

  … use cases)) Event-driven microservices OrderPlaced → many services react Activity tracking clicks, page views, searches Log and metrics …

• Clean Architecture

  … Use cases UserController , PostgresUserRepo 🟣 Frameworks & drivers Express, React, Postgres, Stripe Adapters app.listen() , pg.Pool Follow a …

• State Management (Redux, Zustand, TanStack Query)

  … Don't hand-roll that with useEffect + useState . jsx import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; function …

• Trees & Binary Search Trees

  … on your computer, the HTML DOM , JSON objects, React component trees, and database indexes (B-trees). Tree vocabulary …

• Microkernel (Plugin) Architecture

  … in code or config vite.config.ts → plugins: [react()] Convention Load everything matching a naming pattern or folder …

• Scaling & Health Probes

  … 300 wait 5 min before scaling down (avoid flapping) mermaid xychart-beta title "HPA reacting to a traffic …

• Data in Microservices: Sagas & the Outbox Pattern

  … Design compensations as business actions . Choreography saga (events) Each service listens for events and reacts. No central coordinator …

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

  … in.- A & B & C You've used it: React class lifecycle methods, test frameworks ( beforeEach → test → afterEach ), NestJS …

• Domain-Driven Design: Tactical Patterns

  … keeps boundaries clear 4. Use eventual consistency between aggregates One transaction changes one aggregate; others react to domain …

• Clean Architecture in Depth

  … cases (and their ports) 🟣 Frameworks & drivers Express, React, Postgres drivers, Stripe SDK You change a tool Adapters …