Forem: Josué Makuta

What Happens When You Type www.google.com and Press Enter?

Josué Makuta — Fri, 13 Oct 2023 15:22:23 +0000

Have you ever wondered what happens when you type www.google.com and press enter?
It may seem like a simple process, but there are many steps involved in making this happen. In this article, we will take a closer look at the different components that come into play when you type a URL into your browser and press enter.

Without further ado, let's jump into it

The first thing that happens when you type www.google.com is that your browser sends a DNS (Domain Name System) request to a DNS server. Now, what is a DNS server ? How does it work ? Why do we need it ?

1. DNS Server

The DNS server is responsible for translating the domain name (www.google.com) into an IP address that your computer can understand. This is necessary because computers communicate with each other using IP addresses eg : 192.168.0.0 , not domain names.

Once your browser has the IP address for www.google.com, it establishes a TCP (Transmission Control Protocol) connection with the server hosting the website.

2. TCP/IP

TCP is a protocol that ensures reliable communication between two devices over a network. It breaks data into packets and sends them across the network, reassembling them at the other end.

3. Firewall

Before the connection is established, your computer's firewall may check to see if the connection is allowed. A firewall is a security system that monitors and controls incoming and outgoing network traffic. If the firewall determines that the connection is not allowed, it will block the connection.

4. HTTPS/SSL

If the connection is allowed, your browser will attempt to establish an HTTPS (Hypertext Transfer Protocol Secure) connection with the web server. HTTPS is a secure version of HTTP, which is the protocol used to transfer data between your browser and the web server. HTTPS uses SSL (Secure Sockets Layer) or TLS (Transport Layer Security) to encrypt the data being sent between your browser and the web server. This ensures that the data cannot be intercepted and read by anyone who may be listening on the network.

5. Load-Balancer

Once the HTTPS connection is established, your request is sent to a load-balancer. A load-balancer is a device that distributes incoming network traffic across multiple servers. This is done to ensure that no single server becomes overloaded and that the website remains available to users. Load-balancers use various algorithms to determine which server should handle each request, such as round-robin, least connections, or IP hash.

6. Web Server

The load-balancer forwards your request to one of the web servers hosting the website. The web server is responsible for processing your request and generating a response. This response may include HTML, CSS, JavaScript, images, or other resources that make up the website. Web servers like Apache, Nginx, or Microsoft IIS handle the request and serve the appropriate files to your browser.

7. Application Server

If the website has dynamic content, your request may be forwarded to an application server. An application server is a server that runs applications that generate dynamic content. These applications may include server-side scripting languages like PHP, Python, or Java. The application server may interact with a database to retrieve data that is used to generate the response.

8. Database

If the application server needs to retrieve data from a database, it sends a request to the database server. The database server retrieves the requested data and sends it back to the application server, which uses it to generate the response. Databases like MySQL, PostgreSQL, or MongoDB are commonly used to store and retrieve data for dynamic websites.

Conclusion

As you can see, there are many steps involved in the process of loading a website. From the DNS request to the database server, each component plays a crucial role in ensuring that the website is loaded quickly and reliably. Understanding how these components work together can help you troubleshoot issues when they arise and appreciate the complexity of the modern web. Next time you type www.google.com and press enter, you'll have a better understanding of the behind-the-scenes processes that make it all possible.

How to expose Vite local instance to the network, Eg. Mobile Device

Josué Makuta — Tue, 30 May 2023 10:17:02 +0000

What is Vite?

Vite (the French word for “fast”) is a new build tool for frontend web development.

Vite promotes a faster development experience by setting up a development environment for frameworks like Vue, TezJS, and React and even for Vanilla JavaScript apps with a dev server.

Learn more about Vite here …

Vite local instance exposition

When you configured your web application development using Vite, your package.json file scripts look like this :



{
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview"
    }
}

Now when you run the command :



npm run dev

Here’s what the output might look like :

The local instance is now running on http://localhost:5173/,

Note that it shows also the Network: Use — host

What’s that? Vite gives way to expose the local instance to the local network in cases where you would like to test or view your web application on another device, let’s say, on your mobile device.

There are 3 ways to do it:

By adding --host option to the scripts section in package.json as shown below :



{
    "scripts": {
        "dev": "vite --host",
        "build": "vite build",
        "preview": "vite preview"
    }
}

By adding the following configuration in the vite.config.js file like so:



server: {
    host: true
}

Lastly, you can use the --host option with the npm run dev command like so.



npm run dev --host

Now the output should look like this :

Now the Vite local instance is available on the network address provided.

Hope you found this article helpful, 👏👏👏.

Thanks for reading!

Express JS: Request Object — Req

Josué Makuta — Tue, 30 May 2023 09:44:20 +0000

Express Js, What is it ?

Express JS is a Node.js framework designed to quickly build API’s web applications, cross-platform, mobile apps, and make node js easy. Express js framework makes the server-side (backend) management of applications easy.

Now that we know what is Express Js, Below is the overview of this module :

Overview

What is the Request Object in Express JS?
How to use the Request Object Req.
Most used properties of the Request Object

Requirements: Basics of Javascript, NodeJs, and Express Js

Request Object, What is it?

Before diving into the ocean, we must understand the underlying concept of Express Js: Middleware.

In Express Js, Middlewares are functions that are executed after a request is sent to the server and before the server sends a response. They are between the user request and the server response and have access to them therefore they can modify them as shown below :

User request >|< Middleware >|< Server response

Here is an example of middleware :



app.use((error, req, res, next) => {
    console.log(req.url);
})

From this code above, we have a middleware that prints out in the console the URL of the user request, app being the express application. Learn more about writing middleware here.

The req is an object that is passed as an argument to the middleware function, represents the HTTP request and has properties for the request such as query string, parameters, body, HTTP headers, and so on.

In this article, conventionally the object is referred to as reqbut its actual name is determined by the parameters of the callback function in which you’re working.

Properties of the Request Object

The request object has multiple properties and each one has a specific purpose. To check all the properties of the request object, Here is a code that prints it out.



app.use((error, req, res, next) => {
    console.log(req);
})

Now let’s take an overview of some useful properties of the request object :

req.path
Contains the path part of the request URL.



// example.com/users
console.dir(req.path)
// => '/users'

res.body
It holds key-value pairs of the data in the user request body. By default, it is undefined, and is populated when you use body-parsing middleware such as express.json() or express.urlencoded().

Here is how it is used, the app is our express app.



// for parsing application/json
app.use(express.json()) 
//for parsing application/x-www-form-urlencoded app.use(express.urlencoded({ extended: true }))
//Here is a post resquest, its middleware prints out the body of the requestThe request  object has multiple properties and each one has a specific purpose. To check all the properties of the request object, Here is a code that prints it out.
app.post((req, res) => {
  console.log(req.body);
})

req.params
This property is an object containing properties mapped to the named route “parameters”. For example, if you have the route /user/:name, then the “name” property is available as req.params.name. This object defaults to {}.



// GET /user/tj
console.dir(req.params.name)
// => 'tj'

req.ip
Contains the remote IP address of the request.



console.dir(req.ip)
// => '127.0.0.1'

req.hostname
Contains the hostname derived from the Host HTTP header.



// Host: "example.com:3000"
console.dir(req.hostname)
// => 'example.com'

req.headers
This object receives the headers from the client, i.e. the data sent by the browser.



console.dir(req.headers);
// => {
  host: 'localhost:4200',
  connection: 'keep-alive',
  'cache-control': 'max-age=0',
  'sec-ch-ua': '".Not/A)Brand";v="99", "Google Chrome";v="103", "Chromium";v="103"',
  'sec-ch-ua-mobile': '?0',
  'sec-ch-ua-platform': '"Linux"',
  'upgrade-insecure-requests': '1',
  'user-agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36',
  accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
  'sec-fetch-site': 'none',
  'sec-fetch-mode': 'navigate',
  'sec-fetch-user': '?1',
  'sec-fetch-dest': 'document',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7',
  'if-none-match': 'W/"20-xayHqON6qb0v2OGf3SWBojKNliI"'
}

req.app
This property holds a reference to the instance of the Express application that is using the middleware.

Let’s note that the express request object includes also some methods such as :



req.accepts(types)
req.acceptsCharsets(charset [, …])
req.get(field)
req.is(type)

And so on …

Conclusion

The request object req is generally passed to the middleware to enable the developer to modify or customize the req received to the server. It has multiple properties and each one has a specific purpose. So far we have seen some useful properties of that object but feel free to check all the properties of the request object in the official documentation of express.

Hope you found this article helpful, 👏👏👏.

Thank you for reading !

Recursion explained !

Josué Makuta — Tue, 30 May 2023 09:14:34 +0000

Let's talk a little bit about Recursion 😎

Have you ever wondered what recursion is and how it works? If so, you are not alone. Recursion is one of the most powerful and elegant techniques in programming, but also one of the most confusing and intimidating for beginners.

In this article, I will try to explain recursion in a simple and funny way, using examples that will hopefully make you laugh and learn at the same time.✌

What is recursion?

Recursion is a method of solving problems by breaking them down into smaller and simpler sub-problems until they are so easy that they can be solved directly. Then, the solutions of the sub-problems are combined to form the solution to the original problem.

The key idea of recursion is that a function can call itself within its own definition. This is called a recursive call.

A recursive function must have two parts: a base case and a recursive case.

The base case is the simplest scenario where the function can return a value without calling itself. The base case acts as a stopping condition for the recursion.

The recursive case is where the function calls itself with a smaller or simpler input. The recursive case acts as a way to reduce the problem size and approach the base case.

An example of recursion

Let's look at an example of recursion: calculating the factorial of a positive integer n. The factorial of n, denoted by n!, is the product of all positive integers from 1 to n.

For example, 5! = 5 x 4 x 3 x 2 x 1 = 120.

How can we write a recursive function to compute n!? Well, we can use the following observation:

This is our base case.
The factorial of 1 is 1. ⇒ 1! = 1

This is our recursive case.
The factorial of n is n times the factorial of n-1.

5! = 5 * 4! 4! = 4 * 3! 3! = 3 * 2! 2! = 2 * 1! 1! = 1

Using these two facts, we can write a recursive function in pseudocode as follows:

function factorial(n){
  if(n == 1){
    // base case
    return 1;
  } 
  else{
    // recursive case
    return n * factorial(n-1);
  } 
}

Let's see how this function works for n = 5. We start by calling factorial(5). Since 5 is not equal to 1, we enter the else branch and return 5 * factorial(4). But before we can evaluate this expression, we need to know what factorial(4) is. So we make another recursive call to factorial(4). This process repeats until we reach the base case:

factorial(5) = 5 * factorial(4)
= 5 * (4 * factorial(3))
= 5 * (4 * (3 * factorial(2)))
= 5 * (4 * (3 * (2 * factorial(1))))
= 5 * (4 * (3 * (2 * 1))) # base case reached
= 120

As you can see, each recursive call reduces the problem size by one, until we reach the simplest case where we can return a value directly. Then, we use that value to compute the previous call, and so on, until we get back to the original call.

A funny analogy of recursion

If you are still confused by recursion, don't worry. Here is a funny analogy that might help you understand it better.

Imagine that you are in a room with a mirror on one wall. You decide to take a selfie with your phone, but you want to capture the mirror in the background. So you stand in front of the mirror and point your phone at it.

What do you see on your phone screen? You see yourself holding your phone, but also another image of yourself holding your phone inside the mirror. And inside that image, there is another image of yourself holding your phone inside another mirror. And so on, infinitely.

This is like recursion. Each image of yourself holding your phone is like a recursive call to a function that takes a picture of yourself holding your phone. The first image is like the original call, and each subsequent image is like a smaller or simpler input.

But where is the base case? Well, there isn't one in this analogy. That's why you see an infinite sequence of images. In reality, however, there are some factors that limit the recursion, such as the size of your phone screen, the resolution of your camera, or the distance between you and the mirror.

These factors act as stopping conditions for the recursion. They prevent it from going on forever and make it possible to get a final result.

The moral of this analogy is that recursion can be fun and fascinating, but also tricky and dangerous. You need to be careful when using it!

Hope you found this article helpful, 👏👏👏.

Thank you for reading!