Event Bubbling vs Capturing in JavaScript

🚀 Mastering Event Propagation in JavaScript One concept that truly leveled up my frontend debugging skills is Event Propagation. After going deep through multiple resources, medium articles, and most importantly — hands-on practice — I can confidently say: 👉 Understanding this concept separates average developers from strong problem solvers. Let me break it down simply: 🔹 Event Propagation = How events travel in the DOM There are 3 phases: 1️⃣ Capturing Phase (Top → Down) 2️⃣ Target Phase (Element itself) 3️⃣ Bubbling Phase (Bottom → Up) Most of us unknowingly work with event bubbling daily. 💡 Example: parent.addEventListener("click", () => console.log("Parent")); child.addEventListener("click", () => console.log("Child")); Clicking the child logs: Child Parent 👉 Why? Because of bubbling 🔥 Real Interview + Practical Insights: ✔️ How to stop propagation? event.stopPropagation(); ✔️ When to use capturing? addEventListener("click", handler, true); ✔️ Difference between: stopPropagation() stopImmediatePropagation() ✔️ Event delegation (used in dynamic lists, tables, large apps) ⚡ Real-world use cases I’ve handled: Fixing unwanted parent clicks in nested components Optimizing performance using event delegation Debugging complex UI interactions in large React apps 💬 My takeaway after mastering this: Understanding how events flow makes debugging 10x faster and your code more predictable. If you're preparing for frontend interviews: 👉 Don’t just memorize — visualize the flow and practice it in real DOM scenarios Happy to connect with fellow developers and discuss more 🚀 #javascript #frontend #webdevelopment #interviewpreparation #reactjs

https://lnkd.in/dtbE_xHs – Ever wondered how to turn your birthday into a masterpiece of ancient logic? 🎂 As a Frontend Engineer who lives in TypeScript and Next.js 15, I’m obsessed with turning complex logic into simple, accessible UI. 💻 I recently added the Roman Numeral Date Converter to my platform, and the math behind it was surprisingly tricky to implement. Converting modern dates isn't just about swapping numbers; it’s about handling specific subtractive rules while keeping the user experience snappy. I built the core logic using Bun for lightning-fast local execution and styled the components with Tailwind CSS and Radix UI for full accessibility. 🛠️ To handle the state and validation across different date formats, I relied on TanStack Query to keep everything synchronized and bug-free. A few years ago, a friend asked me to "double-check" a Roman numeral for a tattoo he was getting. 🖋️ I realized there wasn't a reliable tool that handled different separators and formats correctly, so I vowed to build one myself. ✅ Using Vite for unit testing ensured that edge cases—like leap years or dates from the distant past—work perfectly every single time. 🚀 It’s one of 300+ tools I’ve built to make life (and tattoos) a little less stressful for everyone. 🏛️ Building tools like this reminds me that even "ancient" problems need modern, high-performance solutions. What’s one "simple" logic problem that turned out to be way more complex than you expected? 🤔 #RomanNumeralDateConverter #FrontendEngineer #TypeScript #ReactJS #NextJS15 #WebDevelopment #TailwindCSS #JavaScript #Programming #TechStack #CodingLife #WebDesign #SoftwareEngineering #CalculatorAll #StateManagement

https://lnkd.in/dpPxiwHY — I spent years manually squinting at code changes before I decided to build a better way as a Frontend Engineer. When you’re working with complex TypeScript files, a simple visual check isn't enough to catch those hidden bugs. I built this Diff Checker to handle the heavy lifting that standard text editors sometimes overcomplicate. For the foundation, I went with Next.js 15. The speed is incredible for a tool that needs to be snappy and SEO-friendly. I used TypeScript to ensure every character comparison was type-safe, preventing those annoying crashes during large file comparisons. One of my favorite parts of the build was using Biome. It kept the codebase incredibly clean without the overhead of traditional linting tools. I actually remember a project where I accidentally merged two versions of a config file because I didn't have a quick way to compare them side-by-side. That 2-hour debugging nightmare was the catalyst for adding this to my platform. 😅 The UI is powered by Tailwind CSS to keep it lightweight and responsive across all my 300+ tools. To make sure the diffing logic was bulletproof, I ran extensive end-to-end tests using Playwright. I even leveraged Cursor to help me optimize the diffing algorithm for better performance on massive text blocks. Development was lightning fast thanks to Vite, making the iteration loop almost instant. It’s not just a calculator; it’s about making our daily dev workflow less error-prone and more efficient. 🚀 Do you still rely on your IDE for diffs, or do you prefer a dedicated web tool for a quick check? #DiffChecker #FrontendEngineer #TypeScript #ReactJS #WebDev #NextJS #CodingTools #JavaScript #SoftwareEngineering #TailwindCSS #ViteJS #Programming #CodeReview #WebPerformance #DeveloperExperience

💡 One concept that completely changed the way I understand JavaScript: The Event Loop At some point, almost every frontend developer writes code like this: console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End"); Many people expect the output to be: Start Timeout Promise End But the real output is actually: Start End Promise Timeout And this is where the JavaScript Event Loop becomes really interesting. ⚙️ JavaScript is single-threaded, which means it can only execute one thing at a time. But at the same time, it handles asynchronous operations like timers, API calls, and promises very smoothly. How does it do that? Through a system built around three main parts: 📌 Call Stack – where synchronous code runs. 📌 Microtask Queue – where promises are placed. 📌 Task Queue (Macrotasks) – where things like setTimeout go. The simplified flow looks like this: 1️⃣ JavaScript executes everything in the Call Stack first. 2️⃣ Then it processes Microtasks (Promises). 3️⃣ Only after that it handles Macrotasks like setTimeout. So even if setTimeout has a delay of 0, it still waits until the stack is empty and microtasks are finished. This small detail explains many things developers experience like: 🔹 "Why did my setTimeout run later than expected?" 🔹 "Why do Promises resolve before timers?" 🔹 "Why does async code sometimes behave strangely?" Once you truly understand the Event Loop, debugging asynchronous JavaScript becomes much easier. For me, it was one of those moments where a confusing behavior suddenly made perfect sense. 🤯 Curious to hear from other developers: ❓ When did the Event Loop finally “click” for you? #javascript #frontend #webdevelopment #programming #softwareengineering #eventloop #asyncjavascript #coding #developers #frontenddeveloper

https://lnkd.in/dP7RkzD3 — As a Senior Frontend Engineer, I’ve realized that building a robust pressure converter in TypeScript is all about the "Base Unit" pattern. Most people think it’s just multiplying a few numbers, but handling floating-point precision across 15+ units can get messy fast. Here is the logic deep-dive I used for this tool: 1. Standardize everything to Pascal (Pa) as the global "source of truth." 2. Apply conversion constants from the Pa base to the target unit (like PSI, Bar, or Torr). 3. Use a custom rounding utility to prevent those dreaded 0.9999999999998 floating-point errors. I remember failing a fluid mechanics quiz back in college because I forgot to convert kilopascals to atmospheres correctly. 📐 Building this tool was my way of making sure nobody else has to do that stressful math manually ever again. 🧪 I built the UI using Next.js 15 and Tailwind CSS, ensuring the experience is snappy and responsive on any device. 💻 By leveraging Radix UI for accessible input components and Bun as my local runtime, I was able to iterate on the math logic incredibly fast. I even used Cursor to pair-program the more obscure conversion factors while Vite kept the local dev environment lightning fast. 💨 It’s one of 300+ tools I’ve built to simplify life for developers and engineers globally. 🚀 What’s the most frustrating unit conversion you’ve ever had to code from scratch? 🧠 #PressureConverter #FrontendEngineer #TypeScript #ReactJS #NextJS #TailwindCSS #Engineering #MathTools #WebDev #Coding #SoftwareEngineering #UnitConversion #RadixUI #Bun #Vite

🚀 Mastering the JavaScript Event Loop = Unlocking Async Superpowers We use `setTimeout` and `Promise` every day… but do you really know what happens behind the scenes? 🤔 Let’s break it down 👇 🔹 JavaScript is single-threaded 🔹 Synchronous code runs first (Call Stack) 🔹 Then Microtasks execute (Promises, queueMicrotask) 🔹 Then Macrotasks run (setTimeout, setInterval, DOM events) 🔹 And the cycle keeps repeating 📌 Execution Priority: 👉 Synchronous → Microtasks → Macrotasks Example 👇 console.log(1); setTimeout(() => console.log(2), 0); Promise.resolve().then(() => console.log(3)); console.log(4); ✅ Output: 1 → 4 → 3 → 2 💡 Why should you care? ✔ Debug async issues faster ✔ Write more efficient code ✔ Build better React apps ✔ Crack frontend interviews 💬 Now your turn 👇 Guess the output of this code: console.log("A"); setTimeout(() => console.log("B"), 0); Promise.resolve().then(() => { console.log("C"); }); console.log("D"); Drop your answer in the comments 👇 Let’s see who really understands the Event Loop 🔥 #JavaScript #FrontendDevelopment #ReactJS #WebDevelopment #EventLoop #CodingInterview #Angular #SoftwareEngineering

🚀 Frontend System Design #3: JavaScript Event Loop JavaScript is single-threaded… But still handles async code smoothly 🤯 Most developers use: setTimeout Promises APIs But don’t fully understand what’s happening behind the scenes 👀 This is where the Event Loop comes in ⚡ 💡 Once you understand this: • Debugging becomes easier • Async code makes sense • Performance issues become clearer 👉 Slide 8 is something every developer should know 🧠 Quick Quiz: Which runs first? setTimeout(() => console.log("A"), 0) Promise.resolve().then(() => console.log("B")) Comment your answer 👇 📌 Save this if you found it useful Follow for more frontend system design 🚀 #JavaScript #Frontend #WebDevelopment #SystemDesign #ReactJS #Coding

https://lnkd.in/dHp9sfCx — Calculating volume shouldn't feel like a high school math test you're failing. As a Senior Frontend Engineer building with Next.js 15 and TypeScript, I’ve realized that "simple" tools are often the hardest to get right. 📐 I recently shipped the Volume Calculator, and it reminded me why the modern baseline for quality is so high. Most people think it’s just length times width times height. 💻 But when you support spheres, frustums, and capsules, the math logic can get messy very quickly. I used Cursor and Vercel v0 to rapidly prototype the interface with shadcn/ui and Tailwind CSS. The real challenge wasn't the UI—it was the floating-point precision. 🧪 I spent hours writing unit tests in Vitest to ensure that complex shapes didn't suffer from rounding errors that could ruin a construction project. I remember back in my university days, I actually built a physical cardboard cylinder just to manually verify a volume formula I was coding. 📏 I still bring that same "verify everything" obsession to every tool I build for calculator-all.com today. 🏗️ Building 300+ tools isn't just about quantity; it's about making sure the 301st tool is more robust than the first. 🚀 What’s an "easy" feature you built that turned out to be a total technical rabbit hole? 🧠 #VolumeCalculator #FrontendEngineer #TypeScript #ReactJS #NextJS #WebDev #CodingLife #SoftwareEngineering #UnitTesting #TailwindCSS #UIUX #OpenSource #DevCommunity #CleanCode #MathTools

https://lnkd.in/dtDQ4jRn — I built this because a broken token shouldn't ruin your Monday. As a Frontend Engineer, I’ve spent way too many hours staring at encoded strings in TypeScript and wondering why my auth was failing. While building the Jwt Decoder for my platform using Next.js 15, I hit a wall with specific character encodings that most online tools just ignored. 🚀 I leveraged Cursor to help me hunt down edge cases in the Base64URL implementation that often trip up standard decoders. The logic was fine-tuned using Bun for ultra-fast testing, ensuring that even the messiest payloads don't crash the UI. 🛠️ To keep the experience slick, I went with Tailwind CSS, Radix UI, and shadcn/ui components. It’s amazing how much a clean layout helps when you're debugging at 2 AM. 💻 Building this taught me a huge lesson: the "modern baseline" for dev tools isn't just functionality; it's the error handling. ✨ I remember one night debugging a "missing" claim for hours, only to realize I had a trailing space in my copy-paste. Now, this tool trims that automatically. ⚡ I’ve deployed the whole suite on Vercel to keep it snappy for everyone. 🔍 What’s the most frustrating bug you’ve ever found hidden inside a JWT? 🐛 🤝 #JwtDecoder #FrontendEngineer #TypeScript #ReactJS #Nextjs15 #TailwindCSS #WebDevelopment #JavaScript #SoftwareEngineering #DevTools #CodingLife #Vercel #Bun #Programming #FullStack

https://lnkd.in/d4ZvdajQ — Most people overcomplicate tipping logic, but as a Senior Frontend Engineer, I see it as a masterclass in edge-case handling. 🚀 Building this with TypeScript and Next.js 15 reminded me that even 'simple' tools deserve a robust architectural foundation. 💻 I remember being at a group dinner where 8 people spent five minutes arguing over who owed what. It was awkward and honestly, a solved problem. 🍽️ I built this Tip Calculator to end that friction. Here is a mini-dive into the logic behind it: 1. Input Sanitization: We use controlled components to ensure users don't break the math with non-numeric characters. ⚙️ 2. Real-time Precision: I leveraged Tailwind CSS and shadcn/ui to build a UI that updates as you type, providing instant visual feedback. 3. The Math: Handling floating-point math in JavaScript is notoriously tricky. I implemented rounding strategies to ensure the total is accurate to the cent. 4. Performance: I ran the calculation logic through Vitest using Bun to ensure that edge cases—like zero splitters—don't crash the site. 🧪 5. Workflow: Using Cursor helped me refactor the state management logic for the percentage sliders in record time. 🛠️ It’s not just about the numbers; it’s about making sure the user never has to think twice when the bill arrives. 📈 Everything is optimized for speed because no one wants to wait for a tip calculation to load. ✨ Building tools like this is a great way to keep my fundamental skills sharp while providing real utility. 💡 How do you handle decimal precision and rounding in your own frontend projects? 💬 #TipCalculator #FrontendEngineer #TypeScript #ReactJS #Nextjs #TailwindCSS #WebDev #SoftwareEngineering #Coding #JavaScript #UIUX #CleanCode #DeveloperLife #ProductivityTools #Calculators