Being a Front End developer is exciting, but what internet concepts are crucial for you to understand?

In this article, you'll explore significant internet concepts, such as how the internet works, the devices used, and more…

To begin, let's illustrate these concepts through a story. Picture two individuals, Amy and Ben. Amy, a software developer, has designed a website. This website requires storage on an internet server. Hence, she opts to host it with the Vercel company.

Generally, to enable user access, a website must be hosted on a server.

Ben aspires to access Amy's website. But where is it located? Ben reaches out to Amy, inquiring about the URL (Uniform Resource Locator) for the website. She responds: amywebsite.com.br. This URL functions as the website's name. For instance, my name is Arthur Assuncao. With my name, you can locate me on Earth. However, you might ponder: "Sure, I know your name, but where do you reside?" Precisely, how would you determine my address? You'd need a list correlating names and addresses. Similarly, the internet operates.

To access Amy's website, Ben uses an internet browser like Google Chrome. He enters amywebsite.com.br and hits Enter. Yet, amywebsite.com.br is merely a name. As we've learned, locating someone by name is complex. So, how does the browser find Amy's website?

The Domain Name System (DNS) holds the key.

When Ben seeks Amy's website, the browser contacts a DNS Server. This server, in simple terms, maintains a list matching names and IPs (Internet Protocol addresses).

An IP serves as a device address.

The browser identifies the name (amywebsite.com.br) and retrieves the related IP. Subsequently, the browser employs the IP to access Amy's website. This process is depicted in Figure 1.

A Closer Look

Now that we've grasped the basics of internet functioning, let's delve deeper. Refer to Figure 2, illustrating a mind map showcasing the internet's operation. We'll leverage this map to elucidate all the concepts.

We'll commence with the Web term presented in Figure 2. The Web encompasses the entire internet. Visualize it as an expansive spider web where each intersection signifies a device. The map features a world map overlaid with internet cables from SubmarineCableMap.com. Countless submarine cables traverse the globe, interconnecting countries. Can you fathom the repercussions of a cable rupture?

Contemplate that the internet consists of myriad devices, including computers, mobile phones, smart devices, etc., interconnected with each other.

Each intersection on the map is a Node. A network node acts as an endpoint, receiving, generating, storing, and transmitting data. Some nodes function as Routers, forwarding network data (packages) from one side to another.

Drawing an analogy, think of the internet as your home, with routers connecting devices such as computers, smartphones (cell phones), and IoT devices (e.g., smartwatches, virtual assistants like Alexa Echo Dot, smart LED light bulbs). However, the internet boasts millions of routers and devices.

Nodes can also serve as Servers and Clients. Servers disseminate data to clients, which retrieve data from servers, forming the Client-Server architecture depicted in Figure 3. Here, multiple clients request and receive services from servers.

Where are these servers on the internet? Analogous to your home's address (e.g., 204 Deptford High St or zip/postal code SE8 3PR), servers bear Internet Protocol (IP) Addresses—typically, four binary numbers, each with eight digits. In decimal, each number ranges from 0 to 255, or in binary, from 00000000 to 11111111. For instance, one of Facebook's IPs is 31.13.74.35. If binary-to-decimal conversion seems puzzling, consult ChatGPT or search online.

To unearth a website's IP, execute this command in a Linux terminal:

dig thewebsite.com

Servers host services like Sites and Web systems—YouTube, blogs, cloud services, databases, and more. Each service employs a Protocol dictating message transmission. Prominent internet protocols include HyperText Transfer Protocol (HTTP) and HyperText Transfer Protocol Secure (HTTPS). The latter emphasizes end-to-end security via SSL (Secure Sockets Layer) or TLS (Transport Layer Security) encryption.

Furthermore, web services/sites generally possess a URL (Uniform Resource Locator). This human-readable internet address (e.g., https://www.arthurassuncao.com/posts/aprenda-a-usar-o-github-para-aumentar-suas-oportunidades-profissionais-440j) operates similarly to your address and identification number (CPF in Brazil). People primarily use names, just as websites use URLs for simplicity.

Understanding URLs and DNS in Internet Architecture

A URL consists of up to six components, as depicted in Figure 4:

• Protocol / Scheme: Defines how messages are sent and received.
• Subdomain (optional): Part of the main domain. Imagine a building with multiple apartments, each acting as a subdomain. Similarly, it can represent departments in a company.
• Second-level domain: Primary domain part, like arthurassuncao.
• Top-level domain (TLD): Final segment of a domain name. It corresponds to the highest level in the hierarchical Domain Name System (DNS), following the root domain. Examples include .com, .com.br, .dev, etc.
• Sub-directory (optional): Sub-directory within the domain.
• Slug or Page (optional): Page or endpoint name.

The second-level domain and top-level domain jointly form the website domain. This domain is more user-friendly than an IP Address. Converting a domain to an IP Address requires a designated server—the DNS (Domain Name System) server.

Before delving into DNS, let's revisit Clients in Figure 2. Currently, Clients encompass computers, smartphones, IoT devices, and other user devices. These devices access websites and services through browsers such as Google Chrome, Microsoft Edge, and Mozilla Firefox. But how do they achieve this using domain names instead of IP addresses?

Picture a world where each website's IP Address must be memorized—impractical, right? Instead, you memorize domains, e.g., arthurassuncao.com. Credit the DNS Server for this convenience. In essence, this server stores domain names (e.g., arthurassuncao.com or facebook.com) alongside their respective IP Addresses.

When a user accesses a website by its domain, the client device must learn the domain's IP Address. Within the device, a table stores Accessed Domains and their IP Addresses. Upon accessing a domain, the device checks this table. If the IP Address isn't present, the device queries the DNS Server for the domain's IP Address.

Subsequently, the client device utilizes the IP Address to access the website. Figure 5 illustrates this scenario: the client queries the DNS Server for the IP Address of the arthurassuncao.com domain, the DNS Server replies with IP Address 76.76.21.21. With this IP, the client sends a request to the server, which responds.

As mentioned, when we access a website, e.g., via Google Chrome, the DNS process unfolds imperceptibly. Besides that, your device uses a local cache for DNS, as such a local DNS and other mechanism, like Hosts file.

Simultaneously, we often use Google Search. Upon searching, a list of sites appears, ordered by the search engine's internal rules. However, sites can optimize their position using SEO (Search Engine Optimization) techniques.

SEO encompasses strategies to enhance a website's visibility.

Who crafts and applies these sites and SEO techniques? We access websites and web systems developed by software developers or even software engineers.

These developers employ backend and frontend technologies. Backend encompasses server-side components employing databases, languages like Python or Java, and APIs (Application Programming Interfaces) connecting frontend and backend. Meanwhile, Frontend is the visual and interactive aspect of systems, leveraging at least HTML (HyperText Markup Language), CSS (Cascading Style Sheets), and JS (JavaScript).

• HTML outlines page structure and content.
• CSS enhances visual aspects like element positioning, colors, sizes, fonts, etc.
• JS introduces actions and animations. While CSS enables animations and dynamic functions, JS is more potent, exercising control over all elements.

In the lower right corner of Figure 2, JS generates a DOM (Document Object Model)—a tree-like programming interface representing web documents.

In the contemporary frontend landscape, tools like:

• ReactJS: A JavaScript library employing JSX (HTML within JS).
• SASS, CSS Modules, or similar: Tools for generating CSS code.
• TypeScript: A JavaScript superset, an enhanced JavaScript.

For a glimpse of a frontend project, visit https://github.com/ArthurAssuncao/pomoTraining.

More insight into backend and frontend is available in the article Why You Should First Learn Front End and Not Back End.

Finally, the complex map of Figure 2 was explored, deepening our comprehension of internet mechanics.

Let's go beyond

In forthcoming articles, you'll delve into Client-Server Architecture, DOM (Document Object Model), and the web layers (HTML, CSS, and JS). This journey will extend your knowledge of the HTML markup language.