DEV Community: Prince Thomas

Learning AI

Prince Thomas — Tue, 10 Jun 2025 09:05:42 +0000

Now everyone using AI in all apps, regardless of whether it requires or not, one thing is sure, AI is a big change in software industry. As a software engineer, I felt the need to keep up. I need to understand AI before using it; otherwise, it seems like magic to me. I need to start from scratch.
I'm starting from scratch and documenting my journey. If I can explain what I've learned, it means I've understood it. This is the first blog post, with more to come as I keep learning.

Machine Learning

A machine processes numbers. Whatever input you provide to a computer, it converts it into numbers, performs operations, and returns the output.
If you need to add two numbers, you will provide these two numbers as input. There will be a function to calculate the sum of the input numbers. Once the calculation is complete, you will receive the output. In this example, the function performs the calculation. In machine learning terms, a machine learning model is an application that encapsulates this function. The process of defining the function is training.

Types of Machine Learning

1. Supervised Machine Learning

In supervised machine learning, training involves both input and output data. By understanding the relationship between them, we can predict outputs from new datasets.
For example, consider a system designed to predict house prices. In supervised machine learning, we start with a dataset containing features such as the size of the house, the number of bedrooms, the age of the house, and the price it was sold for. By analyzing this dataset, the model learns the relationship between these features and the house prices. When we provide new data, like the size and age of another house with no price information, the model can predict the expected price based on the learned relationships.

1.1 Regression

Regression models forecast the output using known labels. This involves identifying an algorithm that is appropriate for the model.
For instance, let’s consider predicting the price of a car based on its age. Suppose we have a dataset with the following information: the ages of various cars and their corresponding prices.

Age of Car (years)	Price ($)
1	30,000
2	27,000
3	24,000
4	21,000
5	18,000

Here, the age of the car is the input feature, and the price is the known label. The regression model will analyze this dataset and learn the relationship between the car's age and its price. Once the model is trained, we can use it to predict the price of a car given its age.
For example, if we want to determine the price of a car that is 6 years old, we input the age (6 years) into the trained model, and it will predict the output price based on the learned relationship. Let’s say the model predicts the price to be $15,000. Thus, the regression model helps in forecasting the output (price) using the known labels (prices of cars of different ages).
This process highlights how regression models can be used to make predictions when we have a dataset with known labels and want to forecast outcomes for new data points.

1.2 Classification

Classification is like regression, the process is same, instead of predicting value we classify the value.

1.2.1 Binary Classification

In binary classification, the modal is trained to predict true or false values. Take real life example of classifying, diabetic patient based on blood glucose. To train the modal like regression we need data

Blood glucose (x) Diabetic? (y)

Blood Glucose	Diabetic
67	0
103	1
114	1
72	0
116	0

Next is to find a suitable algorithm for our use case such as logistic regression, then the process is same as regression.

1.2.2 Multiclass classification

This is like binary classification, but instead of predicting true or false, it predicts multiple labels.
One common example of multiclass classification is the prediction of Body Mass Index (BMI) categories. Instead of predicting whether an individual is overweight or not (binary classification), the model predicts one of three possible labels: underweight, normal weight, or overweight. This type of classification can be achieved using algorithms such as One-vs-Rest (OvR) algorithms or Multinomial algorithms where the process involves fitting a model to predict the likelihood of each category based on input features like height and weight.

2. Unsupervised Machine Learning

In contrast to supervised learning, unsupervised learning does not involve labels during model training, meaning it does not use previously known labels.

2.1 Clustering

Clustering is a type of unsupervised machine learning that involves grouping similar data points together based on their features. There are no predefined labels to guide the training process. Instead, the algorithm identifies the inherent structure in the data to form clusters.
For example, consider a dataset containing various car models. We want to group these cars into different categories such as SUVs, sedans, hatchbacks, etc. Using a clustering algorithm like K-means, we can achieve this by analyzing features such as the size of the car, engine power, seating capacity, and price range.
The algorithm will process the input data and partition it into clusters based on the similarities in these features. SUVs might cluster together due to their larger size and higher seating capacity, while sedans and hatchbacks form their own distinct groups based on their attributes. The result is a set of clusters where cars within the same cluster are more like each other than to those in other clusters.
This kind of clustering helps in various applications, such as market segmentation, inventory management, and recommendation systems, by understanding and leveraging the natural grouping within the data.

Conclusion

In essence, machine learning encompasses methods for making predictions based on data. Supervised learning involves labelled data to predict outcomes, while unsupervised learning identifies patterns and groups similar data points without predefined labels. Both types offer valuable insights and applications across various domains.

Async, await and generators

Prince Thomas — Fri, 19 Aug 2022 06:57:38 +0000

You may have heard that async and await is a syntactic sugar for promises. Promise works perfectly for asynchronous tasks such as I/O operations, API calls etc... So why do we need async and await

Issues with Promise

Readability

Consider the following snippet

const sleep = (delay) =>
  new Promise((resolve) => setTimeout(() => resolve(`sleep ${delay}`), delay));
const result = sleep(1000)
console.log(result);

sleep -> promise that resolves after given delay
When you try to run the code, the expected output is

sleep 1000

Instead

Promise { <pending> }

To get the expected result you have to do the following change

sleep(1000).then(console.log)

The issue with this is, the task that needs to be executed after fulfilling the promise needs to written in the then block. This means whatever written after promise will be executed before the then block. This may cause confusion because the execution of the code is not linear.

Error handling

Promise gives pretty good API to handle the error situations. Errors can be handled in the catch block just like then block. The traditional try, catch will not work in case of promise since execution of promise is after executing the try and catch

Async and await

Async and await introduced to JavaScript in ECMA 2017, which helps to resolve the above issues. The code become linear and try catch can be used to handle the errors

const sleep = (delay) =>
  new Promise((resolve) => setTimeout(() => resolve(`sleep ${delay}`), delay));

async function asyncFunc() {
  try {
    const result = await sleep(1000);
    console.log(result)
  } catch (e) {
    console.log(e);
  }
}

asyncFunc()

When you are using await, it will wait for the promise to either resolve or reject, then only the next line executes. The above snippet looks simple JavaScript except two weird keywords :D

await only can be used inside an async function

Implementation of async await with generator

Few things to consider

await is added before a promise
Next line is executed after completing the promise

const sleep = (delay) =>
  new Promise((resolve) => setTimeout(() => resolve(`sleep ${delay}`), delay));

function awaitFunc(promise) {
  promise.then((res) => iterator.next(res));
}

function* asyncFunc() {
  try {
    const result1 = yield awaitFunc(sleep(1000));
    console.log(result1);
    const result2 = yield awaitFunc(sleep(2000));
    console.log(result2);
  } catch (error) {
    console.log(error);
  }
}

var iterator = asyncFunc();
iterator.next();

The above snippet give exact result as async and await
In here consider

awaitFunc accepts a promise and resolve and let generator continue the execution
function* to be async
yeild and awaitFunc to be await

Function context in JavaScript

Prince Thomas — Tue, 22 Mar 2022 06:22:22 +0000

What is context?

What happens when you drop a ball?. If your answer is "the ball will hit the floor", you assumed this happened on Earth (or any place with gravity 😀). What if this happened on Moon?. The answer will be different. Right?. This is because the context is different. So context can be defined as surrounding data that will affect whatever is inside.

Functions and Context

Functions are a block of code that solves a specific problem and functions can be executed anywhere in the program (i.e., you can call it whenever you need it). Functions are never executed in isolation, they will always run in a context. Look at the code below.

var name = "John Doe"
function printName() {
  console.log(name);
}
printName();

Output

John Doe

Function printName can access variable name just because the context of the function is the global and the variable is defined on the global.

I called context as the global because when you are running on Node it will be global and on browser, it will be window.

The context of the function will determine what variables or methods a function can access. This can be determined statically by just looking at the code. If there is nothing unusual and if the code is predictable there is nothing to worry about right?. Unless there is this.

What is `this` in JavaScript?

The concept of this is not entirely exclusive to JavaScript. All programming languages have it. Then what's the hustle about this in JavaScript?.

Let's take a look at this code below.

var name = "John Doe";
function printName() {
  console.log(this.name);
}
setTimeout(printName, 1000);

Output - Node

undefined

Output - Browser

John Doe

The output may differ in different browsers as well.

The output in the Browser differs from Node because the implementation of setTimeout in both environments is different.

Why?

Functions in JavaScript are very powerful. Unlike other programming languages, functions in JavaScript can act differently. Like in the above code, the output is different because the value of this is bonded at the time of execution, which makes it unpredictable, yet JavaScript does this way.

Let's take a look at another piece of code.

var obj = {
  name: "John Doe",
};
obj.printName = function () {
  console.log(this.name);
};
obj.printName();

Output

John Doe

In the above code, the context of the function printName is obj. Since the value of this is bonded dynamically, you can access name from the this keyword. In here, a function is attached later on the obj, this is possible only if the this keyword value is bonded dynamically. You can't achieve this on programming languages such as Java or Python.

The Problem

Take a look at the code below.

var name = "John Doe 1";
var obj = {
  name: "John Doe 2",
};

function printName() {
  console.log(this.name);
}

obj.printName = printName;
obj.printName();
printName();

Output - Node

John Doe 2
undefined

Output - Browser

John Doe 2
John Doe 1

In the above code snippet, we are using the same function in both cases, we are not passing any parameters or anything. But the output is different since the value of this is dependent on the context. So when you see a code like this.

function printName() {
  console.log(this.name);
}

You can't determine the output, since it depends on the context. Getting different outputs for the same function is not a good idea, but if you use it correctly, you can do magic with it.

Playing with `this`

Strict mode

If you are defining a function like this

var name = "John Doe"
function printName() {
  console.log(this.name);
}

What will be the context of the function?. It will bond to the global, But if you are running in strict mode, the context will be undefined.

`new` keyword

In JavaScript, you can invoke a function using the new keyword. In this case, the value of this will be an empty object.

function printName() {
  console.log(this);
}
new printName();

Output:

{}

`bind`, `call` and `apply`

Since the context of the function is hard to determine, JavaScript provides some methods on the function to pass context with it.

call/apply

call and apply invokes the function immediately with a given context and arguments. The only difference is how the function arguments passed. In the apply function arguments are passed as an array and in the call function arguments are passed comma separated.

var obj = {
  number: 1,
  multiply: function (number1, number2) {
    console.log(this.number * number1 * number2);
  },
};
obj.multiply.call({ number: 2 }, 3, 4); //arguments as comma separated
obj.multiply.apply({ number: 2 }, [3, 4]); // arguments as an array

Output

24
24

Here the context is changed in the first argument of both call and apply, which makes the output 24 instead of 12.

bind

bind is another method available on function, which will return a new function with a given context.

var obj = {
  number: 1,
  multiply: function (number1, number2) {
    console.log(this.number * number1 * number2);
  },
};
var multiply = obj.multiply.bind({ number: 2 });
multiply(3, 4);

Ouput

Arrow functions

Arrow functions are introduced in ES6 to solve this context issue. this keyword is not bonded in the arrow function.

var obj = {
  name: "John Doe",
  printName: function () {
    setTimeout(function(){
      console.log(this.name);
    }, 1000);
  },
};
obj.printName();

Output - Node

undefined

Output - Browser

""

Here, the context of the function is setTimeout, so the value will depend on that. To solve this:

var obj = {
  name: "John Doe",
  printName: function () {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  },
};
obj.printName();

Output - Node/Browser:

John Doe

There will be no context binding on arrow functions, which makes the output of the code more predictable.

Conclusion

Everything in JavaScript works the same as almost every other programming language except the this keyword. The value of the this keyword is determined at the run time. This may make your code unpredictable, but you can achieve almost everything using this.

Dependencies in node project

Prince Thomas — Tue, 22 Feb 2022 09:49:41 +0000

If you are working on a node project, whether it is backend or frontend you may have to install some package/library in the project. Suppose you are creating an app with create-react-app, now your project depends on thousands of libraries you may have not known of. This is because of transitive dependency (we will discuss it later). This will bloat your app with a lot of dependencies.

So now the question is, what do you think about when you are adding some library to your project. Here are some questions you need to ask when you are adding a library to your project.

1. License

The first and most important thing you need to check is the license of the library. Some licenses can be so vague, that will affect your project later if the owner goes for copyright. If you are working for a company, check whether the license is apt for company policy.

2. Transitive dependencies

Suppose you are installing react in your project, you may think only one dependency is added to your node_modules. But if you check the node_module folder you will find some other libraries like

loose-envify
object-assign
js-token

Where do these dependencies come from?. This is how npm installs the dependencies. Even though you are not aware of these, it's installed because the react library depends on these libraries. These are called transitive dependencies. ie, If A depends on B and B depends on C, If you are installing A, both A, B and C are installed. Here's a dependency visualizer that will help you find all the transitive dependencies. This will give you a basic idea of what you dealing with 😄.

Transitive dependencies become an issue because, suppose some of the transitive dependencies have some bug/issue, this will break your code. This happened previously and is most likely to happen in the future too. Here are some previous known issues.

npm left-pad issue (read)
Checkout a PR for babel.
Most recent FakerJS deletion.

At the end of the day, most of the libraries are created by individuals, what they are going to do with the project will be unknown, just be careful while selecting a library for your project.

3. Test coverage

You can always check for the test coverage for the library in GitHub. This is very important because the number of test cases or coverage will tell whether the maintainer really cares about maintaining the project for a long time. This also helps to decrease bugs when adding a new feature to the library.

4. Documentation

Documentation is very important for the library, you can't go through all code and find how to use it. You can checkout documentation for django, react, redux etc... how well they explained every API with multiple examples. So, select a library that has good documentation for your project, so that you will know the complete functionality of the library.

5. Security

It's very hard to check whether the code is secure or not. GitHub has some bots to check potential vulnerabilities, still, you don't know for sure. Something you can do is read some of the files in the library, and check whether it follows some common coding practices such as

Variable naming convention
Is the code is readable?
Essential comments

Another main issue is even though you go through the whole code and you found it completely safe, the library you installed from npm can have a different code. This is because the author can manage different code bases for GitHub and npm.

6. Usage

Every library will have some bugs needed to be fixed or new features needed to be added. We can check whether new pull requests are created or Issues are properly dealt with. Check whether there is an active community supporting the project. Check for the number of the maintainers also. If a library is maintained by only one maintainer, if something happens to the author new pull request or issues will not be properly merged to the library. Check out this PR for a similar issue.

Conclusion

The above mentioned are some of the important things needed to be asked before selecting a library. But you can also check for other things such as GitHub stars, forks, weekly downloads, popularity etc... These are some basic things, that may or may not show how good is the library. So in my opinion you can check these kinds of metrics after asking the above questions.

Hosting React app on Firebase

Prince Thomas — Tue, 28 Dec 2021 04:40:13 +0000

Firebase provides options for hosting static, dynamic web apps very easily. In the free tier, you will get the option to add one domain also. When it comes to React applications, Firebase makes it very easy to deploy the app.

What we are going to do?

Create a project on Firebase
Setting up Firebase hosting
Creating a basic project in react using CRA
Deploy the app to Firebase
Updating app

Create a project on Firebase

Visit Firebase to create a project. You can log in to the Firebase console using your Google account. Create a new project.

Click on add project

Enter a new project name

You can skip analytics if you want, click on continue.

This may take some time. After it will redirect to your dashboard.

Installing Firebase CLI

You can install Firebase CLI using npm. In terminal:

npm install -g firebase-tools

firebase login

This will automatically open up the default browser, if not copy the URL shown in the terminal. After login, it will show a success message.

To test whether it is working or not, type in terminal:

firebase projects:list

This will list all the projects.

Creating a basic project in react using CRA

To create a react application, in terminal:

npx create-react-app react-example

We are not doing anything extra work on this, we are going to just deploy it. Now let’s build this app.

- Build project

npm run build

This will create a production-ready app stored under folder build.

- Initializing Firebase in the project

Now we have built our app, it’s time to deploy it. In terminal:

init firebase

This will prompt some questions.

Select hosting

Select use an existing project

This will list all the projects you have. Select our project from the list.

Type build since our app is in that folder.

Since this is a SPA all the URLs need to be redirected to index.html

Firebase will try to create a index.html which is not required since we have already index.html file. Type N

The above steps will initialize Firebase in our project directory. You can see a new file created inside the project named firebase.json

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Deploying App

Deploying apps is very easy with Firebase CLI.

firebase deploy

This will deploy the app in Firebase and give the hosted URL.

You can visit Firebase to view the current details about the hosted app.

You can add a custom domain if you have one.

Updating app

To update the app, after making the new version all you have to do is build the app again.

npm run build

Then,

firebase deploy

Happy Coding :D

DEV Community: Prince Thomas

Learning AI

Machine Learning

Types of Machine Learning

1. Supervised Machine Learning

1.1 Regression

1.2 Classification

1.2.1 Binary Classification

1.2.2 Multiclass classification

2. Unsupervised Machine Learning

2.1 Clustering

Conclusion

Async, await and generators

Issues with Promise

Readability

Error handling

Async and await

Implementation of async await with generator

Function context in JavaScript

What is context?

Functions and Context

Output

What is this in JavaScript?

Output - Node

Output - Browser

Why?

Output

The Problem

Output - Node

Output - Browser

Playing with this

Strict mode

new keyword

Output:

bind, call and apply

call/apply

Output

bind

Ouput

Arrow functions

Output - Node

Output - Browser

Output - Node/Browser:

Conclusion

Dependencies in node project

1. License

2. Transitive dependencies

3. Test coverage

4. Documentation

5. Security

6. Usage

Conclusion

Hosting React app on Firebase

What we are going to do?

Create a project on Firebase

Installing Firebase CLI

Creating a basic project in react using CRA

- Build project

- Initializing Firebase in the project

Deploying App

Updating app

What is `this` in JavaScript?

Playing with `this`

`new` keyword

`bind`, `call` and `apply`