DEV Community: Akshaay9

How does the web work?

Akshaay9 — Sun, 13 Jun 2021 14:37:12 +0000

If you are a person who is learning web development or just an average internet user then you might have stumbled across these questions

How does the web work exactly?
How does the browser manage to get all the data by just an URL.
What is all the stuff that happens behind the scenes the moment you type in a URL and the browser renders something.

if yes, then you are in a right place, in this article I will try to answer all the above questions so it would help you understand things one level deeper and appreciate how things work behind the scenes.

Lets goo🚀🚀🚀

Before I jump in and start explaining all the things, I would like to introduce you to some of the technologies and terms which plays a crucial part when it comes to the internet, Later on, we will connect all the things we learned and try to make more sense of it.

1) Internet

The Internet is a vast network that connects computers all over the world. Through the Internet, people can share information and communicate from anywhere with an Internet connection.

In plain words, its nothing but a network of networks, Its capability is so powerful that it can be used for all the purposes which require you to transfer information on one or another form which accessible to anyone who is connected to a network

2) IP address

An Internet Protocol address (IP address) is a numerical label assigned to each device connected to a computer network that uses the Internet Protocol for communication

Every device that is connected to the internet will have some kind of IP address 172.16.254.1 assigned by your internet service provider(ISP). IPs are the identifier that allows data to be transferred between 2 devices and helps us to differentiate between individual devices that are connected on the internet. They are not assigned randomly, they are mathematically products by Internet Assigned Numbers Authority (IANA),

3)URL(Uniform Resource Locator)

A Uniform Resource Locator (URL), colloquially termed a web address, is a reference to a web resource that specifies its location on a computer network and a mechanism for retrieving it

To map the resource that present on the internet, URL is assigned to them, every Valid URL present on the internet will be pointing to the resource that is required to run the application. again do not get confused between URL and a Domain

URL is a complete address that would help you to find a resource online whereas a domain is what comes after @ in an email address or www in a website address

4)DNS(Domain Name System)

The Domain Name System (DNS) is a hierarchical and decentralized naming system for computers, services, or other resources connected to the Internet or a private network.

DNS is like a phonebook, which plays a very crucial role when it comes to the internet as we discussed earlier DNS is the one that helps us to match the IP address that is associated with the URL, to retrieve data from its database.
Human interaction with the internet is through URL since it is difficult to remember the IP address of the URL, whereas the browser interacts through IP address.

4)Server

A server is a computer or system that provides resources, data, services, or programs to other computers, known as clients, over a network.

A Server is just a computer that is connected to the internet 24/7, which constantly delivers all the resource from the database that is required to render the app on the browser, You can make your personal computer as a server to send all the necessary resources unless it is online 24/7 and will handle a lot of users, There are many types of servers, including web servers, mail servers, and virtual servers.

5)Browser

A computer program with a graphical user interface for displaying and navigating between web pages.

I am pretty sure you are this article on some browser :)
Brower plays a really important role when it comes to the web, It helps us to interact with the web more seemingly, and trust me when I say this, browsers are one of the best technology presents on that internet and it is much more powerful than what we think it is, we will learn browsers deep role in web on upcoming points.

Now that we have learned all the necessary technology, let us connect all the dots and try to make more sense of it.

Let us imagine a scenario where you just type a valid URL, lets see what happens step by step by connecting all the stuff we learned now

The moment you hit an URL, the browser tries to get the IP address associated with the URL to establish a connection and get all the necessary resources, So before going to the DNS server to get the IP address, the browser will search in these places

Browser cache : At the first browser checks its cache, the browser keeps a record of all the DNS records for a while so it would be easy for it to get the IP address,
OS cache : Next it will try to search in your operating system cache for the IP address
Router cache : if you are using a router then it will check in the router cache too to get the IP address
Resolver server : It is nothing but your internet service provider who keeps a record of your browsing history plus the IP address associated with it

If the browser unable to locate the IP address then your Resolver server(ISP) will go to DNS to find one

2) Getting the IP address from Domain Name System

It won't straight away try to search the IP address associated with the URL, first, the request will be sent to root level to check if your website domain falls under top domains like .com, .in, .edu, etc:-, if it matches then it will tell our resolver to search in Top level domain
Now this TLD server will give the IP address associated with it, and then ISP will try to store it in its cache so that it won't have to do it again and again

3) Connection is established between the browser and the server

To share data between two devices on the internet, a connection has to be established. To communicate over the internet, TCP/IP protocol is followed, later on, a connection will be built between the client and the server over TCP 3-way handshake

3) Sharing of information between server and client

Once after successful establishment of a connection, instead of getting all the data related to the application at once, the browser only asks for the file associated with the particular route for ex:-/, /home, etc:-.
Once the browser starts getting the files associated with it, it tries to parse the file from top to bottom and if it found any tag such as <Link> or <Script> and if that tag is directing towards a file directory it will try to get it from there or if it is pointing towards some URL then same above procedure is followed.
Again this sharing data is not one way, for example, if the user does some action then the browser will send a Post or Delete or Update request to the server to store the users' action on its database, so this data transfer keep happening between client and server the moment he changes his route or does some kinda action that is programmed to store in database

Now the important part

4)Status codes

When you ask the server for data from the database, not only data but it will also return many things and one among them is status code,
you can check this by going to the Network tab by holding ctrl+shif+i or right-click and selecting inspect element,
normally u will be able to see some status codes such as 200 for success 404 for not found and 500 for error etc:-, along with the time taken for the API to get the data from the database, etc:- you might see this kinda images some or the other time on the internet when their server is down

There are many reasons why this would happen, one of the few is when total traffic of your website increases drastically and your server could not handle that many requests or some error happened in your code then to you can see these kinda images

RandomFact

In the field of high-frequency trading, every millisecond is worth millions of USD.
The 4,600 km ultra-low latency submarine cable cost over 300 million dollars to build. Known as the Hibernian Express, it connects London and New York, and instead of carrying voice or general internet data, it beams financial data to money marketers and hedge fund traders.
It is one of the fastest cables over the Atlantic, delivering data from New York to London in 59.6 milliseconds instead of the previous peak speed of 64.8 milliseconds.

Those five milliseconds may not sound like much, but they will mean a lot to the few electronic trading firms that will have exclusive access to the connection.

That's all folks for today's topic, hope you guys understood what goes behind the scenes and how things happen in seconds so that the user does not have to wait for anything.
Thank you.

What is bootstrap and why you Should and Should'nt be using it?

Akshaay9 — Wed, 25 Nov 2020 16:01:59 +0000

Hello, my name is Akshay, i completed my Bachelors in mechanical engineering and currently self teaching myself Web development.
In this article we are going to learn about What is bootstrap and why/when one should/should'nt be using it, Lets get started.

So if you are reading this probably(on an average case )either you are begining/intermedite in CSS or you would have finished CSS tutorial, and i am going to cover all the above cases.

So what is BootStrap?

So bootstrap is a frontEnd framework(CSS and few Js to be precise) used to create beautiful websites,which is created by Twitter for their employees(Dev's) so they can re-use all the existing style,since majority of companie have very minimalistic style and colors and they dont want their employee grind through whole desigining process.

So How can we use Bootstrap in our Project?

Well it is very simple, u can download BootStrap using Node,u can use various extensions available in VS code to create a boiler plate or we can just copy paste CDN links in our HTML page.
TO learn to add BootStrap design in our HTML then first go through Bootstrap documentation to undestand and to know what are the different styles/components offered by bootstrap BootStrap Documentation IF you had gone through it then you would known that its simple as adding a bootstrap class name to your Class tag to give that design.

So when and why one Should'nt be using Bootstrap?

So if you are a beginner/intermediate CSS learner then i would highly suggest you to Complete the CSS course, then use bootstrap,
i know that it must be feeling overwhelming to add beautiful Designs to your website but hear me out..

So Bootstrap is pretty much interesting, you would think it is easy to add those custom design style, and moreover you would also end up thinking why one need to learn all those CSS when you alredy have custom made style ready for you which is pretty demotivating and take away your design thinking and creativity In fact i crated my first website called TinDOg(catchy :p-) using bootstrap and i was so proud of it, take a look TinDog COde

TinDog Live

If the above thought occurs to you, then the chances of you learning new CSS stuff will be pretty low which intern would affect your CSS learning growth which directly affect you in interviw
Last and final thing is you get used to it if you use it heavily, then you might also go through i went thorugh, i was also overwhelmed by it at begining but after some times i was getting bored of those Button styles, whenever i would see a website made of Bootstrap i would pretty much easily recognise it and it would pretty much decrease my interest in exploring the website further.

So when and why one Should be using Bootstrap?

If you are a guy who just completed CSS and planning to move on to Javascript or probably doing some projectcs/task to improve your Javascript DOM/React then i would highly suggest you to Use bootstrap, here is why

If you are doing/practising DOM/React then nobody wants you to spend hours just designing/perfecting a button, it doesnt really make sense inturn i want you to put your complete effort on Javascript DOM/Project, doing this you wont loose much time/energy and you would'nt feel the burnout. When it comes to front end people spend majority of their time learning HTML/CSS becuase those were the first terminologies we hear when it comes to front end, by the time we reach Javascript, we would'nt be having that much of Energy/enthusiasm, and here is the major thing, people see few website/app think Web Dev is only about HTML/CSS, i did too,until i was introduced to the language of Gods(Jaavascript :-p) Then i learnt one thing hard way that whatever companies present out there, they manjorly focuses on Building/designing new stuff rather than just giving new colors/ border, that is why we see FAANG and allmost all tech giant use same pattern in their parent as well as child products, so that is why even they create CSS component library and UX designers so their DEV's doesn't spend much time on choosing colors and borders, if Dev's have OCD then thats a different topic, by following my first point on why one should youse,one can easily get hold of using CSS custom made component/library and when they end up in Front End dev job in big tech companies they wouldn't feel difficulty in implementing CSS from companies CSS library in to their App.. SO yeah thats it, hope you liked my thought, All the best for your Future