DEV Community: Rudra Pratap

Working with JS Array Indices

Rudra Pratap — Sun, 06 Aug 2023 20:43:04 +0000

FUN FACT!!
Array indices in Javascript can be integer, float or string!

let a = [1,2]
a[-1] = "negative" 
a[2.5] = "float" 
console.log(a) // [1, 2, -1: 'negative', 2.5: 'float']

How??

Arrays in Javascript are just a special case of objects. That is, an array is just stored as an object behind the scenes.
For example:
[ 1 , 2 ] is stored as [ "1" : 1 , "2" : 2 ]

We can access the array values not just using numberic index, but with strings too.

That is:

let a = [ 1 , 2 ]
console.log( a[1] ) // 2
console.log( a["1"] ) // 2

You will never get "Out of bound" exception in Javascript because, arrays are not really arrays but objects in disguise.

An object can have a maximum of 2^32 -1 properties (key-value pairs), which is the same as the maximum number of items an array can have.

Connecting Arduino to Internet using Websockets.

Rudra Pratap — Wed, 26 Jul 2023 12:28:26 +0000

In this article I will be sharing a recent project that I made using arduino.

Few years back, I made several arduino projects that used wireless communication using IR sensors and bluetooth. Though they worked perfectly but the only limitation was that the communcation range was not very great.

I was always fascinated by controlling the microcontroller using internet, while researching I found that we need hardwares like Ethernet sheild, routers and static IP for client-server communication to make arduino webserver.

Recently, I learnt about websocket protocol and socket.io library, and thought to connect my arduino with the internet and control its sensors.

Since I had no ethernet sheild and router, it was impossible for me to establish direct communication between a browser and arduino. To resolve this issue, I decided to communicate with the arduino indirectly, ie via a remote server hosted on Render.com.
In this solution, the client will establish websocket connection with the remote server. At the same time my arduino which is connected to nodejs server on localhost sending data via serialport, will also establish websocket connection with that remote server.

The scenerio looks like this:

For websocket connection, I used one of the popular libarary called Socket.io. It is a great libary for making realtime projects, and it is very easy to use too.

In my project, browser and nodejs localhost server were clients and the remote server was the main socket server.

Since, I had established the realitime connection between the local machine and browser, I had to connect the arduino with the local machine so that it can control the sensors.
In arduino we have the access to write on serial port. ie Serial.println("turn on led"). We can access serial port in nodejs using a npm library called serialport. With that, our whole problem is solved. Let me explain:

We will send emit lightOn message from the browser, this message will be catched by the remote server, then it will forward this message to the local nodejs server (remember, this local nodejs server is already connected to the remote server, because it is client with respect to it, and it had already established the connection).
The local nodejs server will read the message, and accordingly write commands to the serial port. Since the arduino is already connected, it will read serial port and take necessary steps with the sensors. After performing tasks on the sensors, arduino will write acknowledgement signals to the serial port.
Since the local nodejs server is continuously reading the serial port, as soon as it gets the acknowledgement, it will emit socket packet to the remote server conforming that the command has been fullfilled. The remote server will in turn report to the browser about the fullfillment of the command and the brower will update its UI accordingly.

Below is the detailed diagram of the process involved in this process.

diagram link

Customize your VSCode IDE

Rudra Pratap — Tue, 18 Jul 2023 05:26:43 +0000

Vscode is a greate IDE, and it is the first choice of many developers. In this article I will share tips you can use to be more productive with Vscode.

Many times we work with mulitple windows of Vscode, for example, while developing a fullstack web app, you have a window for frontend and another for backend. In that scenerio if often happens that you accidently messup with the code and write it on wrong folder, or just search a file which is not present in that folder.

We can customize Vscode from its settings, but we don't want the changes to be reflected in all of our Vscode instances. We want the changes to persist on specific instances.

Steps:

Create a .vscode folder in project's root.
Create settings.json file in it.
Customize the looks according to the following image reference.

PracticeHero.site : My new project!

Rudra Pratap — Fri, 14 Jul 2023 16:01:32 +0000

Hi friends, in this blog I will share about a project I have built recently.

I often give virtual contests on Leetcode and other platforms to improve my DSA skills.
With every contest I learnt new tricks and concepts. Very soon I realized that I was doing something wrong, ie I was not writing about my learnings, the new concepts, tricks and new algorithms anywhere. It often happens that you found some nice articles, blogs, videos or anyother resource regarding a topic and you save them somewhere but after some time you forget about it.
This was happening with me too.

One day I thought to make an application where I can save all the learnings and resources after giving a virtual contest on a coding platform, and track my progress. Then I developed PracticeHero.
This web app serves a very niche area but indeed it is very useful. It is has a clean UI/UX.

If you are a person who give virtual contests on various coding platforms, then you must check it out once!

www.practicehero.site

HTTP vs WebSockets

Rudra Pratap — Sat, 08 Jul 2023 14:28:23 +0000

HTTP

Whenever you type any URL in the browser, say https://google.com and hit enter, a request goes to the DNS server in order to get the IP address behind the domain name.
When the client gets the IP address, it establishes a TCP connection with the server on the cloud.

HTTP is based on client-server architecture, ie client requests for some data from the server, the server responds and then the connection is terminated.

HTTP is stateless. ie every time client wants to send data to server, it has to explicitly specify all the headers like cookie, authorization etc headers, so that the server can recognize it.
Benefit of being stateless is that the request by the client can be served by any server in our backend as there is no state established among the server and the client. This enables us to easily scale the system horizontally.

HTTP connections start with http://yoursite.com.

HTTP is an application layer protocol built on the top of TCP/IP.

Websockets

The Websocket protocol is stateful. It also used TCP under the hood.
Here, the connection is not terminated after request-response process, but it exist until one of the party has not closed the connection explicitly.

Websockets have low-latency, that is why they are used for realtime communication, chat applications, gaming etc.

Websocket connections start with ws://yoursite.com

Drawback: If a connection is established, we can't transfer the next request to other server because if we do so the state will be lost. Hence it creates problems while scaling.

How to showcase your projects?

Rudra Pratap — Fri, 07 Jul 2023 15:09:54 +0000

If anybody asks about your projects you probably send him the live link of your project. A deployed project with a live URL is a good way to introduce your project, but it is not the best one.

In this article, I will be writing about the important steps required to showcase your projects to a reviewer/recruiter.

System Design Documents

You can document the important steps/algorithms you implemented while building your project.

What problems did you face? How did you solve them?
What technologies/frameworks did you use?

Architectural/System Design Diagrams

Diagrams speak more that words!

You can use UML or any online tool like draw.io.
Diagrams help vizualize your app's architecture.

UX/UI

A good user experience is very important.
No matter how performant, low latency your app has, it is not useable if it has poor UI.

Papers

You can write a proper paper on which type of problem your application is going to solve.
It is not necessary for everybody because it requires a lot of research.

Blog Articles

Write blogs on platforms like Medium, Dev etc.
Write about anything you know.
Pick a problem, write about the problem, what did you do solve the problem, what was your approach?

Videos

Create videos of your product.
Talk about it in the video.

Vertical Scaling vs Horizontal Scaling

Rudra Pratap — Fri, 07 Jul 2023 12:20:21 +0000

Vertical Scaling

Vertical scaling is accomplished by upgrading the hardware. It is often the simplest solution for short term scalability, as it doesn't require any architectural changes to your application.

Ways to scale vertically

Improving I/O access by switching to SSDs.
Reducing I/O operations by increasing RAM.
Improving network throughput by upgrading network interfaces. → if the server is streaming a lot of video/media content.
Switching to servers with more cores or processors. : more cores → less CPU context switches

Benefits

You have to upgrade the hardware only.
You do not have to rearchitect anything.
Perfect for small applications.

Limitations

Vertical scaling becomes extremely expensive beyond a certain point.
After a certain limit, hardware upgradation is not possible.
OS limitations: lock contention bottleneck.

Horizontal Scaling

Horizontal Scaling is used to distribute the traffic among many servers.

We can add as many servers as we need. There is no upper limit as it was in vertical scaling.

Private static members in Javascript

Rudra Pratap — Wed, 05 Jul 2023 09:49:20 +0000

In conventional object oriented programming languages like C++ and Java, we have a reserved keyword private which is used to create private members of a class. But the scenerio is very different in the case of Javascript, where there is no keyword like private.

Consider the following example

const Book = function(isbn){
  this.ISBN=isbn
  this.getISBN=function(){
    console.log(`ISBN number is ${this.ISBN}`)
  }
}

const book1 = new Book(123)
book1.ISBN = 987
book1.getISBN() // ISBN number is 987

In the above example, we can see that ISBN number can be easily manipulate from outside of the Book constructor function.

Thus there is no encapsulation and data hiding, which is very important for loose coupling, code maintainability and better management of code.

Now, how can we create private members such that they can be accessible inside the constructor function only?

The answer is : Closures
Javascript provides the concept of closures, which means functions can access the environment in which they were defined, not the environment in which they are called.

Look at the code example below:

const Book = function(isbn){

  let ISBN // private attribute

  function checkISBN(x){ // private method
    x=x+''
    if(x.length!==13) 
      return false  
    return true
  }

  this.setISBN=function(){
    if(!checkISBN(isbn))
      throw Error('Incorrect ISBN number!')
    ISBN=isbn 
  }

  this.getISBN=function(){
    console.log(`ISBN number is ${ISBN}`)
  }

  this.setISBN()

}

const book1 = new Book(1122334455667)
book1.ISBN = 987
book1.getISBN() // ISBN number is 1122334455667

In the above example, we got the result we expected ie 123. But you might be thinking what does this line do book1.ISBN=987?
This line adds a new variable in book1's this scope.
ie

The above pattern is good for creating private members, but it comes with a cost, which is memory. ie Every time we instantiate a new object of this Book class, we create fresh new copies of ISBN and checkISBN bundled inside the closure of Book. Hence there is wastage of memory. Therefore we should only make private attributes and methods when they are actually needed.

Now let's come to the second part of the article: private static members.

In the above example we used a private method checkISBN(x), you will notice that this method has nothing to do with individual objects. Only thing it does is to check the input x and determine whether it is correct of not, thus there is no sense in making its seperate copy whenever a new object is instantiated.
And therefore we need the concept of private static members.

A static member is a member which belongs to the class, not the objects. ie There is only a single copy of member which is created when the class is defined. No matter how much objects are instantiated, there will only on copy of the member residing in the memory.

Before creating a private static member, lets create a public static member of the class, which is very easy.


const Book = function(isbn){

  Book.getLibrary()

}

Book.getLibrary = function(){
  console.log('This book belongs to Oxford library.')
}

const book1 = new Book(123) // This book belongs to Oxford library.

To add a public static member we have to simply add the member in class's namespace.

Now, lets make a private static member, which is quite tricky.

Suppose we have to design a Book class, which will have a private static attribute called booksCreated which is initally set to zero and whenever a new book is instantiated, this variable must increment by one. We must ensure that it is kept private because we don't want it to be manipulated from outside of the class.

Here we will use closures along with IIFE (Immediately Invoked Function Expression).


const Book = (function(){
  let booksCreated = 0 // private static attribute 
  return function(){
    booksCreated++ 
    this.getNumberOfBooks=function(){
      return booksCreated
    }
  }
})()

const b1 = new Book() 
const b2 = new Book()
const b3 = new Book()

console.log(b3.getNumberOfBooks()) // 3
console.log(b1.getNumberOfBooks()) // 3

Access your localhost from anywhere with NGROK!

Rudra Pratap — Tue, 04 Jul 2023 06:43:27 +0000

When you make apps be it Nodejs or React, you use localhost server to see your development progress in realtime.

Now suppose you have a remote team (or a friend) with which you want to share your progress in realtime. How would you do?

You will probably use Google Meet or any screen sharing service to show your work. But this is not efficient because they can't access your localhost because it is not publicly available.

And if you are thinking that you will host the app on a web hosting service, make it live and then share the public url, then my friend it is very inefficient and time consuming.

In this article, I will share a wonderful tool you can use to achieve this purpose.

NGROK

NGROK is a tool used to tunnel your localhost to a live url.

Steps:

Go to ngrok.com and signup. After registering you will get a auth token.
Download the zip file for your respective OS.

Unzip the file and run the executable

Type the following command (replace token with yours)

To start a HTTP tunnel forwarding to your local port 80, run this next (replace the port number with the port of your localhost on which your app is listening):

You will get a url which can be opened from anywhere and the url will show the web page served by your localhost server.

http requests are always served at port 80. PROOF!

Rudra Pratap — Mon, 03 Jul 2023 18:57:14 +0000

We know that http requests are by default goes to port 80.
In this article I will prove that this fact is true.

For this demonstration, I am going to create a tiny Nodejs server.

const express = require('express')
const app = express() 
app.get('/',(req,res)=>{
    res.send('hi')
})

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

Start the server by typing node app.js in the terminal.

Now go to the browser and write the url http://localhost:5000.
The output will be:

Now, rewrite the url again but omit the port number this time. ie
search http://localhost.
Now you will get error this time:

You get this error because you made a http request and http requests are resolved on port 80, but your Nodejs server is listening on port 5000 and there is no service running on port 80.

Now the magic is going to happen.
If you want to http://localhost doesn't throw error on the browser, you have to make some changes in the Nodejs file.


const express = require('express')
const app = express() 
app.get('/',(req,res)=>{
    res.send('hi')
})

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

Restart the server and search http://localhost in the browser.
The output is:

HOLLA! There is no error! And we did wrote the port number in the url.

Thus it is proved that http request are resolved on port 80.

What is NGINX and how reverse proxies work?

Rudra Pratap — Mon, 03 Jul 2023 18:33:49 +0000

Every domain name resolves to a unique IP address.
For example: www.gooogle.com is mapped to 142.250.191.78 ipv4.

Whenever you host your program (for example: nodejs server or php server) on a remote machine (for example: AWS EC2 instances or Digitalocean), you are given a reserved public IP address with which you can connect with that remote device through SSH Terminal or any SSH client like PuTTY.

Now, suppose you visit www.google.com/maps. When you hit enter, your request is sent to the unqiue server which has the IP address 142.250.191.78. Now your request has reached to the correct device, but how does /maps goes to the correct program running inside that device? Suppose you want that every www.google.com/maps must be served by a Nodejs server running inside that EC2 instance and www.google.com/docs must be served by a PHP server. How can we forward the /maps request to Nodejs server and /docs request to PHP server?

In the above diagram it is clearly shown that multiple requests are resolved by different app servers inside our machine.
For example: /maps can be served by a Nodejs server, /docs can be served by a PHP server etc.

Solution
This is done by NGINX server which is installed on the physical machine.

NGINX maps the incoming request to be resolved by some other backend server. This process is called reverse proxy.

A reverse proxy server is a type of proxy server that typically sits behind the firewall in a private network and directs client requests to the appropriate backend server.

An other popoular proxy server is HAproxy.

Now I am diving deep into the topic, so be attentive.
First of all let me make a quote.

By default, all HTTP requests are served on port 80.
By default, all HTTPS requests are served on port 443.

Let suppose your /maps request is to be served by a Node server listening on port 1234 and your /docs request is to be servered by a PHP server on port 1235.

Now any request coming from client in the form of /maps or /docs, carries a default port 80 if it is an http request and 443 if it is an https request.

So, we must map the incoming request to different ports, which is done by NGINX.

Following image illustrates the process:

NGINX is written in C and it is very performant. It can handle ~10000 concurrent requests!
It can do multiple things like:

Load balancing
Rate limiting
Http caching
Reverse proxy
Websocket connection
Handling of static files, index files, and auto-indexing.
URL redirection and rewriting...

Following image illustrates the load balancing part:

Thanks, please upvote.

Deep dissection of const declarations

Rudra Pratap — Thu, 08 Jun 2023 15:38:10 +0000

In this post, I will be describing why we should be vigilant while using const to declare variables.

const variables are mutable.


const countries = ["India","USA","UK"];
countries[1] = "Japan";
console.log(countries);

What do you anticipate from above code? Will it throw error?

Well no, the output is :
[ 'India', 'Japan', 'UK' ]

We can clearly see that countries variable is altered without causing any exception. This shows that const can't make variables immutable.

In the same sequence, try to guess the output of the following code:


const myName = "rudra";
myName[0] = "R";
console.log(myName)

Did you guess the output to be Rudra?
If yes, then unfortunately your Javascript basics are not strong.
The output will be rudra.

Here is the reason:

In Javascript, all the primitives ( Numbers, Strings, Boolean, BigInt, Symbol, Undefined and Null) are immutable, ie once they are initialised, their value can't be changed, but can only be reassigned. All primitives are stored in call stack.

Whereas, all the reference variables ( Objects, Arrays, Maps, Sets ) are mutable, ie there value can be changed directly from the memory location where they are stored. All references are stored in heap area.

const variables can't be reassigned.

This is the sole purpose of using const. Once a variable declared using const, can't be reassigned with other value.


const countries = ["India","USA","UK"];
countries = ["India","USA","UK"];
console.log(countries);

Output:
TypeError: Assignment to constant variable.