Build a Game Stream App with Next.js, Pusher and Dolby.io

build a game stream app with Next.js, Pusher and Dolby.io

> As a web developer, I have always been intrigued by what processes drive successful project ideas from start to fruition. If you’ve ever been on a personal or team collaboration idea, you may have faced issues such as slow-paced development, conflicts with interests and code contributions, incohesive results as a result of poor team communication, etc. 
> 
> All these issues at different levels of complexities in your project development, can hamper your progress and put it on the 🐌 slow track. How can we best automate these processes, and scale applications easier and faster while still building high-performing software that can handle user server load, incorporate new features, and also detect and fix bugs without breaking everything 💭? 
> Well, luckily for us, this is no longer rocket science; this brings us to the practice of **Developer Operations** which will be covered in this article.


## What is DevOps?

The scope of DevOps is quite broad and can be defined in different ways. DevOps at a glance can be seen as an intersection of the activities involved in development and operations. It is an approach to the activities of software development that uses a series of practices to effectively manage collaboration and communication between members of your development & operations team, to create a streamlined software development process. 
DevOps aims to create fast-paced software delivery with high-quality code, quick responses to consumer requirements, produce software that can run effectively in different environments with no server downtime, and an automated CI/CD process for feature improvements and bug fixes. 
:::info
The concept of SDLC (Software Development Life Cycle and CI/CD will be properly introduced in the next section.
:::
DevOps can also be defined as a combination of practices, cultural philosophy, communication techniques, and tools, with the aim of boosting an organization’s capability to build, test and deliver high-performing software, with automated improvement processes to better meet customers' ever-growing desires. 
Awesome isn’t it? With DevOps you can spend more time on innovation and improvements as your team will have streamlined processes for different stages of both the pre-development and post-deployment stages. No more annoying roadblocks caused by ineffective communication and development cycles. 🥳 


## Why DevOps?

In the introductory paragraph of this article, we mentioned some issues that may arise during the software development process and hinted at “**Developer Operations**” being a means to tackle these issues. In this section, we will discuss the Software Development Life Cycle (SDLC), the challenges DevOps aims to solve and how it tackles them, and finally, the process of CI/CD.

### What is SDLC?
Software Development Life Cycle is a representation of the stages involved in the development of software applications, from the conception of the idea to the development and delivery of the software and possible maintenance/updates. 
A diagrammatic representation of an SDLC in a DevOps scenario can be seen below:

![release process](https://paper-attachments.dropboxusercontent.com/s_B335F60A391F830DB7149D0EE0EDCEA5FC14E91DF2E2424F7B83CEE43E1F1F0B_1680816382239_DevOps+SDLC2x.png)


With DevOps, there’s an endless cycle 🔄 of improvements made to the software. It aims at automating this process while allowing for flexibility, quality assurance, and faster release cycles.

### Challenges DevOps Aims to Solve
In a typical release process, some challenges may occur that hamper development. DevOps makes use of tools and behavioral approaches to solve these issues. 

- Miscommunication: Poor communication between members of the team will both slowdown application development and produce faulty software. Bad communication can occur in the following scenarios: improper guides/documentation and clear-cut checklists dictating the features currently being developed and the next steps in the development cycle. DevOps provides sensitization on the benefits of good communication and provides a streamlined process to effectively manage collaboration between team members.

- Continuous adaptation to ever-changing landscape (tools and new technologies): To ensure optimal development cycles, DevOps practices involve establishing a standard toolset for application development and ensuring developers make use of best practices when contributing.

- Resistance to change: Some team members might find it hard to adapt to new practices, handle feature improvements and make use of the toolsets. With DevOps, training, workshops, and cultural training can be undertaken to make team members more flexible. Also, rotations and incentives can be incorporated to encourage team members to perform better, and with rotation practices, employees are not left drained/stressed out as issues can be delegated to the right set of people seamlessly.

### CI/CD
CI/CD (Continuous Integration/Continuous Deployment) is a set of practices and methodologies incorporated in DevOps to automate the software development process, ensure continuous software delivery, and streamline testing, maintenance, and deployment of the application.

Continuous Integration is the practice of frequently shipping new changes/fixes to the software repository, building and testing the code to ensure smooth integration and stable/reliable software.
Continuous Deployment is the process of creating an automated software delivery process for newer versions of the software to the production environment. This is carried out after the software has been properly tested during Continuous Integration thereby ensuring quality assurance of the deployed software.
CI/CD uses practices such as software versioning, building and testing automation, and deployment pipelines. A CI/CD cycle will consist of a continuous sequence of planning, coding, building, continuous testing, release, deployment, and monitoring operations (getting feedback, shipping features, and improvements). 

In essence, the practice of Developer Operations helps to ensure the following:

- Faster-paced software delivery.

- Better problem remediation system.

- Ensure software development follows best practices and software is of high quality.

- Improved communication and collaboration networks.

- Provides more opportunities for development and innovation, and reduces time spent on fixing and maintaining software.


## Opportunities in DevOps

DevOps initially started as simply a set of practices in software development, but over time has evolved into a separate role filled by an employee with the job of a DevOps engineer. The DevOps engineering role may be part of development, operations, or maybe a separate role of its own. The opportunities available in the DevOps space include the following:


- DevOps engineer: These set of people are responsible for designing, implementing, and overseeing the practices associated with DevOps within the organization. They are software developers, with a key understanding of the tools and operations necessary to build automated pipelines for effective software delivery. 

- Developer Advocacy: While this role is not limited to DevOps, its activities are close to the practices and culture of DevOps. Developer advocates are charged with the responsibilities of working hand-in-hand with the development teams to ensure effective communication and ensure guidance/support when building and deploying software. 
    Developer advocacy also involves creating technical content such as tutorials, use cases, and sample codes for a particular product/technology to educate developers. They also carry out the task of promoting these contents on technical communities and social media platforms to better inform the public on the capabilities of the product, and in doing so make the product easily understandable, while also informing to-be users of its existence.
    The roles of developer advocates may differ from one organization to another, but in essence, a developer advocate possesses good communication skills, a strong technical background, and a passion for working with development teams and promoting content. 

- Kubernetes Engineer: The Kubernetes engineer role is concerned with managing and deploying the software in a container-based environment. Kubernetes is an open-source platform that is used to create an automated deployment, scaling, and management system for orchestrated containerized applications.
    Engineers in this role are responsible for designing and implementing Kubernetes clusters, configuring and managing containerized applications, and automating deployment and scaling processes. They also monitor and troubleshoot issues related to Kubernetes and the underlying infrastructure.
    A Kubernetes engineer may also work closely with developers and operations teams to ensure that containerized applications are optimized for Kubernetes deployment and that DevOps practices are integrated into the development process.

- Release Manager: As the name implies, developers in this role are responsible for handling software versioning; coordinating and managing the release of software updates, patches, and new features to the deployed application. They also work together with the development and operations teams to ensure the software is shipped timely with the desired features and no issues in production.

- Cloud Architect: Cloud architects are responsible for developing and managing cloud-based implementations of the software, which are secure, scalable, and cost-effective. They work with the developer and operations team to ensure the software is optimized for deployment on the cloud environment.

- Automation Engineer: Automation engineers are tasked with the process of creating, maintaining, and testing automated scripts for automatic software testing, deployment, and maintenance.


## Conclusion

Congratulations on making it to the end of this article. With this, you now have a basic understanding of the role of Developer Operations and its benefits to the software delivery process.
:::info
For further study, check out the following resources:

[Evolution of DevOps](https://research.contrary.com/reports/evolution-of-devops)

[Understanding the CI/CD pipeline](https://www.guru99.com/ci-cd-pipeline.html#:~:text=What%20is%20a%20CI%2FCD,and%20allows%20fast%20product%20iterations.)

[Automation in DevOps](https://cyclr.com/blog/devops-and-automation)
:::


What is DevOps? A Quick Guide to Understanding Developer Operations

a quick guide to devops

## What is Amazon S3 

Amazon S3 (Amazon Simple Storage Service) is an object storage service that can store and manage different forms of data. S3 stores these data as object within “buckets”. Files that can be stored include videos, audio, images, and text. This data can be accessed and utilized whenever needed. Amazon S3 is easy to set up, implement and has cost-management features; it provides cheaper storage capabilities.

## Connecting to S3
:::info
To get started with Amazon S3, you will need an [Amazon Web Services](https://aws.amazon.com/) account. In your browser, log in to AWS if you already have an account, otherwise, [create a new user account](https://portal.aws.amazon.com/billing/signup?nc2=h_ct&src=header_signup&redirect_url=https%3A%2F%2Faws.amazon.com%2Fregistration-confirmation#/start/email).
:::
**Bucket and Folder setup**
A bucket in AWS is a container for storing data objects. in your AWS account, you can have numerous buckets and also store lots of data in each bucket. To create a bucket, a bucket name and an AWS region are required. After which we can upload objects to be stored in the created bucket. Objects to be stored are assigned a unique key identifier for ease of access.
To create a bucket, navigate to the services section of your dashboard and enter “S3” in the search bar:

![searching for AWS S3](https://cdn.hashnode.com/res/hashnode/image/upload/v1680297559438/2860ed66-d6bd-40c9-a2f1-ab301064df47.png)


On the new page that opens up, click on the “Create bucket” button. In the form on the next page, enter the name and region of your bucket, uncheck “block all public access”, and finally, click on the “Create bucket” button at the bottom of the page.

## Restricting Access 

There are different ways to secure data uploaded on AWS S3. Some of this methods are:

- User access can be restricted to particular IAM users. This can be done by writing [IAM user policies](https://docs.aws.amazon.com/AmazonS3/latest/dev/example-policies-s3.html). This steps involves writing scripts in a console that define how particular IAM users can access a bucket and also additional permissions for adding, updating or deleting objects from the bucket.
- Writing [bucket policies](https://docs.aws.amazon.com/AmazonS3/latest/dev/example-policies-s3.html) to define access permissions to your bucket and the object stored in it. Only the owner of the bucket can define a policy for it. Policies created apply to all objects in the bucket. Bucket policies allows the owner grant permissions, or allow or block access to a bucket under various conditions.
- Blocking public access for buckets that should not be available to public users.


## Uploading Files from PC to Amazon

To upload files to your bucket, on the AWS S3 page, click on your created bucket from the list of buckets at the bottom of the page.

![a created bucket](https://cdn.hashnode.com/res/hashnode/image/upload/v1680297561950/20be935b-41f2-487a-8675-c856f5e95cfd.png)


Next, click on the “Upload” button to add videos from your PC to your bucket. On the new page, click on “add File” to upload single files, or click on “add Folder” to add an entire folder to your bucket.

![add  file or folder](https://cdn.hashnode.com/res/hashnode/image/upload/v1680297564534/9bc31c42-1dac-4a3d-933d-41b1d11903bb.png)


Navigate through your system directory and add the desired file(s). When you add a file(s), the file name and size will be displayed:

![uploaded files](https://cdn.hashnode.com/res/hashnode/image/upload/v1680297566251/65a03d90-0312-4357-8ee2-3ddffc2950ce.png)


Click on the “Upload” button to add the file to AWS S3. There’s a new page with a progress bar that shows the process of the file getting uploaded. After a successful upload, it shows upload successful on the screen:

![upload successful](https://cdn.hashnode.com/res/hashnode/image/upload/v1680297568554/0a0dd397-89a3-4f40-adf9-437433faf41a.png)


To view the uploaded video in a the browser, click on the uploaded video and navigate to the “permissions” tab. If you get a bucket owner prompt similar to the below image:


![view uploaded items](https://cdn.hashnode.com/res/hashnode/image/upload/v1680297570834/b26a4203-f5c8-40b4-a542-6a483efcd0dd.png)




You can switch access control to ACL by clicking on the “bucket owner enforced” link and setting object ownership to ACLs enabled on the new page. With that done, we can now make the video public with ACL. To do this, click on object actions and select “make public with ACL” at the bottom:


![make object public](https://cdn.hashnode.com/res/hashnode/image/upload/v1680297572428/1cfda965-6838-4e8b-b8fe-e79b23fd8c02.png)

Finally, click on the “Make public” button on the next page. With this done, you can access the video with the object URL from the properties section. 

## Connecting Amazon S3 to YouTube

There are different web platforms that offer services to connect AWS S3 to YouTube. An example of such platform is [Zapier](https://zapier.com/). To make use of Zapier, [create a new user account](https://zapier.com/app/login?next=https%3A%2F%2Fworkflows.zapier.com%2F%3Fid%3D28e222f5-557f-4906-8df8-8723e14122b9%26context%3D12479104%23readAuth) on the website. Next, [connect your Amazon S3 account to Zapier](https://workflows.zapier.com/?id=e23145b7-30f8-439a-a85a-dc8c30552b42&context=12806106#readAuth):

![Zapier and AWS connect](https://cdn.hashnode.com/res/hashnode/image/upload/v1680297574153/de844d78-a93f-44fd-bd5f-e538c21629f7.png)


Click on the “Connect” button. An `access key id` and `secret key`  are required to connect the AWS account to Zapier. If you don’t have one, on your dashboard click on “account”, then click on “security credentials”:

![security credentials](https://cdn.hashnode.com/res/hashnode/image/upload/v1680297576234/92d34cdc-4d2b-4f3e-b6dc-9043a6307973.png)


On the new page that opens up, select “access key” and click on “Create new access key”. A new key will be created for you. You can either download the key, or copy and store this key somewhere as it would only be displayed once. Copy and paste the `access key` and `secret key` in the required fields to connect the AWS account to Zapier. When this is done the account gets linked to Zapier and we can continue to the next step:

![account linked to Zapier](https://cdn.hashnode.com/res/hashnode/image/upload/v1680297578486/36435ee6-7fce-4749-87ff-d6b3d87f9fe9.png)


The next step is to connect the YouTube account that will be linked to the AWS S3 bucket with Zapier:

![Connect YouTube](https://cdn.hashnode.com/res/hashnode/image/upload/v1680297580186/e50bb21c-fde5-4faf-b2fc-700506e1cce8.png)


Click on the “Connect” button to sign in and allow Zapier access to your YouTube. Click on the “Next” button when this is done.
There is a new page where we define the fields we want Zapier to edit:

![define Zapier entries](https://cdn.hashnode.com/res/hashnode/image/upload/v1680297581773/c50cfa1d-f801-49a5-9037-75acd57861ee.png)


 The required fields are selected by default. Click on the “Next” button to continue. Leave the other fields blank. And finally turn on Zap in the last section.

![turn on zap](https://cdn.hashnode.com/res/hashnode/image/upload/v1680297583349/2b58e00b-1a59-4384-9416-20963d5aeda7.png)


 To handle creating and adding new files from a bucket on S3 to YouTube, we will create a new zap for this. Click on the “Create Zap” button on the navigation menu. Select Amazon S3 from the list of events and click on “Continue”:

![connect aws to youtube connection on zapier](https://cdn.hashnode.com/res/hashnode/image/upload/v1680297585752/bdc58061-cccd-4583-8da2-c531b35c1e59.png)


 Select your account and in the next section, select the bucket you wish to link to YouTube:

![select user account](https://cdn.hashnode.com/res/hashnode/image/upload/v1680297587636/27290da0-f1c3-4fd5-989c-6f29d3289bf0.png)


 Next, set the trigger event to new or updated file and click on “Continue”:

![set event trigger](https://cdn.hashnode.com/res/hashnode/image/upload/v1680297589287/460228dc-8481-4942-aa93-fd639b7a92e7.png)


 For the action to be executed, select YouTube: 

![upload to youtube](https://cdn.hashnode.com/res/hashnode/image/upload/v1680297590935/4fd9e063-de41-4f4e-a4f0-871183f00209.png)


And for the event, select “Upload Video” and choose the YouTube account in the next section. For the “set up action” section we will use the file in the S3 bucket to fill the fields. Set the `Privacy Status` field to unlisted

![set privacy](https://cdn.hashnode.com/res/hashnode/image/upload/v1680297593011/33c7294b-70dd-4a41-80df-39b79e70c39e.png)


Finally, click on publish zap, and turn on the zap:

![publish created zap](https://cdn.hashnode.com/res/hashnode/image/upload/v1680297594557/4744e9bf-5765-4874-9811-8146c9a7fcaf.png)


When all this steps are completed, if we add a new video the the bucket on S3:

![testing zap](https://cdn.hashnode.com/res/hashnode/image/upload/v1680297596130/88ba1316-f76a-49fb-b65c-c2a3f957db54.png)


The zap executes and uploads the video to the YouTube channel. We can view the zap detail log to see this:

![zapier log](https://cdn.hashnode.com/res/hashnode/image/upload/v1680297597834/e1f61e2c-2244-4d3a-aead-06a340d03c61.png)


The uploaded video shows up on the YouTube channel:


![video uploaded to youtube](https://cdn.hashnode.com/res/hashnode/image/upload/v1680297599524/7ba3cf38-1b11-4303-8ab0-ece91353ccfd.png)

## Conclusion

In this tutorial, we learned how we can create a bucket on AWS S3, upload videos to the bucket and connect the bucket to YouTube for automatic deployments.



Uploading Videos to YouTube from S3 Bucket

uploading videos to amazon s3

## Introduction

When images are fetched from API's we simply get the images via URLs and anytime we need to re-use the image, we have to send another fetch request. This can be pretty annoying to keep repeating, as an alternative we can convert the image we get from our URL into a blob consisting of a base64 encoded form which we can use directly in the `src` attribute.

## Goals

In this tutorial, users will learn how to convert images to blob, and store them in a blob format. These images will be fetched from an API and will be displayed in a React App.

## Setting Up

For our React application, we simply have a single page that displays the image received from the API and the image received from the base64 format side-by-side. Pretty cool, 😎 right? Let's dive in.

### Creating our App

We will be using ReactJs for this project. To set up React, we use the following command in the CLI:

``` bash
npx create-react-app images
```

This creates a project folder named `images` which we will be using for our application. You can open this folder in your code editor. Your app structure should be similar to the tree diagram below:

``` bash
┣ 📂public
 ┃ ┣ 📜favicon.ico
 ┃ ┣ 📜index.html
 ┃ ┣ 📜logo192.png
 ┃ ┣ 📜logo512.png
 ┃ ┣ 📜manifest.json
 ┃ ┗ 📜robots.txt
 ┣ 📂src
 ┃ ┣ 📜App.css
 ┃ ┣ 📜App.js
 ┃ ┣ 📜App.test.js
 ┃ ┣ 📜index.css
 ┃ ┣ 📜index.js
 ┃ ┣ 📜logo.svg
 ┃ ┣ 📜reportWebVitals.js
 ┃ ┗ 📜setupTests.js
 ┣ 📜.gitignore
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┣ 📜README.md
 ┗ 📜yarn.lock
```

We will be making use of the `App.js` file to create our image viewing page and we will add some styles to it in the `App.css` file to give our webpage a better appearance.

## Creating our Image view page

To start, we will clear up most of the boiler-codes that came in our `App.js` file until we have the structure below:

``` js
import "./App.css";
import react from "react";

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

```

For our app, we will need a search bar to get an image that will be displayed. We will start by building this first:

``` js
 <div className="App">
      <input type="search" placeholder="Find Image" />
      <button type="submit">Find</button>
    </div>
```

So here, we have the `search input` tag to search for our image and a button to submit it. To view our app in our browser, we run the `npm start` command in the CLI. Navigate to the `localhost` URL in your browser and you'll get a result similar to the image below:

![Initial appearance](https://cdn.hashnode.com/res/hashnode/image/upload/v1680295968130/a6d784b4-96bc-47ac-b65c-182ed7ae0cea.png)

Looks rather bland right? Let's liven things up with some styles. We can add these styles in the `App.css` file:

``` css
.App {
  text-align: center;
  font-family: monospace;
  padding-top: 8px;
}
input {
  padding: 8px 4px;
  border: 1px solid #e8e8e8;
  margin: 8px;
}
button {
  padding: 8px 15px;
  text-transform: uppercase;
  font-weight: bolder;
  background: rgb(54, 54, 255);
  border: none;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}
```

Now, in our browser we have the following result:

![Styled search bar](https://cdn.hashnode.com/res/hashnode/image/upload/v1680295969935/df271abc-cb75-49e3-b9a9-1d6a32352f1e.png)

Looks much better. Next up, we will fetch and display our image from the Unsplash API.

### Creating Unsplash account

[Unsplash API](https://unsplash.com/) provides us with a means to get high quality images from Unsplash which we can put to different uses. To create a user account, navigate to the [Unsplash page](https://unsplash.com/developers) and *click on the "Register as a developer" button*. Fill in your details in the form on the next page and create your user account. *Click on "Create a new application"* and you'll be prompted to accept some "terms and agreements" then finally create a new application. 

![Unsplash new app](https://cdn.hashnode.com/res/hashnode/image/upload/v1680295971582/93fd85eb-5956-4dab-b486-dd06e94b3f2a.png)

finally, we will need the `access credentials` at the bottom of our next page. copy this key and save it in your `App.js` file

``` js
const key = "your access key";
```
:::warning
For the purpose of this tutorial, we will hard-code our access key. Normally, it's better to store this key in a `.env` file or use a secret management app service like [Doppler](https://doppler.com/) to store your keys.
:::
### Fetching images from Unsplash

Now that we have our access key, we can fetch our image with the Unsplash API. we will be using  `axios` to make our request. We can install `axios` in CLI with the following command

```js
npm install axios
```

With that set up, let’s get our image. We will import this module into our `App.js` file and make our request

```js
...
import axios from "axios";
function App(){
    ...
    const link = "https://api.unsplash.com/search/photos";
  axios
    .get(link, {
      params: {
        client_id: key,
        query: "hp",
      },
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    })
    .then(function () {});
}
```

Above, we have set up our `fetch` request. The `link` variable contains our `URL` to fetch images. Our `axios` request makes use of our `key` in the link's parameter and searches for the query "hp". Once we get a response, the response will be logged in our console. Below is an example of what the response looks like

![API response](https://cdn.hashnode.com/res/hashnode/image/upload/v1680295973213/7c2cae3b-1575-47a1-a19f-0f2af1d0f2a0.png)

The response consists of an array of ten images. We are steadily making progress and are almost done with our `image view` page, we just need to get the `URl` for one of the images from our response. First, we will need a variable to store this `URL` and use it in our application.

```js
const [image, setImage] = react.useState("");
```

Then we can set `setImage` to the value of the first `URL` from our response.

```js
... 
query: "hp",
      },
    })
.then(function (response) {
      setImage(response.data.results[0].urls.regular);
...
```

With this, we can create a `img` tag in our app and set the `src` attribute to `image`

```js
<img src={image} alt="" />
```
:::info
One more thing, we need to set our search `query` to the input from our `search bar` rather than the "hp" string. To do this, we will create a state variable to contain the value of our input field, then we will place our `fetch request` in a function that will be called when we click the "Find" button.
:::
```js
const [query, setQuery] = react.useState("");
...
<input
        type="search"
        placeholder="Find Image"
        onChange={(e) => {
          setQuery(e.target.value);
        }}
      />
```

Then, for our `Find` button

```js
<button type="submit" onClick={() => handleSubmit()}>
    ...
```

and the `handleSubmit()` function

```js
function handleSubmit() {
    axios
      .get(link, {
        params: {
          client_id: key,
          query: query,
        },
...rest of the code
```

Here, we have added the search `query` from our input field to the `params` for our `fetch` request. now when we click on the "Find" button we have an image based on our search.

![Image from API](https://cdn.hashnode.com/res/hashnode/image/upload/v1680295975136/2af4307a-3973-4f20-b51f-6945519fe994.png)

We can arrange the order the page is displayed through our `App.js` stylesheet.

```css
.App {
...
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
```

## Converting Image to Blob

We have come to the main focus of our application; converting the image from our `URL` to Base64 format. To be able to convert an image to base64 format, first the image has to be of type "blob". Blob is short for "Binary Large Object" and is a data type that can store binary data.

To convert our images to data `URL` we will need to use `File Reader`

```js
...
setImage(response.data.results[0].urls.regular);
getDataBlob(image); 
        async function getDataBlob(url) {
          var res = await fetch(url);
          var blob = await res.blob();
          var base64img = await parseURI(blob);
          console.log(base64img);
        }
async function parseURI(d) {
          var reader = new FileReader();
          reader.readAsDataURL(d);
          return new Promise((res, rej) => {
            reader.onload = (e) => {
              res(e.target.result);
            };
          });
        }
```

Above, we have two `async` functions for our image conversion. The `getDataBlob` function takes in the `URL` from our response, when `res` is returned it converts it to type `blob`. Then, to get the binary data of the image, we use the `FileReader` function. When we check in our console, we see a long string of characters that make up the binary data of our image. To use this data, we will store it in a variable and add it in the `src` attribute of another `img` tag.

```js
  const [newimg, setNewimg] = react.useState("");
```

Then instead of `console.logging` "base64img", we can set this value to `setNewimg`.

```js
setNewimg(base64img);
```

Finally, we can create another `img` tag to use the `src` "newimg"

```js
<img src={image} alt="image 1" />
<img src={newimg} alt="image 2" />
```

Above are our two `img` tags. The former uses the response from our API, while the latter uses the `blob` data URL as their respective sources.

Here is an example of what your output looks like

![Image from bob](https://cdn.hashnode.com/res/hashnode/image/upload/v1680295976685/c25d6475-c3c6-4138-8829-d711b97ed05c.png)

## Conclusion

Hurray! we have come to the end of this tutorial. In this tutorial we learned how to fetch images from the Unsplash API, convert them to type blob and get the data URL for use in our application. 

Storing Images as Blobs

storing images as blobs

Using the delete operator to remove items from an array is not the right way. In this short article, I will explain why.



## The delete operator works differently with objects and arrays


The delete operator can be used to delete properties from an object. Here's how


~~~js
    // Imports
    import mongoose, { Schema } from 'mongoose'
    
    // Collection name
    export const collection = 'Product'|
    
    // Schema
    const schema = new Schema({
      name: {
        type: String,
        required: true
      },
    
      description: {
        type: String
      }
    }, {timestamps: true})
    
    // Model
    export default mongoose.model(collection, schema, collection)
~~~

## Arrays as Objects
Since arrays are also objects, the delete operator can also be used on them. However, it works differently with arrays.

### What Happens to Deleted Elements?
The deleted item is replaced with `<1 empty item>` (a placeholder to show that the value has been removed). And the length of the array remains 5, just like the original.

:::info
This is an information box.
:::

 - [ ] Task list 1
  - [ ] Pending task list 2
  - [x] Completed task list 3
  - [x] Completed task list 4 

Both items are removed, but the length remains 5.

The delete method removes the value from the array but does not reindex or reposition other values in the array. If you try accessing a deleted value, you will get undefined:

~~~js
renderers={{
          heading: (props) => {
            const { level, children } = props;
            const text = children[0];
            const slug = text.toLowerCase().replace(/\s+/g, '-');
            return React.createElement(`h${level}`, { id: slug }, children);
          },
        }}
~~~

Since arrays are also objects, the delete operator can also be used on them. However, it works differently with arrays.

The deleted item is replaced with <1 empty item> (a placeholder to show that the value has been removed). And the length of the array remains 5, just like the original.

Both items are removed, but the length remains 5.

The delete method removes the value from the array but does not reindex or reposition other values in the array. If you try accessing a deleted value, you will get undefined:

~~~js
    // Imports
    import mongoose, { Schema } from 'mongoose'
    
    // Collection name
    export const collection = 'Product'|
    
    // Schema
    const schema = new Schema({
      name: {
        type: String,
        required: true
      },
    
      description: {
        type: String
      }
    }, {timestamps: true})
    
    // Model
    export default mongoose.model(collection, schema, collection)
~~~

:::warning
Always ensure to copy code into the correct files and sections to get expected results
:::

Victory Tuduo

Software Developer & Content Creator