Forem: Nehal Mahida

The rise of AI and fall of blog posts?

Nehal Mahida — Sat, 20 Dec 2025 14:43:40 +0000

It’s been a long time since I wrote a blog post or even read one. You probably already know the reason. Over the past few months, LLM tools like ChatGPT have become my go-to source instead of blogs. I just ask my question, and I get the best possible answer instantly.

So the question is, do we still need blog posts anymore? Does anyone really benefit from creating blogs or writing technical documentation today?

I think writing will still continue, but only high-quality content will survive. AI will definitely replace half-baked, irrelevant, and unnecessarily long blogs. However, people will continue to follow their favorite authors and read content that feels authentic and experience-driven.

Many people are already using AI to write blog posts and content. While that might save time, it doesn’t really benefit either the writer or the reader because it lacks authenticity.

Well-structured, step-by-step, and thoughtfully planned content is still what people need, even with LLMs around. I won’t deny that tools like ChatGPT can generate step-by-step guides, but they often miss the real experience and context a human brings while writing.

Bug fixes and simple how-to posts may slowly become irrelevant, since AI will almost always do a better and faster job there.

What readers will continue to value are real experiences. Personal journeys of building a first product, stories of success or failure, and genuine use cases of AI. People will also enjoy reading how others are using AI to 10x their productivity in real-world scenarios.

In short, generic long-form topic posts may fade away, but authentic, experience-based writing will always have a place.

Fun fact: This post is written with help of AI. :)

OOPS in JavaScript with easy to understand examples 🔥🔥

Nehal Mahida — Sun, 21 Nov 2021 04:35:12 +0000

Introduction

In this article, we will learn and use Object-Oriented Programming (OOP) concepts in javascript.

If you are coming from an Object-Oriented Programming language like C++ or Java, You probably wished to use class-based syntax in javascript.

If you don't know about OOP, don't worry I am going to explain you all the concepts with easy to understand examples.

Nice to have

Before the release of ES6, We were using Constructor functions to use the OOP concept. But now with, the help of ES6 Classes, we can have more similar syntax like C++ or Java to use the OOP concept.
(Behind the scene ES6 Classes uses the same constructor functions)

That's cool 🙂

But what is Object-Oriented Programming? 🤔

Here is a popular definition of OOP

Object-Oriented Programming(OOP) is a programming paradigm based on the concepts of Objects.

Means? 🙄

That means everything that we achieve in OOP language is through objects here object defines the real-world entities like Student or Car (More detail soon).

Ok! But why do we need OOP?

Good Question!

The main goal of developing OOP was organising the structure of the code. Using OOP, you can write more modular and maintainable code. You can associate the code with real-world entities.

By using OOP, you make sure that only allowed members of one code is accessible to others. That makes your code fully secured to unauthenticated access (within the code).

Get it??

Now, Let's see the main concepts of Object-Oriented Programming step by step.

Object

As I already mentioned above, Objects are like real-life entities. They have their properties and methods.

Consider a car as an object. The car has so many characteristics like colour, company name, modal name and price, etc. On a car, we can perform actions like start, break, and stop. Here characteristics of a car are properties, and actions are methods.

If you are using javascript for a while, you may use objects many times in your code but maybe not in an OOP way.

Let me create one user object here.

const user = {
  name: 'Nehal Mahida',
  userName: 'nehal_mahida',
  password: 'password:)',
  login: function(userName, password) {
    if (userName === this.userName && password === this.password) {
      console.log('Login Successfully');
    } else {
      console.log('Authentication Failed!!');
    }
  },
};


user.login('nehal', 'nehal');
user.login('nehal_mahida', 'password:)');

// Authentication Failed!!
// Login Successfully

The above code is pretty self-explanatory. I am creating one user object having some properties and actions that he can perform.

Nothing new, right??

Let's understand some more OOP concepts.

Class

Class is a blueprint of a real-life entity. It describes how the object will look alike, what characteristics it holds and what kind of actions we can perform on it.

Class is just a template. You can't perform any actions on it. Consider class is your website UX Design(wireframes). You create it to get an idea of how your website UI will look alike at the end. Users can't do interactions with your wireframes as they will do on an actual website.

We instantiate the object from a class. We can create many instances of a class.

Let's take an example.

class User {
  #password;
  constructor(name, userName, password) {
    this.name = name;
    this.userName = userName;
    this.#password = password;
  }

  login(userName, password) {
    if (userName === this.userName && password === this.#password) {
      console.log('Login Successfully');
    } else {
      console.log('Authentication Failed!!');
    }
  }

  setPassword(newPassword) {
    this.#password = newPassword;
  }
};

const nehal = new User('Nehal Mahida', 'nehal_mahida', 'password:)');
const js = new User('JavaScript', 'js', 'python:)');


nehal.login('nehal_mahida', 'password:)'); // Login Successfully
js.login('js', 'python:)'); // Login Successfully

console.log(nehal.name); // Nehal Mahida
console.log(nehal.password); // undefined
console.log(nehal.#password); // Syntax Error

nehal.setPassword('new_password:)');
nehal.login('nehal_mahida', 'password:)'); // Authentication Failed!!
nehal.login('nehal_mahida', 'new_password:)'); // Login Successfully

Here I have created a class named User, which has some properties and methods. Then I am creating instances of the class using new User() and passing the values of required properties.

Did you see one constructor method which we never called in our code??

Actually, The method has been called 🙄

When we create an object from a class using the new keyword javascript internally calls the constructor method which initialised the public and private properties of a class. The object here can access all the public properties and methods of a class.

What is public and private properties??

By default, all the properties declared in the class are public means you can call and modify them from outside the class. You can declare public properties in or out of the constructor. Here name and userName are public properties.

What about private?

Again look at the code. Did you notice the password is written outside of the constructor method prefixed with #?

Hash(#) indicates that this property is private to the class and only methods that are declared inside the class can access it. Private properties should be declared before they were used.

When I tried to print the password, I got undefined as I don't have any member named as 'password', then I tried it with '#password' that gave me a syntax error because the '#password' is private.

To print/modify the private properties, we need getter/setter methods. Here I have created one method that set the new password.

The following concepts are the four pillars of OOP langueage.

Encapsulation

Encapsulation is defined as binding the data and methods into a single unit to protect it from outside access. Just like a pill contains medication inside of its coating.

In the context of class, some properties are not directly accessed from outside of the class. You need to call the responsible method for the properties.

Sounds familiar?

Yes, You guess it right. It's like creating a getter/setter method for the private properties we declare in a class.

In the above example, we already used encapsulation. We bind(logically) private property password with a public method setPassword(). You also have one getter method, which returns the current value of a private property.

Abstraction

People often misunderstood encapsulation with abstraction. Abstraction is one step ahead of encapsulation. Abstraction is defined as showing only the essential things and hiding the inner implementation.

Let's take an example of a car. On a Car, we can perform some actions like start, break and stop. Whenever you call one of these actions, it gives you some result. These actions have certain sub-actions which are hidden from you, but you don't need to care about those sub-actions.

This is how car company uses an abstraction of functionality to give their customer a smooth experience.

Let's take another example of abstraction. Suppose you are using some third-party react component for your front-end project. This component provides many props and methods for your customisation. This component is no magic it internally uses the same HTML tags, CSS and javascript. But now you don't need to worry about those things. You just need to set props and call methods based on your requirements. That's an abstraction.

Let's code 🤩

class User {
  name;
  email;
  #password;
  constructor() {}

  #validateEmail(email) {
    // check email is valid or not.
    return true;
  }

  #validatePassword(password) {
    // check password is satisfying the minimum requirements or not.
    return true;
  }

  signUp(name, email, password) {
    let isValidated = false;
    isValidated = this.#validateEmail(email);
    isValidated &&= this.#validatePassword(password);

    if (isValidated) {
      this.name = name;
      this.email = email;
      this.#password = password;
      // add user in your db.
      console.log('User registered successfuly');
    } else {
      console.log('Please enter correct Details!!');
    }
  }

  login(email, password) {
    if (email === this.email && password === this.#password) {
      console.log('Login Successfully');
    } else {
      console.log('Authentication Failed!!');
    }
  }

  #isRegisteredUser(email) {
    // check user is registered or not.
    return true;
  }

  resetPassword(email, newPassword) {
    if (this.#isRegisteredUser(email)) {
        this.#password = newPassword;
        console.log('Operation performed successfully');
    }
    else {
      console.log('No account found!');
    }
  }
};

const nehal = new User();
nehal.signUp('Nehal Mahida', 'nm@gmail.com', 'password:)'); // User registered successfuly

nehal.#validateEmail('nm@gmail.com'); // Syntax Error.

nehal.login('nm@gmail.com', 'password:)'); // Login Successfully
nehal.resetPassword('nm@gmail.com', ''); // Operation performed successfully

In the above example, we have introduced some private methods. The methods are doing some work and they are not exposed to the outside of the class.

These methods are called by the publically available methods.

As a developer, I just need to give the details I received from the UI and call the responsible method.

In OOP languages like Java, we have a concept of abstract classes and interfaces. That's not possible in javascript.

Otherwise, we can create one abstract class and that class can be used by another class to achieve similar functionality.

So basically we can say we are using encapsulation to achieve abstraction. 😊

Inheritance

When one class derived the properties and methods of another class it is called inheritance in OOP. The class that inherits the property is known as subclass or child class and the class whose properties are inherited is known as a superclass or parent class.

Why do we need inheritance?

Inheritance is a very important concept in OOP. The main advantage of inheritance is reusability. When a child class inherits from parent class we don't need to write the same code again. It becomes very reliable when we need to do some change in properties just change it in a parent class and all the child classes will automatically inherit the change. Inheritance also promotes code readability.

Let's code...

class User {
  #password;
  constructor(email, password) {
    this.email = email;
    this.#password = password;
  }

  login(email, password) {
    if (email === this.email && password === this.#password) {
      console.log('Login Successfully');
    } else {
      console.log('Authentication Failed!!');
    }
  }

  resetPassword(newPassword) {
    this.#password = newPassword;
  }

  logout() {
    console.log('Logout Successfully');
  }
}

class Author extends User {
  #numOfPost;

  constructor(email, password) {
    super(email, password);
    this.#numOfPost = 0;
  }

  createPost(content) {
    // add content to your DB. :)
    this.#numOfPost++;
  }

  getNumOfPost() {
    return this.#numOfPost;
  }
}

class Admin extends User {
  constructor(email, password) {
    super(email, password);
  }

  removeUser(userId) {
    // remove this userId from your DB.
    console.log('User Removed successfully.');
  }
}

const nehal = new Author('nm@gmail.com', 'password:)');
nehal.login('nm@gmail.com', 'password:)');
nehal.createPost('I hope you are enjoying this article. Don\'t forget to leave your feedback. :)');
nehal.createPost('I am tired, Do you wanna buy me a coffee? :)');
console.log(nehal.getNumOfPost()); // 2

const json = new Admin('jason@gmail.com', '[Object] [object]');
json.login('jason@gmail.com', '[Object] [object]');
json.resetPassword('{id: 1}');
json.login('jason@gmail.com', '{id: 1}');
json.removeUser(12);

In the above example, the Author and Admin classes inherit the property of the User class using extends and super keywords.

The extends keyword is used to establish a parent-child relationship between two classes. In the first case, the Author becomes sub-class and the User becomes parent class.

Sub-class has access to all the public and protected members of a superclass. In addition, It can have its own properties and methods. This is how we can achieve reusability through inheritance.

The super keyword is a special keyword. Calling super in the child's constructor invokes the parent constructor. That's how we are initialising the properties in the Author and Admin classes.

The child class can also override the methods of a parent class. This introduces the concept of polymorphism.

Polymorphism

Polymorphism means 'more than one form'. Like us, We the software engineers can work on the frontend, backend, DevOps and even testing. 😅

Polymorphism has two types.

Compile time Polymorphism
Runtime Polymorphism

Function overloading is a type of compile-time polymorphism. Here, we are creating more than one function with the same name and different parameters or types.

Function overloading is not supported in JavaScript because if you create functions with the same name, Javascript will override the last defined function with former functions.

Method overriding is a type of runtime polymorphism. Remember I told you that you can override the methods of parent class in the child class? That is method overriding.

Let's take example.

class User {
  constructor(email, password) {
    this.email = email;
    this.password = password;
  }

  login(email, password) {
    if (email === this.email && password === this.password) {
      console.log('Login Successfully');
    } else {
      console.log('Authentication Failed!!');
    }
  }
}

class Author extends User {
  #numOfPost;

  constructor(email, password) {
    super(email, password);
    this.#numOfPost = 0;
  }

  createPost(content) {
    // add content to your DB. :)
    this.#numOfPost++;
  }

  getNumOfPost() {
    return this.#numOfPost;
  }
}

class Admin extends User {
  constructor(email, password) {
    super(email, password);
  }

  login(email, password) {
    // add extra layer of security as this is an admin account.
    const isValidAdmin = true; // we can have some 2FA type security check here.
    if (email === this.email && password === this.password && isValidAdmin) {
      console.log('Admin Login Successfully');
    } else {
      console.log('Authentication Failed!!');
    }
  }

  removeUser(userId) {
    // remove this userId from your DB.
    console.log('User Removed successfully.');
  }
}

const nehal = new Author('nm@gmail.com', 'password:)');
nehal.login('nm@gmail.com', 'password:)'); // Login Successfully

const json = new Admin('jason@gmail.com', '[Object] [object]');
json.login('jason@gmail.com', '[Object] [object]'); // Admin Login Successfully

Here, the Author and Admin both inherit the User class. Both classes have the login method of the User class. Now I need some extra level of verification for the admin account, so I have created a login method in the Admin class. It will override the parent's login method.

When an object of the Admin class calls the login method, it will invoke a function call to the login method of the Admin class.

This is how we have achieved polymorphism using method overriding.

That's it. We have covered all the concepts of OOP with JavaScript. 🤩

Note: All the information above is based on my knowlege and research. If you find anything wrong here, please correct me in the comment section. Happy Learning 🙂

If you like this article like share and mark 🔖 this article!

If you are on Twitter, give a follow, I share amazing resources to learn web development. 🙏🏻

The feedbacks are appreciated. 🤗

🏃‍♂️ Let's Connect 👇

🕊 Twitter (See you on Twitter 😃)

👨‍💻 Github

🙌 Support

If you are enjoying my articles, consider supporting me with a coffee.☕

filter, map and reduce in JS. When and Where to use??

Nehal Mahida — Wed, 27 Oct 2021 05:06:48 +0000

Introduction

In this article, We will take a look at the most used javascript methods for array transformations: filter(), map() and reduce().We will also take a look at in which condition these methods should be used.

Array.filter()

As the name suggests, the filter method is used to filter the elements from an array based on a given condition.

Elements for which the condition is true will be filtered and added in a new array all other will be discarded. At last, the filter method will return a brand new array.

Syntax

Array.filter((element, index, array) => { ... } )

We can have three arguments in a filter: the current element, index and the array itself. The callback function will have our condition to filter elements (You can make the condition as complex as you want).

Let's take an example to understand the filter method.

Suppose you are calling an API that returns a list of users having some details. You want to filter this list based on the age of individual users.

Let's code...

const users = [
  {
    name: "Van Batchelder",
    city: "London",
    birthYear: 1998
  },
  {
    name: "Winter Rubino",
    city: "Madrid",
    birthYear: 1992
  },
  {
    name: "Yusuf Shea",
    city: "Paris",
    birthYear: 1990
  },
  {
    name: "Zion Shively",
    city: "Alabama",
    birthYear: 2002,
  }
];

const currentYear = new Date().getFullYear();
const filteredUsers = users.filter((user) => (currentYear - user.birthYear) > 25);

console.log(filteredUsers);
// [
//  {name: 'Winter Rubino', city: 'Madrid', birthYear: 1992},
//  {name: 'Yusuf Shea', city: 'Paris', birthYear: 1990}
// ]

You may have noticed that the callback function returns the boolean value true or false. Based on this return value, the element is added or discarded into the new array.

That's what you need to know about the filter method. 😊

Array.map()

The map method is used to iterate over an array. In each iteration, it applies a callback function on the current array element and finally returns a completely new array.

Unlike a filter, a map does not discard any element instead it manipulates the value of elements. So you can't skip the element if you want. The new array will have the same length as the current.

Syntax

Arrays.map((element, index, array) => { ... })

Same as a filter, we can have three arguments in the map. Usually, we need an element value. 🙂

Let's take an easy to understand example. Suppose you want to convert a list of bitcoin values to dollar values. 🤩

So one way is to use the for loop. Start from the zero index up to the length of an array. At each index assign the converted value to the new array at the same position. 👇🏻

const bitcoinList = [1, 3, 5, 4, 2];
const dollarList = [];

const bitcoinValue = 62953.10; // It's not a constant check it later!! :)

for (let i=0; i<bitcoinList.length; i++) {
    dollarList[i] = bitcoinList[i]*bitcoinValue;
}

console.log(dollarList); // [62953.1, 188859.3, 314765.5, 251812.4, 125906.2]

But that's what a map does...

Now see the below code that is written using a map

const bitcoinList = [1, 3, 5, 4, 2];

const bitcoinValue = 62,858.20; // It changed :(

const dollarList = bitcoinList.map((bitcoin) => bitcoin * bitcoinValue);

console.log(dollarList); // [62953.1, 188859.3, 314765.5, 251812.4, 125906.2]

Here I have used arrow functions shortcut, but you can do some extra work before finally returning the modified element. You may have noticed that the callback function returns the modified element which is eventually added into the new array.

So here we are mapping the values of one array to another that's why this method is called map.

That's what you need to know about the map method. Feel free to add any extra information you know about the map method in the comment box. 💬

Array.reduce()

It is the least used array method (but trust me, an important one!) compared to filter and map. Maybe a reason is this method is hard to understand (But not after this article 😉).

As the name suggests, reduce is used to reduce the array 🙄

Syntax

reduce((previous, current, index, array) => { ... }, initialValue)

Don't worry by looking at the syntax. 😊

After taking an example, you will get it clear.

The examples on the internet for Reduce are so simple that we can't relate them to a real-life problem. But here, I will share a real-life scenario I faced that directs me to use Reduce.

Let's take the same users array we used in the filter method. The task is I want the list of usernames having an age greater than 25.

In this array, you may have some users having birthYear as NULL or undefined. So here you need to use the filter method to remove users having invalid birthYear.

From the filtered array, you just want usernames so here you will use the map method to extract the usernames from the user object.

See, you need to use two methods to accomplish this task. but What if I tell you you can achieve the result using only one method and you know which method I am talking about 😉

It's reduce.

Let's code.

const users = [
  {
    name: "Van Batchelder",
    city: "London",
    birthYear: 1998
  },
  {
    name: "Winter Rubino",
    city: "Madrid",
    birthYear: null
  },
  {
    name: "Yusuf Shea",
    city: "Paris",
    birthYear: 1990
  },
  {
    name: "Zion Shively",
    city: "Alabama",
    birthYear: 2002,
  }
];

const currentYear = new Date().getFullYear();

const userNames = users.reduce((filterUsers, user) => {
  if (user.birthYear && (currentYear - user.birthYear) > 25) {
    filterUsers.push(user.name);
  }
  return filterUsers;
}, []);

console.log(userNames);
// ['Yusuf Shea']

Let's understand the code based on syntax. Here the filterUsers is our previous, user is our current and empty array ([]) is our initialValue from syntax. We don't need index and array in the callback function.

In the first iteration filterUsers be an empty array based on an initialValue given. In the function body, we put a condition that if a user has a birthYear and his/her age is greater than 25 then push it on filterUsers otherwise return filterUsers. Finally, our userNames is having a filtered and mapped list. 🤩

You may find this task can be solved using other approaches but trust me this is the best example I can give you to explain reduce 😎

In nutshell,

filter: When you need to remove some unwanted element from array.
map: Convert one array into another.
reduce: When you need to boils down the array.

Yes, that's it. Hope you enjoyed my article.
If you like this article like share and mark 🔖 this article!

If you are on Twitter, give a follow, I share amazing resources to learn web development. 🙏🏻

The feedbacks are appreciated. 🤗

🏃‍♂️ Let's Connect 👇

🕊 Twitter : https://twitter.com/nehal_mahida (See you on Twitter 😃)

👨‍💻 Github: https://github.com/NehalMahida

Support 🤗

If you are enjoying my articles, consider supporting me with a coffee.☕

Check out my other articles on DEV Community👇

How not to update states in React!!

Nehal Mahida — Sat, 23 Oct 2021 03:50:19 +0000

How do you guys update your state if it depends on the previous value?

Simple!!

...

const [counter, setCounter] = useState(0);

const updateCounter = () => {
  setCounter( counter + 1 );
}

...

If you are doing the same as above, You are doing it wrong!! 😮

But my code works perfectly with the above syntax!! 😟

Yes, sometimes it works, sometimes it does NOT.

WHY?? 🤔

Because react schedules state updates asynchronously, It does not perform them instantly. So if your code has multiple state updates you might be depending on some outdated or incorrect values.

Here is an official statement from React team about this issue

this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

Hmm, So what is the solution?

Here we go...

To handle this situation, react allows us to pass a function in setState, which will give us the previous value of a state.

Here react guarantees us that the value is always updated correctly. 🤩

...

const [counter, setCounter] = useState(0);

const updateCounter = () => {
  setCounter((prevState) => {
    // some logic 
    return prevState + 1; 
  });
}

...

Tell me in a comment have you ever faced a problem because of state updates??

I would like to hear your feedback.

If you like this article like, share and mark 🔖 this article!

🏃‍♂️ Let's Connect 👇

🕊 Twitter : https://twitter.com/nehal_mahida (See you on Twitter 😃)

👨‍💻 Github: https://github.com/NehalMahida

Support 🤗

If you are enjoying my articles, consider supporting me with a coffee.☕

Async/Await with easy to understand examples.

Nehal Mahida — Thu, 21 Oct 2021 04:11:46 +0000

Let's first understand the Async keyword.

Put this keyword before the function which returns a promise or which does an asynchronous task.



const foo = async () => {
  return 'done';
}

foo().then((res) => console.log(res));

// done

If you think your function will run asynchronously (fetching data from API) then use the async keyword before that function.

Now there is another keyword Await that works only inside async functions.

(There is a concept of top-level await in which await keyword can be used outside of the async function.)

The Await keyword simply means it makes JavaScript wait until the task is completed.



const asyncTask =  () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('done');
    }, 1000);
  });
}

const foo = async () => {
  const res = await asyncTask();
  console.log(res);
}

console.log('Before Foo Call');
foo();
console.log('After Foo Call');

In the above example, I am creating a dummy function that takes one second to return its result.

There is another function foo that calls asyncTask (with await keyword) and prints the result.

I have put two logs, one is before calling foo and the second is after calling foo.

What do you think will be the output? 🤔

As you may know, whenever JavaScript encounter with await keyword it stops the execution of the current function and put it into the callback queue and start executing the next statement which is the second console log.

Here is an output of the above code.



Before Foo Call
After Foo Call
done

Handling errors while using async/await

In the above example, our promise resolves normally and we are printing the result on the console.

But in case of rejection, it will throw an error so we should handle errors while working with promises.

Using try/catch block.



const asyncTask =  () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('Something not working!');
    }, 1000);
  });
}

const foo = async () => {
  try {
    const res = await asyncTask();
    console.log(res);
  } catch (err) {
    console.log(err);
  }
  console.log('After calling AsyncTask');
}

foo();

Now, If our asyncTask function throws an error control will go into catch block and simply prints the error message then it will start to execute the next statements.

Output



Something not working!
After calling AsyncTask

Very clean. Isn't it?

Now, try to use async/await instead of then/catch in your next project.

If you like this article like, share and mark 🔖 this article!

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/nehal_mahida

👨‍💻 Github: https://github.com/NehalMahida

Support 🤗

If you are enjoying my articles, consider supporting me with a coffee.☕