Forem: namitmalasi

When you type a URL in the browser!

namitmalasi — Sun, 31 Oct 2021 07:57:26 +0000

Introduction

Have you ever wondered what exactly happens when you type an URL in the browser and press enter? In this blog, we will see what happens in the background, step by step when we type any URL.
If you want to have a better understanding of this article,then i would recommend you to have an overview of URL and DNS.

1. You enter URL in the browser

It basically means that you want to reach the server where the site is hosted. for example, if you are searching for facebook.com then, you are searching for the server where facebook .com is hosted.

2. The browser looks for the IP Address in the DNS(Domain name server)

a) The browser maintains a cache of the DNS records for some fixed amount of time. So, it is the first place to run a DNS query.

b) If the browser doesn't contain the cache then it requests to the Operating System as the OS also maintains a cache of the DNS records.

c) If your computer doesn't have the cache, then it searches the routers as routers also have the cache of the DNS records.

d) If all above steps fail, the browser would move on to the ISP. Your ISP maintains it's own DNS server which includes a cache of DNS records which the browser would check.

If the requested URL is not in the cache, ISP’s DNS server initiates a DNS query to find the IP address of the server that hosts facebook.com.
The purpose of a DNS query is to search multiple DNS servers on the internet until it finds the correct IP address for the website.

3. The Browser initiates a TCP connection with the server.

When the browser receives the IP address, it will build a connection between the browser and the server using the internet protocol. The most common protocol used is TCP protocol. The connection is established using a three-way handshake.

4. The browser sends an HTTP request to the server.

Once the TCP connection is established, it is time to start transferring data! The browser will send a GET request asking for facebook.com web page.

Sample Get Request:

5. The server handles the request and sends back a response.

The server handles the HTTP request and sends a response. The server response contains the web page you requested as well as the status code, compression type (Content-Encoding), how to cache the page (Cache-Control), any cookies to set, privacy information, etc.

Example HTTP server response:

6. The browser displays the HTML content.

The browser displays the HTML content in phases. First, it will render the bare bone HTML skeleton. Then it will check the HTML tags and sends out GET requests for additional elements on the web page, such as images, CSS stylesheets, JavaScript files etc.
At the end, you’ll see facebook.com appearing on your browser.

Conclusion

I really hope that you enjoyed reading this article and learned something from it. If you have any doubt or you think i missed something let me know in the comments.
You can connect with me on:

Twitter:Namit Malasi

URL and DNS explained!

namitmalasi — Sun, 10 Oct 2021 15:37:00 +0000

Introduction

Whenever you search for any resource(website, docs, images etc) on the internet, you can see their address in the address bar. This address tells us that the particular resource is hosted on that address server. The address is called URL and searching the server is done using DNS.

So in this article we are going to learn about URL and DNS. This article is an overview and i haven't got into too much details.

1) URL

URL stands for Uniform Resource Locator. URL is the address of the website which you can find in the address bar of your web browser. It is a reference to a resource on the internet, be it images, hypertext pages, audio/video files, etc.
For example: https://www.google.com

There are different parts of a URL, they are shown in the image below

a) Scheme

The first part of the URL is the scheme, which indicates the protocol that the browser must use to request the resource (a protocol is a set method for exchanging or transferring data around a computer network). Usually for websites the protocol is HTTPS or HTTP (its unsecured version).

b) WWW(Sub-domain)

After protocol comes the famous WWW, it simply means that the resource you are seeking by the means of this URL resides in the WWW subdomain of your domain name.

c) Domain name

Then the name of the resource owner (i.e. domain name) comes which is google in our example.

d) Top-level domain

Domain name is followed by the type of category in which the owner domain is registered. .com means that the website which is making this resource available to you is of the commercial nature. There are a lot of other types of categories as well. For example, .org for organizational website, .edu for educational institutions, .gov for government websites.

e) File Path

The path refers to the exact location of a page, post, file, or other asset. The path resides after the hostname and is separated by “/” (forward slash). The path/file also consists of any asset file extension, such as images (.jpg or .png, etc.), documents (.pdf or .docx), and more.
But it is not compulsory that all URL will display the path.

2) DNS

DNS is short for Domain Name System. Like a phone-book, DNS maintains and maps the name of the website, i.e. URL, and particular IP address it links to. Every URL on the internet has a unique IP address which is of the computer which hosts the server of the website requested.

How DNS works?

When you type a URL in the browser, the following steps take place:

The browser checks for a DNS record to find the corresponding IP address of the website.
Once the browser receives the correct IP address, it will build a connection with the server that matches the IP address to transfer information.
The browser sends an HTTP request to the server.
The server handles the request and sends back a response.
The browser displays the HTML content.

Conclusion

I really hope that you enjoyed reading this article and learned something from it. If you have any doubt or you think i missed something let me know in the comments. Feel free to like and share the post.
You can connect with me on:

Twitter:Namit Malasi
LinkedIn:Namit Malasi
Github: Namit Malasi

Map, Filter and Reduce explained.

namitmalasi — Sun, 12 Sep 2021 13:37:20 +0000

You probably have heard of .map(), .reduce() and .filter().
Map, reduce, and filter are all array methods in JavaScript.In this article, you will learn why and how to use each one.
I will try and explain with examples of how each of these functions works.

map()

map() is used to transform an array. It creates a new array populated with the results of the calling function on every element in the calling array.

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

const output=array.map(element=>
 {
  return element*2;
})

console.log(output);  // [2,4,6,8,10]

In the above code,
array ===calling array
element=>{...} ===calling function

The array elements are being traversed one by one and in each iteration the current element is multiplied by 2. The new value is pushed into a new array and after the traversal is complete we get a new array of elements in the output.

filter()

Filter is used to filter the array. filter() method creates a new array with all the elements that pass the test implemented by the provided function.
If the test condition returns true, the element gets pushed to the output array. If the condition returns false, the element does not get pushed to the output array.

const array=[10,23,55,40,111];

const output=array.filter(element=>
                      {
  return element%2;
})

console.log(output);

In the example above it is filtering out all the odd elements from the array based on the test implemented in the function and pushing them into a new array and then returning the new array.

reduce()

The reduce() method executes a reducer function on each element of the array, resulting in a single output value.
The reducer function takes two-parameter (accumulator, current).

accumulator= the returned value of the previous iteration
current=the current item in the array

const array=[1,2,3,4,5,6,7,8,9];

const output=array.reduce((acc,curr)=>
{
acc=acc+curr
 return acc

},0)

console.log(output);

The above code calculates the sum of the elements of the array.
The initial value of acc is set to 0 as mentioned in the code. On each iteration, the current element is added to acc, and hence at last the total sum is returned.

Conclusion

How javascript code is executed

namitmalasi — Sat, 30 Jan 2021 16:24:39 +0000

Everything in JavaScript happens inside an "Execution Context”. Whenever a JavaScript program is run an execution context is created.

var number=10;  //line1 
function add(n) //line2
{               //line3
var result=n+n; //line4
return result;  //line5
} 

var result1=add(4); //line6

when we run the above code, a global execution context (GEC) is created. It is created in two phases:

1)Creation Phase or Memory Creation

In this phase, javascript allocates the memory to all the variables and functions present in the program. The variables are stored with the value undefined and the function is stored with all the code present in that particular function. For the above code, the variable number is stored with the value undefined and the function add is stored with value b/w the {...} curly braces. The result1 is also a variable so it is stored with the value undefined.

2)Code Execution Phase

In this phase the main execution takes place and the javascript runs through the code line by line. Now the number value is changed from undefined to 10. Then it moves to the next line as there is nothing to execute it moves to line 5. In line 5 function invocation takes place. When a new function is invoked a new execution context is created within the GEC.

Now the again above process is repeated with the two phases but for only the add function. After the function is executed completely, the execution context created for that particular function will get deleted automatically.

Now, when the whole javascript program is executed completely the GEC will also get deleted.

A Call stack is also maintained by javascript. Call stack maintains the "Order of execution of execution contexts". It works similarly as a stack whenever a new function invoked its execution context is pushed into the call stack.

The GEC is at the bottom of the call stack as it is created at the starting of the program and all the new execution context is pushed on top of it. So when a function's execution gets finished its execution context is also removed from the call stack.

I hope you would have found this article beneficial.
Thank you for reading through this article.

How Javascript Works!!!

namitmalasi — Fri, 04 Dec 2020 15:54:03 +0000

"Javascript is a synchronous single-threaded language". JS is single-threaded which means only one statement is executed at a time. Synchronous execution usually refers to code executing in sequence. In sync programming, the program is executed line by line, one line at a time.

Everything in JavaScript happens inside an "Execution Context”. Execution Context can be assumed as a container or a body where JavaScript code is executed.

Execution Context has two components:
a) Variable Environment (a.k.a Memory)

All the variables and functions are stored in Variable environment in the form of key-value pairs. For example,

var firstVariable = 100; //line 1
function test() { //line 2
var secondVariable = 200; //line 3
console.log(firstVariable + " " + secondVariable); //line 4
}
test();

In the above code snippet, the variables firstVariable and secondVariable will be stored with their values and the function test will be stored with all its code as it is.

b) Thread of Execution (a.k.a Code)

In the Thread of execution, the JavaScript code is executed line by line.

var firstVariable = 100; //line 1
function test() { //line 2
var secondVariable = 200; //line 3
console.log(firstVariable + " " + secondVariable); //line 4
}
test();
The above code will be executed line by line from line 1 to line 4.

This was just an overview of how javascript works behind the scenes. I hope you would have found this article beneficial.
Thank you for reading through this article.

Hactoberfest 2020 Badge

namitmalasi — Fri, 04 Dec 2020 06:19:02 +0000

Happy to share that I have received my hacktoberfest 2020 Challenge Badge. This is my first ever hacktoberfest participation, and it was really helpful for me to explore and contribute to open source projects.

Hacktoberfest is really great platform, contributing to open source projects is a great way to improve your skills, gain confidence, and practice coding.