Search
Lessons (20)
- Frontend Security
… your dependencies A typical frontend app has 1,000+ npm packages . One compromised package can steal data from …
- Frontend Testing Strategy
… most value comes from integration tests](/img/frontend/testing-trophy.svg) Layer Tests Tools Speed Confidence --- --- --- --- --- Static Types …
- Frontend Performance & Core Web Vitals
… Core Web Vitals and their "good" thresholds](/img/frontend/web-vitals.svg) Metric Measures Good Poor --- --- --- --- LCP : Largest …
- API Gateway, BFF & Service Discovery
… A BFF is a small backend tailored to one frontend , owned by that frontend team. mermaid flowchart LR …
- DRY: Don't Repeat Yourself
… named constant: TAX RATE The same validation in frontend and backend A shared schema (for example, Zod) used …
- How Browsers Render a Page
… from HTML and CSS to pixels](/img/frontend/rendering-path.svg) Step by step mermaid flowchart LR HTML …
- State Management (Redux, Zustand, TanStack Query)
Where should data live in a frontend app? Learn the four kinds of state, when local state is …
- Backend Languages: Node.js, Go, Python & Rust
… I/O trips), same fuel (JavaScript) as the frontend. - Go 🚚 = a reliable delivery van: simple to drive, very …
- S — Single Responsibility Principle
… split a class by who asks for changes](/img/solid/srp-split.svg) A frontend example SRP applies …
- I — Interface Segregation Principle
… idea applies at a larger scale: - Backend for Frontend (BFF): a mobile app and a web app each …
- Which Pattern Do I Need?
… event-driven architecture Facade API Gateway, Backend for Frontend Proxy Reverse proxy, CDN, service mesh sidecar Adapter Anti …
- React vs Vue vs Angular
… Great for large enterprise teams.  The same …
- React Fundamentals
… page broken into a tree of components](/img/frontend/component-tree.svg) Components and JSX A component is …
- Deployments, ReplicaSets & Rollouts
… APIs, web frontends Interchangeable pods, rolling updates StatefulSet Databases, Kafka, ZooKeeper, Elasticsearch Stable names ( db-0 , db-1 …
- REST vs GraphQL vs gRPC
… gRPC between internal microservices, a GraphQL or BFF (Backend for Frontend) layer for their apps, and REST for …
- Trees & Binary Search Trees
… That's a tree. mermaid flowchart TD CEO[👑 CEO] -- CTO[CTO] CEO -- CFO[CFO] CTO -- FE[Frontend lead …
- JavaScript Essentials: Event Loop, Closures & this
… call stack, Web APIs, task queues](/img/frontend/event-loop.svg) Part Kitchen analogy Role --- --- --- Call stack The …
- Serverless Architecture
… flowchart LR U[👤 Users] -- CDN["☁️ CDN<br/ static frontend"] U -- APIG[API Gateway] APIG -- Auth["🔐 Cognito / Auth0"] APIG …
- React Hooks in Practice
… They let small functions do what used to require classes.  CSR: Client-Side Rendering The server …