From Click to Content: Unwrapping the Inner Workings of Browsers and Websites

Welcome to the tech universe, where websites take the lead as an essential tool, guiding us through a dynamic digital world These versatile apps work like wands, converting raw data and organising them into interactive web pages that connect us to more information. Embark on an adventure and discover the hidden secrets of the web! Know their priorities, analyze their inner workings, and witness their seamless work with servers to bring websites to life 🌐✨

🕵️‍♂️ Anatomy of a Web Browser

Ever wondered what makes our web browser work? Let’s take a peek under the hood! The “ User Interface (UI) ” is where you click, type and see dynamic UI, the “ Browser Engine ” is the brain that transforms HTML documents and other resources of a web page into an interactive visual representation on a user’s device, “ Networking ” is the explorer, fetching web data. And the JavaScript Interpreter? The “ JavaScript Interpreter ” understands the language of the web, making those interactive features come alive.
These components collaborate turning our browser into a powerful gateway to the digital wonders of the internet! 🚀🌐

📚 Web Dev Fundamentals

1. Clients: A client is a person making a request to the server from his/her mobile / PC to access information from the internet
   Each client piece [ Mobile / PC ] has a unique address called IP Address.
2. URL (Uniform Resource Locator): A URL is the complete web address used to locate and access resources on the internet. It includes the protocol (http/https), domain name, and path to the specific resource.

3. Internet Protocol [IP] Address: An IP functions as a distinct digital postcode assigned to every device in the internet network, ensuring accurate data delivery.
→ If the device isn’t connected to the internet: No IP address will be assigned.
→ Whether or not the device is connected to the internet: The MAC address remains permanent.

IP Address Example

https://192.30.253.45:443
Protocol --> https
IP address --> 192.30.253.45
Port Number --> 443

Defult Port numbers
http: 80 & https: 443

4. Server: A server is like a powerful computer that stores and manages information, serving it to users’ devices upon request. It’s the backbone of websites and applications, delivering the data users need.

5. Domain Name System [DNS]: DNS is like the internet’s phonebook. It primarily converts human-readable domain names to IP addresses that computers understand, helping our browsers find websites.

6. Root Name Server: The root name server is like the internet’s main directory assistant. It helps our computer find specific top-level domain servers (like ‘.com’ or ‘.org’) when we are looking for a website, it guides us to the correct Top-Level Domain (TLD) server.

7. TLD (Top-Level Domain): TLD is the last part of a domain name, like ‘.com’ or ‘.org.’ It signifies the website’s category or purpose, helping organize and identify different types of websites.

8. SLD (Second-Level Domain): SLD is the part of a domain name preceding the TLD, like ‘example’ in www.example.com. It’s often chosen to represent a brand, business, or entity.

TOP LEVEL DOMAIN  : Second-Level Domain

1. Commercial     : .com
2. Government     : .gov
3. Education      : .edu
4. Country Code   : .in , .uk

Here TLD are commercial , government etc
& SLD are .com , .gov .edu
the TLD's are used to denote commercial organizations, 
while the SLD's is often used in commercial websites.

👩‍💻 Web Site Working: Behind the Veil

Web Site: Behind the Scenes

1. User Enters URL: A user types a URL like Google.com into the browser and hits enter.
2. Local DNS Request: The browser, not knowing the IP address, consults the Local DNS.
3. Root Name Server Inquiry: If the Local DNS doesn’t know, it contacts the Root Name Server. This server is like a global directory. Here, the Local DNS requests the Root Name Server for the TLD (top-level domain) address. TLDs serve to recognize certain elements of a website, such as its purpose, owner, or geographical area and returns.
4. TLD Server Engagement: The Local DNS contacts the TLD (in this case, ‘.com’) server. The TLD server says, “Sure, Google.com is managed by this specific Name Server.”
5. Sub-Level Domain Request: The Local DNS, armed with this info, contacts the Name Server for the specific domain (Google.com) to get the IP address.
6. IP Address Retrieval: The Name Server responds with the IP address of Google.com, and the Local DNS holds onto this.
7. Local DNS Response: The Local DNS tells the browser, “Got it! The IP for Google.com is XYZ.”
8. Browser Requests Web Server: Now, the browser directly asks the Web Server at the IP address XYZ for the webpage files, like asking the shopkeeper for specific items.

🧐FAQ

1. Can the Server also act as a client ?

Yes, servers can also act as clients. This is often referred to as a client-server model, where a device can serve as both a server and a client, depending on the context of the interaction.

For example:

1. Web Servers as Clients: A web server that hosts a website can also act as a client when it makes requests to another server, such as a database server, to fetch or update data needed to serve a user’s request.
2. API Requests: A server providing an API (Application Programming Interface) can make requests to another server to fetch external data or services.
   Suppose we are developing a Stock Market Education platform where we aim to display diverse stock market and cryptocurrency charts. To achieve this, we’ll retrieve the necessary data by making API requests to another server.
3. User Authentication with OAuth
4. Database Replication: In a large web application with multiple servers, maintaining synchronized databases is crucial. One web server, functioning as a client, may periodically request data updates from another server. This process ensures that its own database stays updated, promoting consistency across the entire application.

🤩 Conclusion :

In summary, our exploration of the tech world has revealed how websites function, from browsers to servers and everything in between. Grasping how clients and servers work together allows us to surf the web smoothly. As we moved ahead with the process, we discovered that servers, while typically doing one job, can also act like clients in certain situations, making the web even more interesting and flexible

📚 Earlier Post:

👉 The Art of Lazy Loading
👉 Bundling: Optimizing Web Performance
👉 Optimizing Web Performance: Tree Shaking Explained
👉 What is npm?

🔍 Coming up next:

👉 Client Side Rendering
👉 The Trio Of Web Development

Stay tuned for more insights into the world of ReactJs development! 🚀📦

🤝 Let’s connect on LinkedIn: https://www.linkedin.com/in/omkarbhavare/