DEV Community: Amr Elmohamady

I built a dev.to stats card generator (followers & views count)

Amr Elmohamady — Tue, 25 Oct 2022 15:59:08 +0000

Why

I like to share my achievements and having more than 30k views (at the time of writing) on my dev.to blog is a good achievement. Also, I want you to know that my content is helpful and trustworthy, because if it is not then why other people follow me and read my articles!

Dev.to doesn't display followers count or views count so I built a Node.js server that scrapes my followers and views count and renders an SVG image card to display them in a cool way.

Here's an example embed in the GitHub repository.

If you want to see it get updated follow me or view one of my articles then simply refresh.

How

The Node.js server accepts an HTTP request
It fetches my dashboard using Axios (HTTP Client)
It gets the views and followers count using cheerio (HTML Parser)
It puts the values in an already designed SVG template (by draw.io)
Sends the generated SVG back to the client to display the SVG image

I used SVG because the It is actually some XML code describing how it looks so I can easily embed my values in the text tags without doing heavy image processing.

When I fetch my dashboard I use an authentication cookie which I got from the console and It will be expired next year if I didn't visit dev.to or no one visited a website that displays my stats card so, no need to automate a login workflow.

It is open source so you can fork the repo and deploy your own server from https://github.com/Amr2812/devto-stats-card.
You will need to rename .env.sample file to .env and replace the cookie header constant to your own one and in the config.js file you will need to replace the blog URL constant to your own one.

Star the project If you like it ⭐

If you like the article you can join my newsletter and follow me.

You can also buy me a coffee that would help me grow as an open source developer :)

Three ways to scale your Database (Replication vs Sharding vs Partitioning)

Amr Elmohamady — Thu, 20 Oct 2022 11:57:38 +0000

Taking your database to the next level regarding scale is often harder than scaling web servers. In web servers, you can start new instances of your app and do horizontal scaling or you can increase server resources (memory/cpu) and do vertical scaling. But, when it comes to the database side your queries will get slower and you might run out of space.

In this article, I will introduce three ways to scale your database:

Replication
Sharding
Partitioning

Replication

Replicating the database is to create copies of same data for more than one server.
With multiple copies of data on different database servers, replication provides a level of fault tolerance against the loss of a single database server.

The main advantages of replication are:

Load Balancing: Queries will be distributed across multiple servers (maybe in different data centers in different regions)
High availability: If one server is down there are other servers to handle queries

There are different types of replication:

Single-leader architecture: One server accepts writes from clients, and replicas get data from there. This is the easiest method.
Multi-leader architecture: Multiple servers that accept writes and each replica set get data from their leader. It's used in different data centers so writes from different regions become faster like read queries.
No-leader architecture: All servers accepts writes and reads. All replicas get data from each other. This architecture is supported by databases like Cassandra to achieve maximum scalability.

Sharding

Sharding is a method for distributing data across multiple machines. Running queries on a single server with a lot of data will consume a lot of CPU but running queries on a subset of this data will be much faster and will consume less CPU.
Sharding can be used with replication in which each shard will be replicated.
Sharding is complex and require some experience because you will need to analyze queries and data structure to determine the sharding key and algorithm.

Sharding key: a specific column value that indicates which shard this row is stored in.
Sharding algorithm: an algorithm to distribute your data to one or more shards.

The main advantages of sharding are:

Faster Queries: less data -> less CPU/memory usage -> faster queries.
Storage Capacity: Servers will not run out of space because data is distributed across multiple servers.
High Availability: If one shard is down other data won't be lost.

Sharding may not be a good option if most of your queries are JOINs.

Partitioning

Partitioning is dividing large tables into multiple tables. By dividing a large table into smaller, individual tables, queries that access only a fraction of the data can run faster and use less CPU because there is less data to scan.
Unlike Sharding and Replication, Partitioning is vertical scaling because each data partition is in the same server.
Partitioning should be done when:

You have large tables, like in a users table, you can partition based on country.
You have historical data that are rarely queried and example would be having tables like jobs_2020 and jobs_2021 for old jobs but for new ones there is the table jobs.

The main advantage of partitioning is:

Faster Queries: smaller tables and indexes -> less data to scan -> less CPU/memory usage -> faster queries.

If you liked the article you can join my newsletter and follow me.

How I moved to hashnode?

Amr Elmohamady — Sat, 18 Jun 2022 06:16:53 +0000

I moved my blog from dev.to to hashnode.

Hashnode has amazing feature that blew my mind like:

I own my content and all traffic goes to me.
I can add my own domain later.
I can have static pages like about, projects, etc.. so it's like a portfolio and blog all in one.
Free In-built newsletter.
Custom page rules for creating customized URLs or redirects.
I can enable listen to audio feature.
I can show views count on my articles.

So, I transferred my articles from there using the hashnode dev.to importer and updated my articles on dev.to to have a canonical url to refer to my hashnode articles so my hashnode articles can be ranked higher in search engines.

Now if I want to cross post to dev.to I can use the RSS feed importer from dev.to and mark my hashnode to be the canonical url.

So, you can subscribe to my newsletter in my hasnode blog here:
amrelmohamady.hashnode.dev

Why and how to use the the Node.js Event Emitter in real projects?

Amr Elmohamady — Thu, 14 Apr 2022 07:21:08 +0000

The Observer pattern and the Event Emitter

The Observer pattern defines an object (called the subject) that can notify a set of observers (or listeners) when a change in its state occurs.

It can be implemented in OOP by using a class that can register and store listeners in an array and calls them when something happens.

In Node.js it can be implemented using the EventEmitter class which is imported from the events built-in module. It allows to emit and listen for events (with multiple listeners).

The EventEmitter is exported from the events core module:



const { EventEmitter } = require("events");
const emitter = new EventEmitter();

The essential methods of the EventEmitter are as follows:

on(event, listener): This method allows us to register a new listener (a function) for the given event type (a string).
once(event, listener): This method registers a new listener, which is then removed after the event is emitted for the first time.
emit(event, [arg1], [...]): This method produces a new event and provides additional arguments to be passed to the listeners.
removeListener(event, listener): This method removes a listener for the specified event type.

When to use the EventEmitter

It can be used in backend projects and here's a real example where I used it, In an LMS, when a teacher publishes a new lesson I need to send emails and notifications to all the students that are subscribed to the teacher, so we shouldn't put that code in the publish lesson request so the teacher doesn't wait for the emails and notifications to be sent to get a success response and we separate the publish lesson logic from the emails and notifications part to have clean code by achieving the separation of concerns principle.
Another example is when you need to update a real-time dashboard or to send a notification to your investors when new users signup.

How to use the EventEmitter in real projects

Create this folder structure:



/events
    /subscribers
        /lessons.subscriber.js
        /users.subscriber.js
    /emitter.js
    /index.js

In /emitter.js:
Create a new EventEmitter and export it.



const { EventEmitter } = require("events");

module.exports = new EventEmitter();

In /index.js
Import the created EventEmitter and export it with the events' names.



const EventEmitter = require("./emitter");

module.exports = {
  EventEmitter,
  events: {
    LESSON_PUBLISHED: "LESSON_PUBLISHED",
    NEW_SIGNUP: "NEW_SIGNUP"
  }
};

we can also separate the events' names in a different file but there's no need to.

In subscribers/users.subscriber.js:
Import the events and the EventEmitter instance and listen to the events.



const { events, EventEmitter } = require("../");

EventEmitter.on(events.NEW_SIGNUP, user => {
  // Your logic
}

Now we are done with the listeners part, in your controller or service you can import the EventEmitter instance and the events' names then emit the event and pass the data you want like:



EventEmitter.emit(events.NEW_SIGNUP, user);

Subscribe to my newsletter

I hope you like this article, you can follow the blog if you want more.
My LinkedIn

How to insert random data for testing in PostgreSQL?

Amr Elmohamady — Wed, 06 Apr 2022 21:14:52 +0000

Sometimes you need to have hundreds of thousands or even millions of rows to test the performance of your database and queries because we can't explore performance if we only have 10 rows, so before playing with performance we need to make some test data.

But can't we just use a shell script or a (your favorite language) script, yes you can but try generating 1M rows with your script then save to the database but your script memory will not be able to take 1M rows in memory so you will have to create a stream or generate chunks of data then save to the database or a CSV file then import it to the database, but why all that while you have amazing functions from PostgreSQL to help you.

The `repeat()` Function

A function that takes two parameters repeat(string to repeat, number of times to repeat) to repeat a string.

Example:

INSERT INTO test (stringColumn) VALUES (repeat("Wow ", 3));

This will insert a row with a stringColumn with a value of Wow Wow Wow

The `generate_series()` Function

A function that takes two required parameters and an optional one generate_series(start, stop, increment by [default is 1]) to generate a series of numbers each in a row.

Example:

INSERT INTO test (id) VALUES (generate_series(1, 1000));

This will insert 1000 rows each with an id equal to the previous id incremented by one.

The `random()` Function

A function that generates a random float from 0 to 1.

Example:

INSERT INTO test (id) VALUES (trunc(random()*100));

This will generate an id of three digits from 0 to 100 (trunc to make the float an integer).

ALL TOGETHER:

Let's create a players table:

CREATE TABLE players (id INT, about TEXT, age INT);

Then let's insert 1000 rows with some random data:

INSERT INTO players (id, about, age) VALUES (generate_series(1, 1000),  repeat('A cool player. ', 2) || 'My number is ' || trunc(random()*1000), trunc(random()*10 * 2 + 10));

Subscribe to my newsletter

I hope you like this article, you can follow my LinkedIn at:
https://www.linkedin.com/in/amr-elmohamady

How to deploy Node.js Socket.IO server with load balancing & reverse proxy using pm2 & Nginx?

Amr Elmohamady — Mon, 06 Sep 2021 22:05:00 +0000

Imagine that you are building an app with chat rooms and it will have thousands of users how do you think a server could handle this load ?!

With Two concepts:

Reverse Proxy
A reverse proxy server provides an additional level of abstraction and control to ensure the smooth flow of network traffic between clients and servers.

Examples of Web Servers are Nginx and Apache.

Load Balancing
A reverse proxy server can act as a “traffic cop,” sitting in front of your backend servers and distributing client requests across a group of servers in a manner that maximizes speed and capacity utilization while ensuring no one server is overloaded, which can degrade performance. If a server goes down, the load balancer redirects traffic to the remaining online servers.

Node.js is single threaded and it runs on a single core by default, so it has a native cluster module to run multiple instances on all the CPU cores and load balance the requests on the instances.

We have two options either use the cluster module in the application code or use a process manager like Pm2.
Pm2 is more suitable for production.

First, we'll install the pm2 package globally:

npm i pm2 -g

We'll run the app in the cluster mode.

So set the start command to be:

pm2 start index.js -i max

-i for number of instances and max to be scaled across all CPUs available

To stop the app:

pm2 stop index.js

To Inspect Logs:

pm2 logs

To restart the app:

pm2 restart index.js

Now, we have our app scaled on one server, we need to have the app deployed on multiple machines as horizontal scaling. NGINX is responsible for load balancing requests on multiple servers as a reverse proxy.

In nginx main config file:

http {
  server {
    # 80 for http, 443 for https
    listen 80;
    server_name api.example.com;

    location / {
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $host;

      proxy_pass http://nodes;

      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
    }
  }


  upstream nodes {
    server server1.example.com;
    server server2.example.com;
    server server3.example.com;
  }
}

So, let's understand this file line by line:

First, In the server config we listen to the default port of http which is 80, 443 for https.

Then, the server name = site's domain name

Then, at the root location we set couple of headers:

The X-Forwarded-For (XFF) header is a de-facto standard header for identifying the originating IP address of a client connecting to a web server through an HTTP proxy or a load balancer. When traffic is intercepted between clients and servers, server access logs contain the IP address of the proxy or load balancer only. To see the original IP address of the client, the X-Forwarded-For request header is used.
The Host header to determine which server the request should be routed to.

we'll pass proxy_pass for now

http version to be 1.1 the version that supports WebSockets
HTTP Upgrade is used to indicate a preference or requirement to switch to a different version of HTTP or to another protocol, if possible, so here in socket.IO implementation we need to upgrade to a websocket connection

If you don't know how Socket.IO work under the hood I suggest you read this page from the Socket.IO Documentation.

Upstream nodes block is used to set the servers that our load balancer will use, so we set proxy_pass in the location block to be the upstream "nodes" so it can do its reverse proxy.

Now, our load balancer will redirect calls to our servers and each server will redirect calls to on of its cluster instances. That is fine unless when USER_A connects to SERVER_1 then joins a room called GROUP_A and sends a message, the message will be broadcasted to all users in GROUP_A on SERVER_1 but what about other users on SERVER_2 that are in GROUP_A?
To solve this we need servers to communicate and in our case we need to use a Pub/Sub message broker so when USER_A connects to SERVER_1 the sends a message on GROUP_A, SERVER_1 will publish an event to all servers telling them to broadcast this message for all users in GROUP_A.

Socket.IO supports multiple adapters and the most recommended one is Redis adapter.

I hope you found this article useful and please share your thoughts below :-)

You can also buy me a coffee that would help :)

LinkedIn: Amr Elmohamady

Twitter: @Amr__Elmohamady

Why Frontend Developers Should Learn Node.js and Express?

Amr Elmohamady — Wed, 17 Mar 2021 22:26:19 +0000

When I was using Vue (doesn't matter which framework) for Frontend I didn't understand this weird folder structure, I didn't understand how these files are served and how they are built and when I started learning Nuxt which is for Vue Server-Side Rendering, It was weirder for me like how SSR Works, how routes are being generated automatically and how middleware works and this when I decided to learn Node and the reason why I picked node wasn't to understand frontend stuff but to be a Full-stack developer and I was confused what to choose PHP and Laravel or Node and Express and thanks god I chose Node not because Node is better than PHP or this stuff but because I was so Lazy to learn a new language (PHP) and I didn't know that I am so lucky.

Now, I know how NPM Scripts, task runners, and building tools work and I know how to solve problems or bugs that I face in the Frontend part easily or at least much easier than before.

Something else if you are only a Frontend developer learning Node and Express will give you some knowledge about how the backend works and don't worry they are not hard to learn.

Also, Cloud Functions (serverless) will be easy for you when you learn node, and don't tell me why cloud functions are Important for Frontend Developers as every single Frontend developer I know knows about cloud functions.

Even if you don't want to be a Full-stack developer or you are but you don't know Node.js then I think you should learn Node and Express or even take some crash courses for the reasons I wrote above.

I hope you enjoyed this tiny article and this is article is about my thoughts and should doesn't mean must :-)

Subscribe to my newsletter

You can also buy me a coffee that would help :)

Twitter: @Amr__Elmohamady

Cloudinary VS Firebase Cloud Storage: Pros and Cons

Amr Elmohamady — Mon, 22 Feb 2021 11:19:29 +0000

This article will help you to choose your cloud storage provider for your next project or your blog or an event, based on free pricing plans.

The moment you realize that you need to choose a cloud storage provider to use in your project and there are multiple options to choose from and you start searching for storage providers and you find a lot of choices and you want to find something that has a good free plan to start with then you might find Cloudinary and Firebase Cloud Storage.

Cloudinary: pros and cons

Pros

More Storage as you get 25 Monthly Credits: 25k transformations or
25 GB of managed storage or
25 GB of net viewing bandwidth
Image and video transformations (e.g.:change the size of your assets)
Video transcoding and adaptive streaming
Better Admin Dashboard (OS-like)

Cons

Smaller Community
There is minimum file size
Has some limitations if you are using it from a javascript frontend like the inability of deleting images.

Firebase Storage: pros and cons

Pros

Wide Community
No minimum file size
Better to use if you have experience with other Firebase services like Firestore or Authentication

Cons

5GB Stored

Finally, I hope you enjoyed this article, and if you have other opinions please feel free to comment below or contact me.

Twitter: @Amr__Elmohamady

Subscribe to my newsletter

How to create a custom global Nuxt plugin (toast)?

Amr Elmohamady — Sat, 13 Feb 2021 21:28:15 +0000

In this article, we'll be building a dynamic global nuxt plugin that is going to be a Toast (snackbar).

Prerequisites:

Vue
Vuex
Nuxt

So, Let's start by creating a Nuxt app using npx:

npx create-nuxt-app nuxt-toast

Go with the steps and in the UI framework option choose Vuetify.js as we're going to be using it in this tutorial but, if you don't want to use Vuetify you can change the UI framework you like or even without a UI framework.

Create a file named snackbar.js in the store folder to use Vuex then write:

export const state = () => ({
  content: "",
  color: ""
});

export const mutations = {
  showMessage(state, payload) {
    state.content = payload.content;
    state.color = payload.color;
  }
};

We export the state function that has content and color values for the toast and the mutations object that contains the show message function that sets the state values to the payload values.

Then, Create a file named notifier.js in the plugins folder and write:

export default ({ app, store }, inject) => {
  inject("notifier", {
    showMessage({ content = "", color = "" }) {
      store.commit("snackbar/showMessage", { content, color });
    }
  });
};

Here, we are exporting the plugin's function that we're passing two parameters which are app and store object because we will use vuex store to set the payload that sets the state values to our desired content and color then, there's the second parameter inject that will inject our notifier function to become a global nuxt function to be called like this.$notifier.

Then, create a file named Snackbar.vue in the components folder and write the vue template:

<template>
  <v-snackbar v-model="show" :color="color">
    {{ message }}
    <template v-slot:action="{ attrs }">
      <v-btn color="white" text v-bind="attrs" @click="show = false">
        Close
      </v-btn>
    </template>
  </v-snackbar>
</template>

As you see we used vuetify's snackbar component for our toast as I said if you don't want to use vuetify create your custom component as you want.

Then, write below the template the script tag:

<script>
export default {
  data() {
    return {
      show: false,
      message: "",
      color: ""
    };
  },
  created() {
    this.$store.subscribe((mutation, state) => {
      if (mutation.type === "snackbar/showMessage") {
        this.message = state.snackbar.content;
        this.color = state.snackbar.color;
        this.show = true;
      }
    });
  }
};
</script>

Here, we're defining the data(showSnackbar, message, color), In the created() hook we use the this.$store.subscribe function to subscribe to store mutations as we get mutation and state params so we check if the mutation type is equal to "snackbar/showMessage" (snackbar.js file and showMessage function at our store).

(for more info about store subscribe)

Then, we import our snackbar component to the default.vue layout file like:

<template>
  <v-app>
    <v-main>
      <v-container>
        <nuxt />
      </v-container>
    </v-main>
    <Snackbar></Snackbar>
  </v-app>
</template>

<script>
import Snackbar from "~/components/Snackbar";

export default {
  components: {
    Snackbar
  }
};
</script>

Finally, the last thing we do to make the plugin work is to define our plugin in the nuxt.config.js file like this:

  plugins: ["~/plugins/notifier.js"],

So, let's try our plugin in index.vue in the mounted() hook:

mounted() {
  this.$notifier.showMessage({
    content: "YAY Our Plugin worked Successfully!",
    color: "success"
  });
}

You can use it for HTTP request responses or however you want to use it.

I hope you enjoyed the article and found it useful!

If you like this article you can subscribe to my newsletter

You can also buy me a coffee that would help :)

What to do if you don't like CSS?

Amr Elmohamady — Sun, 31 Jan 2021 01:58:47 +0000

Writing CSS sucks!

It's so painful for me to write CSS code even if using a CSS Preprocessor like SASS or LESS, It makes it easier though!

Writing CSS is not interesting for me and not only me there is a lot of people who hate CSS just like me or even more.

You don't have to be a CSS hater to read this article!

I used to build projects using CSS before but when I started coding JavaScript I liked writing Logic more than styling and when I start a project I had to write CSS but I Wanted to write logic more than Styling so...

So, the solution I found that I am currently using is Google Material Design.

Google Material Design Guidelines are some design guidelines that Google uses for all of its projects so as developers how to get benefit from those Guidelines ?!

We use Frameworks that are built on Material Design Guidelines.
I mean using Component-based Frameworks.

Component-based Frameworks are Frameworks with built-in components you can use without writing one line of CSS code.

There is a lot of Frameworks that Component-based but they are not all good. Material Design Frameworks follow standards made by Google's Expert UI Designers and UX Engineers and Researchers.

There are Frameworks that can be used with anything and there are others that only can be used with specific JS Frameworks like Vue, React, Angular, Svelte, and others...

Here's a list of some of them:

1- Frameworks Can be used anywhere

Material Design: Google's Official Material Design Framework.
Materialize: A Simple responsive front-end framework based on Material Design.
Material Design for Bootstrap: A Material Design Framework Based on Bootstrap. It has its own CLI and Flexible to be used With JS Frameworks or Libraries. It has a Pro Version that contains extra components.

2- Frameworks Used with Specific JS Frameworks

Vuetify: Vue Official Material Design Framework for built-in Vue Components. It's the one I am using.
Material Ui: React components for faster and easier web development.
Angular Material: Material Design components for Angular.
Svelte Material UI: Material UI Components for Svelte.

There a lot of other Frameworks that follow Google Material Design but can't mention all of them :-).

You don't have to be a CSS hater to use Material Design Frameworks!

Something good to mention is there is a Library called Material Design Icons for Icons Check it out.

If you are working in a company as a Frontend developer then usually there's a designer who designs Sketches that you have to turn into code and can't be done with Material Design Frameworks then I advise you to talk to him/her/them or your manager and tell them about Material Design and how it's great and how it delivers the best User Experience So they switch into those great guidelines.

I hope you enjoyed this article :-)

Subscribe to my newsletter

Twitter: @Amr__Elmohamady

MEAN vs. MERN vs. MEVN Stacks ? What's the difference ?

Amr Elmohamady — Sun, 06 Dec 2020 03:45:40 +0000

Full stack development

First, we have to know that those stacks are Full stacks so you do the Frontend and the Backend.
They are all JavaScript!
The Frontend and the Backend will be done through JavaScript Frameworks.

Technologies you should know before the comparison

JavaScript:
It's a programming (scripting) language used both on the client-side and server-side that allows you to make web pages interactive.
Node.js:
It's a runtime environment that executes JavaScript outside the browser as writing Backend code.
Express.js: It is a back end web application framework for Node. It is designed for building web applications and APIs.
MongoDB: It's noSQL (Json-like) database .
Angular: It is a client side JavaScript framework was developed by Google.
React: It is a client side JavaScript framework was developed by Facebook.
Vue: It is a client side JavaScript framework was developed by a single person Evan You who was working in Google.

What is the difference between them ?

In those stacks there are common letters which are M - E - N .

M: MongoDB
E: Express.js
N: Node.js

Those are the Backend technologies be while the Frontend technologies are A - R - V for MEAN - MERN - MEVN .

Then Obviously,

A: Angular
R: React
V: Vue

So, choose the stack that you love but before you have to learn the basics if web development which are:

HTML5
CSS3
JavaScript
JS Dom and Bom
ES6 Syntax
SASS (optional but preferred)
CSS Frameworks ( Bootstrap, Tailwind CSS, etc...)

Subscribe to my newsletter

You can also buy me a coffee that would help :)

What is Cross-site Scripting (XSS) ? Types of XSS!

Amr Elmohamady — Thu, 03 Dec 2020 16:53:52 +0000

What is Cross-site Scripting?

Cross-site Scripting (which is called XSS) is a type of security vulnerability typically found in web applications. XSS attacks enable attackers to inject client-side scripts into web pages viewed by other users.

So, Yes it's client side hacking not in Node.js but just plain JavaScript.

What attackers do is sending script-injected link to victims when victims open the link, the browser opens the site and also executes the XSS script which steal the user's data from session storage or cookies like

document.cookie

Then, sending the user's data to the attacker with an Http request.
Here's an image which simplify the process:

Types of XSS:

1- Stored XSS

Well, it's the simplest kind of XSS Attacks; XSS Script is sent to the database and called each time a page is loaded.
Ex:
A comments section in a blog the attacker puts the XSS script and submit it as a comment so it appears each time the page is loaded to do its job.

2- DOM XSS:

This kind is somehow tricky as this is the most one I like.
It happens mostly in the URL using

document.location

When JavaScript takes data from an attack-controllable source (URL), and it passes it in the HTML using innerHTML which enables attackers to execute malicious scripts.

For avoiding this type of XSS use innerTEXT instead of innerHTML, You may need to use innerHTML when you want to add dynamic HTML in your page so you can filter inputs from the Backend.

Ex:
http://www.example.com/userdashboard.html?context=Mary is a dashboard customized for Mary. It contains the string Main Dashboard for Mary at the top.

Here is how a DOM-based XSS attack can be performed for this web application:

The attacker embeds a malicious script in the URL: http://www.example.com/userdashboard.html#context=SomeFunction(somevariable).
The victim’s browser receives this URL, sends an HTTP request to http://www.example.com, and receives the static HTML page.
The browser starts building the DOM of the page and populates the document.URL property with the URL from step The browser parses the HTML page, reaches the script, and runs it, extracting the malicious content from the document.URL property.
The browser updates the raw HTML body of the page to contain: Main Dashboard for

<script>
SomeFunction(somevariable)
</script>

The browser finds the JavaScript code in the HTML body and executes it.

3- Reflected XSS (Non-persistent XSS):

The most common way for cross-site scripting.
Reflected XSS is not a persistent attack, so the attacker needs to deliver the link to each victim. These attacks are often made using social networks.
In this case, the attacker’s payload has to be a part of the request that is sent to the web server. It is then reflected back in such a way that the HTTP response includes the payload(script) from the HTTP request. Attackers use malicious links, phishing emails, and other social engineering techniques to lure the victim into making a request to the server. The reflected XSS payload is then executed in the user’s browser.

How to discover various XSS types?

Easiest way is to validate inputs and use an XSS Scanner.

An Automated web security scanner checks your site for vulnerabilities. ... A website that's vulnerable to Cross-site scripting (XSS) will allow an attacker to inject browser-side scripts into web pages viewed by users.

Follow the blog for more useful articles

Twitter: @Amr__Elmohamady

DEV Community: Amr Elmohamady

I built a dev.to stats card generator (followers & views count)

Why

How

Three ways to scale your Database (Replication vs Sharding vs Partitioning)

Replication

The main advantages of replication are:

There are different types of replication:

Sharding

The main advantages of sharding are:

Partitioning

The main advantage of partitioning is:

How I moved to hashnode?

Why and how to use the the Node.js Event Emitter in real projects?

The Observer pattern and the Event Emitter

When to use the EventEmitter

How to use the EventEmitter in real projects

How to insert random data for testing in PostgreSQL?

The repeat() Function

The generate_series() Function

The random() Function

ALL TOGETHER:

How to deploy Node.js Socket.IO server with load balancing & reverse proxy using pm2 & Nginx?

Imagine that you are building an app with chat rooms and it will have thousands of users how do you think a server could handle this load ?!

With Two concepts:

Why Frontend Developers Should Learn Node.js and Express?

Cloudinary VS Firebase Cloud Storage: Pros and Cons

Cloudinary: pros and cons

Pros

Cons

Firebase Storage: pros and cons

Pros

Cons

How to create a custom global Nuxt plugin (toast)?

What to do if you don't like CSS?

Writing CSS sucks!

1- Frameworks Can be used anywhere

2- Frameworks Used with Specific JS Frameworks

MEAN vs. MERN vs. MEVN Stacks ? What's the difference ?

Full stack development

Technologies you should know before the comparison

What is the difference between them ?

What is Cross-site Scripting (XSS) ? Types of XSS!

What is Cross-site Scripting?

Types of XSS:

1- Stored XSS

2- DOM XSS:

3- Reflected XSS (Non-persistent XSS):

How to discover various XSS types?

The `repeat()` Function

The `generate_series()` Function

The `random()` Function