DEV Community: Deep

5 Must-Know Features in JavaScript ES2022: Enhance Your Code and Boost Your Productivity

Deep — Tue, 17 Jan 2023 03:20:41 +0000

JavaScript is constantly evolving, and the latest version, ES2022, introduces some exciting new features that can make your coding life easier and more efficient. In this post, we’ll take a look at five must-know features in JavaScript ES2022 that you can start using today to enhance your code and boost your productivity.

List of features we are going to discuss:

1. Optional chaining

2. Nullish coalescing

3. Dynamic imports

4. Promise.allSettled

5. String.prototype.matchAll

Feature 1: Optional chaining

Optional chaining is a new operator that allows you to access an object’s properties without having to check for null or undefined first. This can be especially useful when working with complex data structures, as it allows you to access deeply nested properties without having to worry about intermediate values being null or undefined.

Here’s an example of how optional chaining works:

Copy code
const data = {
  user: {
    name: 'John',
    age: 30,
    address: {
      street: '123 Main St',
      city: 'New York',
      state: 'NY',
      zip: 10001
    }
  }
};
// Without optional chaining
let zip;
if (data && data.user && data.user.address && data.user.address.zip) {
  zip = data.user.address.zip;
}
// With optional chaining
const zip = data?.user?.address?.zip;

As you can see, optional chaining allows you to access nested properties without having to write long, nested if statements. This can make your code cleaner and easier to read.

Feature 2: Nullish coalescing

Nullish coalescing is another new operator that allows you to specify a default value for a variable if it’s null or undefined. This can be useful when working with variables that might be falsy (e.g., 0, “”, false), as the nullish coalescing operator only returns the default value if the variable is strictly null or undefined.

Here’s an example of how nullish coalescing works:

const data = {
  user: {
    name: 'John',
    age: 30,
    address: {
      street: '123 Main St',
      city: 'New York',
      state: 'NY',
      zip: 10001
    }
  }
};

// Without nullish coalescing
let zip;
if (data && data.user && data.user.address && data.user.address.zip) {
  zip = data.user.address.zip;
} else {
  zip = 0;
}

// With nullish coalescing
const zip = data?.user?.address?.zip ?? 0;

As you can see, nullish coalescing allows you to specify a default value in a concise and easy-to-read way.

Feature 3: Dynamic imports

Dynamic imports allow you to load JavaScript modules asynchronously, which can be useful when you only need to load certain modules on demand. This can improve the performance of your application by reducing the amount of code that needs to be downloaded and parsed by the browser.

Here’s an example of how dynamic imports work:

// Without dynamic imports
import MyModule from './my-module';

// With dynamic imports
const MyModule = await import('./my-module');

Feature 4: Promise.allSettled

Promise.allSettled is a new method that allows you to wait for a group of Promises to either resolve or reject. This can be useful when you want to handle the results of multiple Promises at the same time, regardless of whether they resolve or reject.

Here’s an example of how Promise.allSettled works:

const promise1 = Promise.resolve(1);
const promise2 = Promise.reject(new Error('Error'));
const promise3 = Promise.resolve(3);
Promise.allSettled([promise1, promise2, promise3]).then(results => {
  results.forEach(result => {
    if (result.status === 'fulfilled') {
      console.log(result.value);
    } else {
      console.error(result.reason);
    }
  });
});
// Output: 1, Error: Error, 3

As you can see, Promise.allSettled allows you to handle the results of multiple Promises in a single callback, making it easier to manage asynchronous code. Instead of waiting for all Promises to resolve or rejecting as soon as any of the Promises reject, Promise.allSettled waits for all Promises to settle (i.e., either resolve or reject) before running the callback. This can be useful if you want to handle the results of all Promises, regardless of whether they resolve or reject.

Feature 5: String.prototype.matchAll

String.prototype.matchAll is a new method that allows you to find all matches of a regular expression in a string, rather than just the first match. This can be useful when you need to extract multiple pieces of data from a string, or when you want to perform more advanced string manipulation.

Here’s an example of how String.prototype.matchAll works:

const str = 'Hello World';
const regex = /l/g;

// Without String.prototype.matchAll
const matches = str.match(regex);

// With String.prototype.matchAll
const matches = [...str.matchAll(regex)];
console.log(matches); // ['l', 'l']

As you can see, String.prototype.matchAll allows you to find all matches of a regular expression in a string, making it easier to extract multiple pieces of data from a string.

Best practices for using these new features

Now that we’ve covered the new features in JavaScript ES2022, let’s talk about some best practices for using them.

First and foremost, it’s important to keep in mind that not all of these features are fully supported in all browsers. Therefore, you should check the browser compatibility of each feature before using it in your projects.

Additionally, it’s a good idea to use these features sparingly and only when they provide a clear benefit. While they can be useful in certain situations, they can also make your code more complex and harder to understand if used excessively.

Finally, be sure to test your code thoroughly after using these new features to ensure that everything is working as expected.

By following these best practices, you can take full advantage of the new features in JavaScript ES2022 while avoiding any potential pitfalls.

Want to connect? DM me on twitter @pateldeep_eth or Linkedin

Also, Read

How to develop and deploy smart contracts with Foundry & Openzeppelin

Deep — Sat, 26 Nov 2022 11:17:33 +0000

Foundry is a blazing fast, portable and modular toolkit for Ethereum application development written in Rust.

Foundry is made up of three components:

Forge: Ethereum testing framework (like Truffle, Hardhat, and DappTools).

Cast: CLI for interacting with EVM smart contracts, sending transactions, and getting chain data.

Anvil: local Ethereum node, similar to Ganache or Hardhat Network.

Why should we use it?

It’s speedy, no more wasted time while running tests.
It allows you to write tests in solidity which minimizes context switching.
Many testing features like fuzzing, console.log, and cheat codes give you more power and flexibility.

Topics we are going to cover in this Article

Project setup
How to install dependencies in Foundry (EX. OpenZeppelin)
Integrating Foundry with VSCode
Writing the contract and test cases using Foundry
Understanding Traces in Foundry
Generating Gas report using Foundry
Deploying the contract using Foundry

Installation

Installation of Foundry is well explained in the foundry book, check out the instructions here

https://book.getfoundry.sh/getting-started/installation

Setting up the project

once, the foundry is installed we can create a new project using

forge init foundry-demo // forge-demo is name of the project

once the project is created, use commands to check if everything is working correctly

cd foundry-demo && forge build

Installing dependencies

Forge manages dependencies using git submodules by default, which means that it works with any GitHub repository that contains smart contracts.

To use OpenZeppelin we need to install it as a dependency in our project, to-do so use the command

forge install OpenZeppelin/openzeppelin-contracts
// forge install is command which is used for installing  dependencies
// <https://github.com/OpenZeppelin/openzeppelin-contracts>
// use {{username}}/{{repo_name}} from the github url

Integrate Foundry with VSCode

After installing OpenZeppelin as a dependency try importing something from it in the contract (your contract is there under the /src directory), If you are using VSCode an error will popup

To fix this error, Run this command

forge remappings > remappings.txt

What this command does is it creates a remappings.txt file inside the root directory of the project

At this moment the content in the file might look like this,

ds-test/=lib/forge-std/lib/ds-test/src/
forge-std/=lib/forge-std/src/
openzeppelin-contracts/=lib/openzeppelin-contracts/contracts/

For more details visit here https://book.getfoundry.sh/config/vscode

Writing the contract

Rename the file src/Counter.sol → src/FDemo.sol, the code for our ERC721 smart contract is as below

// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.13;

import "openzeppelin-contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "openzeppelin-contracts/utils/Counters.sol";

contract FDemo is ERC721URIStorage {
    using Counters for Counters.Counter;
    Counters.Counter private _tokenId;

    constructor() ERC721("FDemo", "FD") {}

    function mint(string memory tokenUri) external returns (uint256) {
        uint256 newTokenId = _tokenId.current();

        _mint(msg.sender, newTokenId);
        _setTokenURI(newTokenId, tokenUri);

        _tokenId.increment();

        return newTokenId;
    }
}

Testing the contract using Foundry

Let's start by renaming the test file to match the name of our contract Counter.t.sol → FDemo.t.sol

Forge uses the following keywords in tests:

setUp: An optional function invoked before each test case is run

function setUp() public {
    testNumber = 42;
}

test: Functions prefixed with test are run as a test case

function testNumberIs42() public {
  assertEq(testNumber, 42);
}

testFail: The inverse of the test prefix — if the function does not revert, the test fails

function testNumberIs42() public {
  assertEq(testNumber, 42);
}

So, Right now we only have one method mint, so we will be writing a test case for this method

and this is going to be a pretty simple one

// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.13;

import "forge-std/Test.sol";
import "../src/FDemo.sol";

contract FoundryDemoTest is Test {
    FDemo instance;

    function setUp() public { 
        instance = new FDemo();
    }

    function testMint() public { 
        string memory dummyTokenUri = "ipfs://metadata_url";
        uint256 tokenId = instance.mint(dummyTokenUri);

        assertEq(dummyTokenUri, instance.tokenURI(tokenId));
    }

}

Now, to run this test we can use the command forge test

If we want to explore more details/ events/ flow about the test cases, we can use Traces To enable Traces while running test cases use -vvv or -vvvv

The attached screenshot shows the result of test cases with and without traces

More details on the Traces: https://book.getfoundry.sh/forge/traces

Generating Gas report using Foundry

to generate gas report use — gas-report with the test command

forge test --gas-report

More details on the Gas Report here: https://book.getfoundry.sh/forge/gas-reports

Deploying and verifying contracts with Foundry

Forge can deploy smart contracts to a given network with the forge create command.

Some options we can use with forge create while deploying the contract

—rpc-url : Rpc URL of the network on which we want to deploy our contract (in our case we will be using the RPC URL of polygon mumbai testnet)
constructor-args : Pass arguments to the constructor
private-key : Private key of deployers wallet

We can optionally pass --verify && --etherscan-api-key if we want to verify our contract

$ forge create --rpc-url <your_rpc_url> \\
    --constructor-args "ForgeUSD" "FUSD" 18 1000000000000000000000 \\
    --private-key <your_private_key> src/MyToken.sol:MyToken \\
    --etherscan-api-key <your_etherscan_api_key> \\
    --verify

Let's deploy, now

forge create --rpc-url <https://rpc.ankr.com/polygon_mumbai>
--private-key <your_private_key>  src/FDemo.sol:FDemo
--etherscan-api-key <your_etherscan_api_key>
--verify

Complete code: GitHub

💡 Follow me on Twitter for more awesome stuff like this @pateldeep_eth
Linkedin

Permanent File Storage for Web3 Apps with Arweave, Bundlr, Next.js, RainbowKit, and Wagmi

Deep — Mon, 27 Jun 2022 16:02:48 +0000

In this article I will be showing you how to create a Dapp that allows us to store data on Arweave network, using bundlr on testnet.

Before going forward let's see what are we going to build today

Here is the deployed link if you want to try it out: https://bundlr-arweave.netlify.app/

Tech stack and libraries I've used:

Nextjs
Chakra UI
RainbowKit
Wagmi
Bundlr Client

Well well let's go through what is Arweave and Bundlr first (from the doc)

If you are a video person like me here is a video for you

Arweave:

Arweave makes information permanence sustainable.
Arweave is a new type of storage that backs data with sustainable and perpetual endowments, allowing users and developers to truly store data forever – for the very first time.

Bundlr:

Bundlr makes web3 data storage on Arweave accessible by making it as fast, easy, and reliable as traditional data storage. Arweave is the only truly decentralized, permanent data storage solution. Bundlr increases the amount of transactions conducted on Arweave by 4000% without sacrificing security or usability, and is around ~3000x faster at uploading data.

Bundlr currently accounts for over 90% of data uploaded to Arweave. It enables infinite scalability and enables instant and guaranteed transaction finality. It is a multi-chain solution and is compatible with leading blockchains including Ethereum, Solana, Avalanche, Polygon, and many more.

Steps we have to follow to upload to Arweave using Bundlr

Connect wallet
Initialize the Bundlr client
Add funds ($BNDLR tokens)
Upload the files

Note: we will be bulding this app on polygon mumbai testnet

Bundlr has a devnet which allows you to use devnet/testnet cryptocurrency networks to pay for storage. The devnet node behaves exactly as a mainnet node - other than data is never moved to Arweave and will be cleared from Bundlr after a week.

Let's get building

Keep the completed code open on the side for a better understanding Github

1. Setting up the project

Setup a Nextjs project with tailwind CSS and Chakra UIYou can use create-web3-frontend package to get done with setup quickly or just clone this project repo

Also, install these two dependencies

yarn add @bundlr-network/client bignumber.js

2. Connect wallet

As we are using Rainbow kit this step is very easy
in index.tsx

const Home: NextPage = () => {
  const { data } = useAccount();
  if (!data) {
    return (
      <div className='justify-center items-center h-screen flex '>
        <VStack gap={8}>
          <Text className='text-4xl font-bold'>
            Connect your wallet first
          </Text>
          <ConnectButton />
        </VStack>
      </div>
    )
  }

  if (activeChain && activeChain.id !== chainId.polygonMumbai) {
    return (
      <div className='justify-center items-center h-screen flex '>
        <VStack gap={8}>
          <Text className='text-4xl font-bold'>
            Opps, wrong network!! Switch to Polygon Mumbai Testnet
          </Text>
          <ConnectButton />
        </VStack>
      </div>
    )
  }
}

And with these 5–6 lines of code, we are done with connecting the wallet 🎉

We have also added a condition to check if a user is on the Mumbai test, as we will be using polygon Mumbai testnet for this article

In _app.jsx while configuring Rainbow kit we have configures it for using polygon Mumbai testnet

const { chains, provider } = configureChains(
  [chain.polygonMumbai],
  [
    jsonRpcProvider({ rpc: () => ({ http: process.env.NEXT_PUBLIC_ALCHEMY_RPC_URL }) }),
    publicProvider(),
  ]
);

So, Rainbow kit will also take care of changing the network for us, this is how this warning will look like

3. Initializing the Bundlr

let’s create a context for bundlr, so we can maintain all bundlr related logic form there

Create bundlr.context.tsx

Inside this file let's create the context now, you can see the completed version of the file here

import { WebBundlr } from '@bundlr-network/client';
import { useToast } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import { providers, utils } from 'ethers';
import React, { createContext, useContext, useEffect, useState } from 'react'

const BundlrContext = createContext<IBundlrHook>({
    initialiseBundlr: async () => { },
    fundWallet: (_: number) => { },
    balance: '',
    uploadFile: async (_file) => { },
    bundlrInstance: null
});

const BundlrContextProvider = ({ children }: any): JSX.Element => {
    const toast = useToast()
    const [bundlrInstance, setBundlrInstance] = useState<WebBundlr>();
    const [balance, setBalance] = useState<string>('');

    useEffect(() => {
        if (bundlrInstance) {
            fetchBalance();
        }
    }, [bundlrInstance])

    const initialiseBundlr = async () => {
        const provider = new providers.Web3Provider(window.ethereum as any);
        await provider._ready();
        const bundlr = new WebBundlr(
            "https://devnet.bundlr.network",
            "matic",
            provider,
            {
                providerUrl:
                    process.env.NEXT_PUBLIC_ALCHEMY_RPC_URL,
            }
        );
        await bundlr.ready();
        setBundlrInstance(bundlr);
    }

    async function fundWallet(amount: number) {
        try {
            if (bundlrInstance) {
                if (!amount) return
                const amountParsed = parseInput(amount)
                if (amountParsed) {
                    toast({
                        title: "Adding funds please wait",
                        status: "loading"
                    })
                    let response = await bundlrInstance.fund(amountParsed)
                    console.log('Wallet funded: ', response)
                    toast({
                        title: "Funds added",
                        status: "success"
                    })
                }
                fetchBalance()
            }
        } catch (error) {
            console.log("error", error);
            toast({
                title: error.message || "Something went wrong!",
                status: "error"
            })
        }
    }

    function parseInput(input: number) {
        const conv = new BigNumber(input).multipliedBy(bundlrInstance!.currencyConfig.base[1])
        if (conv.isLessThan(1)) {
            console.log('error: value too small')
            toast({
                title: "Error: value too small",
                status: "error"
            })
            return
        } else {
            return conv
        }
    }

    async function fetchBalance() {
        if (bundlrInstance) {
            const bal = await bundlrInstance.getLoadedBalance();
            console.log("bal: ", utils.formatEther(bal.toString()));
            setBalance(utils.formatEther(bal.toString()));
        }
    }

    async function uploadFile(file) {
        try {
            let tx = await bundlrInstance.uploader.upload(file, [{ name: "Content-Type", value: "image/png" }])
            return tx;
        } catch (error) {
            toast({
                title: error.message || "Something went wrong!",
                status: "error"
            })
        }
    }

    return (
        <BundlrContext.Provider value={{ initialiseBundlr, fundWallet, balance, uploadFile, bundlrInstance }}>
            {children}
        </BundlrContext.Provider>
    )
}

export default BundlrContextProvider;

export const useBundler = () => {
    return useContext(BundlrContext);
}

For initializing the Bundlr we will be using initialiseBundlr the method from the code above

and the code is also pretty straightforward

const bundlr = new WebBundlr(
            "https://devnet.bundlr.network",
            "matic",
            provider,
            {
                providerUrl:
                    process.env.NEXT_PUBLIC_ALCHEMY_RPC_URL,
            }
        );
        await bundlr.ready();
        setBundlrInstance(bundlr);

We are creating an instance of the Bundlr client and storing it in a state variable

4. Add funds ($BNDLR tokens) 💸

We already have data about our balance in the bundlr context, and we also have a method fundWallet which we will be using to add the funds

Adding funds is also pretty straightforward, just use the fund method on the bundlrInstance and pass the amount you want to fund the wallet with

let response = await bundlrInstance.fund(amountParsed)

in index.tsx, make these changes

const Home: NextPage = () => {
    const { initialiseBundlr, bundlrInstance, balance } = useBundler();
    ...

    // at last
    if (!balance || Number(balance) <= 0) {
        return (
          <div className='justify-center items-center h-screen flex '>
            <VStack gap={8}>
              <ConnectButton />
              <Text className='text-4xl font-bold'>
                Opps, out of funds!, let's add some
              </Text>
              <FundWallet />
            </VStack>
          </div>
        )
      }
}

Now let’s create the <FundWallet /> component

Create components/FundWallet.tsx

import React from 'react'
import { Button, NumberDecrementStepper, NumberIncrementStepper, NumberInput, NumberInputField, NumberInputStepper, Text, VStack } from '@chakra-ui/react'
import { useBundler } from '@/state/bundlr.context';

const FundWallet = () => {
    const { fundWallet, balance } = useBundler();
    const [value, setValue] = React.useState('0.02')

    return (
        <div className='mt-12'>
            <VStack gap={6}>
                <Text fontSize={'xl'}>
                    Your current balace is: {balance || 0} $BNDLR
                </Text>
                <NumberInput className='mx-auto' step={0.01} defaultValue={value}
                    onChange={(valueString) => setValue(valueString)}
                >
                    <NumberInputField />
                    <NumberInputStepper >
                        <NumberIncrementStepper />
                        <NumberDecrementStepper />
                    </NumberInputStepper>
                </NumberInput>

                <Button onClick={() => fundWallet(+value)}>💸 Add Fund</Button>
            </VStack>
        </div>
    )
}

export default FundWallet

5. Upload images 📷

Now, as we’ve already added the funds, now we can upload the images (or any other files), to the Arweave network

In index.tsx , add the following code at the end of the file

return (
    <div className='justify-center items-center h-screen flex'>
      <Stack direction={['column', 'row']} justifyContent={'space-around'} width={'full'} alignItems={'center'}>
        <VStack gap={8}>
          <ConnectButton />
          <FundWallet />
        </VStack>
        <VStack gap={8}>
          <Text fontSize={'4xl'}>
            Select Image To Upload
          </Text>
          <UploadImage />
        </VStack>
      </Stack>
    </div>
  );

Now, let’s create the <UploadImage /> component

import React from 'react'
import { Box, Button, Text } from '@chakra-ui/react';
import { useBundler } from '@/state/bundlr.context';
import { useRef, useState } from 'react';

const UploadImage = () => {
    const { uploadFile } = useBundler();
    const [URI, setURI] = useState('')
    const [file, setFile] = useState<Buffer>()
    const [image, setImage] = useState('')
    const hiddenFileInput = useRef(null);

    function onFileChange(e: any) {
        const file = e.target.files[0]
        if (file) {
            const image = URL.createObjectURL(file)
            setImage(image)
            let reader = new FileReader()
            reader.onload = function () {
                if (reader.result) {
                    setFile(Buffer.from(reader.result as any))
                }
            }
            reader.readAsArrayBuffer(file)
        }
    }

    const handleClick = event => {
        hiddenFileInput.current.click();
    };

    const handleUpload = async () => {
        const res = await uploadFile(file);
        setURI(`http://arweave.net/${res.data.id}`)
    }

    return (
        <div className='flex flex-col mt-20 justify-center items-center w-full'>
            <Button onClick={handleClick} className='mb-4'>
                {image ? 'Change Selection' : 'Select Image'}
            </Button>
            <input
                accept="image/png, image/gif, image/jpeg"
                type="file"
                ref={hiddenFileInput}
                onChange={onFileChange}
                style={{ display: 'none' }}
            />

            {
                image &&
                <Box
                    display='flex'
                    alignItems='center'
                    justifyContent='center'
                    width='100%'
                    py={40}
                    bgImage={`url('${image}')`}
                    bgPosition='center'
                    bgRepeat='no-repeat'
                    mb={2}
                >
                    <button className='bg-gray-200 rounded px-8 py-2 text-black hover:bg-gray-100' onClick={handleUpload}>Upload File</button>
                </Box>
            }

            {
                URI && <Text className='mt-4'>
                    <Text fontSize='xl'> Uploaded File:</Text> <a href={URI} target="_blank">{URI}</a>
                </Text>
            }
        </div>
    )
}

export default UploadImage

And, with this in the place, we can now upload the files to the Arweave network 🚀

Further Improvement:

Right now we are only uploading images, we can add support for other formats as well (video, audio, anything)
Store URLs of uploaded images with wallet address in Supabase and show the list of files previously uploaded by users when they connect their wallet

Completed code: github

Want to Connect?
Connect with me on Twitter: @pateldeep_eth
Linkedin: Linkedin
Originally published at https://pateldeep.xyz/

How to find length of string in Solidity, from the smart contract of ens

Deep — Sat, 21 May 2022 17:03:29 +0000

Why bytes(str).length; is not enough for getting length of string in Solidity, and let’s understand the strlen method from contracts of ens

In the world of Javascript finding the length of string is such an easy thing
just do str.length and that’s all 🤌

But strings are not so friendly to work within Solidity, ❗

In solidity, the string is a group of characters stored inside an array and stores the data in bytes.

There is no length method in string type.

I was going through Buildspace’s build-polygon-ens project and found the link to StringUtils.sol,
I knew how to find length of string in Solidity we can convert the string into bytes and find length of it
So it should be as easy as doing bytes(str).length; 🤌 but the method in this util file was a bit different

// SPDX-License-Identifier: MIT
// Source:
// https://github.com/ensdomains/ens-contracts/blob/master/contracts/ethregistrar/StringUtils.sol
pragma solidity >=0.8.4;

library StringUtils {
    /**
     * @dev Returns the length of a given string
     *
     * @param s The string to measure the length of
     * @return The length of the input string
     */
    function strlen(string memory s) internal pure returns (uint256) {
        uint256 len;
        uint256 i = 0;
        uint256 bytelength = bytes(s).length;

        for (len = 0; i < bytelength; len++) {
            bytes1 b = bytes(s)[i];
            if (b < 0x80) {
                i += 1;
            } else if (b < 0xE0) {
                i += 2;
            } else if (b < 0xF0) {
                i += 3;
            } else if (b < 0xF8) {
                i += 4;
            } else if (b < 0xFC) {
                i += 5;
            } else {
                i += 6;
            }
        }
        return len;
    }
}

It had this weird for loop in code which I couldn’t understand

So, the developer in me googled it 🕵️‍♀️, but all the articles I came across did this to find the length of the stringbytes(str).length; I found some similar code on Stackoverflow but no one actually explained what is happening inside.

for(len = 0; i < bytelength; len++) {
            bytes1 b = bytes(s)[i];
            if(b < 0x80) {
                i += 1;
            } else if (b < 0xE0) {
                i += 2;
            } else if (b < 0xF0) {
                i += 3;
            } else if (b < 0xF8) {
                i += 4;
            } else if (b < 0xFC) {
                i += 5;
            } else {
                i += 6;
            }
  }

After 3 hours of 🐌 self-exploration I was able to figure it out myself (a little slow but I did it 🍾),

So I thought let’s write it down so it would be helpful for all the folks like me (not so experienced with bits, bytes 0️⃣1️⃣).

So now, let’s try to Unblock/ Decode this

How bytes(str).length works

when we convert string to bytes this is what Solidity does

// if we do bytes("xyz"), solidity converts it as 
xyz -> 78 79 7a // 78=x, 79=y, 7a=z
ABC -> 41 42 43 // 41=A, 42=B, 43=C

Use this website for converting strings to bytes

If you see each character generates 1 byte
that’s why when we do bytes(””).length we get the length of string,

But there are some characters for which generated bytes are more than one
For example

€ -> e2 82 ac

For the symbol of the Euro, generated bytes are 3
So if we try to find the length of string which includes the symbol of Euro(€) 🤑 in it, the length returned by
bytes(str).length, will not return the correct string length for this character as € there are 3 bytes generated

that’s when that for loop we've seen above comes to the rescue ⛑️

Let’s iterate over this e2 82 ac bytes array and check what’s happening inside that loop

for(len = 0; i < bytelength; len++) {
            bytes1 b = bytes(s)[i];
                        // b = e2 for first iteration
            if(b < 0x80) {
                i += 1;
            } else if (b < 0xE0) {
                i += 2;
            } else if (b < 0xF0) {
                i += 3;
            } else if (b < 0xF8) {
                i += 4;
            } else if (b < 0xFC) {
                i += 5;
            } else {
                i += 6;
            }
  }

for the first iteration b=e2

there is a condition on the following line

if(b < 0x80) {
     i += 1;
}

let's decode this, this condition will basically compare decimal values of these hexadecimal characters

Decimal value for

0x80 -> 128
// our b is e2 at the moment, decimal value for e2 = 226
0xe2 -> 226

for regular characters, decimal conversion of their hex character will be < 128 , like for a it is 97

So, if we check all conditions like this

for(len = 0; i < bytelength; len++) {
            bytes1 b = bytes(s)[i];
            if(b < 0x80) { //0x80 = 128 => 226 < 128 ❌
                i += 1;
            } else if (b < 0xE0) { //0xE0 = 224 => 226 < 224 ❌
                i += 2;
            } else if (b < 0xF0) { //0xF0 = 240 => 226 < 240 ✅
                i += 3;
            } 
                        ...
  }

So, now our i is 3,

so the condition in for loop will be 3<3, which is false and the loop will break, and the value of

len will be 1 at the moment

And that’s it, it is the correct value for the length of string “€”

If you want to try some more strings like “€”, here is a small list of characters that occupies more then 1 byte

€ -> e2 82 ac 
Ã -> c3 83
¢ -> c2 a2

Create, a random string anything like abc¢Ã, this for example, and try it out

Ta-Da 🎉, and now it works

Connect with me on Twitter: @pateldeep_eth

Linkdein

DMs are open to any kind of improvement suggestions

Originally published at https://pateldeep.xyz/

ENS DigitClub

Deep — Sat, 30 Apr 2022 02:18:52 +0000

Happy to announce http://digitclub.xyz

A simple tool to keep track of floor / prices of ENS digits. It's currently quite difficult to keep track of this through Opensea and DigitClub helps with this

This was made within 24 hours so still early beta. More features in the works!

For updates follow us on Twitter: https://twitter.com/pateldeep_eth

How to Add Sentry to your Angular project with Graphql

Deep — Sun, 06 Feb 2022 06:15:37 +0000

Sentry.io is an external monitoring and logging service which can help you identify and triage errors in your code.

These logs provide information such as a trace stack, breadcrumbs, and (assuming this is a web application) browser data. This can help you triage issues and resolve bugs faster, with less investigative overhead.

How to Create a Sentry Project

You can follow this walkthrough doc for creating Sentry project. Create new Sentry project

How to Add Sentry to yor Angular App

Follow this amazing guide to get you up and running with Sentry's SDK in Angular App. Add Sentry to Angular App

How to log Graphql errors using Sentry

Best way to handle Graphql errors is using Error Links. Error Link allow you to log both GraphQL errors (errors returned as part of the response) as well as network errors (failed requests, invalid queries, etc.).

Use the onError link to perform custom logic when a GraphQL or network error occurs. You pass this link a function that's executed if an operation returns one or more errors:

Inside onError link we can capture Graphql errors with Sentry
Example use would be like this:

import { onError } from "@apollo/client/link/error";
import * as Sentry from "@sentry/angular";

const errorHandlerLink = onError((err, ...param) => {
  const { graphQLErrors, networkError } = err;
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) => {
      Sentry.captureMessage(message)
    }
  )
  if (networkError) {
    Sentry.captureException(networkError)
  }
});

// Using errorHandlerLink while creating apollo instance
apollo.create({
      link: errorHandlerLink.concat(httpLink.create({ uri })),
});

*A complete example Graphql module file *

import { NgModule } from '@angular/core';
import { APOLLO_OPTIONS } from 'apollo-angular';
import { InMemoryCache } from '@apollo/client/core';
import { HttpLink } from 'apollo-angular/http';
import { environment } from 'src/environments/environment';
import { onError } from "@apollo/client/link/error";
import * as Sentry from "@sentry/angular";

const uri = environment.apiEndpoint; // <-- add the URL of the GraphQL server here

export function createApollo(httpLink: HttpLink) {

  const errorHandlerLink = onError((err, ...param) => {
    const { graphQLErrors, networkError } = err;
    if (graphQLErrors)
      graphQLErrors.map(({ message, locations, path }) => {
        Sentry.captureMessage(message)
      }
      )
    if (networkError) {
      Sentry.captureException(networkError)
    }
  });

  return {
    link: errorHandlerLink.concat(httpLink.create({ uri })),
    cache: new InMemoryCache({ addTypename: false }),
  };
}

@NgModule({
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink],
    },
  ],
})
export class GraphQLModule { }

You have now successfully integrated Sentry with your Angular project. You are now ready to start receiving error information, triaging issues, and improving your project's stability.

What is the !! (not not) operator in JavaScript?

Deep — Sat, 06 Feb 2021 16:30:38 +0000

Converts Object to boolean. If it was falsey (e.g. 0, null, undefined, etc.), it will be false, otherwise, true.

!oObject  // inverted boolean
!!oObject // non inverted boolean so true boolean

Representation

So !! is not an operator, it's just the ! operator twice.

Example :

<CustomModal
  disabled={isDisable}
  title="Delete"
  children="Are you sure you want to delete ?"
  onCancel={() => setDataToDelete(null)}
  onConfirm={() => {}}
  show={!!dataToDelete} //show only accepts boolean
/>;

Handling multiple API calls with Promise.allSettled()

Deep — Sun, 17 Jan 2021 05:02:01 +0000

The Promise.allSettled() method returns a promise that resolves after all of the given promises have either fulfilled or rejected, with an array of objects that each describes the outcome of each promise.

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises).
  then((results) => results.forEach((result) => console.log(result.status)));

// expected output:
// "fulfilled"
// "rejected"

MDN doc :

For example, look at the dummy data given below
I, want to make an API call to get the client's details by clientId

[
  {
    bed : 'bed name',
    clientId : '1548765'
  },
  {
    bed : 'bed name2',
    clientId : '1548766'
  }
]

For each client, I have to make an API call of getClientById
and I don't want my program to proceed further until details for all the clients is available

// In this case what I can do is 

Promise.allSettled(
  data.map(e=> {
    return CALL_API(`client/${e.clientId}` , 'get')
  })
).then(responseArr => {
  responseArr.forEach(res=>{
    console.log(res);
    // res.status & res.value
  })
})

Drag/Drop, Resumable, Multiple File Upload with Progress Bar in Angular and Node

Deep — Tue, 07 Jul 2020 13:20:51 +0000

Let's start after seeing this what we gonna make

Github Link : here

Features :

Drag/drop upload
Resumable
Multiple uploads
progress bar

Let's start now :

Step 1 :

Create project first..

ng new frontend

To generate frontend

then...

For Backend(Node)

mkdir backend
cd backend 
npm init -y

to create backend of our project

Structure :

Root:

Frontend
Angular folder structure

Backend

package.json

index.js

name(folder/directory where we will store all the uploaded files)

Note: that name folder in our backend is important don't forget to create it or you will get an error in the filestream.

Step 2 :

Working on our backend first :

Add this dependecies in your Backend/package.json :

"dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "fs": "0.0.1-security"
  }

After adding this dependency to your file use npm i to install them :

In Backend/index.js :

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const fs = require("fs");

const app = express();
app.use(cors({ origin: "*" }));
app.use(bodyParser.urlencoded({ extended: true }));

const server = app.listen(3000, () => {
  console.log("Started in 3000");
});


let uploads = {};

app.post("/upload", (req, res, next) => {
  let fileId = req.headers["x-file-id"];
  let startByte = parseInt(req.headers["x-start-byte"], 10);
  let name = req.headers["name"];
  let fileSize = parseInt(req.headers["size"], 10);
  console.log("file Size", fileSize, fileId, startByte);
  if (uploads[fileId] && fileSize == uploads[fileId].bytesReceived) {
    res.end();
    return;
  }

  console.log(fileSize);

  if (!fileId) {
    res.writeHead(400, "No file id");
    res.end(400);
  }
  console.log(uploads[fileId]);
  if (!uploads[fileId]) uploads[fileId] = {};

  let upload = uploads[fileId];

  let fileStream;

  if (!startByte) {
    upload.bytesReceived = 0;
    let name = req.headers["name"];
    fileStream = fs.createWriteStream(`./name/${name}`, {
      flags: "w",
    });
  } else {
    if (upload.bytesReceived != startByte) {
      res.writeHead(400, "Wrong start byte");
      res.end(upload.bytesReceived);
      return;
    }
    // append to existing file
    fileStream = fs.createWriteStream(`./name/${name}`, {
      flags: "a",
    });
  }

  req.on("data", function (data) {
    //console.log("bytes received", upload.bytesReceived);
    upload.bytesReceived += data.length;
  });

  console.log("-------------------------------------------");


  //req is a readable stream so read from it 
  //and whatever data we got from reading provide it to 
  // writable stream which is fileStream, so read data from req Stream and then write in fileStream 
  req.pipe(fileStream);


  // when the request is finished, and all its data is written
  fileStream.on("close", function () {
    console.log(upload.bytesReceived, fileSize);
    if (upload.bytesReceived == fileSize) {
      console.log("Upload finished");
      delete uploads[fileId];

      // can do something else with the uploaded file here
      res.send({ status: "uploaded" });
      res.end();
    } else {
      // connection lost, we leave the unfinished file around
      console.log("File unfinished, stopped at " + upload.bytesReceived);
      res.writeHead(500, "Server Error");
      res.end();
    }
  });

  // in case of I/O error - finish the request
  fileStream.on("error", function (err) {
    console.log("fileStream error", err);
    res.writeHead(500, "File error");
    res.end();
  });
});

app.get("/", (req, res) => {
  res.send(
    `<h1 style='text-align: center'>
            <br>Code By <a href="https://github.com/deep1144">Deep<br>
            <b style="font-size: 182px;">😃👻</b>
        </h1>`
  );
});

app.get("/status", (req, res) => {
  //console.log('came');
  let fileId = req.headers["x-file-id"];
  let name = req.headers["name"];
  let fileSize = parseInt(req.headers["size"], 10);
  console.log(name);
  if (name) {
    try {
      let stats = fs.statSync("name/" + name);
      if (stats.isFile()) {
        console.log(
          `fileSize is ${fileSize} and already uploaded file size ${stats.size}`
        );
        if (fileSize == stats.size) {
          res.send({ status: "file is present", uploaded: stats.size });
          return;
        }
        if (!uploads[fileId]) uploads[fileId] = {};
        console.log(uploads[fileId]);
        uploads[fileId]["bytesReceived"] = stats.size;
        console.log(uploads[fileId], stats.size);
      }
    } catch (er) {}
  }
  let upload = uploads[fileId];
  if (upload) res.send({ uploaded: upload.bytesReceived });
  else res.send({ uploaded: 0 });
});

with this, we are pretty much done with our backend.

Step 3 :

Now let's start working on our Frontend:

In frontend/ run the following command:

ng add @angular/material

To add angular material theme to our project

I have used pink&blue-gray in my project

In `frontend/src/app/app.module.ts` paste the following code :

We are using @angular/material for this project

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
import { HttpClientModule } from '@angular/common/http';
import {MatDividerModule} from '@angular/material/divider';
import {MatListModule} from '@angular/material/list';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatCardModule} from '@angular/material/card';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatProgressSpinnerModule,
    MatButtonModule,
    MatIconModule,
    MatDividerModule,
    MatListModule,
    MatProgressBarModule,
    MatCardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4 :

In `frontend/src/app/app.component.html` paste the following code :

<div>
  <mat-card>

    <mat-card-header class="mb-3">
      <mat-card-title>File Uploads</mat-card-title>
    </mat-card-header>

    <div id="drag_zone" class="file-upload-wrapper" (drop)="dropFiles($event)" (dragover)='dragOverHandler($event)'>Drag
      your thing here</div>

    <mat-list>
      <mat-list-item *ngFor="let file of this.selectedFiles" [class.upload-sucess]="file.uploadCompleted">
        <mat-icon mat-list-icon>note</mat-icon>
        <div mat-line>{{file.fileName}}</div>

        <mat-progress-bar class="mr-4" mode="determinate" value="{{file.uploadedPercent}}"></mat-progress-bar>

        <div>
          <mat-icon style="cursor: grab;margin-top: 2px;" (click)="deleteFile(file)">delete</mat-icon>
        </div>
        <mat-divider></mat-divider>
      </mat-list-item>
    </mat-list>

    <button (click)="uploadFiles()" class="btn btn-primary mt-3" [disabled]="this.selectedFiles.length <=0"> upload
      Files
    </button>


  </mat-card>
</div>

In frontend/src/app/app.component.css paste followings:

#drag_zone{
  width:100%;
  height: 200px;
  margin: auto;
  padding: 8px;
  text-align: center;
  background-color: #f0f0f0;
  border: 2px dashed gray;
  border-radius: 8px;
  color: black;
}

This is our code for our UI :

Step 5 :

This is our last step :

in `frontend/src/app/app.component.ts` paste the following code :

import { Component } from '@angular/core';
import { HttpClient, HttpHeaders, HttpRequest, HttpEventType } from "@angular/common/http";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'frontend';


  selectedFiles = [];

  constructor(private http: HttpClient){}

  dropFiles(ev) {
    // Prevent default behavior(file from being opened)
    ev.preventDefault();

    if (ev.dataTransfer.items) {
      // Use DataTransferItemList interface to access the file(s)
      for (var i = 0; i < ev.dataTransfer.items.length; i++) {
        // If dropped items aren't files, reject them
        if (ev.dataTransfer.items[i].kind === 'file') {
          let file = ev.dataTransfer.items[i].getAsFile();
          let obj = {
            fileName: file.name,
            selectedFile: file,
            fileId: `${file.name}-${file.lastModified}`,
            uploadCompleted: false
          }
          this.selectedFiles.push(obj);
          console.log('... file[' + i + '].name = ' + file.name);
        }
      }
      this.selectedFiles.forEach(file => this.getFileUploadStatus(file));
    } else {

      for (var i = 0; i < ev.dataTransfer.files.length; i++) {
        console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
      }
    }
  }

  dragOverHandler(ev) {
    console.log('File(s) in drop zone');

    // Prevent default behavior (Prevent file from being opened)
    ev.preventDefault();
    ev.stopPropagation();
  }



  getFileUploadStatus(file){
    // fetch the file status on upload
    let headers = new HttpHeaders({
      "size": file.selectedFile.size.toString(),
      "x-file-id": file.fileId,
      'name': file.fileName
    });

    this.http
      .get("http://localhost:3000/status", { headers: headers }).subscribe(
        (res: any) => {
          file.uploadedBytes = res.uploaded;
          file.uploadedPercent = Math.round(100* file.uploadedBytes/file.selectedFile.size);
          if(file.uploadedPercent >= 100){
            file.uploadCompleted = true;
          }
        },err => {
          console.log(err);
        }
      )
  }

  uploadFiles(){
    this.selectedFiles.forEach(file => {
      if(file.uploadedPercent < 100)
        this.resumeUpload(file);
    })
  }

  resumeUpload(file){
    //make upload call and update the file percentage
    const headers2 = new HttpHeaders({
      "size": file.selectedFile.size.toString(),
      "x-file-id": file.fileId,
      "x-start-byte": file.uploadedBytes.toString(),
      'name': file.fileName
    });
    console.log(file.uploadedBytes, file.selectedFile.size, file.selectedFile.slice(file.uploadedBytes).size);

    const req = new HttpRequest('POST', "http://localhost:3000/upload", file.selectedFile.slice(file.uploadedBytes, file.selectedFile.size + 1),{
           headers: headers2,
          reportProgress: true //this will give us percentage of file uploaded
        });

    this.http.request(req).subscribe(
      (res: any) => {

        if(res.type === HttpEventType.UploadProgress){
          console.log("-----------------------------------------------");
          console.log(res);
          file.uploadedPercent = Math.round(100* (file.uploadedBytes+res.loaded)/res.total);
          // Remember, reportProgress: true  (res.loaded and res.total) are returned by it while upload is in progress


          console.log(file.uploadedPercent);
          if(file.uploadedPercent >= 100){
            file.uploadCompleted = true;
          }
        }else{
          if(file.uploadedPercent >= 100){
            file.uploadCompleted = true;
            this.selectedFiles.splice(this.selectedFiles.indexOf(file), 1);
          }
        }
      },
      err => {
        console.log(err)
      }
    )
  }

  deleteFile(file){
    this.selectedFiles.splice(this.selectedFiles.indexOf(file), 1);
  }
}

Step 6 :

It's time to run our project :

1. In `frontend/` run:

ng serve -o

2. In `backend/` run:

npm start

to see result : http://localhost:4200/

Done !!!

Notes :

- Read comments for better understanding of code

Github Link : here

Let's create a live chat with Socket/Angular/Node.

Deep — Fri, 19 Jun 2020 06:31:08 +0000

Hello folks,

So as you already know from the title we are going to create a live chat with Socket, Angular, and Node.. and we are not going to connect it with the database as it can be your first project with the socket.

Before starting let's have a look on what's we gonna create,

Sample Output:-

Find this project here : Github

So, Let's start:

1.
First let's setup the project :

mkdir chat
cd chat
ng new client
express server

execute the commands given to set up our application first :

after this your folder should look like this :

chat
|-client
|-server

So, now let's start with creating the basic UI first.

Replace your index.html with this code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Client</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

</head>
<body>
  <app-root></app-root>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>

here we added bootstrap to our project..

And after this :
Go to
/client/src/app/app.component.html and replace the code with the following:

<div class="m-5">
  <h2>Online
  <span class="badge badge-pill badge-light" style="color: greenyellow;">
    2
  </span>
</h2>
<input type="text" class="form-control w-25" placeholder="Enter a message">
<button class="btn btn-light mt-2">
  Send message
</button>

<br><br><br><br>
<h3>Messages</h3>
<ul class="list-group">
  <li class="list-group-item" >item </li>
</ul>
</div>

Run this code in the client folder,

ng serve -o

to see our code in action..
you will see we are done with our basic UI.

Let's create a service first..
in client/src/app run:

ng g s socket

and also run to install socket client

npm i socket.io-client --save

And put the following code in socket.service.ts:

import { Injectable } from '@angular/core';
import * as io from 'socket.io-client';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SocketService {

  socket;
  socket_endpoint = 'http://localhost:3000';


  constructor() {
    this.socket = io(this.socket_endpoint);
  }

  sendMessage(msg){
    this.socket.emit('new-message',msg);
  }

  getMessage(){
    return Observable.create((observer)=>{
      this.socket.on('new-message' , (message)=>{
        observer.next(message);
      })
    })
  }

  getOnUser(){
    return Observable.create((observer)=>{
      this.socket.on('on-user',(count)=>{
        observer.next(count);
      })
    })
  }

}

After this Goto ,
/client/src/app/app.component.ts
And place the following code..

import { Component ,OnInit} from '@angular/core';
import {SocketService} from './socket.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'client';


  message = '';  //message typed by user
  msgList = []; //list of messages
  userOnLine :Number = 0; //number of online users
  constructor( public socketService:SocketService ){}

  ngOnInit() {
    this.getMessage();
    this.getOnUser();
  }

  getMessage(){
    this.socketService.getMessage().subscribe((message) => {
      console.log(message);
      this.msgList.push(message);
    })
  }

  getOnUser(){
    this.userOnLine = this.socketService.getOnUser().subscribe((res)=>{
      console.log(res + ' user online');
      this.userOnLine = res as Number;
    });
  }

  sendMessage() {
    if(this.message.length == 0)
      return;

    this.socketService.sendMessage(this.message);
    this.message = '';
  }
}

Message variables will hold the message typed by the user for this we will use two-way binding.

To use two-way binding let's first import FormModule.
Add the followings in app.module.ts file:

import { FormsModule } from '@angular/forms';

imports:[
FormsModule
]

Now to enable two-way binding let's format the code of app.component.html:

<div class="m-5">

  <h2> Online
    <span class="badge badge-pill badge-light" style="color: green;">
      {{ userOnLine }}
    </span>
  </h2>


  <input type="text" class="form-control w-25" [(ngModel)]="message" placeholder="Enter message">
  <button class="btn btn-light mt-2" (click)="sendMessage()">
    Send Message
  </button>


  <br><br><br><br>
  <h3>Messages</h3>
  <ul class="list-group">
    <li class="list-group-item" *ngFor="let item of msgList">{{ item }}</li>
  </ul>
</div>

With this, we are all done with our client-side...
So, let's Do our backend now...

First, let's install some dependencies:
Run this command inside server/

npm install socket.io --save

then,

In, server/bin/www add:

const io = require('socket.io')(server);
require('../socket/base')(io);

5.
Now let's create that base file we imported in the above step :

create a folder named socket inside the server folder...
And, create a base.js file in that folder.

Server
|- socket
..|- base.js

IN base.js file :

var userCount = 0;
module.exports = (io)=>{
    io.on('connect', (socket)=>{
        userCount++;

        socket.on('disconnect',()=>{
            userCount--;
            io.emit('on-user',userCount);
        });

        socket.on('new-message',(msg)=>{
            io.emit('new-message',msg);
        });

        io.emit('on-user',userCount);
    });
}

paste this code and restart both of your server's

Now let's have a look at our final output....

Find this project here : Github

Please give a follow in Github if you liked this article...

Create/ Publish your first NPM package

Deep — Sun, 14 Jun 2020 14:16:48 +0000

1.
Create a dir/folder to contain your packages code.

mkdir firstnpmpackage

2.
change path to dir/folder you just created.

cd firstnpmpackage

3.
Now run ..

npm init

or simply(if you use this command instead npm will not ask you for the details of package and will generate it with defaults)

npm init -y

and fill the required details.

4.
Now create an index.js file in this folder, your folder should look like this

firstnpmpackage

index.js
package.json

5.
write some code in index.js

#!/usr/bin/env node
function randomNoGenerator(min, max) {
  if(typeof(max) !== 'number' && typeof(min) !== 'number') {
    min = 0;  max = 1;
  }
 console.log(Math.random() * (max-min)) + min;
}
randomNoGenerator(5,10);

6.
Now let's modify our package.json a bit to make it work using cli.

"bin":{
   "demoproject" : "index.js"
},

just add this thing in your package.json
demoproject is the command you will use to execute your package through cli.
index.js is the file that will be first triggered.

7.
We are all ready to go ,
but wait wait you will really want to test your package locally before publishing it.

Let's do it first :
run

sudo npm install -g ./

Our package is installed in our local machine now,
Let run it type this in your cli and see the result.

demoproject

8.
So, now we are done with testing ..
Let's publish it now ,

To make it published you first need to signup on npmjs.com

once you are done signing up!
Run :

npm adduser

Give your login credentials..

9.
Now we are ready to go ..
open terminal in your root directory..

and Run :

npm publish

Done.....

NOTE : if it gives any error goto package.json and change name of your project any package with same name might be published before...

my github: Deep1144
my npm account: deep1144

Follow me for more..

DEV Community: Deep

5 Must-Know Features in JavaScript ES2022: Enhance Your Code and Boost Your Productivity

List of features we are going to discuss:

Feature 1: Optional chaining

Feature 2: Nullish coalescing

Feature 3: Dynamic imports

Feature 4: Promise.allSettled

Feature 5: String.prototype.matchAll

Best practices for using these new features

Also, Read

How to develop and deploy smart contracts with Foundry & Openzeppelin

Why should we use it?

Topics we are going to cover in this Article

Installation

Setting up the project

Installing dependencies

Integrate Foundry with VSCode

Writing the contract

Testing the contract using Foundry

Generating Gas report using Foundry

Deploying and verifying contracts with Foundry

Permanent File Storage for Web3 Apps with Arweave, Bundlr, Next.js, RainbowKit, and Wagmi

Tech stack and libraries I've used:

Well well let's go through what is Arweave and Bundlr first (from the doc)

Arweave:

Bundlr:

Steps we have to follow to upload to Arweave using Bundlr

Let's get building

1. Setting up the project

2. Connect wallet

3. Initializing the Bundlr

4. Add funds ($BNDLR tokens) 💸

5. Upload images 📷

Further Improvement:

How to find length of string in Solidity, from the smart contract of ens

So now, let’s try to Unblock/ Decode this

How bytes(str).length works

ENS DigitClub

Happy to announce http://digitclub.xyz

How to Add Sentry to your Angular project with Graphql

How to Create a Sentry Project

How to Add Sentry to yor Angular App

How to log Graphql errors using Sentry

What is the !! (not not) operator in JavaScript?

Representation

Example :

Handling multiple API calls with Promise.allSettled()

The Promise.allSettled() method returns a promise that resolves after all of the given promises have either fulfilled or rejected, with an array of objects that each describes the outcome of each promise.

Drag/Drop, Resumable, Multiple File Upload with Progress Bar in Angular and Node

Github Link : here

Features :

Step 1 :

Create project first..

For Backend(Node)

Structure :

Root: Frontend Angular folder structure Backend package.json index.js name(folder/directory where we will store all the uploaded files)

Note: that name folder in our backend is important don't forget to create it or you will get an error in the filestream.

Step 2 :

Working on our backend first :

Step 3 :

In frontend/src/app/app.module.ts paste the following code :

Step 4 :

In frontend/src/app/app.component.html paste the following code :

Step 5 :

in frontend/src/app/app.component.ts paste the following code :

Step 6 :

1. In frontend/ run:

2. In backend/ run:

Done !!!

Notes :

- Read comments for better understanding of code

Let's create a live chat with Socket/Angular/Node.

Sample Output:-

Create/ Publish your first NPM package

Root:

Frontend
Angular folder structure

Backend

package.json

index.js

name(folder/directory where we will store all the uploaded files)

In `frontend/src/app/app.module.ts` paste the following code :

In `frontend/src/app/app.component.html` paste the following code :

in `frontend/src/app/app.component.ts` paste the following code :

1. In `frontend/` run:

2. In `backend/` run: