DEV Community: Mohamed Amine Fh

What happens when you enter a URL in your browser?

Mohamed Amine Fh — Fri, 09 Feb 2024 19:17:58 +0000

Have you ever wondered what happens when you open your browser(Chrome, Firefox, ...) type your preferred website, and hit Enter?

What is going on behind the scenes?

In this blog, we'll cover what happens there.

before we get started we need to understand a few things IP addresses, servers, DNS.

What is an IP address?

An IP address is a unique address that identifies a device on the internet or a local network. IP stands for "Internet Protocol," which is the set of rules governing the format of data sent via the Internet or local network.

It is a string of numbers separated by periods. IP addresses are expressed as a set of four numbers — an example address might be 192.158.1.38. Each number in the set can range from 0 to 255. So, the full IP addressing range goes from 0.0.0.0 to 255.255.255.255

-So every computer connected to the internet is assigned to a unique IP address-.

What is a server?

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

In simple terms, a server is a computer (laptop, desktop, smartwatch, smartphone, ...) that can communicate with other computers.
In most cases nowadays we refer to servers as those that exist in the cloud provided by giant data center companies (Google, Facebook, Amazon, ...).

What is a DNS?

The Domain Name System (DNS) is a special server that works as a phonebook of the Internet. Humans access information online through domain names, like google.com. DNS translates domain names to IP addresses.

Each device connected to the Internet has a unique IP address (as we mentioned above) which other computers use to find the device. DNS servers eliminate the need for humans to memorize IP addresses such as 12.45.56.67.

so think of DNS as a translator from human-readable domain names to computer-readable IP addresses.

So after we cover the above concepts it should be easier for us to understand the rest.

TCP/IP connection

When you type https://www.google.com in your browser, your browser will go to the DNS, get the IP address associated with that URL, and start a TCP/IP connection with the server that has that IP address.

Web servers

A web server is a computer that runs websites. It’s a computer program(must be installed) that distributes web pages. The basic objective of the web server is to store, process, and deliver web pages to users(web browsers). This intercommunication is done using Hypertext Transfer Protocol (HTTP).

examples of web servers are Nginx, Apache

HTTP(s) connection

websites are transferred through the HTTP protocol, the secure version of that protocol is the HTTPS protocol which tells the browser to make a secure connection with the server using the Transport Layer Security (TLS).

With TLS data exchanged between the browser and the server (password, credit card) is encrypted.

Now that the browser has a connection (TCP/IP) to the server it will follow the HTTP(s) protocol,
so It will send an HTTP request to the server requesting the necessary static files at that location (HTML, CSS, JS, Images, ...).

The server could contain an application server that delivers dynamic content instead of static one based on database data like user profiles or real-time updates like chat messages.

If the request is understood by the server, the server will send back the files to the browser.

Web server VS App server

A web server delivers static web content—e.g., HTML pages, files, images, video—primarily in response to hypertext transfer protocol (HTTP) requests from a web browser.
An application server typically can deliver web content too, but its primary job is to enable interaction between end-user clients and server-side application code—the code representing what is often called business logic—to generate and deliver dynamic content, such as transaction results, decision support, or real-time analytics

Databases

A database is information that is set up for easy access, management and updating. Computer databases typically store aggregations of data records or files that contain information, such as sales transactions, customer data, financials and product information.

Databases are used for storing, maintaining and accessing any sort of data. They collect information on people, places or things. That information is gathered in one place so that it can be observed and analyzed. Databases can be thought of as an organized collection of information.

Presenting the content by the browser

After the server sends back the files, the browser understands how to present the content and starts presenting the content to the user.

That's a pretty straightforward/classic scenario when you type a URL in the browser. nowadays many threats are threatening the internet, Cyber attacks have been rated the fifth top-rated risk in 2020 and become the new norm across public and private sectors.

Therefore the connection to the internet nowadays consists of new layers of security including but not limited to Load-balancer, Firewall.

Load balancer

A load balancer acts as the “traffic cop”👮 sitting in front of your servers and routing client requests across all servers capable of fulfilling those requests in a manner that maximizes speed and capacity utilization and ensures that no one server is overworked, which could degrade performance.

Firewall

A firewall is a network security device that monitors incoming and outgoing network traffic and decides whether to allow or block specific traffic based on a defined set of security rules.

You made it to the end 👏👏. Now you have a clear idea of what will happen next time when you type a URL and hit Enter

Thanks for reading

Clear All pinia stores

Mohamed Amine Fh — Fri, 12 May 2023 11:09:09 +0000

Pinia is a store library and state management framework for Vue.js. Designed primarily for building front-end web applications, it uses declarative syntax and offers its own state management API. it released on November 2019, so let's say it's new to the tech industry.

In this blog i won't share how to use and create Pinia stores you can check that in the docs, but i'm gonna show you how to clear or reset all pinia stores at once.

One of the cases where you want to reset all stores is when you have for example a social media platform and the user logged out, you don't want to keep the last user's data stored in pinia right, so that's where you need to clear all stores.

At the time were this blog is created pinia does not have a built-in function that reset all the stores in its official docs, we hope they'll provide one soon.

So what is the solution here ? one solution i come up with is by resetting the stores one by one, so for example let's say you've created 3 pinia stores

userStore
postsStore
followersStore

We need to go to each of these stores and $reset them one by one, and this achieved like this

import { getActivePinia } from "pinia"

// map through that list and use the **$reset** fn to reset the state
getActivePinia()._s.forEach(store => store.$reset());

See this is the github discussion here

How To use ES6 import & export in your project

Mohamed Amine Fh — Sat, 02 Jul 2022 20:52:35 +0000

Hello Everyone, I hope you're doing well

So After that being said, let's start our blog, so in this blog you'll learn how to use the ES6 features on your client or server project

Frontend aka Client

You've an index.html file and some css and js files, and for most cases you want to separate your Javascript code into multiple files and just import the necessary code into your main file let's say script.js.

The old way is to link those files in your html file and your main js file linked the last,
for exp you have these js files

script.js
keys.js
utils.js
anotherFile.js

and let's say your script.js is the main one, the anotherFile.js is depending on the utils.js and the utils.js is depending on keys.js (depending word here means, that file is importing some data or needing some data from the other file)

this is what it would look like on your html file (index.html) to make your code work

You probably said what is the problem , right?

so in our case here we have a few js files, imagine that you've a big project to work on and let's say 20 js files in your project

I feel you LOL,

so we need to find a Solution, Fortunately there is a solution

Using the ES6 imports & exports (You could use the old ES5 require, but here we'll use a more modern one)

Just we need one script file to include in our html file and in that javascript file we'll include all other features or codes from other files.

1st thing to do is making our file a module so we can use the ES6 features, and that it can be done with the type attribute in script tag

<script type="module" src="script.js"> </script>

and in your files you could export and import other function or anything like so

And that's it for the frontend

Backend aka Server

for the server is by the package.json file (created with the npm init), in that file add a type key and module as its value like this

Yeap That's very much it, you're all set up to use new ES6 feature and speed your development process

Happy_coding

Passing Components as Props in React

Mohamed Amine Fh — Thu, 11 Nov 2021 11:11:55 +0000

Programming is a lifelong learning journey, and most of that journey is asking Questions.

And one of the Q i've asked while learning React is How To pass a component as Props?.

In this short Tutorial we will pass a simple React component (Hello) to The App component as props

Pass it as a Prop

And This is How we use it in App Component.

Components Must Start with an upper case letter.
That's why we rename it Here

That's it Easy Peasy Lemon Squeezy 😎

So this is a Simple Exp though, but when it comes to large Apps, you will definitely need to use this.

Hope you like this Tuto

3 Ways to Add JS to HTML

Mohamed Amine Fh — Sun, 17 Oct 2021 14:22:03 +0000

1. Internal

The 1st one is by placing the <script> tag in the <head> or in the <body>.

if you placed in the body make sure it's before the closing <body> tag, so your scripts will run for all the elements in the body.

This way is not for daily use or for big projects, because the html file will be complicated more and more.

2. External

The 2nd is by creating a JS file and link it inside your HTML .

In this example we created a Javascript file named script.js and linked it using the script tag. put the path to your JS file in the src.

3. Inline

The last way is the inline way. by adding an event listener inside any HTML element you want to run your scripts on.

SO the above code runs when the user clicks on the body

The common used way for daily programming is the External way

3 Ways to Add CSS to HTML

Mohamed Amine Fh — Sun, 10 Oct 2021 06:53:36 +0000

1. Internal

The 1st one is by placing the <style> tag in the <head> or in the <body>.

if you placed in the body make sure it's after the opening <body> tag, so your styles will run for all the elements in the body.

This way is not for daily use or for big projects, because the html file will be complicated more and more.

2. External

The 2nd is by creating a CSS file and link it inside your HTML .

In this example we created a CSS file named style.css and linked it using the link tag. put the path to your css file in the href.

3. Inline

The last way is the inline way. by adding the style property inside any HTML tag you want to style.

The common used way for daily programming is the External way

Passing Data with React Router using Link

Mohamed Amine Fh — Fri, 01 Oct 2021 12:50:52 +0000

If you've used React Router on many projects, definitely you've asked How i can pass some data or state to other components through a link tag?.

So 1st of all we'll discuss how we can pass data between components in React.

1. Passing props

The 1st one is by passing some props from the parent component to the children components

2. Global State

2nd one is by making a Global State and make some data accessible by many components.

You can manage Global State using two main paths:

3. Using React Router's Link

3rd one is basically when you click on a link(to component), you passing data with that.

Below we Have a simple React App with some routes

We Have two routes Here the "/"(Home) Route and the "/profile"(Profile) route.

So the 1st page we'll see if we run yarn start is the Home Page

And if we go to the /profile route
we'll see the Profile component

So as you can see we're using the <Link> instead of the regular <a> tag to prevent the refresh of the page.

So how we can send data for exemple to the Profile component from the Home component ?

So the cool thing is we can pass an Object to the to property in the <Link> and that object must contains a pathname and optionally a state, and we can pass the data through that state

and we can access that state in the Profile component in the props.location.state

for more Info check this React Router Link

Protect Your Routes in React

Mohamed Amine Fh — Tue, 28 Sep 2021 18:09:26 +0000

If you're using react router in your App, then you probably wanted to protect some routes from specific users, or to Redirect some users to their own page or component.

so what to do ?

In this blog we'll see How to handle that with some simple checks

So at the beginning this is how our App looks like

At this point every user can access those two components (Admin, Home)

But that's not what i want, I want just the admin to have access to the "/admin" route.

And those who don't have access to that route, I need to redirect them to the Home Page ("/" route)

So the 1st Step is to create the ProtectedRoute Component.

You can create it in the same file, but for a cleaner code we'll create it on a new file

1- Create a file and name it to what you want. I'll name it `protectedRoute.js`.

2- Paste this code in that file

So basically we check if there is a token stored in our LocalStorage or not.

If The check is Truthy then he Have access to that route.
If Not, He will be Redirected to the Home Page (thanks to the <Redirect /> Component).

You need to change that check to suit your case.

Don't forget to export your Component.

3- Finally we'll use that ProtectedRoute in our App

Import The ProtectedRoute Component from where you created it
you can name it what you want if you export it with the default

So here we need to change The

<Route exact path="/admin" component={Admin} />

with

<ProtectedRoute exact path="/admin" component={Admin} />

And that's it 🎉, Go Try it out.

How To Host your static website with Github

Mohamed Amine Fh — Sat, 18 Sep 2021 10:34:45 +0000

You Have an Html, Css and Js files in your computer and you want to show it to your colleagues ?
Github Has an amazing static site hosting service that takes HTML, CSS, and JavaScript files straight from your repository

Lets go to the steps:

1- Create a repository with your username followed by `.github.io`

in my case my username is BegDevv, so the repo name would be BegDevv.github.io :

2- Upload your static files into that repository (Html/Css/Js)

you're done 💯 ❤ github will host your files in that repo automatically Go to https://{yourusername}.github.io (change yourusername with yours)

React Router with Github Pages 💎

Mohamed Amine Fh — Sat, 18 Sep 2021 08:48:44 +0000

If you have tried to deploy a React App with react-router-dom to github pages, probably you'll hate yourself because it won't work as you expected 😔.

So what the heck is going on ? why is this happening?

So if you don't know gh-pages deploy your React App
to this url http://{username}.github.io/{repo-name}
and in your App the "/" route means this url http://{username}.github.io/.

So one solution for this

is to replace the BrowserRouter with HashRouter
so instead of this

do this

Now deploy again your changes with
npm run deploy

Thats it

DEV Community: Mohamed Amine Fh

What happens when you enter a URL in your browser?

What is going on behind the scenes?

What is an IP address?

What is a server?

What is a DNS?

TCP/IP connection

Web servers

HTTP(s) connection

Web server VS App server

Databases

Presenting the content by the browser

Load balancer

Firewall

You made it to the end 👏👏. Now you have a clear idea of what will happen next time when you type a URL and hit Enter

Thanks for reading

Clear All pinia stores

How To use ES6 import & export in your project

Hello Everyone, I hope you're doing well

So After that being said, let's start our blog, so in this blog you'll learn how to use the ES6 features on your client or server project

Frontend aka Client

Backend aka Server

Happy_coding

Passing Components as Props in React

3 Ways to Add JS to HTML

1. Internal

2. External

3. Inline

3 Ways to Add CSS to HTML

1. Internal

2. External

3. Inline

Passing Data with React Router using Link

1. Passing props

2. Global State

3. Using React Router's Link

So how we can send data for exemple to the Profile component from the Home component ?

Protect Your Routes in React

so what to do ?

1- Create a file and name it to what you want. I'll name it protectedRoute.js.

2- Paste this code in that file

3- Finally we'll use that ProtectedRoute in our App

And that's it 🎉, Go Try it out.

How To Host your static website with Github

1- Create a repository with your username followed by .github.io

2- Upload your static files into that repository (Html/Css/Js)

React Router with Github Pages 💎

So what the heck is going on ? why is this happening?

So one solution for this

1- Create a file and name it to what you want. I'll name it `protectedRoute.js`.

1- Create a repository with your username followed by `.github.io`