DEV Community: harshit mishra

NPM v/s NPX

harshit mishra — Mon, 08 Jan 2024 08:22:00 +0000

if you are a JavaScript or TypeScript Developer then you have probably used both NPM and NPX But what's actually the difference between both of them?

Well, it turns out that NPX is actually a tool that gets included in NPM version 5.2 and later. So NPX is a tool that lives within NPM.

NPM is Node Package Manager and these packages are just different node-related libraries or files and folders that get created by different developers out there Online, that we can use in our node or javaScript-based projects. So what that means is that NPM is what we use to coordinate and leverage these packages that we download, create react app is an example of that it's a tool that Facebook built for us to create a React app quickly and easily.

NPM

We can do this with NPM and not only with NPX. NPM is an installation as well as a management environment. with NPM we can install and create react apps locally and globally, locally standing for the current folder that we are working on

npm install create-react-app

what this will do is install the Create React app locally within the current folder and anything inside the folder can leverage this Create React app.

But if I wanted to use the Create React app across multiple folders and have only one version of it, Well it turns out that we can install it globally.

npm install -g create-react-app

so with this, we are simply installing the latest version of the React app. We used to do this before NPX

Let's see NPM vs NPX using cowsay which is a package that draws out a cow that says whatever we pass into it.

we will do npm install -g cowsay and it will download the cowsay globally

now i can do cowsay hello and it will draw a cow with hello

if i want to check the location of the cowsay we can do is npm list cowsay this will give me the location of the installed package

it will say empty because I have installed it globally and not only in the current folder. let's check the global location of the project by npm list -g cowsay

with NPM we see that if we want to install a package we need to download it to the disk or hard drive of our computer this could be our local project folder or globally let us go ahead and uninstall the cowsay from our computer. npm uninstall -g cowsay

NPX

we are gonna do npx cowsay hello now if we run this we will see that it will first download it and it will execute it immediately

before npx we used to download it and then run it, what NPX does is that it directly installs the required files and it executes them immediately.

now if I check for the cowsay package locally npm list cowsay it will give us empty as a result

let us check for it globally it will again give us empty npm list -g cowsay

So what this means is that it downloads the latest package and executes it immediately then it deletes it from the disk. the main advantage of it is that we do not have to clog up or disk with all of these packages, so it all comes down to using it when it is needed.

Type Annotation vs Type Inference

harshit mishra — Sun, 07 Jan 2024 21:14:36 +0000

in the world of TypeScript, every assignable value has a type (as discussed in the last blog). Now to identify what type of a certain value has we have Type Annotations and Type Inferences.

1️⃣Type Annotations -

Type Annotation at its core is just a small amount of code that we write to tell TypeScript what type of value a variable will refer to.
So we developers tell typescript what types of values we are working with.

Example of Type Annotations

Type Annotation with variables

const numCars: number = 5;

so the :number is our Type Annotation, now this tells typescript that we are only going to assign a type of number to numCars variable, and if we try to assign any other type we will quickly see an error.

more examples of Type Annotation with different types are :

let speed: string = 'fast';
let isSuperCar: boolean = false;
let sunroof: null = null;
let nothing: undefined = undefined;
const todayDate: Date = new Date();

2️⃣Type Inference -

Type Inference just simply is a way in which typescript tries to find out what type a value is going to have.
the general example of type inference with variables looks like this :

let isSuperCar = false;

now if we try to assign a value that is not a boolean we will see an error.

if we see in the error typescript has identified what type of value isSuperCar has even though we have not told that typescript what type isSuperCar is going to have.

3️⃣When to use Type Annotation and Type Inference -

When to use Type Annotation:

When we have a variable whose variable can't be inferred, suppose we have a variable which can either have a boolean or a number value. In that case type inference will not be able to identify the type of variable on its own, the we need type inference an the syntax looks like this :

//A car can either have one sunroof or none

let sunroof: boolean | number = false;

//Now if we assign it a value of 1, we will not get an error 

sunroof = 1;

//It will not give an error as we have annotated that it is going to have either a boolean or a number as a value

When we declare value on one line and initialize it later,
earlier type inference worked because we had the declaration and initialization on the same line.
When a function returns the 'any' type in that case we need to clarify the value beforehand.

When to use type inference -

Except for the above corner cases, we always try to rely on type inference.

In the next blog we will see more examples revolving around Type Annotation, Type Inference, and the corner cases

What is an OPTIONS Request in an API call?

harshit mishra — Sat, 06 Jan 2024 10:29:36 +0000

If you are reading this blog then you must have come across the OPTIONS request in an API call, but what exactly is an Options Method

well if you make a server request from the front end to the backend, and log the requests made to the server by using a logging package (in the Context of Nodejs) you will get a result like this.

OPTIONS /api/users/signup 204 2.247 ms - 0
POST /api/users/signup 201 519.913 ms - 333

in this example, we are signing up the user, and the endpoint is

/api/users/signup

Now we know what a POST method is but what is this OPTIONS method?

Let's break this down,

HTTP Method: OPTIONS

Endpoint: /api/users/signup

Status Code: 204

Response Time: 2.247 ms

Response Size: - 0 (indicating a response with no content)

To put it in simple words an OPTIONS request is a part of the CORS (Cross-Origin Resource Sharing) mechanism.

The OPTIONS method is often used to request information about the communication options available for a target resource, including the permitted HTTP methods or the supported headers. It's part of the HTTP/1.1 protocol, and browsers often send OPTIONS requests as a pre-flight check before making a cross-origin request (e.g., for a POST request with certain headers).

in our current example :

The client, typically a web browser, is checking what methods are allowed on the /api/users/signup endpoint and what headers can be used in the actual request.

Status Code (204): This status code indicates that the server successfully processed the OPTIONS request, and there is no additional information to send in the response payload. thus the response is empty, as indicated by - 0.

In a nutshell:

Browsers often perform this pre-flight request to determine if the actual request (e.g., a POST request) will be allowed by the server. The server responds with information about the allowed methods, headers, and other details.
Thus HTTP OPTIONS request method is useful for determining what commands are available for use on a target server or for a specific resource.

What are Types in TypeScript

harshit mishra — Sat, 30 Dec 2023 21:15:31 +0000

The Definition 🥸

In TypeScript, Types are an easy way of to refer different properties and functions that a value has.

Let's break this sentence.

what is a value 🤔 :

Now, a value in TypeScript is anything that we can assign to a variable well we can assign numbers, strings, boolean, arrays, objects, and functions. all of these assignable entities have a type.

for example, let's take "Red" we might say it is a string or alternatively we can say that this is a value that will have all the properties and methods we assume a string can have.

Now a string has many functions and properties such as charAt(), concat(), and many more. length is one of the common property

console.log('Red'.length); // 3
console.log('Red'.chatAt(0)); // 'R'

Conclusion 🤨

Now if we have to summerise "Red" by using all the properties and methods associated with it, that will be very inefficient.
A shorter way to refer to a value is to assign it a type. In this example, you say the 'Red' is a string. Then, you know that you can use the properties and methods of a string for the value 'Red'

thus Every value that we create has a type assigned to it, in some cases, it is very obvious such as the string in the example.

in Conclusion,
a type is a label that describes the different properties
and methods that a value has

Categories of types

Now in the world of TypeScript types are mainly characterised in 2 categories.

. primitive type
. Object type - Type that we build or are already built-in
TypeScript

Need of Types ✨

There are two main purposes of types in TypeScript:

Types are used by the TypeScript compiler to analyze your code for errors
Types allow us to understand what values are associated with variables and what values are flowing around in our codebase

Example of Types in TypeScript 😎

const color = 'red';

The TypeScript compiler knows that the type of color is string

And it shows a list of methods of the string type that color can access:

If you try to access a property or method that doesn’t exist, the TypeScript compiler will show an error. For example:

Summary

Every value in TypeScript has a type.
A type is a label that describes the properties and methods that a value has.
TypeScript compiler uses types to analyze your code for hunting bugs and errors.

Open Source Contribution

harshit mishra — Sun, 06 Aug 2023 10:43:02 +0000

Open Source lies the spirit of collaboration. Developers from diverse backgrounds come together to contribute their expertise, exchange ideas, and work towards common goals.
The heart and soul of Open Source lies within its vibrant community. Developers, users, and enthusiasts come together in forums, conferences, and online platforms to share ideas and celebrate their achievements.

why Contribute to Open Source?

Make a Positive Impact

Collaborate with a Global Community

Enhance Your Portfolio

Strengthen the Ecosystem

How to Contribute?

You can make both Code and non-code contributions based on your field of interest

Code Contribution

You can take various approaches while making a code contribution.

Issues

a. find/verify bugs
b. suggest ideas
Changes via PRs

a. fix bugs
b. refactor code
c. create features
Reviewing Pull Requests

a. test changes
b. make suggestions

Non-code contributions

Code is a very small part of Open Source, You can contribute to:

make suggestions
make tutorials for beginners
Spread awareness
answer questions in the community
Designing the User Interface
Translating the language of the documentation

Conclusion:

Open Source is not limited to Code and non-code, You can start anytime and the best time is now.

See You Guys Next Time, Keep Building......

100 Days of Data Science and Machine Learning in Python : Day 0

harshit mishra — Fri, 24 Mar 2023 18:56:25 +0000

"Success isn't always about greatness. It's about consistency. Consistent hard work leads to success. Greatness will come."

*100 Days of code is a popular challenge in the developer community where you have to code consistently for 100 days and make some documentation about it. *

Well hello, everyone I am really excited to start this 100-day of code challenge where I will be learning Data Science and Machine Learning and building some awesome projects along this 100-day of journey 🤩.

I will be sharing what I learned each day and sharing my point of view on the topics I learned. Also, I will be sharing my code samples and resources so that you guys can use these blogs as documentation for your journey🚀.

Peace Out ✌.

follow me:
https://www.linkedin.com/in/harshit-mishra-60483b231/

https://twitter.com/Harshit_senpai

https://ken-senpai.hashnode.dev/

https://www.instagram.com/harshit__senpai/

https://medium.com/@miharshit2