Search

Lessons (23)

• JavaScript Essentials: Event Loop, Closures & this

  The three JavaScript ideas that confuse everyone at first. Visual explanations of the event loop, microtasks, closures, and …

• Frontend Security

  … Tokens never touch browser JavaScript. 4. CORS: often misunderstood The Same-Origin Policy stops JavaScript on evil.com …

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

  … the restaurant hands you raw ingredients and a recipe (an empty HTML page + JavaScript). You cook at your …

• How Browsers Render a Page

  … Your JavaScript, style calculations, layout and paint must all fit in that budget. mermaid flowchart LR JS["⚙️ JavaScript …

• What Are Design Patterns?

  … repeated pain C[Pick the matching pattern] C -- D[Refactor toward it] D -- A Patterns in modern JavaScript …

• TypeScript Essentials

  TypeScript is JavaScript with types that catch bugs before your code runs. Learn the core types, interfaces, unions …

• Creational Patterns: How to Make Objects

  … 2 }); console.log(tank.describe()); // Tank: ❤️ 400, 🏃 2 📘 JavaScript itself is prototype-based : every object links to a …

• Frontend Performance & Core Web Vitals

  … keep the main thread free INP gets worse when long JavaScript tasks ( 50 ms) block the main thread …

• SOLID at a Glance

  … SOLID in JavaScript? Yes, although it looks a little different from Java or C : - JavaScript has no interface …

• Sorting Algorithms

  … See how each one works, compare their speeds, and learn which one JavaScript's sort() actually uses. The …

• Stacks & Queues

  … call stack Every time a function calls another, JavaScript pushes a frame onto the call stack. When a …

• React Fundamentals

  … Add to cart</button </article ); } JSX is just JavaScript underneath: <h3 {name}</h3 compiles to a function call …

• Arrays & Strings

  … Stacks & Queues ). What does "amortised O(1)" mean? JavaScript arrays are dynamic : when full, the engine allocates a …

• Heaps & Priority Queues

  … O(log n) swaps. A complete MinHeap in JavaScript JavaScript has no built-in heap, so this is …

• Backend Languages: Node.js, Go, Python & Rust

  … quick to start, great in city traffic (lots of small I/O trips), same fuel (JavaScript) as the …

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

  The four behavioral patterns you'll use most, explained with everyday analogies, diagrams and practical JavaScript. Why behavioral …

• Graphs: BFS & DFS

  … JS[JavaScript] -- TS[TypeScript] JS -- React TS -- Next[Next.js] React -- Next A valid order: JavaScript → TypeScript → React …

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

  … how channels are stored; you just press next . JavaScript has the Iterator pattern built in : anything with [Symbol …

• Structural Patterns: How to Connect Objects

  … 100 }; // JavaScript has Proxy built in const guardedUser = new Proxy(user, { get(target, prop) { console.log( read ${String …

• D — Dependency Inversion Principle

  … Mailer, ) {} } DIP with plain functions In JavaScript you don't need classes. A higher-order function works just …

• React vs Vue vs Angular

  … Meta + community Evan You + community Google Templates JSX (JavaScript) HTML templates ( v-if , v-for ) or JSX HTML …

• L — Liskov Substitution Principle

  … add() throwing is a violation LSP in everyday JavaScript Even without classes, LSP applies to anything with a …

• Hash Maps & Sets

  … O(n).) Map vs Object vs Set in JavaScript js // Map: any key type, keeps insertion order, has …