Posts

JS async await execution process

-
 Example console.log("0") async function f() {     console.log("1");     const pr1 = await new Promise((resolve) => {         console.log("2");         setTimeout(() => {             console.log("3");             resolve("pr1");         }, 5000);     });     const pr2 = await new Promise((resolve) => {         console.log("4");         setTimeout(() => {             console.log("5");             resolve("pr2");         }, 2000);     });     return [pr1, pr2]; } console.log("6"); f().then(result => console.log("Result:", result)); console.log("7"); ==========OUTPUT========== 0 6 1 2 7 3 (after 5 seconds) 4 5 (after 2 seconds) Result: [pr1, pr2] Execution order console.lo...
Post a Comment
Read more

Angular - Recommended 14-day interview ready plan

-
Angular - Recommended 14-day interview ready plan Days 1-2 — Angular Fundamentals Angular architecture CLI Project structure Components Templates Data Binding Directives Pipes Component lifecycle Days 3-4 — TypeScript in Angular Decorators Dependency Injection Services Providers Injection hierarchy Signals (modern Angular) Days 5-6 — Routing Router Lazy Loading Route Guards Resolvers Nested Routes Dynamic Routing Days 7-8 — Forms Template-driven Forms Reactive Forms FormBuilder Validators Async Validators Custom Validators Days 9-10 — API Communication HTTP Client RxJS basics Observables Subjects BehaviorSubject Operators map switchMap mergeMap concatMap forkJoin combineLatest debounceTime catchError Day 11 — State Management Services Signals NgRx basics Component communication Smart vs Presentational Components Day 12 — Advanced Angular Change Detection Zone.js OnPush Standalone Components Performance Optimization SSR Hydration Day 13 — Machine Coding Build: Login Dashboard Product Li...
Post a Comment
Read more

Scalable Websocket Systems: What to know?

-
Scalable Websocket Systems: What to know? How connections are established. Why sticky sessions matter. How room membership is tracked. How message ordering is handled. What happens when a WebSocket server dies. Presence (online/offline users). Persistence vs Pub/Sub. Why Redis Pub/Sub may fail at scale. Why NATS worked better. Fan-out optimization techniques. Backpressure handling. Monitoring and metrics. Multi-region challenges. Let's rebuild the entire story from the beginning as if we are designing WhatsApp ourselves. Chapter 1: User Opens WhatsApp Suppose User A opens WhatsApp. Immediately: User A | | Internet | Load Balancer | WebSocket Server The client requests: GET /socket Upgrade: websocket Server accepts. Now connection becomes: User A <=================> Server and stays alive. Chapter 2: Why Not HTTP? With HTTP: User A | Request | Server If User B sends a message: Server cannot push because HTTP request ended. Server must wait. WebSocket solves thi...
Post a Comment
Read more

Topics for Backend Engineer

-
  Topics for Backend Engineer Week 1 Network Fundamentals In this module, we'll dive deep into the fundamental building blocks of modern networking. Students will learn both theoretical concepts and gain hands-on experience through practical exercises. By the end of this week, participants will have a solid understanding of how data flows through networks and the key protocols that power the internet. 📚 Theory How internet works DNS OSI Model TCP/IP Protocols TCP/UDP Client-server architecture 3 way handshake 👷🏾‍♂️ Practicals Trace network packets using WireShark Analyse DNS using Dig Build a TCP server Build a UDP server HTTP deep dive In this module, we'll explore HTTP, from versions 1.1 to 3, and how they improve web performance. Students will learn about status codes, headers, methods, cookies, and ETags for caching and state management. We'll also cover the essentials of TLS/SSL for secure communication. By the end, participants will have a ...
Post a Comment
Read more

Javascript Quiz links

-
 Javascript Quiz links 1. this keyword behaviour - non-strict mode https://chatgpt.com/share/68335fb8-36fc-8007-b818-3d36e2b3d1bf 2. this keyword behaviour - strict mode https://chatgpt.com/share/6834c111-f2d8-8007-b0a4-c7cd70a707bd 3.  lexical environments, closures, and scoping https://chatgpt.com/share/68458dd9-d800-8007-8742-790434178f63 4. Promises, Promise combinators (all, allSettled, race and any), async await https://chatgpt.com/share/684d1476-9568-8007-9426-5b49d08ce628 5: serialization & JSON.stringify https://chatgpt.com/share/684d14e9-6e5c-8007-ae75-afdfbe66a07a
Post a Comment
Read more

System design for Global level application - For beginners

-
Basic System design for Global level application 1. Client and Server Roles in System Design Client : The client is typically a user's device (mobile app, browser, etc.) that sends a request to get some data or perform some action. Server : This is a machine (computer) that runs 24/7 and listens for client requests, processes them, and returns a response. Think of it like ordering food online (client) and the restaurant kitchen preparing and delivering it (server). 2. Public IP Address For a server to be accessed over the internet, it needs a public IP address . This makes it globally accessible . Example: Just like your phone has a unique number, servers have IPs. 3. Domain Names Instead of IP IP addresses are hard to remember (like 142.250.78.206 ), so we use domain names like amazon.com . These names are easier for humans to remember and use. 4. What is a DNS Server? DNS (Domain Name System) is like a phonebook of the internet . It con...
Post a Comment
Read more

The Evolution of Rendering in React: From Client-Side to Server Components

-
  🚀 The Evolution of Rendering in React: From Client-Side to Server Components React has evolved massively in how it renders pages, moving from Client-Side Rendering (CSR) to Server Components (RSC) to improve performance, SEO, and user experience. Let's break this down step by step: 🔥 1️⃣ Client-Side Rendering (CSR) – The Beginning 📌 What is CSR? In Client-Side Rendering (CSR) , the browser downloads a bare HTML file and a JavaScript bundle . React runs entirely in the browser , generating the UI dynamically. 📌 How it Works? Browser downloads an empty HTML file . Loads a large JavaScript bundle containing React code. React renders components dynamically and updates the DOM. 📌 Example: CSR in React (Create React App) function App ( ) { return < h1 > Hello, world! </ h1 > ; } export default App ; The entire app loads and renders in the browser . No content is present in the initial HTML file. 📌 Challenges of CSR: ❌ Slow First Page Load – A blank page ...
Post a Comment
Read more