Forem: Youssef Zidan

What are :nth-child & :nth-of-type Selectors.

Youssef Zidan — Wed, 29 Dec 2021 14:32:21 +0000

:nth-child Selector.

The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.

where n can be a number, a keyword, or a formula.

selector:nth-child(integer)

Select a specific child.

selector:nth-child(n).

Selects all children.

selector:nth-child(2n).

Selects every second child.

selector:nth-child(3n).

Selects every third child.

selector:nth-child(n+3).

Selects the third child, as well as all subsequent children.

selector:nth-child(-n+3).

Selects the first three children.

selector:nth-child(2n+5).

Starting from child number 5, Select every second child.

selector:nth-child(-2n+5).

Select every second child until child number 5.

selector:nth-child(odd).

Selects odd children.

selector:nth-child(even).

Selects even children.

:nth-of-type Selector.

The :nth-of-type(n) selector works the same but of a particular type.

Example

html

<div class="container">
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <span class="child"></span>
      <span class="child"></span>
      <span class="child"></span>
      <span class="child"></span>
      <span class="child"></span>
    </div>
</div>

css

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20%;
}
.parent {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
}
.child, span {
    height: 50px;
    width: 50px;
    background-color: lightgray;
}

.child:nth-of-type(1){
    background-color: darkblue;
}

Output

Select the first element of each type div and span.

What are Web Workers?

Youssef Zidan — Tue, 21 Dec 2021 17:57:56 +0000

What are Web Workers?
Using Web Workers
Browser Support

What are Web Workers?

A web worker is a JavaScript code that runs in the background and does not influence the page's performance.

As we all know, JavaScript is a single-threaded language, meaning it can only process one task at a time.

Example

let t = new Date();
console.log(`tastk 1 took: ${new Date() - t}ms`);
console.log(`tastk 2 took: ${new Date() - t}ms`);
console.log(`tastk 3 took: ${new Date() - t}ms`);

In the above example, we see the following output in the console, In sequence just like we wrote.

tastk 1 took: 0ms
tastk 2 took: 0ms
tastk 3 took: 1ms

Because those tasks are simple, when you open the console, you'll see that all three lines have been printed and almost no time in between.

But, What if one of the tasks took a longer time than the others?

Example

let t = new Date();
console.log(`tastk 1 took: ${new Date() - t}ms`);
console.log(`tastk 2 took: ${new Date() - t}ms`);
let i = 0;
while (i <= 10000000) {
  i++;
}
console.log(`tastk 3 took: ${new Date() - t}ms`);

In my machine, it took 2777ms to print task 3.

tastk 1 took: 0ms
tastk 2 took: 1ms
tastk 3 took: 2777ms

Another Example

Copy the following code and paste it inside index.html file or download the GitHub Repo

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Web Workers</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- counter -->
    <script>
      let i = 0;
      let intervalId = null;
      const counter = () => {
        if (!intervalId) {
          intervalId = setInterval(() => {
            i++;
            document.getElementById("counter").innerText = i;
          }, 300);
        } else {
          clearInterval(intervalId);
          i = 0;
          document.getElementById("counter").innerText = i;
          intervalId = null;
        }
      };
    </script>

    <!-- longCalculation -->
    <script>
      const longCalculation = () => {
        let i = 0;
        while (i <= 10000000000) {
          i++;
        }
        alert("Long calculation finished!");
      };
    </script>
  </head>
  <body>
    <h3>Counter: <span id="counter"> # </span></h3>
    <button onclick="counter()">Start Counter</button>
    <button onclick="longCalculation()">Long Calculation</button>
  </body>
</html>

The first button is a simple counter that begins counting as soon as you click on it.

The other button is a piece of code that takes a long time to run.

When you click on it, you'll see that the counter along with the rest of the page is frozen until the calculation is completed.

The browser may also issue a warning, such as this page is slowing down your browser or this page is not responsive, or anything similar.

Because JavaScript is a single-threaded language, it must wait for the calculation to complete before continuing.

Using Web Workers

This is where Web Workers come in to help.

If a process is likely to take a long time, the user is not expected to wait until it is completed. This is actually a poor user experience.

Instead, such long tasks should be performed in the background.

Let's create another button Worker Calculation.

<button onclick="workerCalculation()">Worker Calculation</button>

Now we will add the logic of the long calculation in a separate file.

worker.js

let i = 0;
while (i <= 1000000000) {
  i++;
}
postMessage("Worker calculation finished!");

And instead of alerting the value directly, we will use the postMessage method.

And the logic of the workerCalculation function will be:

<script>
  const workerCalculation = () => {
    let worker = new Worker("worker.js");
    worker.onmessage = (e) => {
      alert(e.data);
    };
  };
</script>

Create a worker instance.
Include the worker's path.
Add an onmessage callback that takes an event as an argument

We'll use this callback to alert the data that comes from the postMessage method when the calculation is complete.

The calculation will now take place in the background, and the page will not become unresponsive.

Final index.html file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Web Workers</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- counter -->
    <script>
      let i = 0;
      let intervalId = null;
      const counter = () => {
        if (!intervalId) {
          intervalId = setInterval(() => {
            i++;
            document.getElementById("counter").innerText = i;
          }, 300);
        } else {
          clearInterval(intervalId);
          i = 0;
          document.getElementById("counter").innerText = i;
          intervalId = null;
        }
      };
    </script>

    <!-- longCalculation -->
    <script>
      const longCalculation = () => {
        let i = 0;
        while (i <= 10000000000) {
          i++;
        }
        alert("Long calculation finished!");
      };
    </script>

    <!-- workerCalculation -->
    <script>
      const workerCalculation = () => {
        let worker = new Worker("worker.js");
        worker.onmessage = (e) => {
          alert(e.data);
        };
      };
    </script>
  </head>
  <body>
    <h3>Counter: <span id="counter"> # </span></h3>

    <button onclick="counter()">Start Counter</button>
    <button onclick="longCalculation()">Long Calculation</button>
    <button onclick="workerCalculation()">Worker Calculation</button>
  </body>
</html>

Browser Support

Web Workers aren't supported by all browsers.

We need to check whether the user's browser supports web workers before creating one:

if (typeof Worker !== "undefined") {
  // Yes!
} else {
  // No!
}

So our worker.js file should be:

if (typeof Worker !== "undefined") {
  let i = 0;
  while (i <= 1000000000) {
    i++;
  }
  postMessage("Worker calculation finished!");
} else {
  alert("Your browser doesn't support web workers.");
}

Learn more about Web Workers API

Formik Components.

Youssef Zidan — Fri, 29 Oct 2021 14:29:28 +0000

Formik Components
- Login Form With Formik Components
- Formik Reusable Components

Formik Components

Formik provides a few Components to be used that will save us more time, reduce code duplication, and make the code more consistent and organized.

Login Form With Formik Components

Import Formik, Form, Field and ErrorMessage from formik.
Wrap and return the entire form inside <Formik> Component with formik as a parameter.
Add initialValues, onSubmit and validationSchema as Props to <Formik> Component.
Replace the native <form> element with the <Form> Component.
Wrap and return the label, input, and the validation div message inside <Field> with formikField as a parameter.
Add the name attribute to the <Field> component instead of the <input> element.
spread {...formikField.field} inside the <input> element.
Wrap and return the validation div inside <ErrorMessage> component with ErrMessage as a parameter and add the name attribute to it.
log formikField inside a <pre> to see the entire formikField object.

import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as yup from "yup";

/**
 * LoginFormikComponents Component
 */
const LoginFormikComponents = () => {
  const initialValues = {
    email: "",
    password: "",
    rememberMe: false,
  };
  const onSubmit = (values) => console.log(JSON.stringify(values, null, 4));
  const validationSchema = yup.object({
    email: yup
      .string()
      .email("Please enter a valid email address")
      .required("Email field is required"),
    password: yup.string().required("Password field is required"),
  });

  return (
    <Formik
      initialValues={initialValues}
      onSubmit={onSubmit}
      validationSchema={validationSchema}
    >
      {(formik) => {
        return (
          <Form>
            <div style={{ padding: 20 }}>
              <Field name="email">
                {(formikField) => {
                  return (
                    <>
                      <label htmlFor="email" style={{ display: "block" }}>
                        email
                      </label>
                      <input type="email" id="email" {...formikField.field} />
                      <ErrorMessage name="email">
                        {(errMessage) => {
                          return (
                            <div style={{ color: "red" }}>{errMessage}</div>
                          );
                        }}
                      </ErrorMessage>
                      <pre>{JSON.stringify(formikField, null, 4)}</pre>
                    </>
                  );
                }}
              </Field>

              <Field name="password">
                {(formikField) => {
                  return (
                    <>
                      <label htmlFor="password" style={{ display: "block" }}>
                        password
                      </label>
                      <input
                        type="password"
                        id="password"
                        {...formikField.field}
                      />
                      <ErrorMessage name="password">
                        {(errMessage) => {
                          return (
                            <div style={{ color: "red" }}>{errMessage}</div>
                          );
                        }}
                      </ErrorMessage>
                      <pre>{JSON.stringify(formikField, null, 4)}</pre>
                    </>
                  );
                }}
              </Field>

              <Field name="rememberMe">
                {(formikField) => {
                  return (
                    <>
                      <label htmlFor="rememberMe" style={{ display: "block" }}>
                        remember me
                      </label>
                      <input
                        type="checkbox"
                        id="rememberMe"
                        defaultChecked={formikField.field.value}
                        {...formikField.field}
                      />
                      <pre>{JSON.stringify(formikField, null, 4)}</pre>
                    </>
                  );
                }}
              </Field>
              <button style={{ display: "block" }}>submit</button>
            </div>
            <pre>{JSON.stringify(formik, null, 4)}</pre>
          </Form>
        );
      }}
    </Formik>
  );
};
export default LoginFormikComponents;

Formik Reusable Components

As we can see inside each <Field> component there are

<label>
<input>
<ErrorMessage>

So, it's a good chance to create a Reusable Component that includes all of that.

FormikErrorMessage.jsx

import React from "react";
import { ErrorMessage } from "formik";

/**
 * FormikErrorMessage Component
 */
const FormikErrorMessage = ({ name }) => {
  return (
    <ErrorMessage name={name}>
      {(errMessage) => {
        return <div style={{ color: "red" }}>{errMessage}</div>;
      }}
    </ErrorMessage>
  );
};

export default FormikErrorMessage;

FormikField.jsx

import React from "react";
import { Field } from "formik";
import FormikErrorMessage from "./FormikErrorMessage";

/**
 * FormikField Component
 */
const FormikField = ({ name, type, label }) => {
  return (
    <Field name={name}>
      {(formikField) => {
        return (
          <>
            <label htmlFor={name} style={{ display: "block" }}>
              {label}
            </label>
            <input
              type={type}
              id={name}
              {...formikField.field}
              defaultChecked={formikField.field.value}
            />
            <FormikErrorMessage name={name} />
            <pre>{JSON.stringify(formikField, null, 4)}</pre>
          </>
        );
      }}
    </Field>
  );
};

export default FormikField;

And here is the final code after using the reusable components.

LoginFormikComponentsShared.jsx

import React from "react";
import { Formik, Form } from "formik";
import * as yup from "yup";
import FormikField from "./shared/FormikField";

/**
 * LoginFormikComponents Component
 */
const LoginFormikComponents = () => {
  const initialValues = {
    email: "",
    password: "",
    rememberMe: false,
  };
  const onSubmit = (values) => console.log(JSON.stringify(values, null, 4));
  const validationSchema = yup.object({
    email: yup
      .string()
      .email("Please enter a valid email address")
      .required("Email field is required"),
    password: yup.string().required("Password field is required"),
  });

  return (
    <Formik
      initialValues={initialValues}
      onSubmit={onSubmit}
      validationSchema={validationSchema}
    >
      {(formik) => {
        return (
          <Form>
            <div style={{ padding: 20 }}>
              <FormikField label="Email" name="email" type="email" />
              <FormikField label="Password" name="password" type="password" />
              <FormikField
                label="Remember Me"
                name="rememberMe"
                type="checkbox"
              />
              <button style={{ display: "block" }}>submit</button>
            </div>
            <pre>{JSON.stringify(formik, null, 4)}</pre>
          </Form>
        );
      }}
    </Formik>
  );
};
export default LoginFormikComponents;

CSS @Media Rules that fits all possible devices.

Youssef Zidan — Mon, 04 Oct 2021 14:54:17 +0000

In this shot, I will share my experience with responsive design using css @media Rules.

Before you start adding responsiveness into your app, you have to ask yourself
"am I going to design the app in Mobile-First Approach or Desktop-First Approach?"

Mobile-First Approach is designing or developing an app for Mobile before designing for desktop web or any other device.

Desktop-First Approach is designing or developing an app for Dekstop before designing for Mobiles or any other device.

Here are the @media rules that I personally use to fit all possible devices and screen sizes.

Sizes from Chrome device toolbar.

Desktop-first

/* ================ Desktop First ================ */

/* Any other bigger devices */
body {
  background: brown;
}
/* Ultra HD */
@media (max-width: 3840px) {
  body {
    background: red;
  }
}
/* Full HD */
@media (max-width: 2560px) {
  body {
    background: blue;
  }
}
/* Labtop L*/
@media (max-width: 1440px) {
  body {
    background: green;
  }
}
/* Labtop */
@media (max-width: 1024px) {
  body {
    background: cyan;
  }
}
/* Tablet */
@media (max-width: 768px) {
  body {
    background: purple;
  }
}
/* Mobile */
@media (max-width: 425px) {
  body {
    background: yellow;
  }
}

With Desktop-first we use max-width and the order of the sizes from larger (at the top) to smaller (at the bottom).

Mobile-first

/* ================ Mobile First ================ */

/* Any other smaller devices */
body {
  background: brown;
}
/* Mobile */
@media (min-width: 425px) {
  body {
    background: yellow;
  }
}
/* Tablet */
@media (min-width: 768px) {
  body {
    background: purple;
  }
}
/* Labtop */
@media (min-width: 1024px) {
  body {
    background: cyan;
  }
}
/* Labtop L*/
@media (min-width: 1440px) {
  body {
    background: green;
  }
}
/* Full HD */
@media (min-width: 2560px) {
  body {
    background: blue;
  }
}

/* Ultra HD */
@media (min-width: 3840px) {
  body {
    background: red;
  }
}

With mobile-first, we use min-width, and the order of the sizes from smaller (at the top) to larger (at the bottom).

JavaScript Reusable Constants that are used in most apps.

Youssef Zidan — Tue, 14 Sep 2021 17:40:00 +0000

Constants.js

Installation
Usage
Available Constants

Installation

npm i constants-js

Usage

// ES6
import { languages } from "constants-js";

console.log(languages);

Available Constants

Name	Variable Name	Type	Example Output
Continents	continents	Array	[{ africa: { label: "Africa", code: "AF" },... ]
Countries	countries	Array	[{ name: "Afghanistan", dial_code: "+93", code: "AF" }, ...]
Duration	duration	Array	[ { label: "day", value: 8.64e7 },... ]
Islamic Months	islamicMonths	Array	[ { label_en: "al-Muharram", label_ar: "ٱلْمُحَرَّم", value: 0 },...]
Languages	languages	Array	[{ code: "ab", name: "Abkhazian" }, ...]
Lower Case Characters	lowerCases	Array	["a", "b", "c",...]
Months	months	Array	[{ label: "January", value: 0 }, ... ]
Numbers	numbers	Array	["0", "1", "2",...]
special Characters	specialChars	Array	['!', '"', '#',...]
Upper Case Characters	upperCases	Array	["a", "b", "c",...]
Week Days	weekDays	Array	[{ label: "Sunday", value: 0 }, ... ]
Status	status	Object	{ continue: 100, switching_protocols: 101, processing: 102 }

Creating React Application with Webpack.

Youssef Zidan — Fri, 27 Aug 2021 12:03:53 +0000

Creating React Application with Webpack.

In this Article, we will learn how to create a React App with Webpack 5.

1. Create a folder and initialize NPM

npm init -y

2. Install the following packages

npm i react react-dom

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader html-webpack-plugin sass sass-loader style-loader url-loader webpack webpack-cli webpack-dev-server

3. Create .babelrc file

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

4. Create webpack.config.js file

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  output: {
    path: path.join(__dirname, "/dist"), // the bundle output path
    filename: "bundle.js", // the name of the bundle
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html", // to import index.html file inside index.js
    }),
  ],
  devServer: {
    port: 3030, // you can change the port
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, // .js and .jsx files
        exclude: /node_modules/, // excluding the node_modules folder
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.(sa|sc|c)ss$/, // styles files
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/, // to import images and fonts
        loader: "url-loader",
        options: { limit: false },
      },
    ],
  },
};

5. Create a /src folder and create the following files inside of it.

|-- src
  |-- App.js
  |-- App.scss
  |-- index.html
  |-- index.js

App.js

import React from "react";
const App = () => {
  return <h1>Hello React</h1>;
};

export default App;

App.scss

h1 {
  color: red;
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React with Webpack</title>
  </head>
  <body>
    <div id="app"></div>

    <!-- Notice we are pointing to `bundle.js` file -->
    <script src="bundle.js"></script>
  </body>
</html>

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./App.scss";

const el = document.getElementById("app");

ReactDOM.render(<App />, el);

6. Create Serve and Build Scripts

In your package.json file add the following

  //....
  "scripts": {
    "serve": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  //....

7. Run and modify your App

Run the app with npm run serve.
Open your browser on http://localhost:3030/
Try to modify and see the changes on the fly.

8. Build the App

Run npm run build in the terminal.
You will see the following output.

|-- dist
  |-- bundle.js
  |-- bundle.js.LICENSE.txt
  |-- index.html

Now open index.html file and you should see your App.

Configuring ESLint In React with Prettier, React Testing Library, Jest and AirBnb

Youssef Zidan — Mon, 16 Aug 2021 18:00:33 +0000

1. Installing VSCode Extensions
2. Installing the following packages as devDependencies
3. Creating configuration files
4. Overriding VSCode Settings
That's it!

In this article, we will configure linting in React projects with VSCode.

1. Installing VSCode Extensions

First, you need to install the following extensions in VS Code.

2. Installing the following packages as devDependencies

eslint
eslint-config-airbnb
eslint-config-prettier
eslint-plugin-import
eslint-plugin-jsx-a11y
eslint-plugin-prettier
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-testing-library
eslint-plugin-jest
jest
prettier

by simply running the following command in the terminal.

npm i -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-testing-library eslint-plugin-jest jest prettier

3. Creating configuration files

Create the following files in the root (same level as /src folder) of your project

.eslintrc.json
.eslintignore
.prettierrc
.prettierignore

.eslintrc.json

{
  "root": true,
  "settings": {},
  "env": {
    "browser": true, // Enables browser globals like window and document
    "amd": true, // Enables require() and define() as global variables as per the amd spec.
    "node": true, // Enables Node.js global variables and Node.js scoping.
    "jest/globals": true,
    "es2021": true
  },
  "parserOptions": {
    "ecmaVersion": 2020, // Use the latest ecmascript standard
    "sourceType": "module", // Allows using import/export statements
    "ecmaFeatures": {
      "jsx": true // Enable JSX since we're using React
    }
  },
  "extends": [
    "airbnb",
    "prettier",
    "plugin:testing-library/react",
    "plugin:jest/all"
  ],
  "plugins": ["prettier", "react", "react-hooks", "testing-library", "jest"],
  "rules": {
    "prettier/prettier": ["warn", {}, { "usePrettierrc": true }], // Use .prettierrc file as source
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], // To allow importing .jsx files
    "no-console": 1,
    "no-unused-vars": 1,
    "import/no-unresolved": 2,
    "no-undefined": 2,
    "react/jsx-uses-vars": 2
    // add more rules here...
  }
}

.eslintignore

node_modules

.prettierrc

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "all",
  "endOfLine": "auto"
}

.prettierignore

node_modules

4. Overriding VSCode Settings

Create .vscode folder and inside of it settings.json file

This is important due to different VSCode options among developers working on the same project.

settings.json

{
  "eslint.options": {
    "overrideConfigFile": ".eslintrc.json"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

That's it!

Now Press Ctrl + Shift + U to open the Output tap in VSCode, and from the Drop Down Menu select ESLint you should see something like this:

[Info  - 3:31:54 PM] ESLint server is starting
[Info  - 3:31:55 PM] ESLint server running in node v14.16.0
[Info  - 3:31:55 PM] ESLint server is running.

Data Structures in JavaScript [Hash Tables]

Youssef Zidan — Sun, 04 Jul 2021 16:01:24 +0000

What is a Hash Tables?
Why Hash Tables?
How Hash Tables Work?
What is a Hash Function?
Hash Tables with Big O Notation
Implementing Hash Tables

What is a Hash Tables?

Hash Tables, Hashes, Maps, Unordered Maps or Objects, There are many names to call This Data Structure.

In JavaScript, Objects are a type of a Hash Table

Hash Tables don't maintain order, like Arrays.

Why Hash Tables?

Imagine that we want to store the number of active Users in a particular app.

Doing this in Arrays is not the cleanest way.
So we need Hash Tables or Objects to do so

const users = {
  activeUsers: 1000,
};

How Hash Tables Work?

In Hash Tables we use keys and values.

keys instead of indexes to find the data in memory.

To make this happen we need a Hash Function.

First, We pass the key to the Hash Function

Then, the Hash Function will generate a hashed output to store the data in the memory.

What is a Hash Function?

A function that coverts inputs of any length into a fixed size string using a mathematical equation.

The output of a hash function has to be unique.

And the same input should always produce the same hashed output.

And there are many types of Hash Functions such as MD2, CRC23, SHA-1, ... and more.

You can try it here

Example of a simple Hash Function

function hashFunction(key) {
  let hash = 0;
  for (let i = 0; i < key.length; i++) {
    hash = hash + key.charCodeAt(i);
  }
  return hash;
}
// Giving it the string "Hello"
console.log(hashFunction("Hello")); // 500
console.log(hashFunction("Hello")); // 500
console.log(hashFunction("Hello")); // 500

// Giving it the string "hello"
console.log(hashFunction("hello")); // 532
console.log(hashFunction("hello")); // 532
console.log(hashFunction("hello")); // 532

Hash Tables with Big O Notation

- Access    => O(1) || O(n).
- Insert    => O(1).
- Delete    => O(1).

Later in the article we will know why Accessing might be O(n).

Example

const user = {
  firstName: "Youssef",
  lastName: "Zidan",
};

// Access // O(1)
console.log(user.firstName); // "Youssef"

// Insert // O(1)
user.job = "Web Developer";
console.log(user.job); // "Web Developer"

// Delete O(1)
delete user.lastName;
console.log(user.lastName); // undefined

Implementing Hash Tables

In order to really understand Big O with Hash Tables, we are going to Implement one.

class HashTable {
  constructor(size) {
    this.data = new Array(size);
  }

  // hash function
  _hash(key) {
    let hash = 0;
    for (let i = 0; i < key.length; i++) {
      hash = (hash + key.charCodeAt(i) * i) % this.data.length;
    }
    return hash;
  }

  // O(1)
  set(key, value) {
    let address = this._hash(key);
    if (!this.data[address]) {
      this.data[address] = []; // O(1)
      this.data[address].push([key, value]); // O(1)
    } else {
      this.data[address].push([key, value]); // O(1)
    }
  }

  // O(1) || O(n)
  get(key) {
    let address = this._hash(key); // O(1)
    let current = this.data[address]; // O(1)
    if (current) {
      for (let i = 0; i < current.length; i++) {
        // O(n)
        // O(1) if current.length === 1
        // or the ele is found in the first index
        if (current[i][0] === key) {
          return current[i][1];
        }
      }
    } else {
      // O(1)
      return undefined;
    }
  }

  keys() {
    if (!this.data.length) {
      return undefined;
    }
    const keys = [];
    for (let i = 0; i < this.data.length; i++) {
      if (this.data[i]) {
        if (this.data[i].length === 1) {
          keys.push(this.data[i][0][0]);
        }
        if (this.data[i].length > 1) {
          for (let j = 0; j < this.data[i].length; j++) {
            keys.push(this.data[i][j][0]);
          }
        }
      }
    }
    return keys;
  }
}

Breaking Down

hash function

_hash(key) {
    let hash = 0;
    for (let i = 0; i < key.length; i++) {
      hash = (hash + key.charCodeAt(i) * i) % this.data.length;
    }
    return hash;
  }

Using this specific algorithm to determine that the created element will not exceed the length of the Hash Table.

set

  set(key, value) {
    let address = this._hash(key);
    if (!this.data[address]) {
      this.data[address] = []; // O(1)
      this.data[address].push([key, value]); // O(1)
    } else {
      this.data[address].push([key, value]); // O(1)
    }
  }

Getting the address using the hash function.
If the generated address doesn't exist in this.data object, Create an empty array of this address.
Push the key and the value passed inside another array to the created empty array.
If there is no data in this particular address just push an array contains the key and value.

get

  get(key) {
    let address = this._hash(key); // O(1)
    let current = this.data[address]; // O(1)
    if (current) {
      for (let i = 0; i < current.length; i++) {
        // O(n) or
        // O(1) if current.length === 1
        // or the ele is found in the first index
        if (current[i][0] === key) {
          return current[i][1];
        }
      }
    } else {
      // O(1)
      return undefined;
    }
  }

Getting the address using the hash function.
Getting the current value of the generated address.
Checking if there is a value in this current position.
Looping through the current array.
Check for they key current[i][0] if it's equal the passed key and return the value current[i][1].
Return undefined if there is no current address found.

keys

  keys() {
    if (!this.data.length) {
      return undefined;
    }
    const keys = [];
    for (let i = 0; i < this.data.length; i++) {
      if (this.data[i]) {
        if (this.data[i].length === 1) {
          keys.push(this.data[i][0][0]);
        }
        if (this.data[i].length > 1) {
          for (let j = 0; j < this.data[i].length; j++) {
            keys.push(this.data[i][j][0]);
          }
        }
      }
    }
    return keys;
  }

Checking for the length of the Hash Table and return undefined if there is no data.
Creating an empty keys array.
Checking if the current element has a value.
Checking if the length of this array element is 1 O(1) so we will push the key which will be this.data[i][0][0]
If the length is greater than 1 O(n), then this position has more than one array so we also loop through it and return the keys inside this.data[i][j][0].

Example

const ht = new HashTable(10);
ht.set("a", 1);
ht.set("b", 2);
ht.set("c", 3);
ht.set("d", 4);
ht.set("e", 5);
ht.set("f", 6);
ht.set("g", 7);
ht.set("h", 8);
ht.set("i", 9);
ht.set("j", 10);

console.log(ht); /* 0: Array[10]
                        0: Array[2]
                          0: "a"
                          1: 1
                        1: Array[2]
                        2: Array[2]
                        3: Array[2]
                        4: Array[2]
                        5: Array[2]
                        6: Array[2]
                        7: Array[2]
                        8: Array[2]
                        9: Array[2]
                    1: undefined
                    2: undefined
                    3: undefined
                    4: undefined
                    5: undefined
                    6: undefined
                    7: undefined
                    8: undefined
                    9: undefined
                  */

console.log(ht.get("g")); // 7
console.log(ht.keys()); // ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"]

Data Structures in JavaScript [Arrays]

Youssef Zidan — Sat, 29 May 2021 20:31:56 +0000

What is an Array?
Arrays & Big O Notation
Implementing an Array
- Push Method (Adding)
- Using push Method
- Big O With push Method
- get Method (Access)
- Using the get method.
- Big O With get Method
- pop Method
- Using the pop method
- Big O With pop Method
- delete Method
- Using delete method
- Big O With delete Method
- indexOf Method (Searching)
- Using indexOf method
- Big O With indexOf Method
- unshift Method
- Using unshift method
- Big O With unshift Method

What is an Array?

Arrays or Lists are used to store data in memory Sequentially (In Order).

Arrays & Big O Notation

In JavaScript, Arrays are built-in Data Structures.

And there are Methods to Access, Push, Insert, and Delete Data.

Using Big O with these Methods will be:

- Access    => O(1).
- Add       => O(1).
- Insert    => O(n).
- Delete    => O(n).
- Searching => O(n).

Examples

const arr = ["a", "b", "c"];

// Add
arr.push("d");
console.log(arr); // ["a", "b", "c", "d"]

// Access
console.log(arr[0]); // a

// Insert
arr.unshift("X");
console.log(arr); // ["X", "a", "b", "c", "d"]

arr.splice(2, 0, "X");
console.log(arr); // ["a", "b", "X", "c"]

// Delete
arr.splice(1, 1);
console.log(arr); // ["a", "c"]

// Searching
console.log(arr.indexOf("a")); // 0

In order to understand where did these rules come from, We can implement our own Array.

Implementing an Array

We don't have to build an array in JavaScript, But it's very useful to do so in order to really understand why Big O is different from an operation to another with Arrays.

class List {
  constructor() {
    this.length = 0;
    this.data = {};
  }
}

Push Method (Adding)

  push(ele) {
    this.data[this.length] = ele;
    this.length++;
    return this.length;
  }

Adding the passed element to the data object as the length is the key.
Increment the length by 1.
Return the length.

Using `push` Method

const list = new List();
list.push(5);
console.log(list.data); // { "0": 5 }

Big O With `push` Method

Let's use the roles of Big O to understand why adding an element in an array is O(1).

  push(ele) {
    this.data[this.length] = ele; // => O(1)
    this.length++;  // => O(1)
    return this.length; // => O(1)
  }

The number of operations will be O = 1 + 1 + 1.

Eventually, Big O with the Push Method will be O(1).

`get` Method (Access)

  get(index) {
    return this.data[index];
  }

Using the `get` method.

const list = new List();
list.push(5);
console.log(list.get(0)); // 5

Big O With `get` Method

This function only Returns the value of the given index.

 get(index) {
    return this.data[index]; //O(1)
  }

Eventually, Big O with the Get Method will be O(1).

`pop` Method

  pop() {
    const lastElement = this.data[this.length - 1];
    delete this.data[this.length - 1];
    this.length--;
    return lastElement;
  }

Store the last element in a variable lastElement.
Use the delete keyword to remove it from the data object.
Decrementing the length of the array by 1.
Return the lastElement.

Using the `pop` method

const list = new List();
list.push("a");
list.push("b");
list.pop();
console.log(list.data); // { "0": "a" }

Big O With `pop` Method

  pop() {
    const lastElement = this.data[this.length - 1]; //O(1)
    delete this.data[this.length - 1]; // O(1)
    this.length--; // O(1)
    return lastElement; // O(1)
  }

So, Big O with the pop method will be also O(1).

`delete` Method

  // Delete
  delete(index){
    const ele = this.data[index];
    for(let i = index; i < this.length - 1; i++){
      this.data[i] = this.data[i + 1];
    }
    delete this.data[this.length - 1];
    this.length--;
    return ele;
  }

We get the ele we want to delete.
Looping starting from the index, and replacing it with the next element.
Deleting the last element of the array.
Decrementing the length by 1.
Returning the deleted element.

Using `delete` method

const list = new List();
list.push("a");
list.push("b");
list.push("c");
list.delete(1);
console.log(list.data); // { "0": "a", "1": "c" }

Big O With `delete` Method

  // Delete
  delete(index){
    const ele = this.data[index]; // O(1)
    for(let i = index; i < this.length - 1; i++){
      this.data[i] = this.data[i + 1]; // O(n)
    }
    delete this.data[this.length - 1]; // O(1)
    this.length--; // O(1)
    return ele; // O(1)
  }

So, Big O with the delete method will be O(n).

`indexOf` Method (Searching)

 indexOf(ele) {
    for (const i in this.data) {
      if(this.data[i] === ele){
        return i;
      }
    }
    return -1;
  }

Looping through the object using for in.
Check if the passed element exists.
If yes return the index.
If no as the normal indexOf we will return -1.

Using `indexOf` method

const list = new List();
list.push("a");
list.push("b");
list.push("c");
console.log(list.indexOf("b")); // 1

Big O With `indexOf` Method

 indexOf(ele) {
    for (const i in this.data) {  // O(n)
      if(this.data[i] === ele){
        return i;
      }
    }
    return -1;
  }

Because we are Looping, the Big O will be O(n).

`unshift` Method

  unshift(ele) {
    for (let i = this.length; i > 0; i--) {
      this.data[i] = this.data[i - 1];
    }
    this.data[0] = ele;
    this.length++;
  }

Looping backwards and shift every element to the next element.
adding the passed element to the first index 0.
Increasing the length by 1.

Using `unshift` method

const list = new List();
list.push("a");
list.push("b");
list.push("c");
list.unshift("X");
console.log(list.data); // { "0": "X", "1": "a", "2": "b", "3": "c" }

Big O With `unshift` Method

  unshift(ele) {
    for (let i = this.length; i > 0; i--) {
      this.data[i] = this.data[i - 1]; // O(n)
    }
    this.data[0] = ele; // O(1)
    this.length++; // O(1)
  }

Because we are Looping, the Big O will be O(n).

Understanding Big O Notation Using JavaScript.

Youssef Zidan — Fri, 14 May 2021 13:41:45 +0000

What is Big O Notation?
Time Complexity
Simplifying Big O Expressions
- Rules of thumb
Space Complexity
- Rules of thumb
Summary
Resources

In this article, We will understand the Big O Notation using Javascript.

What is Big O Notation?

Every problem has many different solutions.

Example

Write a function that takes a string as an input and returns a reversed copy.

If I asked 100 people to solve this problem I may get more than 10 solutions with very different approaches.

Click here to see the solutions on Stack Overflow.

So, how do we know what is the best one?

Here comes the rule of Big O Notation.

So, Big O Notation — or Big O for short is about comparing code to know which one is the best.

But the question you may ask right now, what does The Best mean?

Is the fastest code the best? Or maybe the code which less memory-intensive is the best? Or maybe the more readable code is the best?

Actually, there is no “The Best” answer for the “The Best” code, but in general, we all want our code to be as fast as possible, readable, and takes less space in memory right?

So, here comes these two expressions:

Time Complexity.
Space Complexity.

Time Complexity

Write a function that calculates the sum of all numbers up to and including some number n.

Solution 1

function getSum1(n) {
  let sum = 0;

  for (let i = 1; i <= n; i++) {
    sum += i;
  }

  return sum;
}

Solution 2

function getSum2(n) {
  return (n * (n + 1)) / 2;
}

As you can see the two solutions are absolutely different. The first one includes a loop and the second one doesn’t. The second one is much shorter which does not necessarily make it better. And with both solutions, we will get the same results.

getSum1(3); // 6
getSum2(3); // 6

So, which one of them is better in Time Complexity? in the other words which one is faster?

We can use performance.now() method to calculate the times each function takes to execute.

let t0 = performance.now();
getSum1(10000);
let t1 = performance.now();

console.log("getSum1 took " + (t1 - t0) + " ms.");

// Output:
// getSum1 took 4.944999993313104 ms.

let t0 = performance.now();
getSum2(10000);
let t1 = performance.now();

console.log("getSum1 took " + (t1 - t0) + " ms.");

// Output:
// getSum2 took 0.050000002374872565 ms.

As you can see, in my machine getSum2 took way less time than getSum1.

This way of comparing the time between these two codes is not consistent simply because different machines will record different times.

Also, the same machine will record different times.

And in another scenario, a piece of code might take a long time to execute

So, it’s not the best solution to run and calculate the time of each code to know which one is faster.

It must be another way to calculate the time, and that is where Big O Notation comes in.

So, rather than counting seconds which are variable,

Let’s count the number of Operations that the computer has to perform.

If we take a look at the second solution:

function getSum2(n) {
  return (n * (n + 1)) / 2;
}

We have 3 operations

1 Multiplication (*)
1 Addition (+)
1 Division (/)

The number of operations will be O = 1 + 1 + 1.

And there will always be these 3 operations regardless of the size of n is.

Compering to the first solution:

function getSum1(n) {
  let sum = 0;

  for (let i = 1; i <= n; i++) {
    sum += i;
  }

  return sum;
}

We will have:

1 assignment => sum = 0.
1 assignment => let i = 1.
n addition and n assignment => sum += i.
n addition and assignment => i++.
n comparison => n<=n.

The number of operations will be O = 5n + 2.

Yes, it’s hard to count the number of operations, but regardless of the exact number, in Big O we focus on the big picture.

We don't really have to know the exact number of operations, it’s enough for us to know that the number of operations increases proportionally with the number of n.

Big O allows us to talk formally about how the runtime of an algorithm grows as the inputs of a function grow.

So, we can formulate the previous equation O = 5n + 2
to be O(n).

by removing all the constants (the number 5 and the number 2 ).

And O(n) represents Linear Time Complexity.

And the graph for this will be:

Compering of the first equation of the getSum2 function O = 3

We can formulate it to be O(1)
Since the number 1 represents a constant
and O(1) represents Constant Time Complexity.

And the graph for this will be:

Another Example

function nestedLoop(n) {
  for (let i = 0; i <= n; i++) {
    for (let j = 0; j <= n; j++) {
      console.log(i, j);
    }
  }
}

This example has a Nested Loop, in other words, it’s O(n) inside O(n)

So, it will be O(n²).

And O(n²) Represents Quadric Time Complexity.

And the graph for this will be:

Simplifying Big O Expressions

1. Constants don’t matter

O(2n) => O(n)

O(900) => O(1)

O(19n²) => O(n²)

1. Smaller Terms Don’t Matter

O(5 + n) => O(n)

O(2n +7) => O(n)

O(2n + n² + 74) => O(n²)

Rules of thumb

Constant Time Complexity O(1)

// 1. Mathematical Operations
let i += 5;

// 2. Variable Assignments
let i = 7;

// 3. Accessing elements in an array by index
let ar = [1, 2, 3];
let x = ar[3]; // <==

// 4. Accessing element in an object by key
let obj = { firstName: "Youssef" };
let fName = obj.firstName // <==

Linear Time Complexity O(n)

All kind of loops

for loop
Array.map
Array.forEach
Array.indexOf
...etc

Quadric Time Complexity O(n²)

nested loops

And there are more types of Time Complexity but these three are the most common ones.

Space Complexity

We can also use Big O to calculate Space Complexity (The amount of memory taken).

I’m not talking here about the space taken up by the inputs.

it’s very obvious that when the size of the input grows n grows as well and the space taken up in the memory grows also.

I’m talking about the space taken up by the algorithm only (the code you type), not including the inputs.

It’s also called Auxiliary Space Complexity.

Rules of thumb

Constant Space Complexity O(1)

Most Primitives

Booleans
numbers
undefined
null

Linear Space Complexity O(n)

Strings
Arrays
Objects

Examples

function arrSum(arr) {
  let sum = 0;

  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }

  return sum;
}

Spaces taken are:

1 number => let sum = 0.
1 number => let i = 0.
So the equation will be O = 1 + 1 so its O(1).

function makeDouble(arr) {
  let myArr = [];

  for (let i = 0; i < arr.length; i++) {
    arr.push(2 * arr[i]);
  }

  return myArr;
}

Spaces taken are:

1 number => let i = 0.

n number (return myArr) since the returned array depends on the length of the given array.

So the equation will be O = 1 + n so its O(n).

I know that I said earlier that we will ignore the size of the inputs but here in this example my created and returned array (the code I typed) will be affected by the length of the given array so the space taken up for this array will increase by n.

Summary

In conclusion, Big O Notation helps us efficiently type code that runs as quickly as possible and less memory-intensive as possible.

Resources

JavaScript Algorithms and Data Structures Masterclass

Introduction to Big O Notation and Time Complexity

VS Code Extensions That Will Make You Code Faster.

Youssef Zidan — Sat, 01 May 2021 20:13:22 +0000

1. Bracket Pair Colorizer 2

This extension makes the opening and closing parentheses, brackets, and curly brackets the same color.

2. IntelliSense for CSS class names in HTML

A Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element.

3. Auto Import

Automatically finds, parses, and provides code actions and code completion for all available imports.

4. Auto Rename Tag

When you rename one HTML/XML tag, automatically rename the paired HTML/XML tag.

5. JavaScript (ES6) code snippets

This extension contains code snippets for JavaScript in ES6 syntax.

6. Git Extension Pack

This extension pack packages some of the most popular Git extensions that let you work with git easily inside VS Code.

7. JSON Sorter

A tool that helps you sort JSON files quickly.

8. Live Server

Launch a local development server with live reload feature for static & dynamic pages.

9. Search node_modules

A simple plugin for VS Code that allows you to quickly navigate the file inside your project's node_modules directory.

10. Git Graph

View a Git Graph of your repository, and easily perform Git actions from the graph. Configurable to look the way you want!

11. npm

This extension supports running npm scripts defined in the package.json file and validating the installed modules against the dependencies defined in the package.json.

12. npm Intellisense

Visual Studio Code plugin that autocompletes npm modules in import statements.

13. Path Intellisense

Visual Studio Code plugin that autocompletes filenames.

14. Thunder Client

Thunder Client is a GUI-based Rest API Client Extension for Visual Studio Code, hand-crafted by Ranga Vadhineni with a simple and clean design.

15. GitHub Pull Requests and Issues

This extension allows you to review and manage GitHub pull requests and issues in Visual Studio Code.

16. Visual Studio IntelliCode

The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.

17. HTML to CSS autocompletion

Intellisense suggestions/completions for classes and ids from markup documents to CSS, SCSS, Less, Sass, Stylus stylesheets

Arabic Lorem Ipsum Extension in VS Code

Youssef Zidan — Thu, 29 Apr 2021 11:02:09 +0000

Arabic Lorem Ipsum

Generating Dummy Lorem Ipsum Text in the Arabic Language.

Installation

GitHub Repo

In order to install an extension you need to launch the Command Palette (Ctrl + Shift + P or Cmd + Shift + P) and type Extensions.
There you have either the option to show the already installed snippets or install new ones. Search for Arabic Lorem Ipsum and install it.

Snippets

Trigger	Words Generated
`arlo`	30
`arlo3`	03
`arlo7`	07
`arlo10`	10
`arlo15`	15
`arlo20`	20
`arlo30`	30
`arlo40`	40
`arlo50`	50
`arlo70`	70
`arlo100`	100

Forem: Youssef Zidan

What are :nth-child & :nth-of-type Selectors.

:nth-child Selector.

selector:nth-child(integer)

selector:nth-child(n).

selector:nth-child(2n).

selector:nth-child(3n).

selector:nth-child(n+3).

selector:nth-child(-n+3).

selector:nth-child(2n+5).

selector:nth-child(-2n+5).

selector:nth-child(odd).

selector:nth-child(even).

:nth-of-type Selector.

What are Web Workers?

What are Web Workers?

Using Web Workers

Browser Support

Formik Components.

Formik Components

Login Form With Formik Components

Formik Reusable Components

CSS @Media Rules that fits all possible devices.

Desktop-first

Mobile-first

JavaScript Reusable Constants that are used in most apps.

Constants.js

Installation

Usage

Available Constants

Creating React Application with Webpack.

Creating React Application with Webpack.

1. Create a folder and initialize NPM

2. Install the following packages

3. Create .babelrc file

4. Create webpack.config.js file

5. Create a /src folder and create the following files inside of it.

6. Create Serve and Build Scripts

7. Run and modify your App

8. Build the App

Configuring ESLint In React with Prettier, React Testing Library, Jest and AirBnb

Table of Contents

1. Installing VSCode Extensions

2. Installing the following packages as devDependencies

3. Creating configuration files

4. Overriding VSCode Settings

That's it!

Data Structures in JavaScript [Hash Tables]

What is a Hash Tables?

Why Hash Tables?

How Hash Tables Work?

What is a Hash Function?

Hash Tables with Big O Notation

Implementing Hash Tables

Data Structures in JavaScript [Arrays]

What is an Array?

Arrays & Big O Notation

Implementing an Array

Push Method (Adding)

Using push Method

Big O With push Method

get Method (Access)

Using the get method.

Big O With get Method

pop Method

Using the pop method

Big O With pop Method

delete Method

Using delete method

Big O With delete Method

indexOf Method (Searching)

Using indexOf method

Big O With indexOf Method

unshift Method

Using unshift method

Big O With unshift Method

Understanding Big O Notation Using JavaScript.

What is Big O Notation?

Time Complexity

Simplifying Big O Expressions

Using `push` Method

Big O With `push` Method

`get` Method (Access)

Using the `get` method.

Big O With `get` Method

`pop` Method

Using the `pop` method

Big O With `pop` Method

`delete` Method

Using `delete` method

Big O With `delete` Method

`indexOf` Method (Searching)

Using `indexOf` method

Big O With `indexOf` Method

`unshift` Method

Using `unshift` method

Big O With `unshift` Method