Forem: Jonathan Zihindula

Understanding Redux and Redux toolkit in simple words

Jonathan Zihindula — Tue, 06 May 2025 10:28:00 +0000

Redux is one of the most well-known state management libraries, which can seem difficult for beginners to learn because it requires a lot of boilerplate code. However, we should understand that it is used by many companies out there, and they are still enjoying it. That said, it does not mean Redux is the best fit for every state management problem.

Problem

Let's take a look at this app. We have three components: the App component, the Login component, and the Profile component.

The Login component handles the login logic and renders the login form (UI). However, we want to access the same user on the profile page.

The first solution could be passing the props from Login to Profile, but in React, we cannot pass props directly between two sibling components. 😔
The second solution is to write the login logic in the App component so that from App, we can pass the props to both Profile and Login if needed. 🤩

Hold on — we can't be happy yet! If we want to build an app that can handle more than 100 states across different components, the second solution won't scale well. The code will quickly become unmaintainable.

What if we had a store somewhere, which could save all our states, and whenever we needed to access or modify a state, we could simply interact with that store?

Well, that’s where Redux comes into play.

Redux installation

Redux is not just for React; it is a JavaScript library for state management that can be used with other JavaScript frameworks and libraries as well.

First, we need to install the Redux library itself.
To connect Redux to React, we need another library called react-redux.

Finally, since Redux has improved and now provides a toolkit that makes it easier to use, we will also install the Redux Toolkit.

With the command below, we can install everything we need to start working with Redux in React:

npm install redux react-redux @reduxjs/toolkit

Once all the libraries are installed, let's start using Redux.

Set up the Redux store

As mentioned earlier, we need a store to hold all of our application states.
With Redux Toolkit, in the index.js file, we can import the configureStore function, which will contain all reducers in the app.

import { configureStore } from "@reduxjs/toolkit";

For now, since we don’t have any reducers created yet, we will configure the reducer as an empty object.
Let’s create a variable called store that holds our configureStore function and all reducers.

const store = configureStore({
  reducer: {},
});

Set up the Provider

We have configured our store — now we need to make it accessible throughout the app.
That’s where react-redux comes in. 🤠
It provides a Provider component that will wrap the App component and shares the store across all child components. The Provider component requires a store prop.

In the same index.js file, let’s import the Provider from react-redux and pass our store to it:

import { configureStore } from "@reduxjs/toolkit";
import { Provider } from "react-redux";

const store = configureStore({
  reducer: {},
});

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

Now the store is ready to be accessed. Next, we are going to set up our first reducer.

Set up a reducer

A reducer is just a function that takes the previous state and an action, and returns the updated state.

In the /src/components folder, let’s create a new folder called features, which will contain all our reducers.
This folder is named features because it's the recommended standard when using Redux Toolkit.

Let’s create a user reducer step by step. This reducer will hold the user's name, age, and email.

Import the createSlice function from Redux Toolkit. Think of a slice like a slice of pizza 🍕 — it’s a small part of the whole pizza, but it contains all the ingredients. Similarly, a slice contains the slice name, the initial value, and the reducer itself in one place. Isn’t that better? 🤗

import { createSlice } from "@reduxjs/toolkit";

export const userSlice = createSlice({
  name: "user",
  initialState: {
    value: {
      name: "",
      age: 0,
      email: "",
    },
  },
});

Add the reducer function to the slice. After setting the initial value, we need to add a function that can update the value. This function takes two parameters — state (the previous state) and action. The action object has two properties:

payload (the information that updates the state)
type (used for distinguishing actions — though we won’t focus on it here)

export const userSlice = createSlice({
  name: "user",
  initialState: {
    value: {
      name: "",
      age: 0,
      email: "",
    },
  },
  reducers: {
    login: (state, action) => {
      state.value = action.payload;
    },
  },
});

export default userSlice.reducer;

The above code is the full userSlice. It includes a reducers object — in our case, the login reducer. Every time we dispatch the login action, it will update the state value with the passed payload.

Back in index.js, let’s now add our reducer to the reducer object and call it user:

import { configureStore } from "@reduxjs/toolkit";
import { Provider } from "react-redux";
import userReducer from "./components/features/user";

const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

Access and modify the state

We have done everything needed — from creating the store to setting up a reducer — but we need to access and modify the data. That’s the whole point!

1. Access a state

To access a state, we use a hook provided by the react-redux library called useSelector.
It is used to grab state values. This hook takes a callback that returns a value from our state and accepts an argument, commonly called state.

To return the value, we access the reducer's value by using the reducer name followed by .value.

Note: The reducer’s name is different from the slice name. The reducer name is the property that holds the reducer in the store (in our case, in configureStore in **index.js) — i.e., user.

const store = configureStore({
  reducer: {
    // This is the reducer name used to access its value.
    user: userReducer,
  },
});

Let’s create a component called Profile in the /components path, and implement the useSelector hook to return the user's value, and render it.

import React from "react";
import { useSelector } from "react-redux";

export default function Profile() {
  const user = useSelector((state) => state.user.value);

  return (
    <div>
      <h1>Profile page</h1>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
      <p>Age: {user.age}</p>
    </div>
  );
}

2. Modify a state

Just as we accessed the state with useSelector, to modify it we use another hook called useDispatch (also provided by react-redux).

The dispatch function is used to send actions to the store.

Let’s create a simple component called Login, where clicking a button updates the state in the store.

First, go back to /components/features/user.js (which contains our slice) and export the login action:

export const { login } = userSlice.actions;

Then in components/Login.js, let’s implement the dispatch logic:

import React from "react";
import { useDispatch } from "react-redux";
import { login } from "./features/user";

export default function Login() {
  const dispatch = useDispatch();

  return (
    <div>
      <button
        onClick={() =>
          dispatch(
            login({
              name: "Jonathan",
              email: "jonathan@gmail.com",
              age: 20,
            })
          )
        }
      >
        Login
      </button>
    </div>
  );
}

We first initialized the hook in the component. Then, on the button click event, we called the dispatch function with the action to perform.

So what is that object in the login? 🤔
Good question.
To modify the state, we need to provide a payload — i.e., the data that will update the state.
In this case, our payload is the object with the name, email, and age.

Conclusion

Thank you for reading this article.
Now that you know the basics of using Redux and the Redux Toolkit in React, you can continue exploring these capabilities — and you won’t be disappointed.

Feel free to contact me if you have any questions:

Designing Multi-Tenant UI with Tailwind CSS

Jonathan Zihindula — Tue, 08 Oct 2024 23:30:32 +0000

Tailwind CSS is one of the most popular and widely used CSS libraries. It leverages utility classes to build responsive designs without having to write extensive CSS. It does not use pre-styled components like Bootstrap or Material UI.

In this article, we are going to focus on how to build custom variants for a multi-tenant frontend application.

This article is for those with a basic understanding of CSS and Tailwind CSS. You don't need to be a frontend expert to follow along.

Concept of Variants in Tailwind CSS

Tailwind CSS variants are sets of predefined classes that allow developers to apply certain styles conditionally. By using variants, developers can create different styles for a component or element according to different states. For instance, when a button is disabled, the disabled: variant can be used followed by the utility class to apply a specific style.

In Tailwind, there are many predefined variants that we can classify into five categories:

Responsive variants: These variants are used to apply certain styles according to screen dimensions. In this category, we have sm:, md:, max-lg:, etc.
Pseudo-class variants: These variants are used to apply styles based on specific state conditions. In this category, we have hover:, enabled:, checked:, etc.
Group variant: The group variant is used to style elements according to the state of the group to which the element belongs. It is written as group:.
Peer variant: The peer variant is used to style an element based on the state of a peer element. In this case, the component does not have to belong to a group, it is styled according to the state of a parallel component. It is written as peer:.
Custom variants: Custom variants are implemented with the addVariant API.

Custom Variants

A custom variant can be added to Tailwind CSS as a plugin using the addVariant API. This API allows developers to extend Tailwind CSS by implementing customized variants that can be used like the built-in ones. One well-known custom variant, now adopted as a default in Tailwind CSS, is dark:, which is used to apply styles when the application is in dark mode.

1. Creating a Simple Custom Variant

The code below shows how a custom variant can be implemented as a plugin in tailwind.config.js:

const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('custom', '&:optional');
    })
  ]
};

We use the plugin function from tailwindcss/plugin, which gives us access to the addVariant method. The addVariant method takes two arguments: the first is the name of the variant, and the second is its definition, which can be a string or a function for adding more support with other predefined variants like group: and peer:.

2. Custom Variant with Modifiers

For this step, we'll understand how modifiers can create a scope for all descendant class utilities. The dark: modifier for dark mode is implemented similarly.

Before diving deeper, let's understand how the dark: modifier works in Tailwind CSS.

For applying dark mode styles to our components or elements, we can use these approaches:

<div className="text-white dark:text-black"></div>

In this first approach, we explicitly add the modifier to the element to change its styles in dark mode, which is straightforward. However, an application is not just a single div; it often has hundreds of components with different colors in dark mode, which leads us to the second approach.

<html className="dark">
   <div className="text-foreground"></div>
</html>

In this second approach, the variant is applied only to the html tag, considered the top-level tag of our application or page. We use a custom color name, which changes the color value according to the variant placed on the top-level html tag.

To achieve this pattern, we don't only need a custom variant but also a modifier to modify all the class utilities scoped under the variant applied to the top-level tag.

Here's how to add a plugin with a modifier:

plugin(function ({ addVariant, e }) {
  addVariant("dark", ({ modifySelectors, separator }) => {
    modifySelectors(({ className }) => {
      return `.dark .${e(`dark${separator}${className}`)}`;
    });
  });
});

In this code, the callback function from the plugin function also destructures e, a function to escape strings. The callback returns a string that defines how the variant should modify the selector:

.dark: Targets any element with the class "dark."
A space: Creates a descendant combinator, which is used to select elements that are descendants of another element.
.: Starts a new class selector.
e(dark${separator}${className}): Generates the variant class name.

The generated CSS will look like this:

.dark .dark\:text-foreground {
  /* styles here */
}

Now that we understand how to create simple custom variants and custom variants with modifiers, we will use these principles for the multi-tenant UI design problem.

Multi-tenant UI Design with Tailwind CSS

For this article, we'll focus on the frontend of a multi-tenant architecture. A multi-tenant frontend application serves multiple customers or groups (tenants) with a single application without requiring separate instances or code changes for each tenant.

1. Problem and Requirements

Let's consider two tenants, TenantA and TenantB, both with different branding and types of data, but they share the same frontend application. The branding color of TenantA is green, while TenantB's is yellow. Both tenants are restaurants and use the same frontend application but want it to reflect their branding.

2. Solution

To meet the requirements of TenantA and TenantB, we will follow a few steps:

1. Defining Colors Globally

One key to a successful multi-tenant frontend UI design is a good base structure for defining color names. Since both tenants will share the same components, with only different styling, the color names should be the same, with different values. In the CSS entry point, which could be main.css, global.css, or index.css depending on the structure, we define a color name called branding-color at the root level as a CSS variable.

:root {
  .tenantA {
    --branding-color: #008000;
  }

  .tenantB {
    --branding-color: #FFFF00;
  }
}

2. Setting Colors in Tailwind CSS Config

After defining the branding colors globally, Tailwind CSS is not yet aware of our colors, so we need to set them up in the tailwind.config.js file under the extended colors object.

module.exports = {
  extend: {
    colors: {
      "branding-color": "var(--branding-color)"
    }
  }
};

3. Creating Tenant Plugins

The colors are configured in Tailwind, but they cannot be used for the two tenants without creating their respective plugins with modifiers.

const plugin = require('tailwindcss/plugin');

module.exports = {
  extend: {
    colors: {
      "branding-color": "var(--branding-color)"
    }
  },
  plugins: [
    plugin(function({ addVariant, e }) {
      addVariant("tenantA", ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.tenantA .${e(`tenantA${separator}${className}`)}`;
        });
      });
      addVariant("tenantB", ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.tenantB .${e(`tenantB${separator}${className}`)}`;
        });
      });
    })
  ]
};

Now, we have configured the tenant plugins, and we can easily use them to apply different colors for different tenants:

<html className="tenantA">
   <div className="text-branding-color"></div>
</html>

<html className="tenantB">
   <div className="text-branding-color"></div>
</html>

The only change is in the class on the top-level tag, which is enough for the entire application to have a different look.

Conclusion

As multi-tenant frontend applications are usually large and complex, Tailwind CSS variants can be used to have smooth transitions between colors and control the visibility of different components, similar to normal default variants.

Thanks for reading.

Learn More:

Tailwind CSS plugins: Tailwind CSS Documentation
Shadcn dark mode setup: Shadcn Dark Mode Guide
Tailwind CSS variants implementation: Tailwind GitHub Repository

LinkedIn Email Finder API

Jonathan Zihindula — Tue, 12 Dec 2023 20:40:47 +0000

There are many reasons why you would want to find someone's email address online.
May be you want to reach out, to secure a sale or even propose a partnership.

For This article we are going to find a LinkedIn user's email using Personal look up endpoint of Contact API provided by Proxycurl.

Note: Contact API is not intended for front-end use. To avoid cors policy, in this article we are going to use a middleman proxy server.

Content

Prerequisite
Get a Proxycurl API key
- Create Proxycurl account
- Generate Proxycurl API key
Proxy server with node.js
Fetch LinkedIn email from proxy server
Conclusion

I. Prerequisite

To follow this article you need to be familiar with javascript ,Node js and express.
Plus, you must have a Proxycurl account to get an API key.

II. Get a Proxycurl API key

To get a proxycurl API key we need first to create an account ,that is free, in addition Proxycurl will provide 10 free credits that can be used for testing.

II.1. Create Proxycurl account

To create create an account let's go to Proxycurl registration page and complete the form.

After completing the form click on continue, then confirm the email address.

II.2. Generate Proxycurl API key

After the registration process is well done, login, then click generate Key

III. Proxy server with node.js

Proxy servers act as middlemen, communicating your needs and requests without providing your information to the internet. Proxies can also allow you to bypass certain security blocks and allow you to access information that might otherwise be blocked. This is made possible through use a proxy server that does not reveal your personal IP address.
Find more about proxy server in node js here.

Now let's go ahead and create our server.
First, we must initialize our project to generate our package.json file:

npm init

Next we must install two dependencies:

express
http-proxy-middleware

After, let's create a index.js and emailFinder.proxy.js file, our project structure looks like:

Project
|
|--- nodes_modules
|--- emailFinder.proxy.js
|--- index.js
|--- package-lock.json
|--- package.json

In index.js let's write the following code:

const express = require("express");
const app = express();

const PORT = 4040;
app.listen(PORT, () => console.log("Proxy is running on PORT " + PORT));

Here we are initializing our server with express , setting the port on 4040.

To get the email from LinkedIn using Proxycurl's Contact API we need :

The API endpoint : https://nubela.co/proxycurl/api/contact-api/personal-email
The API key that we generated
The LinkedIn profile url we want to have the email address

That noted, in emailFinder.proxy.js let's write the following code as well :

const Router = require("express");
const { createProxyMiddleware } = require("http-proxy-middleware");
const router = Router();

const endpoint = "https://nubela.co/proxycurl/api/contact-api/personal-email"; // API endpoint
const api_key = "{api_key}"; // proxycurl api_key

const params = new URLSearchParams({
  linkedin_profile_url: "https://www.linkedin.com/in/jonathan-z-0a40ab209", // linkedIn profile url that we're gonna find the email
});

router.get(
  "/",
  createProxyMiddleware({
    target: endpoint + "?" + params,
    changeOrigin: true,
    onProxyReq: (proxyReq, req, res) => {
      proxyReq.setHeader("Authorization", `Bearer ${api_key}`);
    },
  })
);

module.exports = router;

Finally , to run our server we need first to import the emailFinder.proxy.js in index.js and use it as a middleware.

The code in index.js may look like :

const express = require("express");
const emailFinderProxy = require("./emailFinder.proxy");
const app = express();

app.use("/find/email", emailFinderProxy);

const PORT = 4040;
app.listen(PORT, () => console.log("Proxy is running on PORT " + PORT));

Here we are setting the endpoint that we are going to use in order to fetch the LinkedIn email.

Now the proxy server is ready, let's run it typing in terminal the following command

node index

IV. Fetch LinkedIn email from proxy server.

const enpoint = "http://localhost:4040/find/email";

fetch(enpoint, {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
    accept: "application/json",
  },
})
  .then((res) => res.json())
  .then((data) => console.log(data));

This is how the response looks like:

{
  "emails": ["random@gmail.com", "random2@yahoo.com"]
}

Conclusion

Now we can find an email address from LinkedIn with only the LinkedIn profile url.

For more details about Proxycurl's services click here.
Find the full code here

Simplifying State Management in React Using the Redux Toolkit: Getting Started

Jonathan Zihindula — Wed, 15 Mar 2023 18:58:33 +0000

Redux is one of the famous state management libraries, which seems to be difficult for beginners to learn because it requires many boilerplates. But we should understand that it’s used by many companies out there and they are still enjoying it, However it does not mean redux is a great fit for every state management problem.

Problem

let’s take a look at this app, we have three components, the App component, the Login component, and the Profile component.

The Login component handles the login business and logic, and renders the login form(UI), however, we want to access the same user on the profile page.

The first solution could be, passing the props from login to profile, but in react we can not pass props between two siblings components. 😔
The second solution is to write the login business and logic in the App component so that, from the App, we can pass the props to the Profile and the Login if needed. 🤩

Hold on, we can not be happy yet, because we still want to build an app that can handle more than 100 states from different components, in this case, the second solution does not fit, the code will just be unmaintainable.

What if, we have a store somewhere, which will save all our states, and if we need to access or change a state, we just access that store and pick what we want?

Well, here is when redux comes into the place.

Redux installation

Redux is not only for react, it is a JavaScript library for state management, it can also be used with other JavaScript frameworks and libraries, so the library to install first is redux itself.

To connect redux to react, we need another library which is react-redux.
Finally, as redux got improved and has now a toolkit that makes it easier to use than it was before, we will need to install the redux toolkit.
With the command below we can install everything we need to start working with redux in react.

npm install redux react-redux @reduxjs/toolkit

After having all the libraries installed, let’s start using redux.

Set up redux store.

As we said before we need a store that will hold all of our application states.

With the redux toolkit, In the index.js file, we can import the configureStore function that will mainly contain all reducers in the app.

import { configureStore } from "@reduxjs/toolkit";

For now, as we don’t have any reducers created, we are going to configure the reducers as empty objects. To do so, let's create a variable called store that holds our configure store function and all the reducers.

...
const store = configureStore({
  reducer: {},
});

Set up the Provider.

We have configured our store, now we need to make it accessible everywhere in the app. There comes the react-redux 🤠, It provides a Provider component that will wrap the App component to share the store accross children components, It requires a prop which is the store.

In the same file index.js, let's import the Provider from react-redux and pass to it our store previously created.

....
import { configureStore } from "@reduxjs/toolkit";
import { Provider } from "react-redux";

const store = configureStore({
  reducer: {},
});

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

Here we are, and the store is ready to be accessible, next we are going to set up the first reducer.

Set up a reducer.

A reducer is just a function that holds the previous state, the action that we want to perform on this state, and returns the current state.

In the /src/components, let's create a folder called features, which will contain all the reducers.

That folder is called features because it is a standard recommended when using the redux toolkit.

let’s step by step create a user reducer, this reducer will hold the name, age, and email of the user.

import the createSlice function from the redux toolkit, think about a slice of pizza 🍕, it is a small part of the whole pizza, but that holds every single ingredient of the pizza. The same thing, creating a slice will hold the slice name, the initial value, and the reducer itself in one place. isn't that better? 🤗

import { createSlice } from "@reduxjs/toolkit";

export const userSlice = createSlice({
  name: "user",
  initialState: {
    value: {
      name: "",
      age: 0,
      email: "",
    },
  },
})

Add the reducer function to the slice, after the initial value, we need to add a function that can change or update the value that we have. That function will be having two parameters, the state which is the previous state, and the action. That is not all, that action is an object with two properties, the payload which is the information that updates or changes the state, and the type, this last property is used if we need to perform different actions according to the type the action, we are not going to focus on it here, just put in mind that it is useful if we don’t use redux toolkit as well.

export const userSlice = createSlice({
  name: "user",
  initialState: {
    value: {
      name: "",
      age: 0,
      email: "",
    },
  },
  reducers: {
    login: (state, action) => {
      state.value = action.payload;
    },
  },
});

export default userSlice.reducer;

The above code is the full userSlice, which holds the reducers object, in our case our reducer is login, every time we will call the login, that login reducer will update the state value with the action payload passed in.

Back in the index.js file, let's now add our reducer in the reducers object, and call it user.

import { configureStore } from "@reduxjs/toolkit";
import { Provider } from "react-redux";
import userReducer from "./components/features/user";

const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

...

Access and modify the state.

We did everything that should be done from creating a store to setting up a reducer, but the data need to be accessed and modified, that is even why we have it.

1. Access a state

To access a state we use a hook provided by the react-redux library called useSelector, it is used to grab the state. This hook needs to know which state it should return the value to, for that it requires a callback that will return as the value from our state, it takes an argument state, this argument can also be named anything.

So to return a value, we need to access the reducer’s value, and we access the reducer value by the name of the reducer then .value.

Note: The reducer’s name is different from the slice name, the reducer’s name, is the name of the property that holds the reducer in the store and it is found in the **configureStore* function, in our case in the index.js*

...
const store = configureStore({
  reducer: {
  // this is the reducer's name used to access the reducer's value.
    user: userReducer,
  },
});
...

Let’s create a component called Profile in /components path, and implement a useSelector hook that returns the value of the user, then we will render a component that displays the user's value.

import React from "react";
import { useSelector } from "react-redux";

export default function Profile() {

  const user = useSelector((state) => state.user.value);

  return (
    <div>
      <h1>Profile page</h1>
      <p>Name: {user.name}</p>
      <p>email: {user.email}</p>
      <p>Age: {user.age}</p>
    </div>
  );
}

Modify a state

As for accessing the state we used useSelector hook, the same for modifying the state we are going to use another hook provided by react-redux as well called useDispatch.

The use of dispatch requires the actions that will be performed on the state.

Let’s create a simple component called Login, which once its button is clicked will update the state in the store.

First, we need to go back into the /components/features/user.js which contains our slice, and export the login action.

...
export const { login } = userSlice.actions;

Then in the components/Login.js** path, let’s implement the dispatch logic.

import React from "react";
import { useDispatch } from "react-redux";
import { login } from "./features/user";
export default function Login() {
  const dispatch = useDispatch();

  return (
    <div>
      <button
        onClick={() =>
          dispatch(

            login({ name: "Jonathan", email: "jonathan@gmail.com", age: 20 })
          )
        }
      >
        Login
      </button>
    </div>
  );
}

We have first initialized the hook in the components, and then on the click event, we have called the dispatch function with the action to perform.

So what is that object in the login?🤔

Interesting question, remember, to modify the state we need to provide a payload or information or data that will update the state, in this case, our payload is that object with the name, email, and age.

Conclusion

Thank you for reading this article. Now that you know the basics of using Redux and the Redux Toolkit in React, you may explore these capabilities further and won't be disappointed.
Contact me at any time if you have any questions.

Understand The DOM and DOM manipulation with javascript. (part 3 final)

Jonathan Zihindula — Sat, 05 Nov 2022 14:31:50 +0000

Now , You have an understing of what DOM is ,how to select element from the page, and how to add and remove elements to and from the page, those knowledges will be helpful in this part. If you've missed the last two part of this serie, you can still find them :

Like any program, Javascript programs can get slow fast if we are not careful about how we're writing our code. In this part we will lock at how to minimize DOM changes to make our page faster.

I. Reflow and Repaint

Reflow happens when a browser process and draws parts of a web page. It happens when you first display the DOM (generally after the DOM and CSS have been loaded), and happens again every time something could change the layout. This is a slow process.
Repain happens after reflow as the browser draws the new layout to the screen.

I.1 Add elements efficiently

Problematic


for (let i = 1; i <= 200; i++) {
    const newPara = document.createElement('p');
    newPara.textContent = 'This is paragraph number ' + i;

    document.body.appendChild(newPara);
}

The code above adds two hundred paragraphs to the page, doing the following steps two hundred times

Create the paragraph
Add some text to the paragraph
Add the paragraph to the page

This means, Reflow and Repaint will happen two hundred times each one. That's no good according the Reflow's processing time. The good way will be to reduce reflows to once and repaints to once.

Possible solution

The above approach can be improved by creating an extra container that will hold our two hundred paragraphs, then we add that container once to the page.

const container = document.createElement('div');

for (let i = 1; i <= 200; i++) {
    const newPara = document.createElement('p');
    newPara.textContent = 'This is paragraph number ' + i;

   container.appendChild(newElement);
}

document.body.appendChild(container);

This approach is more efficient because, instead of updating the DOM two hundred times, we created a container once, that will hold two hundred paragraphs, and finally added this container to the page. For one modification to the page, Reflow and Repaint will happen once.

Conclusion

We should care about web performance because Good or bad website performance correlates powerfully to user experience, as well as the overall effectiveness of most sites
Thank your for reading this article. You can reach out to me on twitter, or linkedIn.

Understand The DOM and DOM manipulation with javascript (part 2)

Jonathan Zihindula — Sat, 22 Oct 2022 13:20:05 +0000

In this second part of DOM and DOM manipulation with javascript we are going to focus on creating, adding and removing content on the web page using DOM. I will recommend you to read the first part here.

Now , You have an understing of what DOM is , and how to select element from the page , those knowledge will be helpful in this part, without not wasting time let's understand some document methods that should help us to create ,add and remove content to the page.

I. Create new content

I.1 `createElement()` method

createElement() is a document interface method that creates a new HTMLElement passed as argument.


document.createElement("p") // to create a paragraph element

document.createElement("div") // to create a div element.

I.2. `createTextNode` method

Just like you can create a new element with the createElement() method, you can also create a new text node using the createTextNode() method.


const newText = document.createTextNode('I am the text for the paragraph!');

II Add content to the page

The createElement method , creates an element however , this element is only in our javascript code and not on the page yet.
To add a new element to the page we can use the Node.appendChild() method or the Element.append() method.

II.1. `Node.appendChild()` method


<!DOCTYPE html>
<html lang="en">
   ...
  <body>
    <h1 id="title">Home page title</h1>

    <div class="container">
    </div>

    <script src="./index.js"></script>
  </body>
</html>


const container = document.querySelector(".container"); // to select the container div

const newPara = document.createElement("p");  // to create a paragraph element

container.appendChild(newPara); // to add a paragraph in the container div

Notes

appendChild() method add the element at the end of the "parent selected", it means , the element added with appendChild() method will be the last child of the selected parent.

appendChild() method must always be called on an existing element.

const newPara = document.createElement("p");  // to create a paragraph element

document.appendChild(newPara) // this will throw an error

II.2 `Element.append()` method

The append() method inserts a set of Node objects or DOMString (text) after the last child.


const container = document.querySelector(".container"); // to select the container div

const newPara = document.createElement("p");  // to create a paragraph element

// case 1: append a node
container.append(newPara); // to add a paragraph in the container div , this looks like <div><p></p></div> 

//case 2: append a DOMString
container.append("this is a text in container") // the div will look like <div>this is a text in container</div>

//case 3: append multiple nodes or DOMString.
const secondPara = document.createElement("p");

const thirdPara = document.createElement("p");

const form = document.createElement("form");

container.append(secondPara,  thirdPara, form, "this is a text in container");

Element.append() vs Node.appendChild()

Element.append() allows us to add DOMString, while Node.appendChild() only accepts Node objects.

Element.append() has no returned value, while Node.appendChild() returns the appended Node object

Element.append() can append several nodes and strings, while Node.appendChild() can only append one node

II.3 `insertAdjacentHTML()` method

From previous methods , we've seen that , they always add a new element or content at the end of the selected parent.
However we can also want to add new content in other location, in , before or after the selected parent.

To do that, the insertAdjacentHTML() get in game 🔥️. The insertAdjacentHTML() requires two arguments :

The location of the HTML text we want to add.
The HTML text.

Different Locations of insertAdjecentHTML are the following:

beforebegin : inserts the HTML text before the selected parent
afterbegin: inserts the HTML text as the first child in the selected parent
beforeend: inserts the HTML text as the last child in the selected parent
afterend: inserts the HTML text after the selected parent.


<!-- beforebegin -->

<p class="container">

    <!-- afterbegin -->

    Existing text/HTML content

    <!-- beforeend -->

</p>

<!-- afterend -->


const container = document.querySelector(".container");

container.insertAdjacentHTML('afterend', "<p>HTML text after the continer</p>");

III. Remove content

To remove content to the page , we will use the following methods.

III.1. `removeChild()` method

The removeChild() method removes a child node from the DOM and returns the removed node.

III.1.1 syntax


 <parent-element>.removeChild(<child-to-remove>);


<div id="parent">
  <div id="child"></div>
</div>


const parent = document.getElementById("parent");

const child = document.getElementById("child");

const throwAwayNode = parent.removeChild(child);

Notes

The removeChild() method can return a NotFoundError if the child node is not a child of the parent node.

III.2. `remove()` method

The remove() method removes the element from the DOM. It's the easiest way to remove an element from the DOM and it does not return any value.


<div id="parent">
  <div id="child"></div>
</div>


const child = document.getElementById("child");
const parent = document.getElementById("parent");

child.remove(); // to remove the child element

// or 

parent.remove(); // to remove the whole parent

Conclusion

Thanks for reading this article , if there is any term that you need me to shed more light on , just add it in the comment or reach out to me on twitter, or linkedIn.

Understand The DOM and DOM manipulation with javascript. (part 1)

Jonathan Zihindula — Sun, 16 Oct 2022 15:40:15 +0000

In this artcle we are going to get an understanding of Document Object Model known as DOM.
The words DOM are used by developers and can be found all over the internet. However you may not be quite sure of what is it exactly.Don't worry you're on the good place.

I. The DOM, and DOM construction

I.1 The DOM

The DOM (Document Object Model) is a programing interface for the web document , it represents the page as an object so that programing languages can access to and modify the document (web page) structure , style , etc.

I.2. DOM construction

As DOM is the object model of the HTML document, let's understand step by step how this object is contructed by the browser.

step 1

No mater which backend is used , when we request a web page , it responds as an HTML, on the first step HTML document is received.

step 2

HTML is composed by tags (starting and ending tags). For each tag the browser emits a token.

<html>
    <head>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <link rel="stylesheet" href="index.css" />
          ...
    </head>
</html>

From the code above, the browser will emit first the start tag html token, next the browser emit start tag head token , and so on. This process is done by the Tokenizer.

step 3

while the tokenizer is generating and emitting tokens , those ones are consumed and converted into nodes.
From step two, we may have after consuming start tag html token a html node , next head node, then meta node, then link node.

You may ask, how the browser knows that head tag is a child of html tag ?😕️.
Well, good question. As the starting tag head token was emitted before the endig tag of html token, its means the head tag is a child of html tag.

The image above shows how nodes are linked to each other .

Note: In the DOM each tag contains all its related attributes as well.

step 4

Now , we have all the nodes and their related attributes , the browser builds the Object representation of our HTML document.

All the step of DOM construction can be represented by the image below.

characters are the tag symbols < , >.

II. DOM manipulation with Javascript

The DOM is not a part of javascript language as we can think , however it can be accessed and manipulated by javascript using the special object provided by the browser document.

II.1 Select unique Element

II.1.a Select Element by ID

Said previously, DOM is an object representation of HTML document, means it has key: value pair. Some of them are properties and others are methods that provid some fonctionalities.

The first DOM method that we will be loocking at is getElementById().


document.getElementById("myElementId");

The above method receives an argument which is the id of the element that you want to select or you want to have access to.


<!DOCTYPE html>
<html lang="en">
   ...
  <body>
    <h1 id="title">Home page title</h1>

    <script src="./index.js"></script>
  </body>
</html>

To get the h1 tag using its id we can use the following code.


 const myHomePageTitle = document.getElementById("title");

The getElementById("myId") method returns an Element object representing the element whose id property matches the specified string passed as argument.
Readmore about this method here.

II.2. Select multiple Elements

II.2.1 Select Element by class

The second way to select a HTML elements, is by using the class attribute.


document.getElementsByClassName("myClassName");

Also this method , revceives a class of the elements we want to select and return an HTMLCollection.

The image above illustrates the type of value returned by the getElementsByClassName() method.

II.2.2 Select Element by tag

The second way of selecting multiple element is by using element's tag name. As the tag is not always unique , the following method returns an HTMLCollection as well.


document.getElementsByTagName("div");

This method needs the tag name that we want to select as argument, this may be div, p,span,etc.

II.2.3 `querySelector()` and `querySelectorAll()`

These are two more mays of selecting multiple elements, but f querySelector() and querySelectorAll() methods need an element selctor like in css in its argument.


document.querySelector("#id"); // to select element by Id

document.querySelectorAll(".class"); // to select elements by class

The .querySelector() method will always return the first element whose the id or class match the specified string passed as argument. While the .querySelectorAll() will return an NodeList of element that the specified selector matches with.

Note

HTMLCollection and NodeList are not arrays as we can think at the first look. However they can be transformed into an array then be manipulated as arrays. The code bolow illustrate one of the ways to transform a HTMLCollection or NodeList


const panels = document.querySelectorAll(".panel"); // return a NodeList

const panelsToArray = Array.from(panels) // return an array

III. Modify Page Content

We are able to select an element , now , we are going to understand how to update the content on page using the DOM.

III.1. `innerHTML` property

innerHTML is an Element (Elemement Interface) property that allows to get or set HTML or XML content of an element.


<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>


const list = document.getElementById("list");

console.log(list.innerHTML) // return "<li>Item 1</li><li>Item 2</li><li>Item 3</li>" as a DOMString not a string

list.innerHTML += "<li>Item 4</li>"; // add a new *li* tag with **itme 4** as content

III.2 `textContent` and `innerText` properties

textContent and innerText can be confusing but there still difference.

textContent: gets the content of all elements, including <script>and <style> elements. In contrast, innerText only shows "human-readable" elements, means innerText will consider the css style.

<ul id="list">
  <li class="list__item">Item 1</li>
  <li class="list__item list__item--hidden">Item 2</li>
  <li class="list__item">Item 3</li>
</ul>

...

.list__item--hidden{
   display: none;
}

...


const list = document.getElementById("list");

console.log(list.textContent);
// return Item 1 Item 2 Item 3

console.log(list.innerText);
// return item 1 item 3 because Item 2 is hidden by css style

IV. Conclusion

DOM is not part of javascript language
DOM is constructed from the browser
DOM is globally accessible by JavaScript code using the document object

In this article we learned what is DOM, and how to access and update content on the page using DOM. You can find the next part where we focus on how to add and remove content on the page here.

Build a Shazam clone with Node.js

Jonathan Zihindula — Tue, 11 Oct 2022 08:02:18 +0000

I.Introduction

Shazam is the popular music recognition application made by Chris Barton and Philip Inghelbrecht both student of university of california. Shazam identifies songs based on an audio fingerprint based on a time-frequency graph called a spectrogram. It uses a smartphone or computer's built-in microphone to gather a brief sample of audio being played. Shazam stores a catalogue of audio fingerprints in a database. The user tags a song for 10 seconds and the application creates an audio fingerprint. Shazam works by analyzing the captured sound and seeking a match based on an acoustic fingerprint in a database of millions of songs. If it finds a match, it sends information such as the artist, song title, and album back to the user. Some implementations of Shazam incorporate relevant links to services such as iTunes, Apple Music, Spotify, YouTube, or Groove Music.

I.1.Prerequisites

To follow this article, you need to have Node.js installed and to understand the basics such as how to set up a simple server and to configure it, knowledge real time communication with socket.io and http requests, you have also to understand basics of javascript. Here we are ,so let start, and clone the shazam app. In our case we are going to get all data we need about the song which can be used and displayed as we want,but in this article were going only to fetch data.

II. Server side

II.1.Setting up our server

Start by creating a new Node.js project. Create a folder with the name of your choice and run the following commands from the terminal.

 npm init -y
 npm install axios ejs express socket.io http

npm init initializes a new node.js application whereas the second command installs express ,ejs ,axios and soceket.io,http With that done, let’s go ahead and create our server. Create an index.js file and write the following code in it.

const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server, { cors: { origin: "*" } });

app.use(express.json());
app.use('/static', express.static(path.join(__dirname, './src')));
app.set('view engine', 'ejs');
app.set('socketio', io);
app.set("views", path.join(__dirname, "views"));

function socket() {
        io.on('connection', (socket) => {
           socket.on('song', (blob) => {
           console.log(blob);
           const buffer = blob64);
           const base64 = buffer.toString('base64');


     const options = {
        method: 'POST',
        url: 'https://shazam.p.rapidapi.com/songs/detect',
       headers: {
           'content-type': 'text/plain',
          'x-rapidapi-key': 
        `${process.env.SHAZAM_RAPID_API_KEY}`,
         'x-rapidapi-host': 'shazam.p.rapidapi.com'
     },
    data: `${base64}`
   };
axios.request(options).then(function (response) {
       console.log(response.data);
       const matches = response.data.matches.length;
       console.log(matches)
    });
  }
}
 socket();
 const port = process.env.PORT || 7070
 server.listen(port, () => { console.log("server is running 
 on 7070") 
});

In the code above we initialize our server with express, and the socket.io ,this package allows a real time communication between the sever and the client without refreshing the browser.

const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server, { cors: { origin: "*" } });

Then we set middlewares ,get documentation about middleware in express.js here

app.use(express.json());
app.use('/static', express.static(path.join(__dirname, './src')));
app.set('view engine', 'ejs');
app.set('socketio', io);
app.set("views", path.join(__dirname, "views"));
After that ,in the function called “socket” we create a connection between the server and the client .

function socket() {
io.on('connection', (socket) => {
    ...
}}

Then we catch the event called “song” sent from the client with the data “blob”, as we said, the shazam API from rapid API,accepts only “base64” as the body ,that mean we converted this data like a “blob” on this line :

const buffer = blob;
const base64 = buffer.toString('base64');

here we are ,let make the request to the end point. Before that go to the rapid API(link here) and subscribe to the API to get the API KEY. That done,let make the request :

const options = {
method: 'POST',
url: 'https://shazam.p.rapidapi.com/songs/detect',
headers: {
'content-type': 'text/plain',
'x-rapidapi-key': `${process.env.SHAZAM_RAPID_API_KEY}`,
'x-rapidapi-host': 'shazam.p.rapidapi.com'
},
data: `${base64}`
};
axios.request(options).then(function (response) {
console.log(response.data);
const matches = response.data.matches.length;
console.log(matches)
})

III. Client side

The shazam API from RapidAPI accepts only base64 string as a body of the request. That means ,we are going to record a piece of song , and get his blob then convert that blob to the base64 string. Note that,the song recorded must be a mono channel. (put the ref link)

II.1.Create an basic "ejs" template in "views" folder,named "record.ejs"

<!DOCTYPE html>
<html lang="en">
  <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <script src="https://cdn.socket.io/3.1.3/socket.io.min.js" integrity="sha384-cPwlPLvBTa3sKAgddT6krw0cJat7egBga3DJepJyrLl4Q9/5WLra3rrnMcyTyOnh"           crossorigin="anonymous"></script>
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Shazam</title>
 </head>
  <body class="main-body">
           <button id=’record’>Record</button>
  <script src="/static/record.js"></script>
 </body>
</html>

The code above as you can see, it’s a simple ejs template that contains a button called record. After that let create the in the src folder the javascript file called record.js,that is imported in record.ejs by the script tag.

var gumStream;
//stream from getUserMedia() 
var rec;
//Recorder.js object 
var input;
//MediaStreamAudioSourceNode we'll be recording 
// shim for AudioContext when it's not avb. 
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioContext = new AudioContext;
const record = document.getElementById('record');

record.addEventListener('click', startRecording);
              function startRecording() {
              console.log('recoding started');
              var constraints = {
                      audio: true,
                      video: false
                   }
navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
            /* assign to gumStream for later use */
           gumStream = stream;
          /* use the stream */
            input = audioContext.createMediaStreamSource(stream);
        /* Create the Recorder object and configure to record mono sound (1 channel) Recording 2 channels will double the file size */
            rec = new Recorder(input, {
                   numChannels: 1
            });
       //start the recording process 
         rec.record()
      // console.log("Recording started");
      setTimeout(stopRecording, 3000);
  }).catch(function (err) {
      console.log(err);
      });
}

function stopRecording() {
//tell the recorder to stop the recording 
    rec.stop();
//stop microphone access
     gumStream.getAudioTracks()[0].stop();
//create the wav blob and pass it on to createDownloadLink 
    rec.exportWAV(createDownloadLink);
}

function createDownloadLink(blob) {
// console.log(blob)
socket.emit('song', blob);
}

Let explain what happens in the code above: we created gloabals variables that is going to store our media stream.

var gumStream;
//stream from getUserMedia() 
var rec;
//Recorder.js object 
var input;
//MediaStreamAudioSourceNode we'll be recording

To work with web audio API, we created the audio context that allows us to get all the fonctionnalities of the audio API

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioContext = new AudioContext;

An other way to create a context is :

const audioContext = new AudioContext();

Now we get our principle variable,and also we have access to all fonctionnalities of dealing with the audio API. To start recording is launched by the ‘’click’’ event on the ‘’record button’’.

record.addEventListener('click', startRecording);

Then we created the ‘’startRecoding function”.

function startRecording() {
       ...
}

First in this function we define which kind of media stream we need to record,in this case we need only audio.

function startRecording() {
    …
    var constraints = {
    audio: true,
    video: false
       }
}

Then navigator.mediaDevices.getUserMedia(constraints) , prompts the user for the permission to use media input which produces a media stream with tracks specified in the constraints object . Note that,this method returns a “Promise” that resolves to a MediaStream object. If the user denies permission, or matching media is not available, then the promise is rejected with NotAllowedError or NotFoundError.

The promise resolved,we get the stream which will be stored in var gumStream .

function startRecording() {
    …
    navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
        /* assign to gumStream for later use */
        gumStream = stream;
    ...
      }
}

By default the song recorded by the media device has two channels. So,to manipulate our stream, for that we used the createMediaStreamSource() method of the audioContext. A new MediaStreamAudioSourceNode object representing the audio node whose media is obtained from the specified source stream is stored in the input variable.

function startRecording() {
    …
    navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
        /* assign to gumStream for later use */
        gumStream = stream;
    .   input = audioContext.createMediaStreamSource(stream);
    ...
      }
}

Then we created a Recorder object and configure to record mono sound (1 channel).

function startRecording() {
    …
    navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
        /* assign to gumStream for later use */
        gumStream = stream;
    .   input = audioContext.createMediaStreamSource(stream);
    .   rec = new Recorder(input, {
                numChannels: 1
            })
        ...
      }
}

After that, now we are able to start the recording with rec.record() ,but we don’t need to record all the song,just few second that can be useful to the shazam API.let take 3 seconds. To handle that, we used the setTimeout(stopRecording, 3000) method; stopRecording() ,stop the record process with rec.stop();and stop the access to the record media device (in this case the microphone). Also,inside this function we created the WAV(Waveform Audio File Format is an audio file format standard for storing an audio bitstream ) blob and pass it to the createDownloadLink() function,then we sent it to the server using socket.io.

function stopRecording() {
//tell the recorder to stop the recording 
rec.stop();
//stop microphone access
gumStream.getAudioTracks()[0].stop();
//create the wav blob and pass it on to createDownloadLink 
rec.exportWAV(createDownloadLink);
}

function createDownloadLink(blob) {
// console.log(blob)
//send the blog to the server .
socket.emit('song', blob);
}

Conclusion

Thanks for reading.
You can find a full code here.

Build a Location App with Mapbox and ReactJs (part one)

Jonathan Zihindula — Thu, 09 Jun 2022 14:49:27 +0000

Introduction

Hello !
Welcome to this tutorial which is the part one of the Mapbox integration in react app serie. In this serie we are going to build a location application using Mapbox and react as a framework. However in this tutorial we are going first to get the current location using mapbox.

Prerequis

To follow along this tutorial you must have a basic understanding of react . Don't worry about mapbox, I'm going to explain step by step , from the installation until integration. From this serie you can develop and integrate the location app using mapbox for large applications as you desire creating custum map design.

Tutorial Map

Create the react application
Install dependencies
Get Mapbox access token
Implement Mapbox and get the current location

Create React app

To create a react application open up to terminal and run the following code npx create-react-app locationapp.
Then cd locationApp to get into the locationapp folder.
The last code to run is code ., this commande is used to open the created app in the code editor.

Install dependencies

Let install Mapbox in our application by running npm install mapbox-gl or yarn add mapbox-gl.
Now our first and main dependencie installed , let get our access token .

Get mapbox access token

To use any of Mapbox's tools, we need a Mapbox access token. Mapbox uses access tokens to associate API requests with our account.
To create an access token go the mapbox official website , create an account then go to your profile dashbord , create an access token.

Note

This access token must be confidential , that why I can advice to always use it as an environment variable.

Mapbox implementation

In this part of tutorial we are going to jump into practice and get the map ready.
In your code editor create a file Mapbox.js and write the following code.

    import { useState, useEffect, useRef } from 'react';
    import mapboxgl from '!mapbox-gl';

    mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_TOKEN;

    const Mapbox = ( ) => {

    const mapContainer = useRef(null);
    const map = useRef(null);
    const [lng, setLng] = useState(29.235600);
    const [lat, setLat] = useState(-1.683500);
    const  zoom = 13 ;

    useEffect(() => {
        if (map.current) return;

        //////////////// STORE THE MAP IN THE REF ////////////
        map.current = new mapboxgl.Map({
            container: mapContainer.current,
            style: "mapbox://styles/mapbox/streets-v11",
            center: [lng, lat],
            zoom: zoom
        });

       ///////////// CREATE GEOLOCATION CONTROL TO GET THE CURRENT LOCATION ///////
        const userLocation = new mapboxgl.GeolocateControl({
            positionOptions: {
                enableHighAccuracy: true
            },
            trackUserLocation: true,
            showUserHeading: true
        });

       /////////////////////// GET CURRENT LOCATION COORDINATES //////////////////////////////////
            userLocation.on('geolocate', (e) => {
            const lng = e.coords.longitude;
            const lat = e.coords.latitude
            const position = [lng, lat];
            setLat(lat);
            setLng(lng);
        });

     ///////////////////////// ADD THE USER LOCATION CONTROL ON THE MAP ///////////////////
      map.current.addControl(userLocation,"top-right");
    }, [lat,lng, zoom]);

    return  <div 
               ref={mapContainer} 
               style={{
                               position: "absolute",
                               top: 0,
                               left: 0,
                               bottom: 0,
                               height: "100vh",
                               width: "100%"
                           }} 
                  />
     }

    export deafult Mapbox;

After import Mapbox.js file in App.js like this

  import Mapbox from './Mapbox';

     function App() {
        return (
             <div className="App">
               <Mapbox />
             </div>
         );
     }
    export default App;

Now the application is ready to run , let do this by runnig in the terminal npm start.

Conlusion

Thank you for reading this first part of the serie, hope you enjoyed this and learned something from it.
For any feedback and question feel free to reach me out.
You can check out my portfolio as well.

DISPLAY A PDF FILE IN REACT APPLICATION WITHOUT ANY EXTRA PACKAGE.

Jonathan Zihindula — Sun, 27 Mar 2022 14:41:52 +0000

INTRODUCTION

Welcome to this tutorial, here your are going to understand how to display PDF in your react application using google Drive service.
We are going to create a simple react application in which we are going to display our PDF file stored in google drive. If you don’t have a google drive account click here to create one.
Once that’s done, you have your google drive account and offcourse basic skills in react, you are able to follow this tutorial.

CREATE REACT APP

You can create a react application and install all the packages by your own, however you can use the npx create-react-app <project name> command line that installs all basics components and packages we need.

GET A PDF FILE FROM GOOGLE DRIVE

If you don’t have a pdf file in your google drive and don’t know how to upload one click here and learn how to upload a file in google drive.

Once our pdf file is uploaded in google drive click on that file to display it, then go to menu and open it in a new window.

In the new window, click again on menu icon , then to embed item.

After that, let's copy this HTML code and past it in app.js file in our react application.

Here we are, let’s write npm start command line to run our application.

CONCLUSION

Now you are able to display a PDF file stored in google drive in react application without any extra package.
Thanks for reading

Forem: Jonathan Zihindula

Understanding Redux and Redux toolkit in simple words

Problem

Redux installation

Set up the Redux store

Set up the Provider

Set up a reducer

Access and modify the state

1. Access a state

2. Modify a state

Conclusion

Designing Multi-Tenant UI with Tailwind CSS

Concept of Variants in Tailwind CSS

Custom Variants

1. Creating a Simple Custom Variant

2. Custom Variant with Modifiers

Multi-tenant UI Design with Tailwind CSS

1. Problem and Requirements

2. Solution

1. Defining Colors Globally

2. Setting Colors in Tailwind CSS Config

3. Creating Tenant Plugins

Conclusion

Learn More:

LinkedIn Email Finder API

Content

I. Prerequisite

II. Get a Proxycurl API key

II.1. Create Proxycurl account

II.2. Generate Proxycurl API key

III. Proxy server with node.js

IV. Fetch LinkedIn email from proxy server.

Conclusion

Simplifying State Management in React Using the Redux Toolkit: Getting Started

Problem

Redux installation

Set up redux store.

Set up the Provider.

Set up a reducer.

Access and modify the state.

1. Access a state

Modify a state

Conclusion

Understand The DOM and DOM manipulation with javascript. (part 3 final)

I. Reflow and Repaint

I.1 Add elements efficiently

Problematic

Possible solution

Conclusion

Understand The DOM and DOM manipulation with javascript (part 2)

I. Create new content

I.1 createElement() method

I.2. createTextNode method

II Add content to the page

II.1. Node.appendChild() method

II.2 Element.append() method

II.3 insertAdjacentHTML() method

III. Remove content

III.1. removeChild() method

III.1.1 syntax

III.2. remove() method

Conclusion

Understand The DOM and DOM manipulation with javascript. (part 1)

I. The DOM, and DOM construction

I.1 The DOM

I.2. DOM construction

step 1

step 2

step 3

step 4

II. DOM manipulation with Javascript

II.1 Select unique Element

II.1.a Select Element by ID

II.2. Select multiple Elements

II.2.1 Select Element by class

II.2.2 Select Element by tag

II.2.3 querySelector() and querySelectorAll()

Note

III. Modify Page Content

III.1. innerHTML property

I.1 `createElement()` method

I.2. `createTextNode` method

II.1. `Node.appendChild()` method

II.2 `Element.append()` method

II.3 `insertAdjacentHTML()` method

III.1. `removeChild()` method

III.2. `remove()` method

II.2.3 `querySelector()` and `querySelectorAll()`

III.1. `innerHTML` property

III.2 `textContent` and `innerText` properties