Forem: Abhishek Mishra

Event Loop Deep Dive: What Every Frontend Dev Should Know — Timers, Microtasks, and Real Examples

Abhishek Mishra — Sat, 18 Oct 2025 19:38:32 +0000

If you’ve ever wondered why Promise.resolve().then(...) runs before setTimeout(..., 0), or why your UI freezes while a loop “just counts to a million,” this post is for you.
Let’s break down the JavaScript event loop — in simple terms — with real examples you can run right in your browser console.

The big picture — what the event loop actually is
Tasks (macrotasks) vs microtasks — the crucial difference
Where timers, rAF and promises fit
Concrete examples — paste these into your browser console
Real world gotchas & best practices
Debugging tips & tools
Wrap-up / TL;DR

1. The big picture — what the event loop actually is

Think of JavaScript as a single worker in your system — one person doing one task at a time.
No extra threads, no multitasking magic.

Here’s how it works:

The call stack is what the worker is doing right now.
The event loop is like the manager who keeps checking, “Is the worker done? What’s next on the list?”
The task queues are the list of pending jobs waiting for their turn.

There are two main kinds of tasks waiting to be picked:

Macrotasks — bigger jobs like setTimeout, I/O, user events.
Microtasks — smaller, “finish this right after the current thing” jobs, like Promise.then.

👉 After one macrotask finishes, the event loop runs all the microtasks before starting the next macrotask.

That’s the golden rule. If you understand that, 80% of event loop mysteries disappear.

2. Tasks (macrotasks) vs microtasks — the crucial difference

Macrotasks:

Examples: setTimeout, setInterval, DOM events, I/O.
These are scheduled to run later, after microtasks are done.

Microtasks:

Examples: Promise.then, queueMicrotask, async/await after await.
These run right after the current code finishes, before rendering or the next macrotask.

Think of it like this:

Macrotask = “Do it later.”
Microtask = “Do it immediately after this.”

3. Where timers, rAF and promises fit

Function	Type	When it runs
`setTimeout(fn, 0)`	Macrotask	After all microtasks finish
`Promise.then(fn)`	Microtask	Right after current code finishes
`queueMicrotask(fn)`	Microtask	Same as Promise.then timing
`requestAnimationFrame(fn)`	Special	Before the next screen paint

4. Concrete examples — paste these into your browser console

Example 1 — Basic ordering

console.log('script start');

setTimeout(() => console.log('setTimeout (macrotask)'), 0);

Promise.resolve()
  .then(() => console.log('promise.then (microtask)'))
  .then(() => console.log('promise.then 2 (microtask)'));

console.log('script end');

Expected output:

script start
script end
promise.then (microtask)
promise.then 2 (microtask)
setTimeout (macrotask)

✅ Microtasks run before macrotasks. Always.

Example 2 — async/await under the hood

console.log('start');

async function foo() {
  console.log('inside async');
  await null;
  console.log('after await (microtask)');
}

foo();
console.log('end');

Expected output:

start
inside async
end
after await (microtask)

await always pauses the function and resumes it as a microtask later.

Example 3 — requestAnimationFrame vs others

console.log('begin');

requestAnimationFrame(() => console.log('rAF (animation frame)'));

setTimeout(() => console.log('timeout (macrotask)'), 0);

Promise.resolve().then(() => console.log('promise (microtask)'));

console.log('finish');

Typical output:

begin
finish
promise (microtask)
rAF (animation frame)
timeout (macrotask)

5. Real world gotchas & best practices

🧠 Long loops freeze your UI

If you run:

for (let i = 0; i < 1e9; i++) {}

your browser tab becomes unresponsive — the event loop can’t do anything else.

✅ Split heavy tasks:

function doWorkInChunks() {
  for (let i = 0; i < 100000; i++) { /* work */ }
  if (stillWorkLeft) setTimeout(doWorkInChunks, 0);
}

⚡ `setTimeout(..., 0)` is not instant

Even with 0, the browser decides when to actually run it — it might be delayed.
For “run this right after current code,” use queueMicrotask() or Promise.resolve().then().

🔁 Microtask loops can block rendering

If you keep queueing microtasks inside microtasks, you can stop the browser from ever updating the screen.
Don’t overdo it — use a timer or rAF to give the UI a break.

6. Debugging tips & tools

Chrome DevTools → Performance tab: record and check long tasks.
Performance Monitor: view FPS, JS memory, and CPU usage.
Lighthouse audits: detect scripts that block main thread.
Try the console experiments above — it’s the fastest way to really “get it”.

7. Wrap-up / TL;DR

Microtasks (Promises, queueMicrotask) run before macrotasks (setTimeout).
requestAnimationFrame runs before the browser’s next repaint.
Don’t block the event loop — chunk your heavy work or move it to a web worker.
When debugging “weird async timing,” think: current code → microtasks → render → next macrotask.

Managing Multiple GitHub Accounts & Branches on Windows

Abhishek Mishra — Sat, 14 Jun 2025 18:31:47 +0000

Ever feel like your Windows machine is hosting a GitHub account meetup—your personal projects in one corner, work repos in another—and you’re stuck with the wrong name tag? Fear not. In this post, I’ll show you how to juggle multiple GitHub accounts and keep your branches as organized as your desktop icons (well, almost). Expect a few laughs, zero hair-pulling, and a workflow that actually scales on Windows.

The Windows SSH Setup: Keys & Pageant or OpenSSH
Git Config: Who Am I Today?
Branching Like a Boss
Switching Contexts Without Facepalms
Windows‑Specific Pro Tips & Pitfalls
Wrap-Up: Your Workflow, Upgraded

1. The Windows SSH Setup: Keys & Pageant or OpenSSH

Goal: One Windows PC, two (or more) GitHub personae, zero confusion.

A. Generating Separate SSH Keys in Git Bash

Open Git Bash (or your preferred shell):

# Personal key
ssh-keygen -t ed25519 -C "you.personal@example.com" -f ~/.ssh/id_ed25519_personal

# Work key
ssh-keygen -t ed25519 -C "you.work@company.com" -f ~/.ssh/id_ed25519_work

Tip: When prompted for a passphrase, choose something strong—but memorable (so you’re not retyping it every hour).

B. Using Windows OpenSSH Agent

Windows 10/11 includes an OpenSSH agent you can enable:

Search Services in the Start menu, find OpenSSH Authentication Agent, and set it to Automatic then Start it.
In PowerShell or Git Bash:

   # Add your keys
   ssh-add ~/.ssh/id_ed25519_personal
   ssh-add ~/.ssh/id_ed25519_work

C. (Alternative) Using PuTTY & Pageant

If you prefer PuTTY:

Use PuTTYgen to load id_ed25519_personal and id_ed25519_work, saving them as .ppk.
Launch Pageant, add both .ppk files.
In your PuTTY/SuperPuTTY config, point to the correct key for each host.

D. Configure SSH Hosts

Edit (or create) C:\Users\<YourUser>\.ssh\config:

# Personal GitHub
Host github-personal
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519_personal

# Work GitHub
Host github-work
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519_work

When cloning or setting remotes, use:

git clone git@github-personal:you/my-blog.git
git clone git@github-work:company/project.git

2. Git Config: Who Am I Today?

Git needs your name & email per repo. Don’t let it guess.

Global Defaults

  git config --global user.name "Your Name"
  git config --global user.email "you.personal@example.com"

Per‑Repo Overrides

  cd C:/path/to/work/project
  git config user.name "Your Work Alias"
  git config user.email "you.work@company.com"

Now commits in that folder will use your work identity.

3. Branching Like a Boss

Keep branches clear. Adopt a naming template:

<type>/<ticket#>-<short-desc>

Types: feat, fix, chore, docs
Example: feat/42-add-search-box

git checkout -b feat/42-add-search-box

Benefits:

Readability: Know at a glance what each branch does.
Isolation: One feature, one branch—no accidental cross-contamination.

4. Switching Contexts Without Facepalms

On Windows, context switching can be a breeze:

PowerShell Aliases (add to your Microsoft.PowerShell_profile.ps1):

   Set-Alias gpsh 'git push git@github-personal'
   Set-Alias gwsh 'git push git@github-work'

Windows Terminal Profiles: Create separate profiles for personal vs. work, each initializing SSH agent with the correct keys.
Verify Before You Push

   git remote -v

Always check your remote URL to avoid pushing to the wrong account.

5. Windows‑Specific Pro Tips & Pitfalls

Long Path Issues: Enable long paths in Windows 10+ via Group Policy or registry—avoids “Filename too long” errors.
CRLF vs. LF: Keep .gitattributes in your repos to normalize line endings.
Credential Manager: If you ever switch to HTTPS, use Windows Credential Manager so you’re not typing tokens every time.
WSL Integration: If you use WSL, symlink your SSH keys (ln -s /mnt/c/Users/You/.ssh ~/.ssh) so Git Bash and WSL share the same credentials.

6. Wrap-Up: Your Workflow, Upgraded

Your Windows PC can now host multiple GitHub accounts without breaking a sweat, and your branch strategy has crystal‑clear organization. No more “Which email did I set here?” panics, no more stray pushes, and no more chaotic branch names.

Go forth and code with confidence—on Windows. When Git asks “Who am I?”, you’ll have the right answer every time. Happy hacking! 🎉

Please Like, Comment and Share

Understanding Stack vs. Heap in JavaScript: Primitives and Non-Primitives

Abhishek Mishra — Sat, 24 May 2025 18:25:56 +0000

JavaScript manages memory in two main areas—the stack and the heap—and knowing how data fits into each can help you avoid confusing bugs. In this post, we’ll cover the difference between primitive and non-primitive types, explain where they live in memory, and show practical examples you can use right away.

Primitives on the Stack
Objects and Arrays on the Heap
Stack vs. Heap: Key Differences
Why It Matters: Copying and Mutation
Code Examples
Conclusion

1. Primitives on the Stack

JavaScript’s primitive types include:

String
Number
Boolean
Null
Undefined
Symbol
BigInt

When you declare a primitive, its value is stored directly on the call stack, a region of memory designed for fast, fixed-size allocations. Assigning one primitive variable to another creates a copy of the value:

let x = 42;
let y = x;   // y receives its own copy of 42
y = 100;
console.log(x); // 42

Because each primitive has its own stack slot, changing y does not affect x.

2. Objects and Arrays on the Heap

Non-primitive types (objects, arrays, functions, and other complex structures) are allocated in the heap, a larger, dynamic region of memory suited for variable-sized data. Variables that hold non-primitives store a reference (pointer) to the heap location:

let objA = { name: 'Alice' };
let objB = objA;   // both variables reference the same object
objB.name = 'Bob';
console.log(objA.name); // 'Bob'

Here, objA and objB point to the same heap object, so mutations via one reference are visible through the other.

3. Stack vs. Heap: Key Differences

Aspect	Stack	Heap
Storage for	Primitives & references	Actual object and array data
Access speed	Very fast	Slower (managed by the JS engine)
Size	Limited, fixed	Larger, dynamic
Allocation order	Last-in, first-out (LIFO)	Managed by garbage collector
Copy behavior	By value	By reference

4. Why It Matters: Copying and Mutation

Primitives are passed by value. You get independent copies, so you can’t accidentally overwrite another variable’s data.
Non-primitives are passed by reference. Multiple variables can point to the same data, so changing one will affect all references.

Understanding these rules helps you decide when to clone data to avoid unintended side effects:

// Cloning an object to avoid shared references
let original = { count: 1 };
let clone    = { ...original }; // shallow copy
clone.count = 2;
console.log(original.count, clone.count); // 1, 2

5. Code Examples

// Primitive example: separate copies
let a = 'hello';
let b = a;
b = 'world';
console.log(a, b); // "hello", "world"

// Reference example: shared object
let arr1 = [1, 2, 3];
let arr2 = arr1;
arr2.push(4);
console.log(arr1, arr2); // [1,2,3,4], [1,2,3,4]

// Creating a true copy of an array
let arr3 = arr1.slice(); // or [...arr1]
arr3.push(5);
console.log(arr1, arr3); // [1,2,3,4], [1,2,3,4,5]

6. Conclusion

Knowing where JavaScript stores your data—the stack for primitives and references, and the heap for objects and arrays—gives you clarity on assignment, copying, and mutation behavior. Keeping these distinctions in mind will help you write more predictable, bug-free code. Happy coding!

How to Stream RTSP in the Browser with Minimal Latency (Without Losing Your Mind)

Abhishek Mishra — Sat, 26 Apr 2025 20:13:02 +0000

Let’s be real: streaming RTSP in the browser is like trying to fit a square peg into a round hole. RTSP streams are like the cool kids at the party that browsers just don’t invite. You can either use HLS, which works but adds a bit of a delay (15–60 seconds, anyone?), or you can get fancy and use WebRTC, which, spoiler alert, is way better for real-time performance.

In this post, I’m going to walk you through how we went from sub‑1ms latency in our local prototype to 60-second delays in production and back again (with WebRTC, of course). Plus, how you can avoid the pain I went through, so you don’t end up pulling your hair out in frustration.

Why RTSP Doesn't Just Work in the Browser
My First Attempt: RTSP → HLS with FFmpeg & hls.js
The Latency Nightmare: AI + HLS = Bad News
Why HLS Will Never Be Your Real-Time Friend
Enter WebRTC & Janus Gateway: Our Savior
How I Made It Work (and Stayed Sane)
What I Learned (aka My Cautionary Tale)
Conclusion: Don't Be Like Me, Do It Right From the Start

1. Why RTSP Doesn’t Just Work in the Browser

Okay, so RTSP (Real-Time Streaming Protocol) is the king of live video streaming. It’s what most cameras use, and it works great… until you try to get it into the browser. Browsers are all like, "Nah, I don't do RTSP." They prefer HLS (HTTP Live Streaming) because it’s super chill and easy to play.

But here’s the catch: HLS has latency—lots of it. Like, sometimes more than 30 seconds, and that’s not ideal when you're trying to build something that’s, you know, real-time. Think surveillance, AI detection, or anything where delays mean missed action (or worse—awkward silences in a live event stream).

2. My First Attempt: RTSP → HLS with FFmpeg & hls.js

So, I decided to hack together a quick prototype. I was like, "How hard can it be to just convert RTSP to HLS and get it working in Angular?" Spoiler: It was easier than I thought, but it still felt like I was solving a puzzle while blindfolded.

Step 1: Convert RTSP to HLS with FFmpeg

First, I needed to take the RTSP stream and convert it to HLS, because that’s what browsers like. Here’s the FFmpeg command I used:

bash ffmpeg -i rtsp://camera/stream \ -c:v copy -c:a aac \ -f hls \ -hls_time 1 \ -hls_list_size 3 \ -hls_flags delete_segments \ public/stream.m3u8

What does it do? It takes the RTSP stream and breaks it down into smaller HLS chunks—1 second each. It’s like taking a pizza and slicing it into tiny, snackable pieces. The browser loves that.

Step 2: Play HLS with hls.js in Angular

Then, I used hls.js to play the stream in Angular. A bit of code, and boom—it worked. Here’s the magic:

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import Hls from 'hls.js';

@Component({
  selector: 'app-video-player',
  template: `<video #video controls autoplay></video>`,
})
export class VideoPlayerComponent implements AfterViewInit {
  @ViewChild('video') videoRef!: ElementRef<HTMLVideoElement>;
  private hls!: Hls;

  ngAfterViewInit() {
    const video = this.videoRef.nativeElement;
    const src = '/assets/stream.m3u8';

    if (Hls.isSupported()) {
      this.hls = new Hls();
      this.hls.loadSource(src);
      this.hls.attachMedia(video);
      this.hls.on(Hls.Events.MANIFEST_PARSED, () => video.play());
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = src;
      video.addEventListener('loadedmetadata', () => video.play());
    }
  }
}

Local Results: I was feeling pretty proud of myself. The latency was like 1 ms. Real-time! I could almost hear the camera’s lens spinning. Everything was smooth.

3. The Latency Nightmare: AI + HLS = Bad News

Then, we decided to integrate it into the actual application. You know, the one where we run AI inference on the frames coming from the RTSP stream. This is where the fun begins—or should I say, the nightmare.

Everything worked fine locally. The stream was fast, I was happy, life was good. But once I threw it into production, the latency went through the roof:

15–25 seconds of delay—seriously.
On slower connections, it even spiked to 1 minute.

Imagine trying to run real-time object detection with that kind of delay. It was like trying to stream a live event while watching it through a broken telescope.

4. Why HLS Will Never Be Your Real-Time Friend

HLS was great for a prototype, but it wasn’t real-time. Why? Let me break it down:

Segmented by Design: HLS takes your video, chops it into small segments, and sends them one at a time. That’s like waiting for a new episode of your favorite series, but only getting one minute at a time.
Client-Pull: The browser has to keep checking for new segments. It’s like sending someone to the store for milk and hoping they come back before you die of thirst.
Buffering: To avoid choppy video, browsers buffer multiple segments. Which means more latency. Fun, right?

5. Enter WebRTC & Janus Gateway: Our Savior

I was done. I needed a solution that could handle real-time streaming. Enter WebRTC and Janus Gateway—the dynamic duo that saved the day.

WebRTC is built for low-latency, real-time communication, and Janus Gateway is a powerful media server that supports WebRTC. It’s like the Batman and Robin of streaming—able to handle RTSP to WebRTC conversion with minimal delay. And the best part? It’s all peer-to-peer, which means no buffering, no waiting.

6. How I Made It Work (and Stayed Sane)

Here’s how I switched from HLS to WebRTC with Janus:

Install Janus Gateway

Janus is like the Swiss Army knife of WebRTC servers, so I installed it and configured the streaming plugin for RTSP.
Configure RTSP Streaming

Janus can take an RTSP stream and serve it directly as a WebRTC stream. I added the camera’s RTSP URL in the config file and boom, ready to go.
WebRTC Player in Angular

I used the Janus JS API to connect to the Janus server and get the stream playing. It was as simple as:

// WebRTC video player component
this.janus.attach({
  plugin: 'janus.plugin.streaming',
  success: (pluginHandle) => {
    this.streamPlugin = pluginHandle;
    this.streamPlugin.send({ message: { request: 'watch', id: 1 } });
  },
  onremotestream: (remoteStream) => {
    this.videoRef.nativeElement.srcObject = remoteStream;
  },
});

Now the latency was under 500 ms, and my AI model could process frames in real-time.

7. What I Learned (aka My Cautionary Tale)

Latency is real: HLS is fine for static streaming, but if you're doing AI inference, it’s too slow.
WebRTC is your friend: If you need true real-time performance, WebRTC + Janus is the way to go.
WebRTC ≠ Easy: It’s way more complex than HLS, but so worth it for real-time apps.

8. Conclusion: Don’t Be Like Me, Do It Right From the Start

If you’re trying to stream RTSP with minimal latency for real-time processing, HLS just won’t cut it. Skip the frustration, and go straight to WebRTC. It’ll save you from tearing your hair out (and trust me, I’ve been there).

So, save yourself the headache, grab a Janus server, and start streaming like a pro. You’ll thank me later. 😉

Happy streaming, and may your latencies always be low and your frame rates high!

The Dev Revolution: How AI and Automation Are Changing the Game

Abhishek Mishra — Fri, 04 Apr 2025 19:14:55 +0000

In the ever-evolving world of development, one thing is certain—change is constant. But hey, if you’re like me, you might have secretly wished for a magic wand (or a really clever script) to fix bugs and automate the mundane.

Spoiler alert
: AI and automation are pretty close to that magic wand, and they’re here to shake things up in the best possible way.

A New Era for Developers
Remember the days when you’d spend hours wrestling with a bug that felt like it was hiding under your code like a teenager avoiding chores? Well, those days are slowly fading away. With AI-powered tools like code assistants, automated testing frameworks, and smart IDE plugins, we're stepping into an era where our keyboards might as well be magic wands—minus the cape (though a cape might not be a bad idea for Monday mornings).

Why This Matters

Boosting Productivity:
AI tools are not just about making our lives easier—they’re about turning our “oh no” moments into “aha!” breakthroughs. Imagine having a sidekick that points out your mistakes before you even realize you made them. It’s like having a friend who always texts you “I told you so,” but in the most supportive way possible.
Fostering Innovation:
When routine tasks are automated, we’re free to explore, experiment, and yes, even fail spectacularly. Let’s be honest: our most memorable “aha!” moments often come after a few epic fails. Now, thanks to AI, we can focus on the creative side of coding, while our digital buddies handle the grunt work.
Learning and Growth:
Embracing these new technologies means we’re on a never-ending learning curve—like trying to assemble IKEA furniture without instructions, but with a lot less swearing (hopefully). Every new tool opens up opportunities to level up, and yes, sometimes you might even laugh at how much you once struggled.

Embracing the Change
Adapting to a rapidly shifting landscape isn’t always smooth sailing. There are moments when your code just won’t cooperate—kind of like that stubborn jar of pickles you can never open. But the trick is to stay curious, experiment boldly, and remember that a little humor can go a long way in diffusing frustration.

Stay Updated:
Follow tech blogs, join developer communities, and attend webinars. Consider it the “developer news feed” that keeps you from becoming the human equivalent of outdated floppy disks.
Experiment Boldly:
Dedicate time each week to try out new AI tools or emerging frameworks. The more you experiment, the more you might laugh at your past mistakes—and the better you’ll understand how to leverage these tools to your advantage.
Network and Collaborate:
Share your experiences with peers. Whether it’s a coding triumph or a hilarious debugging disaster, collaboration turns individual struggles into collective victories (and funny stories).

Looking Ahead
The fusion of AI and development isn’t just another trend—it’s a revolution. As we navigate this brave new world, one thing remains clear: the future of coding is dynamic, interconnected, and occasionally absurdly funny. Whether you’re a seasoned developer or a newbie still learning which end of the keyboard is which, there’s never been a more exciting (or entertaining) time to be in the game.

So, let’s embrace the challenge, harness the power of AI, and laugh a little along the way. After all, in the world of code, even our errors can be a source of great comedy. What’s your funniest coding moment? Share your stories and let’s start a conversation that’s as engaging as it is enlightening!

Forem: Abhishek Mishra

Event Loop Deep Dive: What Every Frontend Dev Should Know — Timers, Microtasks, and Real Examples

Table of contents

1. The big picture — what the event loop actually is

2. Tasks (macrotasks) vs microtasks — the crucial difference

Macrotasks:

Microtasks:

3. Where timers, rAF and promises fit

4. Concrete examples — paste these into your browser console

Example 1 — Basic ordering

Example 2 — async/await under the hood

Example 3 — requestAnimationFrame vs others

5. Real world gotchas & best practices

🧠 Long loops freeze your UI

⚡ setTimeout(..., 0) is not instant

🔁 Microtask loops can block rendering

6. Debugging tips & tools

7. Wrap-up / TL;DR

Managing Multiple GitHub Accounts & Branches on Windows

Table of Contents

1. The Windows SSH Setup: Keys & Pageant or OpenSSH

A. Generating Separate SSH Keys in Git Bash

B. Using Windows OpenSSH Agent

C. (Alternative) Using PuTTY & Pageant

D. Configure SSH Hosts

2. Git Config: Who Am I Today?

3. Branching Like a Boss

4. Switching Contexts Without Facepalms

5. Windows‑Specific Pro Tips & Pitfalls

6. Wrap-Up: Your Workflow, Upgraded

Understanding Stack vs. Heap in JavaScript: Primitives and Non-Primitives

Table of Contents

1. Primitives on the Stack

2. Objects and Arrays on the Heap

3. Stack vs. Heap: Key Differences

4. Why It Matters: Copying and Mutation

5. Code Examples

6. Conclusion

How to Stream RTSP in the Browser with Minimal Latency (Without Losing Your Mind)

Table of Contents

1. Why RTSP Doesn’t Just Work in the Browser

2. My First Attempt: RTSP → HLS with FFmpeg & hls.js

3. The Latency Nightmare: AI + HLS = Bad News

4. Why HLS Will Never Be Your Real-Time Friend

5. Enter WebRTC & Janus Gateway: Our Savior

6. How I Made It Work (and Stayed Sane)

7. What I Learned (aka My Cautionary Tale)

8. Conclusion: Don’t Be Like Me, Do It Right From the Start

The Dev Revolution: How AI and Automation Are Changing the Game

⚡ `setTimeout(..., 0)` is not instant