DEV Community: Ahmed Mohamed

Equality Algorithms in JavaScript

Ahmed Mohamed — Thu, 02 Mar 2023 17:13:34 +0000

In this article, we will know what is Equality Algorithms and How we can use them in JavaScript.

What are Equality Algorithms?

Equality Algorithms are the Techniques that JavaScript uses to check if the First value equals the Second Value.

So now we know what Equality Algorithms know let us know how to use them.

There are four algorithms to check equality in JavaScript:

Loosley Equality Algorithm ( == )
Strict Equality Algorithm ( === )
Same Value Equality Algorithm ( Object.is() )
Same Value Zero

Know Let us talk about each of them step by step:

Loosely Equality Algorithm ( == )

console.log("1" == 1) // true
console.log(false == 0) // true

Look at the above code, We can see that the result is true although the data types of each one are different so what is going on here?

The secret in the == operator, when you check the equality of two different types in JavaScript this operator automatically converts one of the two values and then compares them and this is what call Implicit Type Coercion.

So the == equality operator makes Type Coercion in we use it and Because of this, we called it Loosely Equality Operator.

2. Strict Equality Algorithm ( === )

This Equality Parameter behaves like the previous one, The Only Difference is that it doesn't make any type of conversion in the values so it gives you the exact thing that you want and because of this, you should use this Equality Parameter instead of Loosly Equality Parameter.

So if we repeat the previous example with === Parameter this will be the result:

    console.log("1" === 1) // false
    console.log(false === 0) // false

    console.log(1 === 1) // true
    console.log(false === false) // true

3. Same Value Equality Algorithm

In JavaScript that let you check if the First Value is the same Other Value.

But Wait…Is not **===** Operator do the same thing

Are You Sure?? Let us see the following example first:

console.log(NaN === NaN) // false

What Happened here is that NaN cannot be compared to another NaN in JavaScript so **Object.is()** Solved this Problem.

It checks if the First value if it has the same value as the Second value.

So if We Repeated the previous example with **Object.is()** we will get the desirable Results

console.log(NaN === NaN) // false

But keep in your mind these exceptions for using It :

Object.is(-0, +0) // false 
    console.log(-0 === +0) //true

    // ---

    Object.is(NaN, NaN) // true
    console.log(NaN === NaN) // false

    // ---

    const obj1 = {name: "Ahmed", age: 22}
    const obj2 = {name: "Ahmed", age: 22}

    console.log(Object.is(obj1, obj2)) // false
    console.log(obj1 === obj2) // false

    /* 
      In this example two methods gave the same result but there are different
      in there tichneeques:

      [1] === when compare Objects checks if the two Objects refer to the same Reference
      [2] Object.is() when compare Objects checks if the two Objects have the same values
    */

Strict Equality Operator is widely used but there are situations that the **Object.is()** method can help you will like checking if the coming number is positive or Negative Zero and so On.

4. Same Value Zero Equality Algorithm

Algorithm’s Name explains itself, this algorithm is identical to the previous one except that +0 and -0 or **NaN **values are considered the same, So let us implement it:

 function sameValueZero(x, y) {
      if (typeof x === "number" && typeof y === "number") {
        // x and y are equal (may be -0 and 0) or they are both NaN
        return x === y || (x !== x && y !== y);
      }
      return x === y;
    }

Conclusion

To summarise the article. You shouldn’t use loosely equality instead of it you can use strict equality.

You can use the same value or same zero value algorithms in case you need to do specific tasks like checking if the accepted value is +0 or -0 zero …etc

I hope you enjoyed this article and benefited even by 1 percent finally see you in the next article…👋

Difference between _app.js and _document.js files in Next.js

Ahmed Mohamed — Fri, 16 Sep 2022 22:33:50 +0000

Introduction

Next.js is a Framework which build above React.js, Next.js Team called it The React Framework for Production, Which let you optimize your React Applications throw SSG, ISR and SSR Strategies.

In this Article we will know wthat is Difference between _app.js and _document.js files in Next.js.
So let's get started... 👉

_app.js File

When You create a new Next.js Project you will notice that there is a file in the pages directory called _app.js and if you open it you will see the following code:

import '../styles/globals.css'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

You can name the app.js file as the Root of all Components in your Next App, Which Means that Every Page that you will create in the pages directory will move to throw the MyApp Component.
This is a beautiful Feature:

Which let you add a Global Layout Component on all Your Project Pages like Navbars and Footers...etc
You Can Also add Your Basic Meta Tags to All Pages throw Head Component.

_document.js File

This file is unknown to a lot of Next.js Developers unlike the _app.js file which is famous, And This is due to its low use In addition You should create it to use It.

_document.js file lets you Overwrite the Basic HTML structure on Your Next App.
Let's See How...

Create an js File on Pages Directory and name is as "_document.js" and Put the following Code in It:

import Document, { Html, Main, Head, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

This is the Default Structure for HTML in Your App, Now you can Edit It like add the lang Attribute to html tag and more.

❗️Notice that

_document.js lets you edit only html code structure which means that you can't add javascript events in it.

Head Component in _document.js is Completely different from Head in _app.js file

Conclusion

Use _app.js file when you need to add some Global Layout or Meta Tags And use the _document.js file only if you need to edit the basic structure of your HTML Code.

Awesome Chrome Extensions for Every Developer

Ahmed Mohamed — Thu, 07 Jul 2022 21:36:58 +0000

Introduction

Chrome is considered one of the most web browsers that have many features for normal users and developers.
So in this article, we gonna recognize to an awesome chrome extension that will ease your life as a developer.
So let's get started....👉

Extensions

1. React Developer Tools

I think there is no react developer that didn't use this extension in his work at least once.
It is an awesome tool that helps you to analyze and debug react applications, like showing status, props, and all component details.

2. JSON Formatter

Look at the above image, It is an API endpoint for the Egypt Country Information from the rest countries website, If I told you to tell me what is the Capital of Egypt, it a little difficult right?

Now look at the above Image, If I tolled you too repeat the previous demand, Mission is easy now right?
That is precisely what JSON Formatter Extension gives us, It Reformate JSON string into a nice and interactive shape, Which ease dealing with data.

3. Fonts Ninja

In your work as a Frontend developer, You may find a nice font that makes you impressed and you need to use it in your application but the problem is that you need to know its name And that is exactly what fonts ninja came to solve, it tells you all fonts name in any website.

4. Grepper

Nice and very good chrome extension that help you in the development process by shoeing your problem solution in google search result, So You should try it.

5. Redux devtools

Great Extension if you use Redux, It give You all tools to debug analyze store and all reducers in your application.

6. Wappalyzer

As a developer sumtimes you want to know the technologies that used in a specific website, This extension solve this problem, It tell you every technologies that is used in any website.

7. Web Developer

Another Great Chrome Extension that Contains Nice tools for You as a Web developer.
It let you disable javascript or CSS from your website and more tools that absolutely will help you in your development process

8. Responsive Viewer

As a frontend web developer you should test your application if it is responsive or not in chrome or firefox dev tools, these tools are limited in size but with Responsive Viewer, you can test your website on every screen that you like and you can show more one view to compare your website on different screens.

9. Lorem Generator

We may need random text to test a frontend website and know how it will be.
Lorem Generator Extension will solve this problem, It makes you random text with any length that you want.

10. Web developer Checklist

Great extension that helps you to make your application 100% true and ideal.
It test your website and gives you what your website needs to be Ideal

Design your Forms with React, Joi and Tailwind CSS

Ahmed Mohamed — Thu, 30 Jun 2022 23:19:14 +0000

Introduction

One of the important things in the Forms Handling Process in Your Frontend App is that be sure that all of the data is true before sending it into the backend but the Form validation process, is a little hard and contains a lot of details that you should repeat it in every project that you need to validate forms data in it.
So to solve this problem we see tens of packages that are used to handle or solve this problem and one of these packages is Joi.
Joi is a package that use to validate forms data that use it in your front-end projects.
And in this article we will design a simple login form with react and tailwind and Joi, so let's get started...👉

1. Initialize project and install Dependencies

First clone the following Repo in your machine by the typing the following command in your terminal:

git clone https://github.com/ahmedmohmd/login-form

Now our project has the following structure:

|
├── public
│   └── index.html
├── README.md
├── src
│   ├── App.js
│   ├── components
│   │   └── LoginForm.jsx
│   ├── index.css
│   ├── index.js
│   └── utils
│       └── formValidate.js
└── tailwind.config.js
├── package.json
├── package-lock.json
├── postcss.config.js
└── .gitignore

Now we will install project Dependencies by typing the following command in Terminal:

npm i

2. Create `JSX` and Form Styles

Now we can say that we are ready to make our Nice Form, first, we will create JSX and styles of the form.
Go to LoginForm.jsx and type the following code:

LoginForm.jsx:

function LoginForm() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-wi-500 min-w-screen">
      <div className="container flex items-center justify-center p-3 mx-auto">
        <form className="flex flex-col items-center justify-center w-full gap-10 px-5 py-5 shadow-xl rounded-2xl sm:w-1/3">
          <div class="w-full flex flex-col justify-center items-stretch gap-2">
            <label for="email" class="block font-medium text-gray-900 ">
              <span class="bg-purple-100 text-purple-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
                Email
              </span>
            </label>
            <input
              type="email"
              class="placeholder:text-slate-400 placeholder:font-bold outline-none bg-gray-50 border border-gray-300 text-slate-500 font-bold text-md rounded-xl block w-full p-2.5"
              placeholder="john.doe@company.com"
            />
          </div>
          <div class="w-full flex flex-col justify-center items-stretch gap-2">
            <label for="email" class="block font-medium text-gray-900 ">
              <span class="bg-purple-100 text-purple-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
                Password
              </span>
            </label>
            <input
              type="password"
              class="placeholder:text-slate-400 placeholder:font-bold outline-none bg-gray-50 border border-gray-300 text-slate-500 font-bold text-md rounded-xl block w-full p-2.5"
              placeholder="•••••••••"
            />
          </div>
          <button
            type="submit"
            class="text-white bg-blue-500 hover:bg-blue/80 justify-center gap-2 focus:ring-4 focus:outline-none focus:ring-blue-500/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:hover:bg-[#FF9119]/80 dark:focus:ring-[#FF9119]/40 mr-2 mb-2"
          >
            <span>Send</span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="w-6 h-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth={2}
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M13 5l7 7-7 7M5 5l7 7-7 7"
              />
            </svg>
          </button>
        </form>
      </div>
    </div>
  );
}

3. Handle Inputs and Form Submitting

After building JSX and styles of our Component, we will handle input values and events.
LoginForm.jsx:

function LoginForm() {
  const [formData, setFormData] = useState({
    email: "",
    password: "",
  });

  return (
    <div className="flex items-center justify-center min-h-screen bg-wi-500 min-w-screen">
      <form onSubmit={handleSubmit}>
        //* Email Input
        <input
          onChange={(event) => {
            setFormData({ ...formData, email: event.target.value });
          }}
        />

        //* Password Input
        <input
          onChange={(event) => {
            setFormData({ ...formData, password: event.target.value });
          }}
        />
      </form>
    </div>
  );

  function handleSubmit(event) {
    event.preventDefault();
    console.log(JSON.stringify(formData));
  }
}

In the above code, we put an onClick event on every input and listen to any change in inputs values like typing and then assign it in keys (email, password) in the formData State.

After handling changes in inputs values we make an onSubmit event on the form to handle Submit process.
First, we prevent the default behavior of submitting the form by typing event.preventDefault(), and then we log formData as JSON data in console.

4. Validate Form Data by Joi

formValidate.js:

//* Form Validate Function
const formValidate = (formData, schema) => {
  const errors = {};
  const options = { abortEarly: false };
  const { error } = schema.validate(formData, options);

  if (!error) return null;

  if (error)
    for (let item of error.details) {
      errors[item.path[0]] = item.message;
    }

  return errors;
};

export { formValidate };

LoginForm.jsx:

const loginFormSchema = Joi.object({
  email: Joi.string()
    .email({
      tlds: { allow: ["com"] },
    })
    .required(),
  password: Joi.string().min(4).max(8).required(),
});

function LoginForm() {
  const [errors, setErrors] = useState({
    email: "",
    password: "",
  });

  return (
    <div>
      <form>
        //* Email Input
        <input type="password" placeholder="•••••••••" />
        {errors.email ? (
          <div
            class="flex p-4 text-sm text-white bg-red-400 rounded-lg dark:bg-red-200"
            role="alert"
          >
            <svg
              class="inline flex-shrink-0 mr-3 w-5 h-5"
              fill="currentColor"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                clip-rule="evenodd"
              ></path>
            </svg>
            <div>{errors.email}</div>
          </div>
        ) : null}
        //* Password Input
        <input type="email" placeholder="john.doe@company.com" />
        {errors.password ? (
          <div
            class="flex p-4 text-sm text-white bg-red-400 rounded-lg dark:bg-red-200"
            role="alert"
          >
            <svg
              class="inline flex-shrink-0 mr-3 w-5 h-5"
              fill="currentColor"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                clip-rule="evenodd"
              ></path>
            </svg>
            <div>{errors.password}</div>
          </div>
        ) : null}
      </form>
    </div>
  );

  function handleSubmit(event) {
    event.preventDefault();
    const errorsResult = formValidate(formData, loginFormSchema);

    if (errorsResult) {
      setErrors(errorsResult);
    } else {
      setErrors({});
      console.log(JSON.stringify(formData));
    }
  }
}

First we import the formValidate function in the LoginForm component. this function takes two arguments:
1. formData
2. schema

and return error Object that contains our inputs Error if it is found.

Then we will import Joi into our Component and define the Joi schema that the job will compare with our form data.
We will make a state that will contain form data errors object
Then at submitting handler we will check if there are errors or not and update errors to state according to it
finally we will show danger alerts below each input if there are errors.

And this is the final code:

LoginForm.jsx:

import { useState } from "react";
import Joi, { required } from "joi";
import { formValidate } from "../utils/formValidate";

const loginFormSchema = Joi.object({
  email: Joi.string()
    .email({
      tlds: { allow: ["com"] },
    })
    .required(),
  password: Joi.string().min(4).max(8).required(),
});

function LoginForm() {
  const [formData, setFormData] = useState({
    email: "",
    password: "",
  });

  const [errors, setErrors] = useState({
    email: "",
    password: "",
  });

  return (
    <div className="flex items-center justify-center min-h-screen bg-wi-500 min-w-screen">
      <div className="container flex items-center justify-center p-3 mx-auto">
        <form
          onSubmit={handleSubmit}
          className="flex flex-col items-center justify-center w-full gap-10 px-5 py-5 shadow-xl rounded-2xl sm:w-1/3"
        >
          <div class="w-full flex flex-col justify-center items-stretch gap-2">
            <label for="email" class="block font-medium text-gray-900 ">
              <span class="bg-purple-100 text-purple-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
                Email
              </span>
            </label>
            <input
              type="email"
              class="placeholder:text-slate-400 placeholder:font-bold outline-none bg-gray-50 border border-gray-300 text-slate-500 font-bold text-md rounded-xl block w-full p-2.5"
              placeholder="john.doe@company.com"
              onChange={(event) => {
                setFormData({ ...formData, email: event.target.value });
              }}
            />
            {errors.email ? (
              <div
                class="flex p-4 text-sm text-white bg-red-400 rounded-lg dark:bg-red-200"
                role="alert"
              >
                <svg
                  class="inline flex-shrink-0 mr-3 w-5 h-5"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                    clip-rule="evenodd"
                  ></path>
                </svg>
                <div>{errors.email}</div>
              </div>
            ) : null}
          </div>
          <div class="w-full flex flex-col justify-center items-stretch gap-2">
            <label for="email" class="block font-medium text-gray-900 ">
              <span class="bg-purple-100 text-purple-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
                Password
              </span>
            </label>
            <input
              type="password"
              class="placeholder:text-slate-400 placeholder:font-bold outline-none bg-gray-50 border border-gray-300 text-slate-500 font-bold text-md rounded-xl block w-full p-2.5"
              placeholder="•••••••••"
              onChange={(event) => {
                setFormData({ ...formData, password: event.target.value });
              }}
            />
            {errors.password ? (
              <div
                class="flex p-4 text-sm text-white bg-red-400 rounded-lg dark:bg-red-200"
                role="alert"
              >
                <svg
                  class="inline flex-shrink-0 mr-3 w-5 h-5"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                    clip-rule="evenodd"
                  ></path>
                </svg>
                <div>{errors.password}</div>
              </div>
            ) : null}
          </div>
          <button
            type="submit"
            class="text-white bg-blue-500 hover:bg-blue/80 justify-center gap-2 focus:ring-4 focus:outline-none focus:ring-blue-500/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:hover:bg-[#FF9119]/80 dark:focus:ring-[#FF9119]/40 mr-2 mb-2"
          >
            <span>Send</span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="w-6 h-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth={2}
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M13 5l7 7-7 7M5 5l7 7-7 7"
              />
            </svg>
          </button>
        </form>
      </div>
    </div>
  );

  function handleSubmit(event) {
    event.preventDefault();
    const errorsResult = formValidate(formData, loginFormSchema);

    if (errorsResult) {
      setErrors(errorsResult);
    } else {
      setErrors({});
      console.log(JSON.stringify(formData));
    }
  }
}

export default LoginForm;

And finally result will be like this:

Conclusion

After reading this article you should take a look at the Joi package and how it can be easier from the validation process, there are a lot of other packages like Joi you can use, but the principle is the same.
I hope that this article helps you, thanks for reading, and see you in the next article.

Why You should use Tailwind Now?

Ahmed Mohamed — Sun, 26 Jun 2022 07:15:05 +0000

Introduction

Until the last 4 projects, I was using the Bootstrap framework then I started with reactstrap and react-bootstrap and I was Satisfied with them, But Recently I started with Tailwind CSS and I realized that it is an Amazing CSS Framework, So in This Article, We Will take about Some advantages of Tailwind CSS.
So let's Get Started...👉

Why Should You use Tailwind instead of Bootstrap?

Write Less, Do More
One of the Measure problems that I was Facing when I am using Bootstrap was that I should write more and more CSS code to overite Bootstrap Properties and this is a causes performance problems in your website but with tailwind It's different, Now in some projects, I do not use any external CSS code.
More Performance
Tailwind uses the PurgeCSS tool to remove unused CSS code and if you do not know that is a fantastic feature because performance is the most thing that you should care about in your website, On the other hand, bootstrap does not have this feature.
Support the Dark and Light theme
Another amazing Feature of tailwind that I loved so much is that tailwind supports dark and light theme features in the easiest way and with Flowbite library, It just got easier and easier.
pseudo-classes handling
In tailwind, you can set and handle pseudo-classes like hover, active, placeholder ...etc
Easy to be configurable and customizable
As you know the framework only will not satisfy all your needs, you may need some extra colors, fonts, standard sizes, and more so you need to implement these things by yourself in external style sheets but with a tailwind, you can implement it by easy way, you can add your preferable colors, fonts, colors and animations just in a few seconds.

Conclusion

Tailwind is not just a normal CSS framework that has some predefined classes, It uses technologies and tools that make your development process as can easier so you should try it at least once in your projects.
And that is it, see you in the next article...🖐️

How to Use SWR with React

Ahmed Mohamed — Thu, 23 Jun 2022 06:05:28 +0000

Introduction

If You are Front End Developer, of Ofcourse you Use the Axios Library at Least Once in Your Projects.
Axios is Nice and One of the Best Libs that Dealing With APIs, But If I told You that There is a Library That is Better than Axios.
So, Let's Get Started...

What is SWR?

SWR is a Shortcut for stale-while-revalidate and It’s a React Hooks library for remote data fetching.

SWR Contain Three Main Stages:
1- Steal: Return Data from Cache.
2- Revalidate Send a Fetch Request.
3- Finally comes with the up-to-date data.

Now If You Wonder, Why I should use SWR?
I am still Fine With Axios.

The Thing That You should Know that SWR is not Like Axios, You can Think That It is a Superset of Axios, So You can use Axios as a part of it.
SWR contains a Lot of Features That Axios Did not Have like:

Fast, lightweight and reusable data fetching
Built-in cache and request deduplication
Real-time experience
Transport and protocol agnostic
SSR / ISR / SSG support -TypeScript ready
React Native
Fast page navigation
Polling on interval
Data dependency
Revalidation on focus
Revalidation on network recovery
Local mutation (Optimistic UI)
Smart error retry
Pagination and scroll position recovery
React Suspense
...etc

SWR use React Suspense Technique which prevents React Component from being Rendered Until the Response is Ready and During This Time Give You a Fallback Value.

SWR Installation?

First Create React Project by the Following Command in Your Terminal:

npx create-react-app ./swr-project && cd swr-project

Then install SWR by Following Command:

npm i swr

After Knowing What is React SWR and How to Install it in Your Project, Let's get an example of it.

//* Imports
import axios from "axios";
import useSWR from "swr";

//* Set Axios Base URL
const apiEndPoint = "https://jsonplaceholder.typicode.com";
axios.defaults.baseURL = apiEndPoint;

//* Fetcher Function
const fetcher = (url) => axios.get(url).then((res) => res.data);

function Users() {
  const { data: users, error } = useSWR("/users", fetcher);

  if (error) return <h1>Error!</h1>;
  if (!users) return <h1>Loading...</h1>;

  return (
    <div>
      <h1>Users</h1>
      {users.map((user) => {
        return <h2>{user.name}</h2>;
      })}
    </div>
  );
}

export default Users;

In The Above Example, We Use useSWR React Hook to fetch users data from a JSON Placeholder Website which gives us fake APIs.
As we see useSWR() Hook takes Two arguments:

URL and its API End Point (in our case Users API)
Fetcher Function this is the function that SWR uses to fetch the data from different APIs. You can use any library as Fetcher Function like fetch() or Axios ..etc

And Give Us two Values:

Data
Error

As I told You before SWR use React Suspense Technique so we can add a fallback value to show it until the data is fetched successfully, in our example we just show Loading... Word but you can replace it with nice loading animations.
So run your project to see the following result.

Notice that you should handle error and loading values before your react component main content.

Make fetch function Global

One of the SWR features is that you can make the fetch function global in your project.
SWR introduces to us a Context called SWRconfig which gets the fetcher function and shares it between all project components, let's get an example to understand.

App:

//* Imports
import React from "react";
import { SWRConfig } from "swr";
import axios from "axios";
import Users from "./Users";

//* Set Axios Base URL
axios.defaults.baseURL = "https://jsonplaceholder.typicode.com/";

function App() {
  const fetcher = (url) => axios.get(url).then((res) => res.data);

  return (
    <SWRConfig
      value={{
        fetcher,
      }}
    >
      <Users />
    </SWRConfig>
  );
}

export default App;

For in App component, we import SWRconfig Contact from SWR and then we wrapped the App component in it, then we add the fetcher function.

Now we can use SWR in our components without the fetcher function in the Users Component.

Users:

//* Imports
import useSWR from "swr";

function Users() {
  const { data: users, error } = useSWR("/users");

  if (error) return <h1>Error!</h1>;
  if (!users) return <h1>Loading...</h1>;

  return (
    <div>
      <h1>Users</h1>
      {users.map((user) => {
        return <h2>{user.name}</h2>;
      })}
    </div>
  );
}

export default Users;

Make Your Fetcher function by SWR.

Now let's make our Fetcher function to use in future projects.
Our function will get the URL and return three main values:

Data
IsError
isLoading

//* Imports
import useSWR from "swr";
import axios from "axios";

//* Fetcher Function
const fetcher = (url) => axios.get(url).then((res) => res.data);

const useFetch = (url) => {
  const { data, error } = useSWR(url, fetcher);

  return {
    data: data,
    isLoading: !data && !error,
    isError: error,
  };
};

export default useFetch;

Notice That our Fetcher Function uses an useSWR() hook so you should use it only in react components.

Conclusion

Finally, we just know a small introduction about SWR because it has a lot of other features like pagination and Revalidations...etc, that you should try and know it.
See You in the Next Article.

Promises in JavaScript

Ahmed Mohamed — Fri, 17 Jun 2022 12:24:48 +0000

Introduction

Before ECMA Script 6 we were using Callback Functions to handle Asynchronous Operations.

What is Callback Function?

Callback Function is a function passed to another function to be invoked when the asynchronous operation completes.

setTimeout() and setEnterval() is an Example of Callback Functions.

To simplify Callback Function Definition, Let's take an example with the setTimeout() Function.

//* Callback Function
function sayHello() {
  console.log("Hello, World!");
}

setTimeout(sayHello, 1000);

Above Code, We used setTimeout() Function that get another Function sayHello() as a Parameter and then Executes it after a given Time 1 Second, in This Example sayHello() Function is the Callback Function Which was Executed after 1 Second.

So, the Above Example will Log "Hello, World!" in the Console after 1 Second.

Now after Understanding Callback Function Concept let's take a More Complicated Example on setTimeout() Function.

setTimeout(() => {
  console.log("I"); //* after (1) second
  setTimeout(() => {
    console.log("Love"); //* after (3) second
    setTimeout(() => {
      console.log("JavaScript"); //* after (6) second
      setTimeout(() => {
        console.log("Very"); //* after (10) second
        setTimeout(() => {
          console.log("Much"); //* after (15) second
          setTimeout(() => {
            console.log("!"); //* after (21) second
          }, 6000);
        }, 5000);
      }, 4000);
    }, 3000);
  }, 2000);
}, 1000);

In the above example we used the setTimeout Function a lot of Times to log "I Love JavaScript Very Much !" Sentence but every word after a special time.
But Did You Notice Things in This Example?
Yes Exactly The Code shape is Not Practical, It has 6 Callback Functions, And in Large Scale Projects You will have More and More of these Nested Callback Functions.
This Problem is Known as Callback Hell or Pyramid of Doom.

To Solve this Problem ES6 gets a new Object Called Promises.
To Understand the Promise Concept, Let Me and You, I give you a Promise that I Will Give You Your Book in the Next Week, This is Called a Promise.
Now, What is the possible instances of the promise I made to you?
Good, There is Two-State:

I will give You Your Book and this is called Resolved State
I will not Give You Your Book and this called Rejected State
In Between Those two States, There is another State Called Pending State

Now Let's Take an Example of a Promise

const myPromise = new Promise((resolve, reject) => {
  const connect = true;

  if (connect) {
    resolve("Your Connection Success :)");
  } else {
    reject(new Error("Sorry, Connection Failed :("));
  }
});

myPromise
.then((res) => {
  console.log(res);
})
.catch((error) => {
  console.log(error);
})
.finally(() => {
  console.log("Process is Done :)");
});

In the above example, we use a Promise Object to handle a Connection Process.
We Notice that promise have three ways to Get data from It:

then() Function to get Response in Resolved Case.
catch() Function to get Error in Rejected Case.
finally() Function Which Excuted in all Cases.

The Fantastic Thing in Promise is That you Can any Numbers of then() Functions, Let's take an example:

//* Previous Code.....
myPromise
  .then((res) => {
    return res;
  })
  .then((res) => `${res} 1`)
  .then((res) => `${res} 2`)
  .then((res) => `${res} 3`)
  .then((res) => `${res} 4`)
  .then((res) => `${res} 5`)
  .then((res) => console.log(res))
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log("Process is Done :)");
});

In The Above Example the Result will be Like This in Console:

Your Connection Success :) 1 2 3 4 5
Process is Done :)

`async` and `await` Syntax

In ECMA Script 2017 We have a new Syntactical Suger to ease Promises Handling by using async and await Keywords.
So if we will write the Previous Example, It will be Like This:

const connectFunc = async () => {
  try {
    const res = await myPromise;
    console.log(res);
  } catch (error) {
    console.log(error);
  } finally {
    console.log("Process is Done :)");
  }
};

As We See, To use the async Keyword and await Method, we add async before Function that will contain Promises Handling Code, and We use the await Keyword before any Async Line, and Finally We put all of these in try-catch block.

Conclusion

Finally, every day that passes by, there are new things that are added and other things that are Deprecated.
So, do not forget to follow all news in the field to develop yourself and your skills.

What is NPM?

Ahmed Mohamed — Fri, 11 Feb 2022 15:38:34 +0000

Introduction

If you are Front End or Back End developer It is sure to have been used NPM (Node Package Manager) at least once in your projects, so in this series, we will talk about NPM and we will cover those topics:

Install NPM
package.json file
Install NPM Packages
Versions in NPM Packages
Dealing with NPM Packages
Update Existing Packages
Uninstall NPM Packages
Create and Publish Your Own NPM Package.
Update the published NPM Package.

And now let's begin in the first section.

What is NPM?

NPM is a Package Manager which allows to developers shear their packages between them and use these packages in their projects, and it is a default package manager for JavaScript Run time environment Node JS.

At this article time, NPM contains 1,873,569 Package Which allows him to be the most famous package manager.

NPM consists of two main parts:

CLI Tool to deal with packages in the projects.
Online repository that hosts javascript package.

Installing NPM

To install NPM in our machine we should Install Node JS and NPM will be downloaded with it, so first we will download Node Js:
Open the Node JS website and download it.
Setup Node JS like any program on your PC.
After that open your terminal and type this commands:

> node --version 
v16.13.2

> npm --version
8.1.2

And now Node JS and NPM are available in our Machine and we can use them in our projects.

We will notice that the Node version differs from NPM Version and this is normal because they 2 totally different pieces of software and evolve separately.

In this section, we talked about what is NPM and how we can install it in our machine to use it in our projects, and in the next article, we will talk about the package.json file in detail.
So See you in the Next Section...🖐️

Type Checking in React

Ahmed Mohamed — Wed, 09 Feb 2022 01:52:57 +0000

Introduction

We all know React, is a super power JavaScript framework that allows you to make beautiful SPAs (Single Page Applications) websites.

React is Unidirectional Data, which means that the data in your React Application flow in one direction (from Parent Component to Child Component) via props concept.

One of your job as a developer or programmer is to anticipate all potential bugs and fix them in your code.

So, In this Article, we will talk about Two important Methods that can help us to manage and validate the props data that our child component receives it.

Default Props
Porp Types

The Explaining

Default Props Default Props is A property in React Component that allows you to set a default value to your props and it will appear if any props were not founded.

To understand Default props look at the below example:

App Component:

function App() {
  const [users, setUsers] = useState();

  useEffect(() => {
    async function getUsers() {
      try {
        const result = await axios.get(
          "https://jsonplaceholder.typicode.com/users"
        );
        const { data: users } = result;
        setUsers(users);
      } catch (error) {
        console.log(error);
      }
    }
    getUsers();
  }, []);

  return (
    <div className="App">
      <h1>Our Users</h1>
      <Users users={users} />
    </div>
  );
}

export default App

Users Component:

function Users({ users }) {
  return (

      users.map((user) => (
        <div
          key={user.id}
        >
          Name: <h2>{user.name}</h2>
          <p>
            Email: <span>{user.email}</span>
          </p>
        </div>
      ))

  );
}

export default Users;

Previous Code is for A simple Two React Components App and Users Component.

Our App component will fetch fake data for users from JSON Placeholder website by using Axios Library, then it will store this data in a state and Finally, it will send this data to a Users Component.

In the Users Component, We will receive data as props, and finally, we will map across it to show users' data.

Save the changes, run your project via the npm start command.
and you will see this error:

But what is Wrong Here ⁉️

This is because we did not add any default value to the props in the Users component so before we fetch our data from the server, the default value or users prop will be undefined so when the map method try to loop it, it will face a problem because undefined is not an array.

And this is a problem that Default Props Property Can Solve.
So to solve this problem, We will define the Default Props Property in our child component, in this case, Users then we will add our props data and its default value as a key and value like below:

...
Users.defaultProps =  {
  users: []
}

Note: Your default property should be valid according to the data that you will receive and the methods that you will use, in this case, our data is an array of objects, and we will use the map method on it so our default data type will be an empty array.

Save the changes, run your project, and Voila!!.

We can solve the previous problem by another ways like:

assign the initial state for users state in App component as an empty array like this:

...
const [users, setUsers] = useState([]);
...

use logical operator or in our Users Component like this:

(users || []).map(...)

All of these methods are true and you could use them in small projects which receive small props, but in big projects which deal with a lot of props, your will need your code to be cleaner and ease dealing with bugs in it, so you can use Default Props Property in the Big projects and other methods with a small projects.

Prop Types: prop-types is a package that allow you to check types of data that be send via a props.

It is important feature and that you should dealing with Big project and recieve a lot of data via props.

Let us return to our previous project.
To use prop-types package we should install it in our project so we will install it by the following command:

npm i prop-types

then we will import it in our project in this case Users Component.

import PropTypes from "prop-types"

and Know we are ready to use it.
to use it we will set it as as a property in our Users Component, then we will define the data types that we need our props follow it.

...

Users.propTypes = { 
  users: PropTypes.array.isRequired
}

Note: You must use the Identifiers for the prop-types variables as we used in this article and you must not change any letter from capital to small or vice versa.

Now if we pass the another type as a prop to User Component:

...
Users.propTypes =  {
  users: PropTypes.number.isRequired
}

We will get the following Error in Console:

Which means that prop-types lib is working well.

props-types Package accept a lot of types that you can use it in your Projects and these is a few of them:

 // Basic Types
  optionalArray: PropTypes.array
  optionalBigInt: PropTypes.bigint
  optionalBool: PropTypes.bool
  optionalFunc: PropTypes.func
  optionalNumber: PropTypes.number
  optionalObject: PropTypes.object
  optionalString: PropTypes.string
  optionalSymbol: PropTypes.symbol

  // An array of certain type
  PropTypes.arrayOf(ProtoTypes.number) 

  // An object taking on a particular shape
  optionalObjectWithShape: PropTypes.shape({
    optionalProperty: PropTypes.string,
    requiredProperty: PropTypes.number.isRequired
  })

  // An object that could be one of many types
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ])

  // An object with warnings on extra properties
  optionalObjectWithStrictShape: PropTypes.exact({
    optionalProperty: PropTypes.string,
    requiredProperty: PropTypes.number.isRequired
  })

So Our complete code for Project is:

App Component:

import axios from "axios";
import { useEffect, useState } from "react";
import Users from "../Users";
import "./styles.css";

function App() {
  const [users, setUsers] = useState();

  useEffect(() => {
    async function getUsers() {
      try {
        const result = await axios.get(
          "https://jsonplaceholder.typicode.com/users"
        );
        const { data: users } = result;
        setUsers(users);
      } catch (error) {
        console.log(error);
      }
    }
    getUsers();
  }, []);

  return (
    <div className="App">
      <h1>Our Users</h1>
      <Users users={users} />
    </div>
  );
}

export default App

Users Component:

import PropTypes, { array } from "prop-types";

function Users({ users }) {
  return users.map((user) => (
    <div key={user.id}>
      Name: <h2>{user.name}</h2>
      <p>
        Email: <span>{user.email}</span>
      </p>
    </div>
  ));
}

Users.defaultProps = {
  users: []
};

Users.propTypes = {
  users: PropTypes.array.isRequired
};

export default Users;

Conclusion

Checking Props types and set the default values to it is an important thing Especially in Big Projects, So it is better to use them in your projects.
Finally Keep Learning.

The most important Config Options in Typescript

Ahmed Mohamed — Mon, 07 Feb 2022 15:22:04 +0000

Introduction

If you are familiar with typescript, of course, you will know that it is a powerful tool and powerful skill to you as a web developer, TypeScript added Static typing to JavaScript, which eases us to detect the errors in our javascript Code in the development stage and save to us a lot of time and many features that javascript alone can not give it to us.
So in this article, we will dive into the important TypeScript configuration options which ease your development work.

Creating Files

Installing TypeScript

First, we will install typescript globally in our machine to use it anywhere in our machine.
Open your terminal and type this command:

npm install -g typescript

Create typescript JSON config file
Now we will create a typescript JSON file.
Open your project folder, then open the terminal on it and type this command in it:

tsc --init

You will notice that new JSON files are created and if you open it, you will see the typescript options that you can enable or disable it.

And now we are ready to test the options.

Config Options Explaining

1. Public Options

Include, Exclude and FilesOptions
These options let us to convert or not convert specific ts files.

Include option: this option accept an array of files, and force typescript complier to convert ts files that only in this array.

"include": ["file1.ts", "file2.ts", ...etc]

Excludeoption: This Option accept array of files too, but unlike Include option, It prevent any ts file from be excuted and converted into js file.

"exclude": ["file1.ts", "file2.ts", ...etc]

Files Option: This option is like Include option and it accepts an array of files, but there is a little different here if any of ts files in Files does not exist in your project typescript compiler will throw an error and this does not occur in include option. So be careful when using any of these two options in your project.

"files": ["file1.ts", "file2.ts", ...etc]

2. Compiler Options

Language and Environment Section

target option: by this option we can control in the javascript edition that our ts files will converted to it, it contains a lot of options and ECMA script editions like: "ES6", "ES5", "ES3" and "ESNext" ...etc.

"target": "es2016"

2.Modules Section

module option: this option control the modules pattern that we can use in our project, is also contain a lot of modules patterns that we can choose from any one of them like: "commonjs", "amd", "umd" and more.

"module": "commonjs"

rootDir option: this option describes the path of the Root Directory that our ts files are a child in it, its default value is "./" and by this option you can specify any path, but notice that any of ts files out of this directory will not be converted to js files.

"rootDir": "./"

baseUrl option: this option sets a base directory to resolve non-absolute module names. let me show you:

import "getUsers" from "./components/services/users.js"

look at the previous import statement, if we set the baseUrl option to "./components/" we can achieve the same thing by below import statement:

import "getUsers" from "services/users.js"

3.JavaScript Support Section

allowJs option: this option allows us to use javascript files and import them into our ts files, so by activating this option you can import any javascript code in your typescript files.

"allowJs": true

checkJs option: this option allow typescript compiler to report errors that occurs in js files. So if you allow _checkJs _ option it's preferable to enable this option to ease errors checking in js files.

"checkJs": true

4.Emit Section

sourceMap option: source map file is a file that maps from the transformed source to the original source. you can think of source-map as a file that links every token in your minified file to a pretty and human-readable file that allows you to debug your code easily.

notice that source map file is created in development not production environment for performance and security reasons.

"sourceMap": true

outDir Option: this option accept the dire name and it will set all converted js files on it, so if we enable this option and set a Dir name in it, all our ts files will be converted and collected in the dire that we were set it as js files.

"outDir": "./"

outFile Option: this option is like the previous option except that instead of collecting all converted js files in one Directory, all our ts code will be collected and executed in a single js file.

"outFile": "./main"

Note: outFile cannot be used unless module is "None", "System", or "AMD". This option cannot be used to bundle "CommonJS" or "ES6" modules.

removeComments Option: this option allow us to remove all comments from the converted js file.

"removeComments": true

noEmitOnError Option: This option prevent all ts files from be executed if any problem or error found. this error may be in a single file or a group of files.

"noEmitOnError": true

5.Type Checking Section

strict Option: this option control all checking rules that are used in typescript. if we looked under this option we will find other options:

// "noImplicitAny": true
// "strictNullChecks": true
// "strictFunctionTypes": true
// "strictBindCallApply": true
// "strictPropertyInitialization": true
// "noImplicitThis": true
// "useUnknownInCatchVariables": true
// "alwaysStrict": true
// "noUnusedLocals": true
// "noUnusedParameters": true
// "exactOptionalPropertyTypes": true
// "noImplicitReturns": true,
// "noFallthroughCasesInSwitch": true 
// "noUncheckedIndexedAccess": true
// "noImplicitOverride": true
// "noPropertyAccessFromIndexSignature": true
// "allowUnusedLabels": true 
// "allowUnreachableCode": true

There are the rules of typescript to check errors in your code.
so you can allow all of these rules by setting true value to strict option or you can customize them, you are free.

Conclusion

TypeScript config Options contain a lot of other options that ease your development work and in this article, I only explain a small piece of it, so you should continue in search to learn more and more.

Finally, Keep Learning.

DEV Community: Ahmed Mohamed

Equality Algorithms in JavaScript

Difference between _app.js and _document.js files in Next.js

Introduction

_app.js File

_document.js File

Conclusion

Awesome Chrome Extensions for Every Developer

Introduction

Extensions

1. React Developer Tools

2. JSON Formatter

3. Fonts Ninja

4. Grepper

5. Redux devtools

6. Wappalyzer

7. Web Developer

8. Responsive Viewer

9. Lorem Generator

10. Web developer Checklist

Design your Forms with React, Joi and Tailwind CSS

Introduction

1. Initialize project and install Dependencies

2. Create JSX and Form Styles

3. Handle Inputs and Form Submitting

4. Validate Form Data by Joi

Conclusion

Why You should use Tailwind Now?

Introduction

Why Should You use Tailwind instead of Bootstrap?

Conclusion

How to Use SWR with React

Introduction

What is SWR?

SWR Installation?

Make fetch function Global

Make Your Fetcher function by SWR.

Conclusion

Promises in JavaScript

Introduction

What is Callback Function?

async and await Syntax

Conclusion

What is NPM?

Introduction

What is NPM?

Installing NPM

Type Checking in React

Introduction

The Explaining

Conclusion

The most important Config Options in Typescript

Introduction

Creating Files

Config Options Explaining

1. Public Options

2. Compiler Options

Conclusion

2. Create `JSX` and Form Styles

`async` and `await` Syntax