DEV Community: Adham Niazy

How to upload images to IPFS using (Infura.io) `Dedicated` Gateways ⛓️

Adham Niazy — Sat, 13 Aug 2022 00:02:00 +0000

Have you faced this error before while uploading to IPFS through the Infura.io public gateway?

This error is simply because of the deprecation of the public API, gateway since 10th August.

In this tutorial we will handle the migration from the old public API to the dedicated API while uploading.

1. Create a new account in Infura.io

After creating an account you must add an active credit card to be able to create projects inside infura.io

NOTE: The core plan will be fair enough for you as a developer and nothing will be deducted from your bank account.

2. Create a new project

While creating a new project you will be asked to select the network for the project. for this case select IPFS. Then select the name of the project.

Then you will be redirected to the project details. we will discuss each section together.

Project Summary
This section will include Project ID and API Secret key.
Remember the part of the subdomain we will use it in this article.

Dedicated Gateways
We should enable this section then enter your unique subdomain that will be the link you stored your file on.

Quotas
This section is very important to make you set a limit for this specific project and this will help you not getting the MAX LIMIT and get charged from Infura.io The MAX LIMIT for the core plan is 5 GB

Now we are done with creating the project.

3. Uploading file from code.

For security reasons we should create a .env file to save our Project ID and API Secret key.
In my case I'm working on a Next.js porject so I named the file .env.local and prefixed the environment variables with NEXT_PUBLIC_

Then in our code we should install ipfs-http-client by running this command.

npm install --save ipfs-http-client

Then instead of doing this for public gateway ↓.

const client = ipfsHttpClient('https://ipfs.infura.io:5001/api/v0');

we will write this code ↓.

import { create as ipfsHttpClient } from 'ipfs-http-client';

const projectId = process.env.NEXT_PUBLIC_IPFS_PROJECT_ID;
const projectSecret = process.env.NEXT_PUBLIC_API_KEY_SECRET;
const auth = `Basic ${Buffer.from(`${projectId}:${projectSecret}`).toString('base64')}`;

const client = ipfsHttpClient({
  host: 'ipfs.infura.io',
  port: 5001,
  protocol: 'https',
  headers: {
    authorization: auth,
  },
});

Don't get frustrated from this code we simply went as the infura's documentation said. See the docs for more info
I used proccess.env for accessing environment variables without making them exposed to the code due to security reasons.

Then we will use the client variable that we have created to upload our file ↓.

const uploadToIPFS = async (file) => {
   const subdomain = 'https://an-nft-marketplace.infura-ipfs.io';
   try {
    const added = await client.add({ content: file });
    const URL = `${subdomain}/ipfs/${added.path}`;
    return URL;
  } catch (error) {
    console.log('Error uploading file to IPFS.');
  }
};

Be sure that the subdomain variable should be equal to the same subdomain we have created before in the Dedicated gateways section at the top.

And that's it !! You have now uploaded your file to IPFS and now accessible through the URL variable.

Hope this article helped you tackle this challenge because I this problem have bothered me too. 🤍

How does the garbage collection algorithm (Mark-Sweep) work? 🗑️🧹

Adham Niazy — Fri, 29 Jul 2022 17:00:57 +0000

You might have heard the word "Garbage Collection" before while learning a programming language, So Let's discuss the meaning of this word before digging into the algorithm.

(NOTE: All code examples using JavaScript)

What is the problem we have?

Let's have a look at the following example.

const age = 23;
let person = {
  fullName: 'Adham Niazy',
  age: 23
};

You could think any programming language should handle the first two lines the same way because we are just creating two variables.
But actually, they are a little bit different from each other. Let's see why.

The part on the left is for visualizing how memory saves each variable with its value, so when we created a variable called age, the program found that its value is a simple value of 23.

NOTE: (Booleans, Strings, Numbers, Undefined) are simple data types

But when we created a variable called person, the program found that its value isn't simple but complex!

NOTE: (Objects, Arrays) are complex data types

So, in this case, let's imagine that we have another type of memory on the right part called Heap, this part will hold all complex data types and will give the main memory only an address (Reference) of the stored data. So when we try to access person variable, the main memory will find an address, following this address to reach the actual spot in the Heap.

The real problem is when this happen. ↓

// Problem case
person = 'Anything';

If you understood the last part well, you might have guessed the problem that happened here.

Reassigning the person variable with another value will remove the address (Reference) that points to the Heap! but the critical point is that the person object still exist in the Heap and haven't been removed. (This will cause a memory leak!!).

What is the solution?

The solution depends on the implementation of the language itself.
Example C++ doesn't handle this case and leave it for the programmer to take care of removing the object from the Heap manually before reassign the variable.

Languages Like JavaScript, Java, Python uses automatic memory management. They allocate memory when needed and deallocate it when no longer used. The deallocation process is known as Garbage Collection

Garbage Collection has many algorithms to implement but the most popular algorithm is Mark-Sweep.

Mark-Sweep Algorithm ✔️🧹

Mark ✔️✔️✔️:
Starting from the root reference, we traverse the entire reference graph in our program. Think of the root reference as a global object from which all other "Used" objects in our program are reachable via an existing reference.
While traversing the root reference we will mark all objects we use in our code.

// Mark
const objects = [root];
while(objects.length) {
  const currentObject = objects.pop();
  currentObject.mark = true;
  pointers(currentObject).forEach(ref => {
    objects.push(ref);
  });
}

Sweep 🧹🧹🧹:
We traverse the entire Heap. If a particular memory block is marked, we reset the mark flag for the next iteration. And If the block isn't marked this means that we no longer uses this data so we can deallocate this memory block. This phase is known as "sweep"

// Sweep
let current = heap;
while(current) {
  if (  current.mark ) {
    current.mark = false;
  } else {
    free(current);
  }
  current = current.next;
}

⚠️ The implementation above is incomplete: for example, it doesn't handle circular references. Its only purpose is to demonstrate the garbage collection algorithm in familiar syntax. and let you know how languages implemented this feature

And that's it! Hope you enjoyed this article 🤍

How to Build/Publish your V3 chrome extension!✨

Adham Niazy — Mon, 11 Jul 2022 22:20:45 +0000

Have you ever wanted to create your chrome extension and publish it on the chrome web store?
In this article, we will walk through the process of building a demo extension, and for this to be achieved, we will separate this article into three main parts.

1. How to build your extension?

Let's start by creating an empty "Demo" folder.

Then we will create three simple files (.html, .css, .js) and name them as you want. I will name them popup.html, popup.css and popup.js

Here is our HTML one.

<meta charset="UTF-8" />
<link href="popup.css" rel="stylesheet" type="text/css" />
<script type="module" src="popup.js"></script>

<body>
  <h2 class="message">
    Congratulations 🥳, You have built your own chrome extension!
  </h2>

  <button class="btn" id="redirectButton">
    Press me, I'm working!
  </button>
</body>

And here is our CSS one.

body {
  width: 500px;
  background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.message {
  text-align: center;
  margin: 20px 0;
}
.btn {
  font-size: 16px;
  font-weight: 200;
  letter-spacing: 1px;
  padding: 13px 50px 13px;
  outline: 0;
  cursor: pointer;
  position: relative;
  background-color: #000;
  margin-bottom: 40px;
  color: white;
}

And finally our JS one.

document.querySelector('#redirectButton').addEventListener(
  'click',
  function () {
    window.open('https://www.linkedin.com/in/adhamniazy/')
  }
)

And guess what!. We finished the markup of our extension!!
As you can see that all the files that we have created are just HTML, CSS, and JS? So what makes the chrome extension different from any website?
The answer is: (manifest.json)

The manifest.json file is the only file that every extension using WebExtension APIs must contain.

Using manifest.json, you specify basic metadata about your extension, such as the name and version and aspects of your extension's functionality (such as background scripts, content scripts, and browser actions).

So Let's create our manifest.json file, and here is what we will write.

{
  "manifest_version": 3,
  "name": "Adham Niazy",
  "version": "1.0.0",
  "description": "My First Chrome Extension",
  "permissions": [
    "storage",
    "tabs"
  ]
  "action": {
    "default_icon": "logo.png",
    "default_title": "My First Extension",
    "default_popup": "popup.html"
  }
}

(JUST FOR UNDERSTANDING) Let's discuss each Key in this file.

manifest_version: This key specifies the version of manifest.json used by this extension, we will use the latest version which is 3.
name: Name of the extension. This is used to identify the extension in the browser's user interface.
version: Version of the extension, formatted as numbers and ASCII characters separated by dots.
description: Description of the extension. This is used to identify a detailed explanation of your extension
permissions: Use the permissions key to request special powers for your extension. This key is an array of strings, and each string is a request for permission. for our example we are giving the array two values: storage => which means that we inform google that our extension needs local storage, and tabs => this informs google that our extension needs permission to access Tabs Google API. for more details I highly recommend Permissions
action: An action is a button that your extension adds to the browser's toolbar. The button has an icon, and may optionally have a popup whose content is specified using HTML, CSS, and JavaScript. for example: default_icon specify the default icon that you want to be in the browser's toolbar, default_title specify a title that appear while hovering the extension button, default_popup specify the HTML file that you want to open when the user clicks your extension button. for more details I highly recommend Action

(Those are just the basic ones I highly recommend you to reach MDN - documentation to checkout other keys there are a tons of them.)

Offff!! That was a lot of explanation I know, but lets have a look on the bright side, After this manifest.json file NOW WE HAVE OUR EXTENSION!! 🙌🎯

2. How to run & test your extension on chrome?

Now we are missing something!, how to test it in the browser? Because all we have now is just those files.

It's easier than you think. Let's open a new chrome window and do the following:

Go to the top right corner icon that has three vertical dots and click on it.
Select More tools option.
Select Extensions option.

In the Extensions page you will find a toggle button called Developer Mode Toggle it to ON

After that you will find three buttons appeared click on Load unpacked Button

Then select the folder that we have created together.

After selecting your extension folder this will happen.

By clicking on the extension this will appear. Congrats!! You did it ✔️🎯

3. How to Publish your extension?

We have built our extension. So what about publishing it?
(The following points are from Google Docs)

Before you can publish items on the Chrome Web Store, you must register as a CWS developer and pay a one-time registration fee 5 USD. You must provide a developer email when you create your developer account.

To register, just access the Developer Console. The first time you do this, the following registration screen will appear. First agree to the developer agreement and policies then pay the registration fee.

Once you pay the registration fee and agree to the terms, you will not see this registration page again.

After all, those steps go to your dashboard and click on New Item button

Then upload your extension to chrome as a .zip file then you will be directed to this form. Complete all mandatory fields then hit the Submit for review button.

After submitting your extension now your mission is done, just relax and let google review your extension then it will send you an email for the feedback. 💖

Finally, I'm excited that we reached this point together. I hope this article was helpful to you and didn't waste your time. You will find the code of this demo Github Repo 👀

And thanks for reading, waiting for you in the upcoming articles 👋