I once spent hours debugging something that made no sense. The code looked correct. The logic was simple. But the console logs were appearing in a strange order. Something like this: Promise 𝗿𝗲𝘀𝗼𝗹𝘃𝗲𝗱 Then 𝘀𝗲𝘁𝗧𝗶𝗺𝗲𝗼𝘂𝘁 Then another log I expected earlier. That’s when I discovered something many JavaScript developers overlook: Not all async tasks are treated the same. Some go to the 𝗺𝗶𝗰𝗿𝗼𝘁𝗮𝘀𝗸 𝗾𝘂𝗲𝘂𝗲. Some go to the 𝗺𝗮𝗰𝗿𝗼𝘁𝗮𝘀𝗸 𝗾𝘂𝗲𝘂𝗲. And JavaScript always clears microtasks first before moving to the next macrotask. That’s why: Promises, 𝗾𝘂𝗲𝘂𝗲𝗠𝗶𝗰𝗿𝗼𝘁𝗮𝘀𝗸, 𝗠𝘂𝘁𝗮𝘁𝗶𝗼𝗻𝗢𝗯𝘀𝗲𝗿𝘃𝗲𝗿 run earlier. While things like: 𝘀𝗲𝘁𝗧𝗶𝗺𝗲𝗼𝘂𝘁, 𝘀𝗲𝘁𝗜𝗻𝘁𝗲𝗿𝘃𝗮𝗹, 𝗗𝗢𝗠 𝗲𝘃𝗲𝗻𝘁𝘀 wait for the next event loop cycle. Once I understood this, a lot of 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗶𝘀 𝘄𝗲𝗶𝗿𝗱 moments stopped being weird. They were just the event loop doing exactly what it was designed to do. Sometimes the bug isn’t in the code. It’s in our 𝗺𝗲𝗻𝘁𝗮𝗹 𝗺𝗼𝗱𝗲𝗹 of how the runtime works. #JavaScript #EventLoop #FrontendEngineering #SoftwareEngineering

Type-safe RPC between iframes. Call methods across frames like they're local functions. No glue code, no message parsing, no postMessage boilerplate. Works in both TypeScript and vanilla JavaScript. Types are optional. Use cases: - Micro-frontends communicating across domains - Embedded widgets (payments, auth, analytics) - Secure sandboxed apps Features: - Typed RPC over postMessage - Promise-based async calls - Automatic handshake + origin validation - Functional and OOP APIs - Works cross-origin, no server, no bundler required - ESM + CJS builds How it works: The child exposes an API. The parent connects via a secure handshake. All method calls are proxied over postMessage as typed async RPC. Why RPC-iFrame: If you work with iframes, you know the pain: raw postMessage, manual serialization, no types, origin checks scattered everywhere, zero error context when something breaks. RPC-iFrame replaces all of that with a single abstraction: typed RPC. You define an interface, expose it from the child, and call it from the parent. The runtime handles handshakes, security, and cleanup. GitHub: AdriAir/RPC-iFrame NPM: rpc-iframe #javascript #typescript #webdev #webdevelopment #programming #coding #opensource #npm #devtools #frontend #frontenddevelopment #softwareengineering #webarchitecture #iframe #rpc #indiedev #buildinpublic

🔍 How JavaScript REALLY executes your code — a quick breakdown Most of us write JS every day, but rarely think about what happens before our code runs. Here's the journey V8 takes with every JS file: 1. Tokenization — raw text is broken into tokens (keywords, literals, operators) 2. AST Generation — tokens form an Abstract Syntax Tree, a hierarchical map of your code's structure 3. Ignition (Bytecode) — the AST is compiled into bytecode. Code starts running immediately — no need to wait for full machine code compilation 4. TurboFan (Machine Code) — hot functions (called repeatedly) get compiled into optimized native machine code But here's the part that matters for performance 👇 If TurboFan assumes a function always receives a number, and suddenly you pass a string — it deoptimizes. Falls back to the interpreter. Your any types in TypeScript aren't just a code smell — they're a V8 performance problem. And then there's the Event Loop: Call Stack → Microtask Queue → Task Queue Promises resolve before setTimeout, always Microtasks spawning microtasks can starve your render pipeline — real cause of UI freezes you can't explain Small things compound at platform scale. #JavaScript #WebPerformance #FrontendEngineering #StaffEngineer #V8 #PlatformEngineering

𝐈 𝐬𝐩𝐞𝐧𝐭 𝐚𝐥𝐦𝐨𝐬𝐭 𝟑 𝐡𝐨𝐮𝐫𝐬 𝐝𝐞𝐛𝐮𝐠𝐠𝐢𝐧𝐠 𝐚 𝐑𝐞𝐚𝐜𝐭 𝐢𝐬𝐬𝐮𝐞. 𝐓𝐡𝐞 𝐟𝐢𝐱 𝐰𝐚𝐬 𝐨𝐧𝐞 𝐦𝐢𝐬𝐬𝐢𝐧𝐠 𝐝𝐞𝐩𝐞𝐧𝐝𝐞𝐧𝐜𝐲. The component looked correct. State was updating. The API call worked. But the UI refused to re-render. At first, I suspected the API response. Then I checked state updates. Everything seemed fine. The real problem was hiding in plain sight. My useEffect dependency array was incomplete. React wasn’t re-running the effect because the value it depended on wasn’t listed. One small detail. Hours of confusion. That moment reminded me of something simple about debugging: Most bugs aren’t complicated. They’re precise. The system is doing exactly what we told it to do — not what we expected. Curious how others approach this. 𝐖𝐡𝐚𝐭’𝐬 𝐭𝐡𝐞 𝐬𝐦𝐚𝐥𝐥𝐞𝐬𝐭 𝐦𝐢𝐬𝐭𝐚𝐤𝐞 𝐭𝐡𝐚𝐭 𝐜𝐚𝐮𝐬𝐞𝐝 𝐲𝐨𝐮 𝐭𝐡𝐞 𝐛𝐢𝐠𝐠𝐞𝐬𝐭 𝐝𝐞𝐛𝐮𝐠𝐠𝐢𝐧𝐠 𝐬𝐞𝐬𝐬𝐢𝐨𝐧? #ReactJS #Debugging #FrontendDevelopment

JavaScript is a single-threaded language, which means it executes one task at a time using the call stack. But it can still handle asynchronous tasks like API calls, timers, and promises. This happens because of the Event Loop. The Event Loop continuously checks if the call stack is empty. When it is empty, it takes tasks from the callback queue and moves them to the stack to be executed. Because of this system, JavaScript can run asynchronous operations without blocking the main thread, which makes web applications faster and more responsive. Learning the Event Loop helped me understand how JavaScript manages asynchronous code behind the scenes. #JavaScript #Coding #EventLoop #async

🐞 Debugging in JavaScript — A Practical Approach 1. Identify the Issue Error message or unexpected output 2. Reproduce the Bug Make sure it happens consistently 3. Inspect the Code • Use console.log() smartly • Use DevTools (breakpoints > guessing) 4. Find the Root Cause Common reasons: • Undefined / null values • Async issues (Promises, APIs) • Scope & hoisting problems 5. Fix & Keep It Simple Don’t over-engineer the solution 6. Test Properly Check edge cases + different inputs #JavaScript #Debugging #Development #Coding

🔥 Day 3 of #100DaysOfCode Today I went deep into Node.js Runtime Fundamentals — straight from the official docs. No building. Just understanding. Here’s what clicked: 📌 Node.js is a JavaScript runtime, not a framework. It runs JS outside the browser using the V8 engine. 📌 It’s event-driven and non-blocking — meaning it doesn’t wait for tasks like file reads or database calls before moving on. 📌 The event loop is the core. It lets Node handle many operations efficiently on a single thread. 📌 Under the hood, Node uses libuv and a thread pool to manage async tasks. Why this matters? Because understanding the runtime means: ✔️ Better debugging ✔️ Better performance decisions ✔️ Stronger backend foundations On to Day 4 soon with my Boss Chris Nyeche 🚀 #NodeJS #BackendDevelopment #100DaysOfCode #JavaScript

I used to write long "for loops" for every small task. It worked, but the code was very hard to read and fix later. Today, I’m practicing a much better way to handle data using Array Methods. Instead of telling the computer every single step, I just tell it what result I want. Here are the three methods I use the most: .map(): I use this to change every item in a list at the same time. .filter(): This helps me choose only the specific items I need from a list. .reduce(): I use this to turn a whole list into one single result, like a total price. I am not a master yet, but my code is finally starting to look professional. Tomorrow, I will learn about Async/Await and how to handle waiting time in code. Question for you: Which one was the hardest for you to learn? For me, it was .reduce()! #CodeWithWajid #JavaScript #LearningToCode #100DaysOfCode #WebDev #BuildingInPublic

JavaScript is single-threaded. But that doesn’t mean it can’t handle concurrency. Understanding the event loop, the call stack, microtasks vs macrotasks, and how async operations are delegated is what separates surface-level knowledge from real backend understanding. If you can’t explain how your system behaves under load — you’re not done learning it. Still sharpening this every day.

I once broke a feature by optimizing async calls. Everything worked fine until one API failed. The whole flow crashed. That’s when I realized not all Promise helpers behave the same. At first, they look similar. But their behavior under failure is very different. 𝗣𝗿𝗼𝗺𝗶𝘀𝗲.𝗮𝗹𝗹() felt perfect until one request failed. Then everything failed. 𝗣𝗿𝗼𝗺𝗶𝘀𝗲.𝗿𝗮𝗰𝗲() was even trickier. It returned the first result success or failure and ignored the rest. And then I discovered 𝗣𝗿𝗼𝗺𝗶𝘀𝗲.𝗮𝗹𝗹𝗦𝗲𝘁𝘁𝗹𝗲𝗱() It didn’t fail fast. It waited. Returned everything success and failure. That’s when it clicked: `Promise.all()` → all must succeed `Promise.race()` → first one wins `Promise.allSettled()` → nothing is ignored Same problem space. Completely different intent. Sometimes bugs aren’t about async code. They’re about choosing the wrong abstraction. #JavaScript #AsyncProgramming #SoftwareEngineering