Mahmoud Abdalrahman’s Post

POST 1 — The JavaScript Event Loop Is Not What You Think ⚙️ Every JavaScript developer says they understand the event loop. Most of them don't. And that gap is exactly why async bugs are so hard to find and fix. Here's what's actually happening 👇 ───────────────────────── First — JavaScript is single-threaded. Always. One thread. One call stack. One thing running at a time. So how does it handle timers, fetch calls, and user events without freezing? It doesn't. The BROWSER does. And then it reports back. ───────────────────────── The pieces most developers mix up: The Call Stack → where your code actually runs. Functions get pushed in, executed, and popped out. This is the only place code runs. Web APIs → setTimeout, fetch, DOM events. These live OUTSIDE the JS engine — in the browser or Node runtime. They run in separate threads you never manage. The Task Queue (Macrotask Queue) → where callbacks from Web APIs wait to be picked up. setTimeout callbacks land here. The Microtask Queue → where Promise callbacks and queueMicrotask calls wait. This queue has HIGHER priority than the task queue. ───────────────────────── The loop itself: 1. Run everything currently on the call stack until it's empty 2. Drain the ENTIRE microtask queue — every single item, including new ones added during draining 3. Pick ONE task from the task queue 4. Go back to step 1 ───────────────────────── Why this produces bugs nobody expects: Promise.resolve().then() runs before setTimeout(() => {}, 0) — always. Microtasks can starve the task queue if you keep adding new ones during draining. Long synchronous code blocks EVERYTHING — no timers fire, no events respond, no UI updates. ───────────────────────── The practical rule: Never put heavy computation directly on the call stack. Break it up. Use setTimeout to yield back to the event loop. Keep microtask chains short and predictable. ───────────────────────── Did the microtask vs task queue distinction surprise you? Drop a comment below 👇 #JavaScript #WebDevelopment #FrontendDevelopment #Programming #WebPerformance

🚀 Sliding Window Technique in JavaScript – Must Know for Interviews If you're preparing for frontend or JavaScript interviews, mastering the Sliding Window pattern can save you from writing brute-force solutions. Instead of recalculating again and again, you reuse previous results and move the window efficiently 🔥 --- 💡 What is Sliding Window? A technique used to reduce time complexity for problems involving: - Arrays - Strings - Subarrays / Substrings 👉 Converts O(n²) solutions into O(n) --- 🔥 Problem Example: Maximum Sum Subarray of Size K Input: arr = [2, 1, 5, 1, 3, 2] k = 3 Output: 9 // [5,1,3] --- ✅ Optimized Solution (Sliding Window): function maxSumSubarray(arr, k) { let windowSum = 0; let maxSum = 0; // First window for (let i = 0; i < k; i++) { windowSum += arr[i]; } maxSum = windowSum; // Slide the window for (let i = k; i < arr.length; i++) { windowSum += arr[i]; // add next element windowSum -= arr[i - k]; // remove first element maxSum = Math.max(maxSum, windowSum); } return maxSum; } --- ⚡ Time Complexity: O(n) ⚡ Space Complexity: O(1) --- 🔥 Another Classic: Longest Substring Without Repeating Characters function longestUniqueSubstring(s) { let set = new Set(); let left = 0, maxLength = 0; for (let right = 0; right < s.length; right++) { while (set.has(s[right])) { set.delete(s[left]); left++; } set.add(s[right]); maxLength = Math.max(maxLength, right - left + 1); } return maxLength; } --- 🎯 When to Use Sliding Window? ✔ Fixed-size window → Subarray of size K ✔ Variable window → Longest/shortest substring ✔ Problems with contiguous elements --- 💬 Pro Tip: If your solution uses nested loops for subarrays → think Sliding Window! --- 📌 Follow for more: #JavaScript #DSA #Frontend #CodingInterview #ReactJS #WebDevelopment #TechInterview #100DaysOfCode

𝗧𝗼𝗽𝗶𝗰 𝟭𝟮: 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 (𝗠𝗮𝗰𝗿𝗼 𝘃𝘀 𝗠𝗶𝗰𝗿𝗼𝘁𝗮𝘀𝗸𝘀) JavaScript is single-threaded, yet it handles thousands of concurrent operations without breaking a sweat. The secret isn't raw speed; it's an incredibly strict, ruthless prioritization engine. If you don't understand the difference between a macro and a microtask, your "asynchronous" code is a ticking time bomb for UI freezes. Summary: The Event Loop is the conductor of JavaScript's concurrency model. It continuously monitors the Call Stack and the Task Queues. To manage asynchronous work, it uses two distinct queues with vastly different priorities: Macrotasks (like setTimeout, setInterval, network events) and Microtasks (like Promises and MutationObserver). Crux: The VIP Queue: Microtasks have absolute priority. The engine will not move to the next Macrotask, nor will it allow the browser to re-render the screen, until the entire Microtask queue is completely empty. The Normal Queue: Macrotasks execute one by one. After a single Macrotask finishes, the Event Loop checks the Microtask queue again. The Starvation Risk: Because Microtasks can spawn other Microtasks, a recursive Promise chain can hold the main thread hostage, permanently blocking the UI from updating. The Deep Insight (Architect's Perspective): Traffic Control and Yielding: As architects, we must visualize the Event Loop as a traffic control system where Microtasks are emergency vehicles. When you resolve a massive chain of Promises or heavy async/await logic, you are flooding the intersection with ambulances. The browser's rendering engine—the normal traffic—is forced to sit at a red light until every single emergency vehicle has cleared. We don't just use async patterns for code readability; we must actively manage thread occupancy. For heavy client-side computations, we must intentionally interleave Macrotasks (like setTimeout(..., 0)) to force our code to yield control back to the Event Loop, allowing the browser to paint frames and keeping the UI responsive. Tip: If you have to process a massive dataset on the frontend (e.g., parsing a huge JSON file or formatting thousands of rows), do not use Promise.all on the entire set at once. That floods the Microtask queue and locks the UI. Instead, "chunk" the array and process each chunk using setTimeout or requestAnimationFrame. This gives the Event Loop room to breathe and the browser a chance to render 60 frames per second between your computation chunks. Tags: #SoftwareArchitecture #JavaScript #WebPerformance #EventLoop #FrontendEngineering #CleanCode

𝗧𝗵𝗶𝘀 𝗾𝘂𝗲𝘀𝘁𝗶𝗼𝗻 𝗿𝗲𝘃𝗲𝗮𝗹𝘀 𝗶𝗳 𝘆𝗼𝘂 𝘂𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱 𝗮𝘀𝘆𝗻𝗰 𝗽𝗮𝘁𝘁𝗲𝗿𝗻𝘀 𝗱𝗲𝗲𝗽𝗹𝘆 𝗹𝗶𝗸𝗲 𝗮 𝘀𝗲𝗻𝗶𝗼𝗿 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿... ASKED : 𝗗𝗲𝘀𝗶𝗴𝗻 𝗮 𝗿𝗮𝘁𝗲 𝗹𝗶𝗺𝗶𝘁𝗲𝗿 𝗶𝗻 𝘁𝗵𝗲 𝗳𝗿𝗼𝗻𝘁𝗲𝗻𝗱. The candidate was confident. Strong JavaScript knowledge. Years of React experience. They started typing immediately. Created a counter. Checked if counter was below 5. Made the API call. Reset counter every second. Shipped it to production in their mind. Then I asked: "𝗪𝗵𝗮𝘁 𝗵𝗮𝗽𝗽𝗲𝗻𝘀 𝗶𝗳 𝟭𝟬 𝗿𝗲𝗾𝘂𝗲𝘀𝘁𝘀 𝗰𝗼𝗺𝗲 𝗶𝗻 𝗮𝘁 𝗲𝘅𝗮𝗰𝘁𝗹𝘆 𝘁𝗵𝗲 𝘀𝗮𝗺𝗲 𝗺𝗶𝗹𝗹𝗶𝘀𝗲𝗰𝗼𝗻𝗱?" Complete Silence!!! 𝗟𝗲𝘁𝘀 𝘀𝗲𝗲 𝘁𝗵𝗲 𝗻𝗮𝗶𝘃𝗲 𝗮𝗽𝗽𝗿𝗼𝗮𝗰𝗵 𝗲𝘃𝗲𝗿𝘆𝗼𝗻𝗲 𝘁𝗿𝗶𝗲𝘀 𝗳𝗶𝗿𝘀𝘁: Track requests, allow if under limit, reset counter every second. Sounds fine. It’s not. 𝗪𝗵𝗮𝘁 𝗯𝗿𝗲𝗮𝗸𝘀: • Multiple requests in the same tick bypass the check • Boundary issue → 10 requests in milliseconds • No queue → dropped requests, bad UX 𝗧𝗵𝗲 𝗮𝗽𝗽𝗿𝗼𝗮𝗰𝗵𝗲𝘀 𝘁𝗵𝗮𝘁 𝘀𝗵𝗼𝘄 𝘂𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴: Token Bucket Algorithm: Start with 5 tokens. Each request consumes a token. Tokens refill at a steady rate. Allows bursts while maintaining average rate. Handles timing edge cases gracefully. 𝟭 - 𝗦𝗹𝗶𝗱𝗶𝗻𝗴 𝗪𝗶𝗻𝗱𝗼𝘄: Track timestamps of last N requests. New request checks if oldest request was within the window. Slide the window forward. More precise than fixed windows but requires storing request history. 𝟮 - 𝗤𝘂𝗲𝘂𝗲-𝗯𝗮𝘀𝗲𝗱 𝗮𝗽𝗽𝗿𝗼𝗮𝗰𝗵: Requests go into a queue. Process queue with delays between items to maintain rate. Ensures no requests are lost, provides feedback on position, handles backpressure. 𝗪𝗵𝗮𝘁 𝘆𝗼𝘂 𝘀𝗵𝗼𝘂𝗹𝗱 𝗮𝘀𝗸 𝗶𝗻𝘀𝘁𝗲𝗮𝗱 : "I need to clarify requirements first. What happens to requests exceeding the limit - do we queue, reject, or retry? Do we need user feedback? Is this per-API-endpoint or global? Then I'd implement a token bucket for smooth rate control with a queue for overflow requests, providing clear feedback to users about rate limit status." 𝗣𝗿𝗼𝗱𝘂𝗰𝘁𝗶𝗼𝗻 𝗰𝗼𝗻𝘀𝗶𝗱𝗲𝗿𝗮𝘁𝗶𝗼𝗻𝘀: • Background tabs → timers get throttled • Multiple tabs → per-tab or per-user? (sync needed) • User feedback → show quota, wait time, or disable actions • Retries → avoid retry storms after reset 𝗥𝗲𝗮𝗹-𝘄𝗼𝗿𝗹𝗱 𝘂𝘀𝗲 𝗰𝗮𝘀𝗲𝘀: • Search autocomplete → prevent API overload • File uploads → avoid browser/server stress • Real-time data → control request spikes • Shared API client → centralized rate limiting Rate limiting, async patterns, race conditions, queue management, the JavaScript execution model, these aren’t just interview topics.

💡Understanding Event Info in JavaScript في JavaScript، أي تفاعل بيحصل على الصفحة بيتسمى Event In JavaScript, every interaction on a webpage is called an Event لكن الأهم 👇 لما الحدث يحصل، المتصفح بيديك Object فيه تفاصيل كتير جدًا When an event happens, the browser gives you an object full of useful details وده اسمه 👇 Event Object (Event Info) --- 🧠 أهم الحاجات اللي لازم تعرفها | Key Properties: 👉 event.target العنصر اللي حصل عليه الحدث The exact element that triggered the event 👉 event.type نوع الحدث (click, keydown, ...) The type of event 👉 event.clientX / event.clientY مكان الماوس على الشاشة Mouse position on the viewport 👉 event.key الزرار اللي اتضغط (في الكيبورد) The key that was pressed --- 🛠 حاجات مهمة جدًا | Useful Methods: ✔ event.preventDefault() تمنع السلوك الطبيعي Prevents default browser behavior ✔ event.stopPropagation() توقف انتشار الحدث Stops event bubbling --- ⚡ Example: ```javascript document.addEventListener("click", function(e) { console.log(e.target); console.log(e.type); }); ``` --- 🎯 ليه الموضوع مهم؟ - تبني UI تفاعلي - تعمل Debug أسرع - تكتب كود أنضف وأذكى --- 🔥Mastering Events = Leveling Up Your Frontend Skills #JavaScript #Frontend #WebDevelopment #Programming #Coding #Developers

𝗕𝗲𝘀𝘁 𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁 𝗙𝗿𝗮𝗺𝗲𝘄𝗼𝗿𝗸𝘀 𝗳𝗼𝗿 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿𝘀 𝗶𝗻 𝟮𝟬𝟮𝟲 Starting with JavaScript is just the first step. Frameworks feel complicated next. This guide cuts through the noise. It shows you which tools to learn first in 2026 and why. Frameworks handle repetitive code. They let you build features faster. Over 70% of developers use one daily. Picking the right one saves you months of frustration. Look for these traits as a beginner: - Easy first project setup - Clear documentation - Helpful community - Good performance - Path to a job Here are the top choices. **React** Backed by Meta. Component-based, like Lego for UI. Huge job market. Setup: `npx create-react-app` or use Vite. Simple counter example: ```javascript import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); } ``` Pros: Massive ecosystem, many jobs. Cons: Needs extra tools for routing, hooks have a learning curve. Netflix uses React. Server tweaks cut their load times by 30%. **Vue** Progressive and flexible. Easy to add to any project. Great docs. Setup: `npm init vue@latest`. Todo list example: ```vue <script setup> import { ref } from "vue"; const items = ref([]); const newItem = ref(""); function addItem() { if (newItem.value) { items.value.push(newItem.value); newItem.value = ""; } } </script> <template> <input v-model="newItem" @keyup.enter="addItem" placeholder="Add todo" /> <ul> <li v-for="item in items" :key="item">{{ item }}</li> </ul> </template> ``` Pros: Lightweight, reactive system. Cons: Smaller ecosystem than React. Alibaba uses Vue. It sped up their development by 50%. **Svelte** Compiles to tiny, fast vanilla JS. Minimal code. Feels natural. Setup: `npm create svelte@latest`. Reactive example: ```html <script> let name = 'world'; $: greeting = `Hello ${name}!`; </script> <input bind:value={name} /> <p>{greeting}</p> ``` Pros: Blazing speed, no virtual DOM. Cons: Smaller library selection. The New York Times uses Svelte. Slashed load times by 40%. **Next.js** React with built-in server features. Great for full apps. Setup: `npx create-next-app@latest`. Server component example: ```javascript async function Home() { const data = await fetch("https://api.example.com").then(res => res.json()); return <div>{data.message}</div>; } ``` Pros: Easy deploying, fast builds. Cons: Must learn React first. TikTok uses it for enterprise scale. **Angular** Full framework from Google. TypeScript-based. Highly structured. Setup: `ng new my-app`. Component with signal: ```typescript import { Component, signal } from "@angular/core"; @Component({ selector: "app-greeting", template: `<h1>Hello {{ message() }}!</h1>`, }) export class Gr

(Arabic follows) ⬇️ 👉 JavaScript Tip: const ≠ Immutable Many developers assume: const = cannot change X 🤔 But check this example: `js const user = { name: "Asmaa" }; user.name = "Almadhoun"; // ✅ Works ` 🫢 Why does it work? Because const locks the reference, not the value. 🔓 You can’t reassign a user to a new object, but you can mutate the properties inside it. --- But if we want to lock the value itself, and prevent any changes to properties we can use Freeze👇 🧊 Real Immutability with Object.freeze() `js const user = Object.freeze({ name: "Asmaa" }); user.name = "Almadhoun"; // ❌ Fails silently (or throws in strict mode) ` --- 📏 Rule of Thumb - const → reference locked 🔒 - Object.freeze() → value locked 🔒 --- This distinction is crucial in state management (React, Vue, etc.), where immutability ensures predictable updates and fewer bugs. --------------------------------------- 🚀 معلومة JS سريعة عالهامش كثير من المطورين بفكروا إن: const = قيمة ثابتة ما تتغير بس لو راجعنا المثال التالي 👇 `js const user = { name: "Asmaa" }; user.name = "Almadhoun"; // ✅ اشتغلت وفعلا تغيرت ` السبب ببساطة لأن const يثبت الـreference مش الـvalue. يعني ما بنقدر نعيد تعيين user لاوبجكت جديد، لكن بنقدر نغيّر الخصائص داخل الاوبجكت نفسه. --- 🧊 لكن لو عايزين نثبت القيمة نستخدم Object.freeze `js const user = Object.freeze({ name: "Asmaa" }); user.name = "Almadhoun"; // ❌ Doesn't work ` هنا freeze يثبت الـvalue نفسها، فما تقدر تعدّل أي خاصية. --- 📏 القاعدة الذهبية - const→ المرجع ثابت - Object.freeze() → القيمة ثابتة --- الفرق بينهم مهم خصوصًا في إدارة الحالة ( React)، لأن الـ immutability بتساعدنا نتجنب أخطاء التحديثات وتخلي الكود أكثر توقعًا. ---- #Frontend #JavaScript #ReactJS #Technology #SoftwareDevelopment #Programming

I used to manipulate objects directly in JavaScript. Until one day, it didn't work. And the errors were almost impossible to trace. Meanwhile JavaScript has built a clean, deliberate API specifically for the job I had been doing messily for a long time. What is Reflect? Reflect is a built-in JavaScript object that provides a set of methods for performing fundamental operations on objects. The same operations you've always done, but in a more controlled, predictable, and reliable way. Reading properties. Setting values. Checking existence. Deleting keys. Reflect does all of this in a clean way. The most important Reflect methods: -> Reflect.get() - reads a property from an object. const user = { name: "Markus" }; Reflect.get(user, "name"); -> "Markus" Same as user.name - but more explicit and safer in dynamic contexts. -> Reflect.set() - sets a property value and returns true or false. const user = { name: "Markus" }; Reflect.set(user, "name", "John"); -> true console.log(user.name); -> "John" Unlike direct assignment - it tells you whether it succeeded by returning true. -> Reflect.has() - checks if a property exists. Reflect.has(user, "name"); -> true Same as the in operator - but cleaner in functional and dynamic code. -> Reflect.deleteProperty() - deletes a property safely. Reflect.deleteProperty(user, "name"); -> true Same as the delete keyword - but returns a boolean instead of throwing silently. -> Reflect.ownKeys() - returns all keys of an object. const user = { name: "Markus", age: 25}; Reflect.ownKeys(user); -> ["name", "age"] Where Reflect truly shines - with Proxy. Reflect and Proxy are natural partners. Inside a Proxy trap, Reflect lets you perform the default operation in a clean way - without rewriting the behaviour from scratch. Example: const proxy = new Proxy(user, { get(target, key) { console.log(`Reading: ${key}`); return Reflect.get(target, key); -> clean default behaviour } }); Reflect doesn't replace what you already know. It refines it. It makes the operations you perform on objects more intentional, consistent, and significantly easier to debug when something goes wrong.

✨ 𝗪𝗿𝗶𝘁𝗲 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗦𝘁𝗿𝗶𝗻𝗴𝘀 𝗟𝗶𝗸𝗲 𝗔 𝗛𝘂𝗺𝗮𝗻 ⤵️  Template Literals in JavaScript: Write Strings Like a Human ⚡  🔗 𝗥𝗲𝗮𝗱 𝗵𝗲𝗿𝗲: https://lnkd.in/d_HhAEsM  𝗧𝗼𝗽𝗶𝗰𝘀 𝗰𝗼𝘃𝗲𝗿𝗲𝗱 ✍🏻:   ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺   ⇢ Why string concatenation becomes messy in real apps   ⇢ Template literals — the modern way to write strings   ⇢ Embedding variables & expressions using ${}   ⇢ Multi-line strings without \n headaches   ⇢ Before vs After — readability transformation   ⇢ Real-world use cases: HTML, logs, queries, error messages   ⇢ Tagged templates (advanced but powerful concept)   ⇢ How interpolation works under the hood   ⇢ Tradeoffs & common mistakes developers make   ⇢ Writing cleaner, more readable JavaScript  Thanks Hitesh Choudhary Sir & Piyush Garg Sir, and the amazing Chai Aur Code community 🙌  #ChaiAurCode #JavaScript #WebDevelopment #Frontend #Programming #CleanCode #Hashnode

✅ Top 50 Most Asked JavaScript Interview Questions 📌 Save this list — it’s a goldmine for your prep! 1. What is Debouncing in JavaScript? 2. Understanding Promise.all() 3. What is Deep Equal? 4. Understanding Event Emitters 5. What is Array.prototype.reduce()? 6. Simplifying arrays – Flattening 7. Merging data structures 8. Selecting DOM Elements – getElementsByClassName 9. Avoiding redundant computations with memoization? 10. Safer nested property access: get (or optional chaining)? 11. Hoisting in JavaScript? 12. Differences between let, var, and const? 13. Explain the difference between == and === ? 14. Understanding the Event Loop in JavaScript? 15. What is Event Delegation in JavaScript? 16. How does this work in JavaScript? 17. What sets Cookies, sessionStorage, and localStorage apart? 18. How do <script>, <script async>, and <script defer> differ? 19. What's the difference between null, undefined, and undeclared? 20. What's the difference between .call() vs .apply()? 21. How does Function.prototype.bind work? 22. Why use arrow functions in constructors? 23. How does prototypal inheritance work? 24. Differences between: function Person(){}, const person = Person(), and const person = new Person() 25. Function declarations vs. function expressions? 26. What are the different ways to create objects in JavaScript? 27. What is a higher-order function? 28. How do ES2015 classes differ from ES5 constructor functions? 29. What is event bubbling? 30. What is event capturing? 31. How do mouseenter and mouseover differ? 32. What's the difference between synchronous and asynchronous functions? 33. What is AJAX? 34. What are the pros and cons of using AJAX? 35. What are the differences between XMLHttpRequest and fetch()? 36. What are the various data types in JavaScript? 37. How do you iterate over object properties and array items? 38. Benefits of spread syntax vs. rest syntax? 39. Differences between Map vs. plain objects? 40. Differences between Map/Set and WeakMap/WeakSet 41. Practical use cases for arrow functions? 42. What are callback functions in asynchronous operations? 43. What is debouncing and throttling? 44. How does destructuring assignment work? 45. What is function hoisting? 46. How does inheritance work in ES2015 classes? 47. What is lexical scoping? 48. What are scopes in JavaScript? 49. What is the spread operator? 50. How does this work in event handlers? ✅ Go through these, practice, and you’ll be ready for almost any JS interview! Follow Hrithik Garg 🚀 for more. #frontend #interview #opportunity #react #javascript #angular #backend #nodejs