Forem: Omi

Gradual growth!

Omi — Wed, 28 May 2025 18:06:22 +0000

It has been 2-3 months since I have not posted anything new here.
All because I have really gotten busy with my work and some family functions.

Building for the excellence takes time, meaningful efforts and courage to accept yourself. Failure and frustration are just a part of the process.

I joined a team of supportive developers and a calm lead. No rush, no criticizing over small mistakes. Understand slowly and steadily.

However, the process will never leave you from scolding your own mind! Your teammates do not judge you, but you judge yourself. Your manager do not rush you to meet the deadline but you do it by yourself.

Because, you have committed your words. You have committed to the deadlines. And you have committed to the qualities.

You get curious and furious at the same time. You take a step into performing your best. It is never about competing with people. It is about competing your past self.

Be collaborative. Learn, teach and gradually become a part of the most advanced crafts of the mankind.

Working for a paycheck will secure your retirement.
Working for the mankind will satisfy your soul!

This is why AI can't takeover my engineering job

Omi — Sun, 30 Mar 2025 16:21:41 +0000

Short and sweet

So, I was supposed to complete a coding task, test it and then submit. I created a prompt. AI generated a code for me. There was a bug in it, which I discovered after testing it thoroughly. I found out that what was the issue and simply added a prompt to correct the code. AI corrected the code with the syntax that I did not know, so I simply went to learn it.

The thing is, LLMs just crawls through the web. Someone might have posted about the issue, that's where it got to crawl and provide a solution. The logic behind the bug was not intuitive to the humans, how could the LLMs!

Your natural visualization of a problem is much more important to the industry than your "crawling through the web skills"! So, if you gotta "let's find a solution on internet" ask AI. But if you got a "What is the problem with this code" problem, don't bother that AI.

Our GPUs are melting.

Sam Altman

Do you know the closures well?

Omi — Sun, 30 Mar 2025 15:52:25 +0000

Challenge

Go to this task on javascript.info site -> Army of function
(Stop reading from here, go perform the task first! Adding an image below so that you don't accidently read my solution)

My experience after solving this

I implemented a bit different approach, since the question is inside a chapter where every problem was solved by defining a higher order function.

So my solution looked something like this: [This is NOT the full and final solution]

function makeArmy() {
  let shooters = [];

  // I created  a generateShooter function
  function generateShooter(number) {
    return function () {
      console.log(number);
    };
  }

  while (i &lt; 10) {
    let shooter = generateShooter(i);
    shooters.push(shooter); // and add it to the array
    i++;
  }

  // ...and return the array of shooters
  return shooters;
}

let army = makeArmy();

// all shooters show 10 instead of their numbers 0, 1, 2, 3...
army[0](); // 0
army[1](); // 1
army[2](); // 2

The catch

(If you have read the solution completely on the javascript.info site, then you might not be reading this, but since you are here, let me serve the essence of this problem to you!)

Simply switch from the while loop to for loop! 🧠🤯
Refer to the full solution on javascript.info site only, since it has all the features that makes it super easy to visualize.

Conclusion

Javascript.info seems to be the best site to understand js concepts with learn by doing approach.

PS: It's a really fast paced world that missing a detail is so common and the cost of not knowing a basic detail will question your capability at every line of code in the thousands of lines of project.

Node.js streams | pipe through your way ✅ | say NO to pressure!

Omi — Sat, 29 Mar 2025 14:01:44 +0000

Description

Poll phase is hijacked by the uncontrolled flow from readable stream.

This is a short post for a probable long post later. Recently I was implementing something using Node.js streams. And I got a really good opportunity to think about backpressure, event loop and closures! All concepts in one!

Problem overview

There's a csv file. Parse it using csv-parser and store the rows in an internal buffer. As soon as the buffer gets full, commit the rows in the database. The functionality should utilize asynchronous programming. Simply means that the main thread should be empty while the application is performing I/O operations.

Seemed an easy problem until I started implementing it.

Before moving to the solution, think about your solution. (Make sure not to miss the important detail: buffer)

Solution overview

Visualization of the problem:

File.csv (I/O) -> readable stream (csv-parser) -> buffer -> commit to the database (I/O)

Focus on the I/O part. I/O is handled in Node.js poll phase.

The readable stream starts filling up the poll phase. As soon as a row is read by csv-parser, it will push the on data event handler to the main thread.

This event handler will fill the buffer till 5 rows from csv file.

After 5 rows, the handler should make a db call to commit the 5 rows.

Since this is an I/O operation, we specify the async await operation.

As soon as you complete the implementation and test, you'll see that the async db call made the main thread empty, so the rows from poll phase keep emitting the on data handler.

Experts call this as "backpressure".

Even though this implementation works for a small file, it will spike the RAM usage for a larger file.

The current implementation will create a poll phase like this:

csv, csv,... milion csv rows then
db, db, ... million/5 db writes.

All of these will try to execute at cpu speed.

The drawback of this will be: at no point the main thread will be free until all the reads and db calls get executed. If this functionality is implemented on a rest api server, you will face a downtime since the main thread gets blocked now due to overflowing the poll phase.

So, how do you control the flow of water from the tap? By closing the tap ;P

Our main problem was: Poll phase is hijacked by the uncontrolled flow from readable stream. So, the solution is to simply put a pause when the buffer is full. While the stream is paused, make the db call to commit the changes and empty the buffer. Then resume the stream. This will make the poll phase look something like this:

csv csv csv csv csv (5 only) db

So the poll phase is not attacked by the js code. In between these operations, any api call made to the rest api server will also get served successfully since an api call will not need to wait for millions of callbacks to execute, only 6 callbacks.

That's how the main thread is also made unblocked and the server is not also down and RAM usage is not spiked.

Phew!
At first it seemed like a jargon, but later on, it was just an event loop question!

Conclusion

Never block the main thread!

PS: I will publish my project with complete setup of csv-parser, express js, knex.js and cron job with a well commented code and complete documentation for the educational purposes. Thanks for your attention!

Is it intuitive though? | Story of my new ecommerce venture

Omi — Tue, 25 Mar 2025 08:06:24 +0000

Recently I am working with a local shop who wants to sell their products online. Not to mention, they needed a website in days. Not months, not weeks. Whatever tech stack you are building upon, it is merely impossible to even get your nextjs based ready website up and running in a matter of days with their change in requirements!

So, I came across Shopify. A really good UI,features rich and great free third party apps, great customer support as well. I initiated a store front on Shopify.

They have a really great UI to upload products. A sophisticated forms UI. Someone from the shop who knows the products would easily complete the work within a day.

But hey, it is a local shop! No one has got much time to do it buddy. The shop owner was interested in having an excel sheet so that he can populate everything into it.

There are hundreds of product the sell! It is indeed a boring stuff to get each product online with perfection.

Just to conclude, someone at Shopify built a great product upload UI form. Features rich. With AI integrations.

But guess which feature is most useful in this case? Excel sheet upload. Even if it doesn't come with AI integrations, it is still a go to method for such businesses.

The question is not about intuitiveness. It is about the manual work with no guarantee of rewards.

Leetcode's runtime "beats x%" is x% reliable

Omi — Mon, 17 Mar 2025 05:31:44 +0000

Introduction

It's been a while I have been solving Leetcode problems. I always notice that Leetcode says my code sucks by showing me the image given below.

Digging deep into the matter

Let's say you are solving a hard problem, which requires you to think about more optimal approach. You bring down the complexity from O(n^2) to O(nlogn) or better => O(n). Or just O(1) (Who knows lol!). And suddenly you went from beats 5% to beats 100%! Which is amazing. You actually solved the problem the right way!

But let's say you are just warming up. You know the problem will be solved in O(n) only. You code it the right way. Optimized and removed unnecessary calculations and still your solution beats 5%. It is taking around 500ms more.

When you look at the 100% beats solutions, they have done some nasty optimizations on low level (like, on reading input etc), but for the solutions which are just same as yours beat you. In that case, the runtime estimations become unreliable.

Conclusion

Look at the top solutions to know what low level optimizations are done and practice them. Learn to implement them. If you have something better, then congrats. Else, just move to the next problem.

SWITCH your guess! | Monty hall problem explained

Omi — Wed, 12 Mar 2025 21:06:11 +0000

Introduction

Every engineering student who learns probability and statistics has encountered this famous problem. You can refer to this link for the problem statement. (But don't look at the answers yet!)

The Common Misconception

Many people assume:

"The probability of getting a car behind either of the remaining two doors is 1/2, since one has a goat and the other has a car."

But this is incorrect.

Correct Solution Approach

Step 1: Define the Events

Notation	Meaning
Hx	Host places a car behind door x
Py	Player initially selects door y

Possible event space

Host	P1	P2	P3
H1	(H1 and P1)	(H1 and P2)	(H1 and P3)
H2	(H2 and P1)	(H2 and P2)	(H2 and P3)
H3	(H3 and P1)	(H3 and P2)	(H3 and P3)

Each event is equally likely, meaning each has a probability of 1/9.

Step 2: Categorizing the Event Space

Let's break this event space into two cases:

Case 1: Player initially selects the door with the car (x = y)

Events: (H1, P1), (H2, P2), (H3, P3)
Probability:

P([x=y]) = 1/9 + 1/9 + 1/9
= 3/9
= 1/3

Case 2: Player initially selects a door with a goat (x ≠ y)

Events: (H1, P2), (H1, P3), (H2, P1), (H2, P3), (H3, P1), (H3, P2)
Probability:

P([x!=y]) = 1 - P([x=y])
= 1 - 1/3
= 2/3

Step 3: What Happens After Switching?

Case 1: Player Initially Chose the Car (x = y)

The host opens a door with a goat.
The player switches, he lose.
Probability of winning after switching: 0.

Case 2: Player Initially Chose a Goat (x ≠ y)

The host reveals the remaining goat.
The player switches, he wins. 🎉
Probability of winning after switching: 1. This case is important, so let me give you an example: _ H1 and P2, then host reveals door 3 (neither door 1 nor 2 because 1 has a car and 2 was chosen by the player). So, the player switches to door 1. The only option. Which is a win!_

Hence, [x!=y] events followed by a switch will always win.
P(win after switch | [x!=y]) = 1.

Thus, the overall probability of winning after switching is:

P(win after switch) = P([x!=y])*P(win after switch | [x!=y])
+ P([x=y])*P(win after switch | x=y)
= 1*2/3 + 0*1/3
= 2/3

Conclusion: Always Switch!

If you always switch, you double your chances of winning (from 1/3 to 2/3).

Strategy	Probability of Winning
Staying with original choice	1/3 (33.33%)
Switching doors	2/3 (66.67%)

Just imagine a game, you can win 66.67% times!

Intuition

If your first pick was a goat (which happens 2/3 of the time), switching gives you the car.
If your first pick was a car (1/3 of the time), switching makes you lose.
Since getting a goat first is more likely, switching is the best strategy.

🎯 Key Takeaway: Pay attention to what information is getting revealed and there is a reason why the host revealed a door.

Follow-up Question

If a player plays 100 rounds of this game, what should be their strategy to maximize their wins?

References:

1) Wikipedia
2) A good friends circle
3) Cover image picked up from here: https://images.app.goo.gl/Mz6LWWvJyxxXsQyT8

STOP Debugging using console logs!!!

Omi — Tue, 25 Feb 2025 11:48:23 +0000

It is 2025, almost 13 years since Node.js exists and I have seen people still debugging their backend code using console.log. 🤯😩

I am experienced in building .NET web APIs applications as well. The Visual Studio IDE (Not VS Code) indeed has some sophisticated tools for debugging, like step into function, next line, come out of function, check running memory usage etc. I enjoyed coding in that phase of my career.

Recently since I started using Node.js in a project, I always wondered how? How the whole team in this project is missing their debugging console logs in production code? How come no one is using node inspect server.js ? WHYYY???? (Sorry, I made this sound like an Instagram reel)

Mentioned below are the steps to use a debugger for Node.js that looks like this:

Prerequisites
The mentioned below software should be installed on your system:

Node.js
Chrome browser

Step by step guide

1) You should have something to debug. If don't, then use the code sample below and save it in a file called orders.js in your project directory.

// orders.js
let orders = [341, 454, 198, 264, 307];

let totalOrders = 0;

for (let i = 0; i <= orders.length; i++) {
  totalOrders += orders[i];
}

console.log(totalOrders);

2) Run the above code using following command in the terminal.

node orders.js

It returned NaN which is expected. (Since in the last iteration, we did sum + undefined (orders[5])).

3) To debug this code line by line, run the mentioned below command:

node inspect orders.js

This will start a console like this:

< Debugger listening on ws://127.0.0.1:9229/148789b7-6788-40b5-beb1-d15c246dcda7
< For help, see: https://nodejs.org/en/docs/inspector
<
connecting to 127.0.0.1:9229 ... ok
< Debugger attached.

Wait till < Debugger attached. appears on your console.

4) Go to chrome://inspect on your Chrome browser. This opens chrome devtools. From the log mentioned in above step, Debugger is attached on port 9229. You will see the same under localhost section. Refer to the image below:

5) Click on inspect and you will see a familiar looking window! 😃

Next steps:
Explore the right hand side of this screen which has these features:

1) Watch
2) Breakpoints
3) Scope
4) Call stack

Note
Debuggers are powerful tools. Obvious human errors are caught in a sight (like in the example given above), but sometimes, you need to use debugger.

On a higher note
Now that I have made easy for you to debug the code, do not overkill on a bug using this debugger as your go-to solution. Get the overview of the code, understand the pain points like slow running functions, memory usage spiking functions etc and narrow down the scope of your debugging first.
Have some entities to keep a watch on first and also, understand the how Node.js executes the js code in the main thread. Combining your own diagnosis skills along with debuggers will not let AI take-over your job for sure!

References:
https://nodejs.org/en/learn/getting-started/debugging#chrome-devtools-55-microsoft-edge
https://www.digitalocean.com/community/tutorials/how-to-debug-node-js-with-the-built-in-debugger-and-chrome-devtools

Will it catch?🤯

Omi — Sat, 22 Feb 2025 18:24:52 +0000

Was just recovering from last Node.js blocking non-blocking stuff, I come to another JS injury called error-handling with promises.

This injury was again caused to me by not being able to distinguish between blocking and non-blocking code.

The below question is from javascript.info website.

What do you think? Will the .catch trigger? Explain your answer.

new Promise(function (resolve, reject) {
  setTimeout(() => {
    throw new Error("Whoops!");
  }, 1000);
}).catch(console.error);

The hint: Look at the code like this:

new Promise(function (resolve, reject) 
// try {
{
  setTimeout(() => {
    throw new Error("Whoops!");
  }, 1000);
})
//} catch {
.catch(console.error);
// }

Comment down your answer below!

Node.js Interview question: finite and infinite

Omi — Wed, 19 Feb 2025 07:47:04 +0000

So recently, I was giving some interviews regarding Node.js and the interviewer asked me the below question:

The question: Refer to the codebase below and answer: what happens when we hit /infinite followed by a /finite?
Will the /finite gets stuck or will it return Hello World in response?

const express = require("express");
const app = express();
const port = 3000;

app.get("/infinite", (req, res) => {
  while (true) {}
  res.send("Never happens");
});

app.get("/finite", (req, res) => {
  res.send("Hello World!");
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

Answer: It will get stuck.

The hint: Never block the main thread. This is the basic. But what does it really mean by not to block main thread?

To understand it, let's twist the above question a bit. Instead of putting a synchronous infinite loop, we put an asynchronous timeout of 10 seconds in the /infinite API. Now, the question is, will the finite API respond after 10 seconds or will it respond immediately?

Code:

const express = require("express");
const app = express();
const port = 3000;

const setTimeoutPromise = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Timer completed");
    }, 10000);
  });

app.get("/infinite", async (req, res) => {
  console.log("infinite");
  console.log("timestamp", new Date());
  // while (true) {}
  await setTimeoutPromise();
  res.send("executed after 10 seconds");
});

app.get("/finite", async (req, res) => {
  console.log("finite");
  console.log("timestamp", new Date());
  res.send("Hello World!");
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

Answer: Now, the /finite responds immediately. After completing its 10 seconds, /infinite will respond with "executed after 10 seconds".

Reason: Javascript (V8 engine) runs the program in a single thread (aka main thread). Even if it is written inside an event listener or in a callback function of an async method (eg. fs.readFile("path/to/file", "", callback)). Node.js will put any Javascript synchronous code in the main thread.

while(true) {} is a synchronous code.

setTimeout is an asynchronous code. Simply means, the code requires OS resources (in this case -> timer). Since we have wrapped the setTimeout inside a promise and sending the response only after the promise is fulfilled, the main thread stalls the execution of /infinite function and make the main thread available. This is where the Node.js becomes non-blocking.

At this point, during the 10 seconds of the /infinite, any new event's (in this case, get call for /finite api) javascript code is ready to push into the main thread and execute.

After the timeout completes, the callback function mentioned inside the setTimeout will again come to the main thread for the javascript code execution.

Unfortunately, I could not find any sophisticated debugger that tells the developer that, hey! this is synchronous code, this is gonna block the main thread, or hey! this is a non-blocking code and your code will handle another request successfully!!!

Just have to read and practice through it, make cases by your own and understand between sync and async before jumping into the event-loop!

Follow up question:
If I modify the setTimeoutPromise like this:

const setTimeoutPromise = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Timer completed");
      while(true) {} // blocking it here lol! 
    }, 10000);
  });

What happens to the finite call that is executed
1) between the 10 seconds
2) after 10 seconds?

Comment below!

Implementing a basic loading state | useState | Closure

Omi — Thu, 26 Dec 2024 20:46:37 +0000

How do you create a basic loading state using html, javascript and reactjs hooks?

Requirements:
1) React functional component.
2) It should just return loading text: "Loading".
3) Show the dots being added incrementally (+1) to the end of the loading text every second.
For example:
Loading. -1s- Loading.. -1s- Loading... -1s- Loading

Approach:

Decide the static elements. Then add the dynamics (states, hooks etc). As per the thinking in React doc.

Static element implementation:

1) Create a functional component that returns "Loading".

const Loading = () => {
  const loadingText = "Loading";

  return (
    <div>
      <h2>{loadingText}</h2>
    </div>
  );
};

export default Loading;

Dynamics:

1) The number of dots represents a state of the component. So, define a state variable using useState. Initial value of the state = 1.

const [dots, setDots] = useState(1);

And add the dots after loading text

{".".repeat(dots)}

2) A state changes automatically after each second. window.setInterval can perform this task. Leave the callback function empty for now.

window.setInterval(() => {
      // Logic to increment dots
    }, 1000);

3) Create a useEffect hook that only runs once after initial render. Notice the empty array as a second argument. Check this Reactjs doc to how second arguments behave differently.

useEffect(() => {
    window.setInterval(() => {
      // Logic to increment dots
    }, 1000);
  }, []);

Till now, the app only shows "Loading.".
Take a pause and think of the logic inside window.setInterval callback function.

The obvious looking solution:

setDots((dots + 1) % 4);

However, the component will only go from
"Loading."-1s-"Loading..". Then it will get stuck.

Reason: The useEffect's callback fn is triggered on the initial state of the dots (1) only. Any further state changes in dots state does not affect the closure of useEffect's callback fn.

To achieve proper functionality, update it using previous state as per mentioned in the recatjs docs.

setDots((dots) => (dots + 1) % 4);

The Loading component mounts and unmounts at times. It is a good practice to cleanup every entities that are created during the useEffect's callback and that is not going to get used anymore. In this case, it is the window.setInterval definition.

The cleanup function runs not only during unmount, but before every re-render with changed dependencies.

The cleanup logic for useEffect hook can be defined using a callback function that gets returned by the callback function of useEffect. Check the example below:

 useEffect(() => {
    const interval = window.setInterval(() => {
      setDots((dots) => (dots + 1) % 4);
    }, 1000);

    return () => {
      window.clearInterval(interval);
    };
  }, []);

Finally, the implementation of Loading component looks like below:

import { useEffect, useState } from "react";

const Loading = () => {
  const [dots, setDots] = useState(0); // defined dots state
  const loadingText = "Loading";

  // useEffect hook that gets called on initial render of the Loading component
  useEffect(() => {
    // Defining interval
    const interval = window.setInterval(() => {
      // Setting state using a previous state
      setDots((dots) => (dots + 1) % 4);
    }, 1000);

    // Cleanup logic: 
    return () => {
      window.clearInterval(interval);
    };
  }, []);

  return (
    <div>
      <h2>
        {loadingText}
        {".".repeat(dots)}
      </h2>
    </div>
  );
};

export default Loading;