DEV Community: Muhammad Sameer

What the hell is Closure in JS?

Muhammad Sameer — Tue, 23 Jul 2024 19:24:36 +0000

Solid defination as per doc
"A closure is a combination of function bundled together with references to its surronding state (the lexical enviromenet). In other words closure give access to outer function scope from inner function."

No i am going to break down this defination in detail step by step and I believe after reading this blog you will never get confused while giving answer to closure in your next interview.

A closure is a combination of function bundled together with references to its surronding state (the lexical enviromenet)

okey so what does it mean I am writing a JS code then you will get idea what does it mean !

function outerFunction(){

    // lexical enviroment 
    console.log("outer function")
    function innerFunction(){
        console.log("inner function ")
    }
    // lexical enviroment 
}

Inner functions and Outer function are combination of two functions Ineer function is enclosed in the lexical enviroment of Outer function.

In other words closure give access to outer function scope from inner function

aha now you get the defination that how the innerFunction take access to outerfunction scope by printing the name variable Sameer in inner Function we are going to deep dive more.

Inner Function take reference to OuterFunction variable i repeat take reference let me show you how !

I have update the name after the innerFunction you might be thinking its going to print name Sameer in console but No as i said it takes the reference of the variable not going to create a new memory in a stack just take the reference of the variable that what a closure is.

You noticed something i am envoking a innerFunction in OuterFunction scope and then envoking a OuterFunction.

remember innerFunction always remember or maintined the reference of outer enviroment even after the execution of outerFunction see an example below in a code where i first execute a outerFunction and then calling a innerFunction.

Pro Tip🚀
An inner function can be directly called using two parenthesis ()() check code i mentioned.

Use case of closures
Closures can also be used for encapsulate data by allowing you to create private variables that are not be accessible from outside the scope that can only accessed or modified through specific functions .

here is the perfect example of code where we are modifying the values of counter with only the specific provided functions.
.

Okay now i have a question for you what if i create a new reference of the function and then again ivoke the incrementCounter guess !! lets look in the code.

hell Yes.. The counter is getting start from 0 and you know the answer right.

I hope now you got familiar with the closures and you can easily cracked interview questions about closure in JS.

well thats for it and I see you in the next one.😉

What is GraphQl?

Muhammad Sameer — Tue, 25 Jun 2024 12:16:58 +0000

Order What You Want: Imagine you’re at a restaurant. With GraphQL, you can order exactly what you want from the menu, and you get just that. You don’t get a whole meal if you only wanted a drink.

Hope you get what I am trying to say. So basically GraphQl is a query Lanuage for API. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

Graphql is often confused with being a database. This is a mis conceptuation Graphql is just a query language for APIs

Benifits of Using Graphql over REST API

1. Precise Data Fetching:
You can request exactly the data you need and nothing more. This reduces the amount of data transferred over the network, making your app faster and more efficient.

2. Single Endpoint:
GraphQL uses a single endpoint to handle all types of queries, mutations, and subscriptions, simplifying the API structure and reducing complexity.

3. Nested and Related Data:
You can fetch related data in a single request, avoiding the need for multiple API calls. This is particularly useful for complex applications with interconnected data.

4. Real-time Data:
GraphQL supports subscriptions, allowing clients to receive real-time updates when data changes. This is useful for applications that need to display live data, such as chat apps or live sports scores.

Quick guide about Layer 2 scaling solutions

Muhammad Sameer — Fri, 16 Jun 2023 06:54:19 +0000

Layer 2 refers to a secondary framework or protocol that is built on top of an existing blockchain system. Major cryptocurrency networks such as Ethereum face transaction speed and scaling difficulties. Bitcoin and Ethereum are still not able to process thousands of transactions per second. Additionally, these layer 2 solutions usually offer much better transaction fees.

Layer 2 solutions are designed to address the scalability limitations of the Layer 1 blockchain networks. By moving some of the computational and transactional processes off-chain while leveraging the security of the underlying Layer 1 network, Layer 2 solutions can significantly increase transaction throughput, reduce fees, and enhance the overall efficiency of blockchain systems.

There are two dimensions layer 2 is different from layer 1
first is transection execution and second is data availability

1) Transaction execution strategies deal with how transactions are run, where they are run, what the trust environments are, what the security and decentralization environments are, etc.

2) Data availability strategies deal with whether or not the Layer 2 solution makes their transaction data available on the main Layer 1 chain or not.

Types of Layer 2 Scaling Solutions:

State Channel
Side Chains
RollUps Optimistic Rollups (ORs) Zero-Knowledge Rollups (ZKRs)
Palsma
Validiums
Voliltions

While Layer 2 scaling solutions offer significant advantages, there are some considerations and challenges to keep in mind:
Security: Layer 2 solutions rely on the security of the underlying Layer 1 blockchain. Ensuring the integrity and safety

How to upload files on IPFS infura.io using React.

Muhammad Sameer — Sat, 20 Aug 2022 06:15:16 +0000

After infura has depreciated the public gateway lots of developers face issues while uploading files on the IPFS infura.

Things we are going to do.

we will create and setup our infura account
we will upload files on IPFS
we access content from the IPFS.

Setting up the infura account.

Go to the official website infura.io and create a new account if you don't have it after creating and signing it click on the create new key.

Select the network IPFS and mention name of the Project whatever you want and create it.

After you will see following credential here project secret key , API Key secret and IPFS endpoint one more thing we want here is dedicated gateway domain link so we will get it by enabling the dedicated gateway option enter the name of the domain on your own choice and save the domain.

now you have setup your account and now you have your own dedicated gateway we will use all these credential in our project later on.

How to Upload files on IPFS in your project.

In your React project we need npm package called ipfs-http-client install it using this command.

npm i ipfs-http-client

Open App.js file in your react project and import the ipfs-http-client we are importing create function as ipfsHttpClient provided by the ipfs-http-client and set up your infura credential in your react project.

import { create as ipfsHttpClient } from "ipfs-http-client";
add up your infura keys in your App.js component we will use them to generate the authorization key by generating the base64 key using the function btoa

const projectId = "<YOUR PROJECT ID>";
const projectSecret = "<YOUR PROJECT SECRET>";
const authorization = "Basic " + btoa(projectId + ":" + projectSecret);

Note: feel free to use environment variable for the safer alternative

Now we will create a variable ipfs this will store the ipfs http client return by the create function. we are going to pass the argument in create function include url and the headers include authorization

   const ipfs = create({
      url: "https://ipfs.infura.io:5001/api/v0",
      headers:{
        authorization
      }
    })

after established the connection with IPFS we will upload files from our input form.

    <div className="App">
      {ipfs && (
        <>
          <h3>Upload file to IPFS</h3>
          <form onSubmit={onSubmitHandler}>
            <input type="file" name="file"/>
            <button type="submit">Upload file</button>
          </form>
        </>
      )}
    </div>

onSubmitHandler is the main function which will take care of all the implementation lets write the code.

const onSubmitHandler = async (event) => {
    event.preventDefault();
    const form = event.target;
    const files = (form[0]).files;

    if (!files || files.length === 0) {
      return alert("No files selected");
    }

    const file = files[0];
    // upload files
    const result = await ipfs.add(file);

    setImages([
      ...images,
      {
        cid: result.cid,
        path: result.path,
      },
    ]);

    form.reset();
  };

Logic of this function is straight forward

Verify the file if selected otherwise show the alert message file is not selected
ipfs.add(file) is uploading file to IPFS
add method returns the following properties include cid , path , size and mtime the most important properties are cid (it is the content identifier or unique content identifer given to the uploaded files) and path(which we will use to display files).
we will update the state of the images by adding the new files

add this line in the beginning of the component.

    const [images, setImages] = useState([])

Displaying the uploaded files from the IPFS

We have our logic already implemented in the onSubmitHandler function now we are going to use this logic in our jsx
lets add the template to display the files and one more thing todo in the last copy the dedicated gateway domain link from the Infura API key and replace it with the dedicated-gateway-link.

<div>
        {images.map((image, index) => (
          <img
          alt={`Uploaded #${index + 1}`}
          src={"<dedicated-gateway-link>/ipfs/" + image.path}
            style={{ maxWidth: "400px", margin: "15px" }}
            key={image.cid.toString() + index}
          />
        ))}
      </div>

Now we have succussfully implemented all the things you can check the complete code in this Github repo.

Conclusion

You have learned how to setup a infura project upload files and access it in your React application. However IPFS innovative concept of being a decentralized solution to store files using a peer-to-peer storage network.