DEV Community: Alexander Maina

Utilizing Web Workers for Background Processing in React Hooks Applications.

Alexander Maina — Wed, 24 Jul 2024 08:59:48 +0000

1.0 Introduction

Web Workers in React are functions that allow concurrent running of multiple threads in a React application.It enables some of the threads to run in the background, to exclude it from running as part of the main thread.

Take for example, you have an application where maybe you want to perform a complex calculation, large data fetching from an API or implementing a background notification, without altering the normal funtionality of the currently running main thread. This can be achieved by implementing React Web Hooks that ensure that the User Interface does not freeze while all these processes run in a React app.

In this guide, we will create a sample react project that implements web workers in custom react hooks to perform an exponential calculation.

Steps

Step 1: Create the React App

Create a react application.



npx create-vite myproject -- --template react

I prefer using vite to create a react app since it has a faster run time compared to create-react-app .
Here we use react as the template from vite.

select JavaScript:

open the project on an editor. (I'll use Vs code for this project)



code .

Step 2: Scaffolding our project.

Inside the src directory, create another directory hooks/useWebWorkers.
Inside this folder, create an index.js file that will hold our web worker as shown below:

Step 3: Creating our web worker

Inside our /hooks/useWebWorker/index.js, we create a custom hook, that creates our web worker

Create a useWebWorker custom hook that takes workerFunction and inputData as parameters.



const useWebWorker =(workerFunction,inputData)=>{

}
export default useWebWorker;

Initialize states for our result,error and status of our web worker using useState hook.



import {useState} from 'react'
const useWebWorker =(workerFunction,inputData)=>{
const [result,setResult] = useState(null);
const [error,setError] = useState(null);
const [loading,setLoading] = useState(false);

}
export default useWebWorker;

i) result stores the result of our web worker. Initially set to null.

ii)error keeps track of the error that may occur in the web worker.Initially set to null.

iii) loading gives state of our web worker whether it's processing data or not.Initially set to false.

Initialize a useEffect to hold our web worker.



import {useState,useEffect} from 'react'
const useWebWorker =(workerFunction,inputData)=>{
const [result,setResult] = useState(null);
const [error,setError] = useState(null);
const [loading,setLoading] = useState(false);

useEffect(()=>{

},[inputData])

}
export default useWebWorker;

The useEffect hook runs whenever inputData changes, because it has been set as a delimiter,
When the inputData is null or undefined, the hook exits early.



if(!inputData)return;

Ensure that all the states are correctly reset



    setLoading(true);
    setError(null);
    setResult(null);

Create a web worker blob



    const blob = new Blob(
      [
        `
          self.onmessage = function(event) {
            (${workerFunction.toString()})(event);
          };
        `,
      ],
      { type: "application/javascript" }
    );

Converts workerFunction to a string and includes it in a Blob object.This Blob represents the JavaScript code that will run in the Web Worker.

Create a Worker that generates a URL for the Blob and creates a new Web Worker using this URL:



    const workerScriptUrl = URL.createObjectURL(blob);
    const worker = new Worker(workerScriptUrl);

Set up an event handler for the message emitted by the worker.



worker.onmessage(event){

}

when the web worker sends a message to the main thread (using postMessage), the event handler is triggered.
event.data contains either valid result or error in the web worker. We handle rendering of either the error or valid results inside the if-else statements.

In case of an error, we set the error to event.data.error inside setError().
if valid results are returned, we pass the result to event.data inside the setResult()



    worker.onmessage = (event) => {
      console.log("Worker result:", event.data);
      if (event.data.error) {
        setError(event.data.error);
      } else {
        setResult(event.data);
      }
      setLoading(false);
    };

Sets loading to false when done.

Handle Web worker errors:

We use worker.onerror(event){

}
We pass event as a parameter,update the error to event.message and update loading state to false.



    worker.onerror = (event) => {
      console.error("Worker error:", event.message);
      setError(event.message);
      setLoading(false);
    };

We now send the inputData to the web worker



worker.postMessage(inputData);

We terminate the Web Worker and revoke the Blob URL when the component unmounts or inputData or workerFunction changes:



    return () => {
      worker.terminate();
      URL.revokeObjectURL(workerScriptUrl);
    };
  }, [inputData, workerFunction]);

We finally return the state of the web worker by returning result,error and loading states:



return {result,error,loading}

Export the useWebWorker:



export default useWebWorker;

Below is the complete code for hooks/useWebWorker/index.js:



import { useState, useEffect } from "react";

const useWebWorker = (workerFunction, inputData) => {
  const [result, setResult] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!inputData) return;

    setLoading(true);
    setError(null);
    setResult(null);

    const blob = new Blob(
      [
        `
          self.onmessage = function(event) {
            (${workerFunction})(event);
          };
        `,
      ],
      { type: "application/javascript" }
    );

    const workerScriptUrl = URL.createObjectURL(blob);
    const worker = new Worker(workerScriptUrl);

    worker.onmessage = (event) => {
      console.log("Worker result:", event.data);
      setResult(event.data);
      setLoading(false);
    };

    worker.onerror = (event) => {
      console.error("Worker error:", event.message);
      setError(event.message);
      setLoading(false);
    };

    console.log("Posting message to worker:", inputData);
    worker.postMessage(inputData);

    return () => {
      worker.terminate();
      URL.revokeObjectURL(workerScriptUrl);
    };
  }, [inputData, workerFunction]);

  return { result, error, loading };
};

export default useWebWorker;

Step 4: Editing our App.jsx

In our App.jsx, let's define a worker function that will be executed by our web worker:



const workerFunction = (e) => {
  const { base, exponent } = e.data;
  console.log("Worker function received data:", base, exponent);

  let result = 1;
  for (let i = 0; i < exponent; i++) {
    result *= base;
  }

  self.postMessage(result);
};

e.data contains data from the web worker.

The workerFunction:
Logs the received data (base and exponent).
Computes the power of base raised to exponent.
Sends the result back to the main thread using self.postMessage(result).

Let's now define our App functional component inside our App.jsx:



const App = () => {
  const [base, setBase] = useState("");
  const [exponent, setExponent] = useState("");
  const [inputData, setInputData] = useState(null);
  const { result, error, loading } = useWebWorker(workerFunction, inputData);

base: Stores the base number input.
exponent: Stores the exponent number input.
inputData: Stores the data to be sent to the worker.
Custom Hook Usage: useWebWorker is used to create a Web Worker and manage its state.



  const handleBaseChange = (e) => setBase(e.target.value);
  const handleExponentChange = (e) => setExponent(e.target.value);

handleBaseChange: Updates base state when the input value changes.
handleExponentChange: Updates exponent state when the input value changes



  const handleCalculate = () => {
    setInputData({ base: Number(base), exponent: Number(exponent) });
  };

handleCalculate Function: Converts base and exponent to numbers and sets them as inputData for the Web Worker.



  return (
    <div>
      <h1>Exponential Calculation with Web Worker</h1>
      <div>
        <label>
          Base:
          <input type="number" value={base} onChange={handleBaseChange} />
        </label>
      </div>
      <div>
        <label>
          Exponent:
          <input type="number" value={exponent} onChange={handleExponentChange} />
        </label>
      </div>
      <button onClick={handleCalculate}>Calculate</button>
      {loading && <div>Loading...</div>}
      {error && <div>Error: {error}</div>}
      {!loading && !error && result !== null && <div>Result: {result}</div>}
    </div>
  );
};

JSX Layout:
Displays a title and input fields for base and exponent.
A button triggers the handleCalculate function.
Conditionally renders loading, error, or result messages based on the state.

Below is the complete App.jsx code:



import { useState } from "react";
import useWebWorker from "./hooks/useWebWorker";
import "./App.css";

const workerFunction = (e) => {
  const { base, exponent } = e.data;
  console.log("Worker function received data:", base, exponent);

  let result = 1;
  for (let i = 0; i < exponent; i++) {
    result *= base;
  }

  self.postMessage(result);
};

const App = () => {
  const [base, setBase] = useState("");
  const [exponent, setExponent] = useState("");
  const [inputData, setInputData] = useState(null);
  const { result, error, loading } = useWebWorker(workerFunction, inputData);

  const handleBaseChange = (e) => setBase(e.target.value);
  const handleExponentChange = (e) => setExponent(e.target.value);

  const handleCalculate = () => {
    setInputData({ base: Number(base), exponent: Number(exponent) });
  };

  return (
    <div>
      <h1>Exponential Calculation with Web Worker</h1>
      <div>
        <label>
          Base:
          <input type="number" value={base} onChange={handleBaseChange} />
        </label>
      </div>
      <div>
        <label>
          Exponent:
          <input type="number" value={exponent} onChange={handleExponentChange} />
        </label>
      </div>
      <button onClick={handleCalculate}>Calculate</button>
      {loading && <div>Loading...</div>}
      {error && <div>Error: {error}</div>}
      {!loading && !error && result !== null && <div>Result: {result}</div>}
    </div>
  );
};

export default App;

We can now use npm run dev to view our project.
Below is a live preview of our project:
Web Workers Project Implementation

Conclusion

Implementing Web Workers in your React applications can significantly enhance performance, especially when dealing with CPU-intensive tasks. By offloading such tasks to background threads, you ensure that your app remains responsive and provides a smooth user experience.

In our example, we've seen how straightforward it can be to set up and use Web Workers in a React environment. From dynamically creating a worker using a custom hook to managing the communication between the main thread and the worker, every step is designed to be both efficient and easy to integrate.

This approach not only helps in maintaining a responsive UI but also makes your app more robust and user-friendly. Whether it's for complex calculations, data processing, or any other heavy lifting, Web Workers can be your go-to solution for multitasking in modern web applications.

Remember, the key to a great user experience is not just about what your app does but how it feels while doing it. By implementing Web Workers, you can ensure that your app feels snappy and responsive, keeping your users happy and engaged. So, go ahead and explore the power of Web Workers in your next React project – your users will thank you for it!

Choosing Between ReactJS and VueJS: A Developer's Guide.

Alexander Maina — Thu, 02 Mar 2023 21:37:58 +0000

Hello there, Developer. I hope everything is well with you. Have you ever wondered why some developers prefer VueJs over ReactJS? Have you ever been unsure which of the two to choose while on your development journey? Are you a beginner who is unsure about where to begin learning or where to specialize? Don't be concerned. In this tutorial, I'll walk you through everything you need to know to get started. I will compare the two in a clear and precise manner, listing and explaining the similarities and differences between the two. Let's get this party started.

1.0 Brief introduction to ReactJS and VueJS.

1.1 ReactJS

React is an open source JavaScript library that is used to create user interfaces in Web development.
It was released by Facebook in the year 2013.
It is a component-based library that is used to create the view layer of web pages.
React functions by generating reusable components that represent various aspects of a user interface. Each component is responsible for rendering its own part of the UI, and React handles updating the UI efficiently as the application's data and state change over time. React also offers a simple and efficient way to manage an application's state, enabling developers to create dynamic and interactive user interfaces.

React is frequently used in conjunction with other frameworks and libraries, such as Redux for state management and React Router for client-side routing. It can be used to create web applications, mobile applications, and even desktop applications.

1.2 VueJS

VUE JS is a lightweight JavaScript Framework used for development of user interfaces.
It was released by Evan You in February 2014 as an open source project.It is developed in conjuction with HTML, CSS and Vanilla JavaScript to provide declarative and component-based user interfaces.

Vue is designed to be easily adaptible and flexible. This is usually made possible by the following:
- Static HTML enhancement without a build step
- Including them as Web Components on any page
- A One-Page Application (SPA)
- Server-Side Rendering / Fullstack (SSR)
- Static Site Generation / Jamstack (SSG)
- Desktop, mobile, WebGL and the terminal.

2.0 Overall comparison between ReactJs and VueJS.

2.1 Differences between ReactJs and VueJs.

To clearly illustrate the difference between the two, i will use table.

ReactJS	VueJS
1. React is a library.	1. Vue is a JavaScript framework.
2. Normal speed at runtime.	2. Faster speed and smoother at runtime.
3. Released in May 2013.	3. Released in February 2014.
4. Managed by Facebook.	4. Not managed by any particular company or organization. However, the development and maintenance of Vue.js are led by its creator, Evan You, and a team of core contributors.
5. Uses JSX (JavaScript XML) approach for development	5. Uses MVVM (Model-view-view-model)- a template-based approach for development.
6. Employs a virtual DOM, which is an in-memory representation of the actual DOM. When the state of a component changes, ReactJS computes the difference between the virtual and actual DOMs and updates only the parts that need to be changed.	6. Employs reactive rendering, which means that it directly manipulates the DOM to reflect changes in the state of the component.
7. ReactJS, uses CSS Modules, which allow developers to import and use CSS styles in their components without worrying about naming collisions.	7. VueJS allows developers to use scoped CSS, which means that styles defined in a component only apply to that component and its children.

2.2 Similarities between ReactJs and VueJs.

i). Virtual DOM

Both libraries make use of a virtual DOM, which is a memory-based representation of the real DOM. This enables efficient UI updates when the state of a component changes without having to re-render the entire page.

React code:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.handleClick()}>Click me</button>
      </div>
    );
  }
}

VueJS code:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="count++">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
};
</script>

ii). Component-Based Architecture:

Both ReactJS and VueJS use a component-based architecture, which divides the user interface into reusable and independent components. This simplifies the management and maintenance of large and complex applications.

*React code snippet:

function App() {
  return (
    <div>
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

VueJS code snippet:

<template>
  <div>
    <Header />
    <MainContent />
    <Footer />
  </div>
</template>

iii). Single-Page Applications:

ReactJS and VueJS are both well-suited for building single-page applications (SPAs), where the application runs within a single web page, providing a seamless user experience.

React code snippet:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';
import ContactPage from './ContactPage';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route path="/contact" component={ContactPage} />
      </Switch>
    </Router>
  );
}

VueJS code snippet:

<template>
  <div>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/contact">Contact</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import HomePage from './HomePage.vue';
import AboutPage from './AboutPage.vue';
import ContactPage from './ContactPage.vue';

export default {
  components: {
    HomePage,
    AboutPage,
    ContactPage,
  },
};
</script>

iv). Development of both mobile and desktop applications.

React is a versatile front-end library that can be used to develop a wide range of web applications, including mobile and desktop applications. With the help of additional frameworks like React Native and tools like Webpack and Babel, React can be used to create native mobile and desktop applications that can run on a variety of platforms.

Similarly, Vue.js is a versatile front-end framework that can be used to develop a wide range of web applications, including mobile and desktop applications with the help of various frameworks such as Electron and other tools. These tools may include Electron.

v). Reactive and Declarative:

Both ReactJS and VueJS use a reactive and declarative approach to building user interfaces. This means that when a component's state changes, the UI is automatically updated to reflect those changes, without having to manually manipulate the DOM.

ReactJS Code Snippet:

class Greeting extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'John' };
  }

  render() {
    return <p>Hello, {this.state.name}!</p>;
  }
}

VueJS code snippet:

<template>
  <p>Hello, {{ name }}!</p>
</template>

<script>
export default {
  data() {
    return {
      name: 'John',
    };
  },
};
</script>

vi). Easy Integration with Other Libraries:

Both ReactJS and VueJS can easily integrate with other libraries and frameworks, allowing developers to leverage existing code and tools.

ReactJS Code Snippet:

import React from 'react';
import ReactDOM from 'react-dom';
import { Chart } from 'chart.js';

class ChartComponent extends React.Component {
  constructor(props) {
    super(props);
    this.canvasRef = React.createRef();
  }

  componentDidMount() {
    this.myChart = new Chart(this.canvasRef.current, {
      type: 'bar',
      data: {
        labels: this.props.labels,
        datasets: [
          {
            label: this.props.title,
            data: this.props.data,
            backgroundColor: this.props.backgroundColor,
          },
        ],
      },
    });
  }

  componentDidUpdate() {
    this.myChart.data.datasets[0].data = this.props.data;
    this.myChart.update();
  }

  render() {
    return <canvas ref={this.canvasRef} />;
  }
}

VueJS code snippet:

<template>
  <canvas ref="canvas"></canvas>
</template>

<script>
import { Chart } from 'chart.js';

export default {
  props: {
    labels: Array,
    title: String,
    data: Array,
    backgroundColor: String,
  },
  mounted() {
    this.myChart = new Chart(this.$refs.canvas, {
      type: 'bar',
      data: {
        labels: this.labels,
        datasets: [
          {
            label: this.title,
            data: this.data,
            backgroundColor: this.backgroundColor,
          },
        ],
      },
    });
  },
  watch: {
    data(newData) {
      this.myChart.data.datasets[0].data = newData;
      this.myChart.update();
    },
  },
};
</script>

In conclusion, both ReactJS and VueJS are powerful front-end frameworks that enable developers to create dynamic and responsive user interfaces. While there are some key differences between the two, including their component syntax, state management systems, and performance characteristics, they also share many similarities such as their use of virtual DOM and support for server-side rendering.

Choosing between ReactJS and VueJS is not about which one is better, but rather which one is better for your specific use case and development team. Each framework has its strengths and weaknesses, and understanding these differences is key to making an informed decision and building great applications.

WEB SCRAPING USING PYTHON AND BEAUTIFUL SOUP.

Alexander Maina — Sun, 15 Jan 2023 15:18:07 +0000

I previously submitted a back-end developer job application to a certain website. But the website never sent me updates through email, and this scenario only sometimes presented itself. As a result, I had to access the internet daily and would continue to scroll and gaze. Until I discovered web scraping, I was unable to take advantage of an opportunity the next season.
As a result, I feel the need to share my knowledge about Python web scraping.

What is Web Scraping?

Web Scraping is a term used to refer to using a program to download and process content from the web.

Interestingly, copying and pasting the contents of the web is a basic example of web scraping.However Web scraping involves automation.

What is Beautiful Soup?

It is a Python module that parses (analyze and identify the parts of) Hyper-Text Mark-Up Language, a language in which web pages are written in.

Beautiful Soup does not come installed in python and hence it needs to be installed before initial use.

The BeautifulSoup module’s name is bs4 (for Beautiful Soup, version 4).

1.0 Installing Beautiful Soup and Requests Library.

Open the command line and type python to open the python interpreter in interactive mode.

To install Beautiful Soup, type the following command on the command line:

pip install beautifulsoup4

While beautifulsoup4 is the name used for installation, we use bs4 to import Beautiful Soup

We also need to install requests python library by typing the following command on the command line.

pip install requests

2.0 Scraping the Page

In this section, we now need to get the contents of the candidate page. We will use https://www.xyz.com as an example of our candidate page.

import requests
URL = "https://www.xyz.com"
response = requests.get(URL)

This returns the Content of the https://www.xyz.com page. This includes all elements and attributes present inside the page.

3.0 Parsing the HTML page content.

This refers to parsing this lengthy code answer using Python's help to make it more accessible and allow you to select the information you need.

We first of all need to import Beautiful soup and then create a variable to store our parsed content.

import requests
from bs4 import BeautifulSoup

URL = "https://www.xyz.com"
response = requests.get(URL)
soup = BeautifulSoup (response.content, "html.parser")

"html.parser" is a built-in Python library that parses HTML and XML documents. It creates a parse tree from the HTML content that can be used to extract information from the website.

4.0 Find element by attribute.

Take for example we need to find jobs based on a div with id = "available". We now need to scan through the entire page and find all elements with id = "available".

import requests
from bs4 import BeautifulSoup

URL = "https://www.xyz.com"
response = requests.get(URL)
soup = BeautifulSoup (page.content, "html.parser")
job = soup.find(id = "available")

This returns the list of all jobs available. Below is an example:

<div id = "available">
   <!--Job listings-->
</div>

You can also chain multiple find_all() method to make the search more specific.For example:

job = soup.find_all("p", string="Posts")

The above code will scan through the paragraphs, trying to find a string Posts. If it happens that this has been mispelt or typed with a different case, it will return no object.To rectify this, we can use lambda() function as follows;

python_job = results.find_all(
    "h2", string=lambda text: "python" in text.lower()
)

The above code will scan through all h2 in the page and convert them to lower case. It'll then find the substring 'search, and return the results.

5.0 Display the available jobs.

Now print the available jobs.

print(job.text)

You can as well use len if you need to see the number of jobs available.

print(len(job.text))

I hope that this step-by-step guide has instilled new skills in you. Happy Coding!!!

Using key-frames to create a sign-up box with changing background colors.

Alexander Maina — Mon, 24 Oct 2022 01:30:17 +0000

Howdy, developer! I believe you're doing great. In this short article, we'll look at how to use CSS keyframes to construct an HTML sign-up form with changeable background colors. I'll make an effort to be as simple and clear as I can. I hope you will like it. Now let's get started.

1.Creating the sign-up form.

We need to first of all create a sign-up form using html. Our form will be having:

Surname
First Name
Second name
Email
Password
Confirm password

Below is our Html code for the page structure.

<!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>Sign up</title>
</head>
<body>
    <form>
<div class="box">
    <h1>Sign up</h1><br>

        <label>Surname:<span>*</span></label>
        <input type="text"  placeholder=""><br>
        <label>First name:<span>*</span></label>
        <input type="text"  placeholder=""><br>
        <label>Last name:<span>*</span></label>
        <input type="text" placeholder="" ><br>
        <label>Email address:</label>
        <input type="email"  placeholder="" required><br>
        <label>Password:<span>*</span></label>
        <input type="password"  placeholder="" required><br>
        <label>Confirm Password:</label>
        <input type="password"  placeholder="" required><br>
        <input type="button" value="Sign up">
<p>By clicking sign up, you agree to our <br>
        <a href="#">Terms and conditions</a> and <a href="#">privacy policy</a>
<p class="para-2">Already have an account? <a href="login.html">Log in</a></p>

</form>    
</body>
</html>

2. Styling Our Html Page.

In this section, we will now style our html page to give it a nice look.

2.1 Linking CSS to Html using external linking.

We need link our Css code to our html page by adding the link inside our html head tags as shown below:

<link rel="stylesheet" type="text/css" href="style.css"/>

Recall that this should be added inside our html head tags.

2.2 Adding Css to Html.

In this sub-section, we need to add the styling of our page as follows:


body{
    background: aqua;
}
.box{
    border-radius: 3px;
    position: relative;
    width: 350px;
    height: 850px;
    background: #abcd00;
    margin: auto;
}
span{
    color: red; 
    font-weight:bold;

}
h1{
    text-align: center;
    padding-top: 15px;
}
form label{
    display: flex;
    margin-top: 50px;
    font-size: 18px;
    margin-left: 5%;
}
form input{
    width: 75%;
    padding: 7px;
    border: none;
    border: 1px solid gray;
    border-radius: 6px;
    outline: none;
    margin-left: 5%;
}
input[type="button"]{
    width: 320;
    height: 35px;
    margin-top: 20px;
    border: none;
    background-color: #49c1a2;
    color: wheat;
    font-size: 18px;
}
p{
    text-align: center;
    padding-top: 20px;
    font-size: 15px;
}
.para-2{
    text-align: center;
    color: black;
    font-size: 15px;
    margin-top: 10px;

}
.para-2 a{
    color:#5f49c1 ;
}

2.3 Adding keyframes.

This is the section where we add keyframes to customize our sign-up box.
We will achieve this by adding keyframe properties to the sign-up block in our Css file.
With this i mean that,we will add keyframe properties inside the block of .box class in Css.

2.3.0 Adding keyframe properties.

In this sub-section,we need to introduce some properties that will be used by our keyframes. These properties include name, duration, delay and iteration function.

Note: They need to be added inside our .box properties in Css.

Here is what we will have:

    animation-name: myframe; /*Name of our key-frame animation.*/
    animation-duration: 5s;  /*How long our animations should last.*/
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite; /*How our keyframe colors will loop.*/
    animation-play-state: running;
    animation-direction: alternate-reverse;
    animation-delay: 0s;  /*How long it will take before our animation is triggered.*/

##2.2.1 Adding Css to keyframe animations.
The basic syntax for CSS keyframes is:

@keyframes animationname{keyframesselector{css-styles;}}

For our case, we will add the following lines of code:

@keyframes myframe{
    50%{
        background: red;
    }
    100%{
        background: skyblue;
    }
}

I changed the backdrop color to a different color at 50% of the animation. This indicates that the backdrop color will start to switch from aqua (its initial value) to red;another when the animation nears its halfway point.

I've set a new color;skyblue to appear at 100%, the point where the animation ends, so that as it gets closer to that point, it will start to transition to that color.

That is how we create varying background colors using keyframes. I believe you have enjoyed.✌️
Thank you.