DEV Community: Urmalveer Singh

Top 3 features in Typescript 5.5

Urmalveer Singh — Thu, 04 Jul 2024 09:30:25 +0000

TypeScript has long been a favorite among developers for its ability to add static typing to JavaScript, enhancing code quality and developer productivity. With each new release, TypeScript continues to evolve, introducing features that simplify development and reduce potential errors. The latest version, TypeScript 5.5, is no exception. This version brings a host of new features and improvements designed to make coding in TypeScript even more efficient and enjoyable. In this blog post, we will explore the top three features of TypeScript 5.5: better type inference, enhanced regular expression syntax checking, and new ECMAScript Set methods. These enhancements underscore TypeScript’s commitment to providing a robust, scalable, and high-performance development experience.

1. Better Type Inference

TypeScript 5.5 brings significant improvements to type inference, making the code more robust and reducing the need for explicit type annotations.

Improved Inference with filter method

TypeScript now better understands the results of filtering operations, making the types more precise and safe.

Previous (typescript 5.4)

New (typescript 5.5)

In this example, previously typescript was not good enough to infer that after filtering out null values nums only contains numbers but typeScript 5.5 correctly infers this. Microsoft devblogs(inferred type predicates)

Enhanced Control Flow Analysis

TypeScript is now able to narrow expressions of the form obj[key] when both obj and key are effectively constant. This enhancement reduces runtime errors and makes the code easier to maintain.

Previous (typescript 5.4)

New (typescript 5.5)

In the above example, neither obj nor key are ever mutated, so TypeScript can narrow the type of obj[key] to string in if block after the typeof check and to Array<number> in else block which previously it was unable to do so. Microsoft devblogs(control flow narrowing)

2. Enhanced Regular Expression Syntax Checking

Regular expressions are now subject to basic syntax checks in typescript 5.5. This enhancement helps catch common issues that were previously overlooked, ensuring that regular expressions adhere to ECMAScript standards. Microsoft devblogs(enhanced regex)

Previous (typescript 5.4)

New (typescript 5.5)

3. New ECMAScript Set Methods

TypeScript 5.5 introduces new Set methods that provide more robust ways to manipulate sets. Some of these methods, like union, intersection, difference, and symmetricDifference, take another Set and return a new Set as the result.mThe other methods, sSubsetOf, isSupersetOf, and isDisjointFrom, take another Set and return a boolean. Microsoft devblogs(new set methods)

Here's an example on how to use some of these methods.

let fruits = new Set(["apples", "bananas", "pears", "oranges"]);
let applesAndBananas = new Set(["apples", "bananas"]);
let applesAndOranges = new Set(["apples", "oranges"]);
let oranges = new Set(["oranges"]);
let emptySet = new Set();

////
// union
////

// Set(4) {'apples', 'bananas', 'pears', 'oranges'}
console.log(fruits.union(oranges));

// Set(3) {'apples', 'bananas', 'oranges'}
console.log(applesAndBananas.union(oranges));

////
// intersection
////

// Set(2) {'apples', 'bananas'}
console.log(fruits.intersection(applesAndBananas));

// Set(0) {}
console.log(applesAndBananas.intersection(oranges));

// Set(1) {'apples'}
console.log(applesAndBananas.intersection(applesAndOranges));

////
// difference
////

// Set(3) {'apples', 'bananas', 'pears'}
console.log(fruits.difference(oranges));

// Set(2) {'pears', 'oranges'}
console.log(fruits.difference(applesAndBananas));

// Set(1) {'bananas'}
console.log(applesAndBananas.difference(applesAndOranges));

////
// symmetricDifference
////

// Set(2) {'bananas', 'oranges'}
console.log(applesAndBananas.symmetricDifference(applesAndOranges)); // no apples

////
// isDisjointFrom
////

// true
console.log(applesAndBananas.isDisjointFrom(oranges));

// false
console.log(applesAndBananas.isDisjointFrom(applesAndOranges));

// true
console.log(fruits.isDisjointFrom(emptySet));

// true
console.log(emptySet.isDisjointFrom(emptySet));

////
// isSubsetOf
////

// true
console.log(applesAndBananas.isSubsetOf(fruits));

// false
console.log(fruits.isSubsetOf(applesAndBananas));

// false
console.log(applesAndBananas.isSubsetOf(oranges));

// true
console.log(fruits.isSubsetOf(fruits));

// true
console.log(emptySet.isSubsetOf(fruits));

////
// isSupersetOf
////

// true
console.log(fruits.isSupersetOf(applesAndBananas));

// false
console.log(applesAndBananas.isSupersetOf(fruits));

// false
console.log(applesAndBananas.isSupersetOf(oranges));

// true
console.log(fruits.isSupersetOf(fruits));

// false
console.log(emptySet.isSupersetOf(fruits));

Thank you for reading! I hope you found these new TypeScript 5.5 features as exciting as I do. 🎉 Happy coding! 🧑‍💻🚀

Elysia: A Bun-first Web Framework

Urmalveer Singh — Mon, 05 Feb 2024 07:36:58 +0000

Bun is a fast and lightweight JavaScript runtime that aims to be an alternative to Node.js. It supports features like hot reloading, file system APIs, and native modules. But what if you want to build a web application using Bun? That’s where Elysia comes in.

Elysia is a web framework for Bun that is designed to be performance-focused, simple, and flexible. It has an Express-like syntax, type inference, middleware, file uploads, and plugins for various functionalities like JWT authentication, tRPC, and more. It also claims to be one of the fastest Bun web frameworks, according to its documentation.

In this article, we will explore some of the major features of Elysia and see how to use it to create a simple web application.

Getting Started

To get started with Elysia, you need to have Bun installed on your system. You can install it using npm:

npm install -g bun

Then, you can use the bun create command to generate a new project using the Elysia template:

bun create elysia myapp
cd myapp

To run the web application in development mode, you can use the bun run dev command:

bun dev

Navigate to localhost:3000 should greet you with "Hello Elysia".

Features

Performance - Static code analysis to generate optimized code
Unified Type - Shared DTO runtime and compile time validation
End-to-end Type Safety - Sync your data both client and server
TypeScript - Extensive type system for full TypeScript experience
JSX Template Engine - Familiar experience for frontend developer
Ergonomic by design - Simple and familiar API for building server

Just Function

One of the core principles of Elysia is that everything is just a function. This means that you can use plain JavaScript functions to define routes, middleware, plugins, and even the Elysia instance itself. This makes Elysia very easy to use, test, and compose.

For example, to define a simple GET route that returns a text response, you can write:

import { Elysia } from 'elysia'

new Elysia()
    .get('/', () => 'Hello World')
    .get('/json', () => ({
        hello: 'world'
    }))
    .listen(3000)

Type Safety

To take a step further, Elysia provide Elysia.t, a schema builder to validate type and value in both runtime and compile-time to create a single source of truth for your data-type.

import { Elysia, t } from 'elysia'

new Elysia()
    .get('/id/:id', ({ params: { id } }) => id, {
        params: t.Object({
            id: t.Numeric()
        })
    })
    .listen(3000)

Standards

Elysia adopts many standards by default, like OpenAPI, and WinterCG compliance, allowing you to integrate with most of the industry standard tools or at least easily integrate with tools you are familiar with.

For instance, as Elysia adopts OpenAPI by default, generating a documentation with Swagger is as easy as adding a one-liner:

import { Elysia, t } from 'elysia'
import { swagger } from '@elysiajs/swagger'

new Elysia()
    .use(swagger())
    .get('/id/:id', ({ params: { id } }) => id, {
        params: t.Object({
            id: t.Numeric()
        })
    })
    .listen(3000)

Plugins

Elysia also supports plugins, which are functions that can extend the functionality of the Elysia instance, the request object, the reply object, or the route methods. For example JWT plugin adds support for using JWT in Elysia handler.

Install with:

bun add @elysiajs/jwt

Then use it:

import { Elysia } from 'elysia'
import { jwt } from '@elysiajs/jwt'

const app = new Elysia()
    .use(
        jwt({
            name: 'jwt',
            secret: 'Fischl von Luftschloss Narfidort'
        })
    )
    .get('/sign/:name', async ({ jwt, cookie: { auth }, params }) => {
        auth.set({
            value: await jwt.sign(params),
            httpOnly: true,
            maxAge: 7 * 86400,
            path: '/profile',
        })

        return `Sign in as ${auth.value}`
    })
    .get('/profile', async ({ jwt, set, cookie: { auth } }) => {
        const profile = await jwt.verify(auth.value)

        if (!profile) {
            set.status = 401
            return 'Unauthorized'
        }

        return `Hello ${profile.name}`
    })
    .listen(8080)

Conclusion

In this article, we have seen how to use Elysia, a Bun-first web framework, to create a simple web application. We have explored some of the major features of Elysia, such as defining routes, using middleware, and using plugins. Elysia is a fast, simple, and flexible web framework that takes full advantage of Bun’s features and APIs.

I hope this article was helpful for you. If you have any feedback or questions, please let me know. 😊

A Guide to Free Resources for Learning Web Development

Urmalveer Singh — Sun, 17 Dec 2023 06:11:34 +0000

Ever dreamed of creating your own corner of the web? Good news – you're just a few clicks away! This blog is your go-to guide for learning web development without spending a dime. We're talking about free resources that turn coding from a mystery into your new superpower. Whether you're just starting or leveling up, join us on this adventure through the world of web development. No fancy degrees needed, just your curiosity and an internet connection. Let's dive in!

1. FreeCodeCamp (youtube)

When it comes to learning web development for free, FreeCodeCamp's YouTube channel stands out as a treasure trove of tutorials, projects, and insights. Geared towards beginners and seasoned developers alike, this channel brings coding concepts to life through engaging video content.

Why FreeCodeCamp's YouTube Channel?

Diverse Learning Paths: From HTML and CSS basics to advanced JavaScript frameworks, FreeCodeCamp covers a spectrum of topics to cater to every skill level.

Project-Based Learning: Dive into real-world projects that solidify your skills and showcase your coding prowess. The channel's project-focused approach ensures you're not just learning theory but applying it.

Interview Preparation: Navigate the often daunting world of coding interviews with dedicated content that demystifies technical assessments and helps you ace them.

Stay Current: Web development is a dynamic field, and FreeCodeCamp keeps its content up-to-date with the latest technologies and trends, ensuring you learn relevant skills.

2. CssBattle (website)

For those looking to turn CSS from a styling language into a competitive art form, CSS Battle is the interactive playground you've been waiting for. Forget traditional tutorials; CSS Battle challenges you to showcase your styling prowess by replicating intricate designs using just CSS code.

How to Get Started

Visit the Website: Head over to CSS Battle and explore the array of challenges waiting for your creative touch.

Select a Battle: Choose a battle that aligns with your skill level and interests. Battles vary in complexity, allowing you to progress at your own pace.

Start Styling: Dive into the challenge and start crafting your CSS masterpiece. The live preview feature lets you see the impact of your code in real-time.

Submit and Learn: Once satisfied with your solution, submit your code. Explore others' solutions to gain insights into alternative approaches and techniques.

3. MDN Web Docs (website)

When it comes to authoritative, up-to-date documentation for web development, MDN Web Docs (Mozilla Developer Network) stands as a beacon of comprehensive and reliable information. Maintained by Mozilla, this platform is not just a documentation repository but a dynamic and evolving resource that caters to developers across all skill levels.

Why MDN Web Docs?

Extensive Documentation: MDN Web Docs covers a wide array of web technologies, including HTML, CSS, JavaScript, and web APIs. Each topic is meticulously documented with clear explanations, code examples, and practical use cases.

Browser Compatibility Information: One of the standout features is the inclusion of detailed browser compatibility tables. This ensures that developers are well-informed about how different browsers handle specific features, facilitating cross-browser compatibility.

Tutorials and Guides: MDN doesn't just provide dry documentation. It offers tutorials and guides that take you through fundamental concepts and advanced techniques. These resources are designed for both beginners taking their first steps and seasoned developers seeking deeper insights.

Regular Updates: The web is a dynamic environment, and MDN reflects this by keeping its content updated. As new features are introduced and standards evolve, MDN provides timely information to keep developers abreast of the latest practices.

How to Use MDN Web Docs

Navigate the Documentation: Visit the MDN Web Docs homepage and explore the available documentation by technology or feature.

Search Functionality: Use the powerful search functionality to quickly find information about specific elements, attributes, methods, or concepts.

Interactive Examples: Many pages feature interactive examples that allow you to modify code directly in the browser and see the live results, providing an immersive learning experience.

Contribution Opportunities: MDN is an open platform, and developers are encouraged to contribute. If you spot an error or have additional insights, you can actively participate in improving the documentation.

4. CodePen (website)

CodePen isn't just a platform; it's a vibrant community and a dynamic development environment rolled into one. As an online playground for front-end developers, it opens a portal to a world where creativity meets code. Here's why CodePen is an invaluable resource for developers looking to experiment, learn, and share their coding endeavors.

Why CodePen?

Instant Prototyping: CodePen provides an instant, browser-based coding environment where you can create "pens" (code snippets) in HTML, CSS, and JavaScript. This enables rapid prototyping and experimentation without the need for a complex development setup.

Live Previews: One of the standout features is the ability to see live previews of your code changes immediately. This instant feedback loop is invaluable for refining designs and troubleshooting issues efficiently.

Sharing and Collaboration: CodePen is a social platform where developers from around the world share their pens. You can explore a vast collection of pens created by others, fork them to make your modifications, and even collaborate with other developers in real-time.

Project Showcasing: Beyond individual pens, CodePen allows developers to showcase entire projects. This makes it an excellent tool for building portfolios, sharing web experiments, and getting feedback from the community.

Conclusion

In the vast universe of web development, where innovation and creativity intertwine, the resources explored in this blog serve as your guiding stars.

Remember, this journey is yours to mold. Whether you're a beginner taking the first steps or a seasoned developer seeking new heights, the beauty of web development lies in its inclusivity and limitless potential. Embrace the challenges, celebrate the victories, and keep pushing the boundaries of what you can create.

So, with your coding tools in hand and the spirit of curiosity as your compass, venture forth. The web awaits your creations, and the skills you hone today are the building blocks of the digital wonders you'll craft tomorrow. Happy coding! 🚀🌐

Getting Started With Github Actions

Urmalveer Singh — Tue, 05 Sep 2023 09:57:02 +0000

In the fast-paced world of software development, being able to automate tasks servers as a great advantage. Tasks such as building, testing and deploying can be automated by setting up a continuous integration and delivery (CI/CD) pipeline. There are many CI/CD tools out there but one is built in right into our favorite Github and yes you guessed it right... it's Github Actions.

Github Actions makes it breeze to build a secure and reliable CI/CD pipeline allowing you to focus more on the actual development of the software. In this article We are going to understand basics of Github Actions and also try to automate testing for a nodejs app.

Understanding Github Actions

GitHub Actions is a CI/CD platform that allows you to create workflows that build and test every pull request to your repository, or deploy merged pull requests to production. Workflows are defined by a YAML file checked in to your repository and will run when triggered by an event in your repository, or they can be triggered manually, or at a defined schedule. The components of GitHub Actions include workflows, actions, events, jobs, runners and steps.

workflows

At the core of GitHub Actions are workflows, which define the automation process for your repository. They include various actions.

Actions

Actions are what they sound like. They are reusable units of work within a workflow. They are individual tasks or steps that can be combined to create a custom automation sequence. GitHub provides a marketplace of pre-built actions, and you can also create your own custom actions to suit your specific needs.

Events

Events acts as triggers for workflows. They determine when a workflow will run. For example on a push to specific repository, pull requests, etc.

Jobs

Workflows consist of one or more jobs. Each job represents a unit of work that runs on a specific runner, which can be a virtual machine, a container, or a hosted runner provided by GitHub.

runners

Runners are the execution environments for jobs in GitHub Actions. You can use GitHub-hosted runners, which are provided by GitHub, or set up your own self-hosted runners for more specialized tasks.

steps

Steps are the individual tasks within a job that define the actions to be executed. Each job can consist of one or more steps, and these steps are executed sequentially.

Now that we have basic understanding of Github Actions and its components. Lets try to build a workflow which triggers on a push or pull requests and runs tests for our nodejs app.

Creating A Workflow

Pre-Requisites

A github repository
Nodejs app (code) in the repository
Tests written for the nodejs code

Further steps assumes that all pre-requisites are met.

To create a Github workflow follow these steps

Create github/workflows directory in root of your folder
Create a .yml file in this directory. You can name this file anything such as ci.yml
Copy the following code into ci.yml file

name: Node.js CI/CD

on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v2 # This allows you to perform actions on the code in repository

    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: 18 # You can specify your desired Node.js version here

    - name: Install dependencies
      run: npm install

    - name: Run tests
      run: npm test

Thats it. You have created a simple workflow which will trigger on a push or pull request to master branch of your repository. The workflow above runs on a Github-hosted ubuntu runner.

You can check out more on what each line in the workflow means and understand syntax at Github Actions docs

Triggering Our Workflow

Now that we have created our workflow to automate testing lets try to trigger it by pushing code into repository.

Go to the Actions page of your repository and you will see the list of all your workflows

Make changes to the code and push it to the github using git push to trigger the workflow. You will see that workflow has been triggered and is performing actions specified in ci.yml file

You can click on each run and see the actions and their results

🎉 Voilà! You have successfully automated your testing and deployed a workflow using Github Actions.

Conclusion

As you have seen it is super easy to automate tasks such as testing using Github Actions. You should now have basic understanding of Github Actions and ready to incorporate this knowledge in future projects to make your coding journey a bit automated and easy. I hope you liked the article. Stay tuned and Happy Coding 🌟.

Multithreading in javascript: Introduction to Web Workers

Urmalveer Singh — Mon, 14 Aug 2023 08:36:45 +0000

As we all know javascript is single-threaded, meaning that it can only ever execute one piece of code at a time. When an asynchronous event occurs (like a mouse click, a timer firing, or an XMLHttpRequest completing) it gets queued up to be executed later. In other words, just single thread handles the event loop. While this design simplifies programming, it also introduces limitations, especially when tackling resource-intensive tasks. Computationally intensive tasks, causes applications to become unresponsive or slow. This is where the need for Web Workers becomes evident.

Web Workers

Web Workers are browser-based threads that enable parallel execution of tasks, allowing heavy computations, data processing, and other resource-intensive operations to occur in the background. Workers run on a separate thread than the main execution thread. Data is sent between the main thread and workers through messages. This separation of tasks into multiple threads not only enhances performance but also maintains the responsiveness of the user interface.

Setting Up Web Workers

setting up web workers is pretty easy. Lets get into it.

1. Setting up project folder and adding HTML

create a project folder and add index.html in the root of it.

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Web Workers</title>
        <script src="main.js"></script>
    </head>
    <body></body>
</html>

2. create javascript file named `main.js` in the same folder

main.js contains the main code which will create new web workers and assign tasks to them. We will create an array of numbers from 1 to 200_000 and calculate sum of all previous numbers as we iterate through it just to mimic complex work. We will also measure the performance gains when using 1 worker vs when using 8 workers.

const msToS = (ms) => {
    return Number(ms / 1000).toFixed(4);
};

const chunkify = (list, size) => {
    const chunks = [];

    for (let i = size; i > 0; i--) {
        chunks.push(list.splice(0, Math.ceil(list.length / i)));
    }

    return chunks;
};

const run = (work, workers) => {
    const chunks = chunkify(work, workers);

    const tick = performance.now();
    let completedWorkers = 0;

    console.clear();
    chunks.forEach((chunk, i) => {
        const worker = new Worker("./worker.js");
        worker.postMessage(chunk);

        worker.addEventListener("message", () => {
            console.log(`Worker ${i + 1} completed`);
            completedWorkers++;

            if (completedWorkers == workers) {
                console.log(
                    `${workers} workers took ${msToS(
                        performance.now() - tick
                    )} s`
                );
            }
        });
    });
};

const main = () => {
    const list = Array.from({ length: 200_000 }, (_, i) => i + 1);

    const workers = 1;
    run(list, workers);
};

main();

3. create javascript file named `worker.js` in the same folder

This file contains the actual work to be done by web worker. We will add message event listener and pass an array (single chunk) from run() method in main.js.

self.addEventListener("message", (e) => {
    const list = e.data;

    for (item of list) {
        let sum = 0;
        for (i = 0; i <= item; i++) {
            sum += i;
        }
    }

    self.postMessage("done");
    self.close();
});

Running Web Workers

Let us start with single web worker and see how much time it takes to complete the work. Make sure workers variable is set to 1 in run() method in main.js. Run the project in any browser in open developer console. You will see that single worker took more than a minute to complete the work.

Now lets bump up the workers to 8. set workers variable to 8 in run() method in main.js. It should look like this

const workers = 8;

Run the project once more and observe the performance gains. You will see that 8 workers completed the work in about 18 seconds. This is about 72% performance gain than single worker. Isn't this amazing.

Feel free to play with the code and learn :)

Accelerate Your Web3 Projects: Top Libraries, Frameworks and other tools to Explore

Urmalveer Singh — Sun, 06 Aug 2023 16:24:31 +0000

In the ever-evolving landscape of blockchain and decentralized technologies, Web3 development emerges as a driving force behind the next generation of the internet. Web3 brings forth a paradigm shift, where applications become more transparent, secure, and user-centric through the integration of blockchain and smart contracts

This article dives into the exciting world of Web3 development, exploring a handpicked selection of essential libraries, frameworks and platforms that empower developers to unleash the full potential of blockchain and decentralized applications.

1. Hardhat Framework

Hardhat is one of my favorite tools for web3 development. It is a development environment for Ethereum software. It consists of different components for editing, compiling, debugging and deploying your smart contracts and dApps, all of which work together to create a complete development environment.

Some of the features that Hardhat offers are:

Hardhat Network: A local Ethereum network that simulates the mainnet behavior and allows you to test your code with advanced features such as console logging, stack traces, etc.
Hardhat Runtime Environment (HRE): A JavaScript object that provides access to the Hardhat Network, the project’s configuration, the deployed contracts, etc.
Hardhat Plugins: A system that allows you to extend the functionality of Hardhat with third-party modules, such as testing frameworks, code coverage tools, security analyzers, etc.
Hardhat Tasks: A way to define and execute custom scripts that can interact with the HRE, the Hardhat Network, or any other component of Hardhat.

2. Ethers.js

Ethers.js is a JavaScript library for interacting with the Ethereum blockchain and its ecosystem. It is designed to be compact, lightweight, and easy to use. It is another of favorite tools for web3 development.

3. OpenZeppelin

OpenZeppelin is an open-source platform for building secure dApps on Ethereum and other blockchains. It provides tools, libraries, and services to help you create, manage, and audit your Web3 applications.

Some of the main products of OpenZeppelin are:

OpenZeppelin Contracts: a library of secure and reusable smart contracts that implement the most used ERC standards.
OpenZeppelin Defender: a platform to automate your smart contract administration, security, and operations.

4. Chainlink

Chainlink is a decentralized oracle network that connects blockchains to external systems, such as data sources, APIs, cloud services, etc. It allows smart contracts to access real-world information and events in a secure and reliable way.

Chainlink is open-source and community-driven. It consists of two main components:

Chainlink Nodes: software that runs on various blockchains and communicates with external systems via adapters.
Chainlink Core: a set of smart contracts that coordinate the network, manage node reputation, and facilitate data delivery and payment.

Chainlink supports multiple blockchains and data providers, enabling cross-chain interoperability and scalability. It also offers various solutions for different use cases, such as data feeds, verifiable randomness, proof of reserve, keepers, etc.

4. Truffle

Truffle is a development framework for Ethereum that simplifies the creation, testing, and deployment of smart contracts and decentralized applications (DApps). It is the most popular framework for Ethereum development.

Truffle provides the following features:

Built-in smart contract compilation, linking, deployment and binary management: You can write your smart contracts in Solidity, Vyper, or any other language that compiles to EVM bytecode.
Automated contract testing with Mocha and Chai: You can write your tests in JavaScript or Solidity and run them with Truffle’s built-in test runner.
Interactive console for direct contract communication: You can use Truffle’s console to interact with your deployed contracts, send transactions, call functions, etc.

6. Moralis

Moralis is a web3 development platform that aims to make it easy and fast for developers to create decentralized applications (DApps) on any blockchain .

Some of the features that Moralis offers are:

Seamless hosting: You can host your DApp on Moralis’ cloud infrastructure and get a fully managed backend, database, and serverless functions.
Cross-chain APIs: You can access real-time and historical data from multiple blockchains, such as Ethereum, Binance Smart Chain, Polygon, etc, with a single API key.
Powerful SDKs: You can use Moralis’ SDKs to integrate web3 functionality into your DApp, such as authentication, transactions, NFTs, etc.
Deep index: You can query and analyze any on-chain data with Moralis’ deep index, which indexes every transaction, event, and contract on the supported blockchains.

Conclusion

In conclusion, the array of libraries, frameworks and platforms presented in this article serves as a powerful toolkit for Web3 developers, enabling them to navigate the intricacies of blockchain and decentralized application development.

I know that the web3 ecosystem is highly active and a lot of new developments are happening daily. So let me know if I’ve missed something in the comments 😃. Happy coding! 👨‍💻

Demystifying Consensus Mechanisms and Algorithms in Blockchain Technology

Urmalveer Singh — Wed, 02 Aug 2023 11:38:03 +0000

Blockchain technology has revolutionized the way we think about transactions and data storage. Blockchain's ability to achieve consensus in a decentralized and trustless environment is at the core of its revolutionary impact. This is possible thanks to consensus mechanisms and algorithms.

What is a Consensus Mechanism?

A consensus mechanism is responsible for ensuring that all nodes in the network agree on the state of the distributed ledger. Consensus mechanisms are essential for maintaining the integrity and security of blockchain networks, and they come in many different forms. In this article, we will explore some of the most popular consensus mechanisms and algorithms in blockchain technology, including Proof of Work (PoW), Proof of Stake (PoS), Delegated Proof Of Stake (DPoS), Proof of Authority (PoA), Practical Byzantine Fault Tolerance (PBFT) and Proof of capacity (PoC). First lets try to understand why do we even need the consensus mechanisms in blockchain.

Need for the Consensus Mechanisms in blockchain

The need for consensus in blockchain technology arises from the fact that it is a distributed system that relies on a network of nodes to validate and verify transactions. Without a consensus mechanism, it would be impossible to ensure that all nodes in the network agree on the state of the distributed ledger. This would lead to inconsistencies and errors in the ledger, which could compromise the integrity and security of the entire system.

Consensus mechanisms are essential for maintaining the integrity and security of blockchain networks. They ensure that all nodes in the network agree on the state of the distributed ledger, and they prevent malicious actors from tampering with the ledger. Additionally, consensus mechanisms are responsible for adding new blocks to the blockchain, which is how transactions are processed and recorded.

Popular Consensus Mechanisms in blockchain

Proof of Work (PoW)

Proof of Work (PoW) is a consensus algorithm used by many blockchain networks, including Bitcoin. The central idea behind PoW is to solve a complex mathematical puzzle and easily give out a solution. This mathematical puzzle requires a lot of computational power and thus, the node who solves the puzzle as soon as possible gets to mine the next block.

In other words, PoW is like a race to solve a puzzle. The first person to solve the puzzle gets to add the next block to the blockchain and receive a reward in the form of cryptocurrency. This process is called mining.

While PoW is effective at preventing malicious actors from tampering with the blockchain, it has some significant drawbacks. For one, it is very energy-intensive, as nodes must use large amounts of computational power to solve the mathematical puzzle. Additionally, it can be slow and expensive, as transactions must be processed through a complex network of intermediaries.

Despite these drawbacks, PoW remains one of the most popular consensus mechanisms in blockchain technology.

Proof of Stake (PoS)

In Proof of Stake (PoS) consensus algorithm, validators invest in the coins of the system by locking up some of their coins as stakes. After that, all the validators will start validating the blocks. Validators will validate blocks by placing a bet on them if they discover a block that they think can be added to the chain. Based on the actual blocks added in the Blockchain, all the validators get a reward proportionate to their bets, and their stake increase accordingly. In the end, a validator is chosen to generate a new block based on its economic stake in the network. It is used in Ethereum.

PoS is more energy-efficient, faster and less expensive than PoW because transactions can be processed more quickly and with fewer intermediaries.

Despite these advantages, PoS has some drawbacks. For one, it can be vulnerable to attacks by malicious actors who hold large amounts of coins in the system.

Delegated Proof Of Stake (DPoS)

Delegated Proof of Stake (DPoS) is a consensus mechanism that combines decentralization and efficient decision-making in blockchain networks used by blockchains such as Tron. Token holders vote to elect a fixed number of trusted delegates who validate transactions and add them to the blockchain. These delegates are typically individuals or organizations that have been elected by the community based on their reputation and expertise. This approach improves efficiency by avoiding the energy-intensive competition found in Proof of Work (PoW) systems. DPoS also enables more inclusive governance, allowing users to participate in the network's decision-making process through delegate voting.

However, DPoS is not without its drawbacks. One concern is that the concentration of power among a limited number of delegates could lead to centralization if a small group gains significant influence. Moreover, voter apathy can result in a lack of participation, reducing the system's overall decentralization.

Proof of Authority (PoA)

Proof of Authority (PoA) is a consensus mechanism employed in certain blockchain networks to achieve agreement and validate transactions. It is used in Ethereum Private Networks. Unlike other decentralized systems, PoA relies on a fixed set of pre-approved validators who are known and trusted by the network participants. Validators in a PoA-based blockchain are typically reputable entities or individuals, ensuring a high level of security and governance. Validators take turns to validate and add new blocks to the blockchain based on their authority status. This approach eliminates the need for resource-intensive computations, making PoA highly efficient and eco-friendly.

However, it introduces centralization, as the system's security relies heavily on the honesty and integrity of the approved validators. Despite this limitation, PoA remains suitable for use cases that prioritize trust and efficiency over full decentralization. Some blockchain projects, especially those with specific governance requirements or private applications, have successfully adopted Proof of Authority as their consensus mechanism.

Practical Byzantine Fault Tolerance (PBFT)

Practical Byzantine Fault Tolerance (PBFT) is a consensus mechanism designed to achieve agreement in decentralized networks, even when some participants behave maliciously or experience failures. PBFT is commonly used in permissioned blockchain networks and distributed systems where a fixed set of nodes is known and trusted.

In a PBFT-based system, consensus is achieved through a series of rounds, where a designated leader proposes a block of transactions. The other nodes then exchange messages to reach agreement on the proposed block. PBFT ensures that, as long as the number of faulty nodes does not exceed a specific threshold (usually one-third of the total nodes), the network can reach consensus and maintain correctness.

Proof of capacity (PoC)

Proof of Capacity (PoC) is a unique and eco-friendly consensus mechanism used in some blockchain networks such as Storj, Burst, Chia, and SpaceMint. PoC relies on participants demonstrating their storage capacity, rather than computational power, to compete for the right to add new blocks to the blockchain.

In a PoC-based blockchain, participants precompute plots or storage spaces with cryptographic data. When a block needs to be added, the network selects a participant whose precomputed plot matches a certain condition, proving their eligibility to create the block. This approach reduces the need for energy-intensive computations, making PoC a greener alternative to Proof of Work (PoW).

However, PoC has its limitations. The initial setup of precomputed plots can be time-consuming and resource-intensive. Moreover, PoC networks may suffer from centralization if a few participants amass a disproportionately large amount of storage capacity.

The Takeaway

Consensus mechanisms have gained crucial significance in the realm of distributed ledgers, databases, and blockchains as our world increasingly embraces digitalization. The future lies in striking a balance between scalability, security, and sustainability while fostering trust and inclusivity. As blockchain permeates industries, selecting the right mechanism becomes vital, setting the stage for a decentralized world of transparency and efficiency, ultimately propelling us towards progress and positive impact.

All About Use Hook In React

Urmalveer Singh — Sun, 30 Jul 2023 08:08:26 +0000

React is a popular and widely-used JavaScript library for building user interfaces, enabling developers to create dynamic and interactive web applications efficiently.

React Hooks, introduced in React 16.8, revolutionized how developers manage stateful logic in functional components. Hooks allow developers to use state and other React features without writing a class, making it easier to organize and reuse logic across components.

In this article, we will learn about a new react hook named use, yup that's the name of the hook. This hook is still in experimental stage, If you would like to test it out, make sure your react and react-dom package version is set to "experimental".

About `use` Hook

The use Hook was revealed back in 2022 by the React team in an RFC (Request For Comments). It was a solution designed to simplify the process of data fetching by reducing the amount of boilerplate code needed to define Promises.

It can be used like await. Unlike other Hooks, use Hook has a special trait where it can be called inside conditions, blocks, and loops. This makes it a flexible Hook when you want to add logic and conditional flow without adding more components.

Ultimately, this hook reduces boiler plate code making code more readable and easy to understand.

Example

This example will show how to use use hook to reduce the boiler plate code and handle data fetching easily

How we fetch data without use hook

import { useEffect, useState } from "react";

const App = () => {
    const [product, setProduct] = useState({});

    useEffect(() => {
        fetch("https://xyz.com/products")
            .then((res) => res.json())
            .then((json) => setProduct(json));
    }, []);

    if (!product) return <div>Loading...</div>;

    return <div>{product.name}</div>;
};

export default App;

Using use hook

import { use } from "react";

const getProduct = fetch("https://xyz.com/products").then((res) => res.json());

const App = () => {
    // use hook expects promise as argument
    const product = use(getProduct);

    if (!product) return <div>Loading...</div>;

    return <div>{product.name}</div>;
};

export default App;

The use hook eliminated the use of useEffect and useState, making the code simpler.

Conclusion

In the end, React team and community are pushing hard to come up with better solutions for fetching and server components, which means that soon we will have a way simpler solution to control fetch data natively with server components support. Happy coding 👨‍💻

4 New ES2023 array methods 🔥

Urmalveer Singh — Fri, 02 Jun 2023 11:56:29 +0000

JavaScript has lots of array methods for doing things like sorting and reversing arrays, but the biggest problem with all these methods is they mutate the array you are working with. This is a huge problem when you are trying to write React code, functional code, or pure functions. This is why I love the new array methods that add immutable versions of all the mutable array methods we are used to. These methods are included in ECMAScript 2023 specification which has been recently finalized. In this article we will take a look at following new array methods

toSorted
toReversed
toSpliced
with

The problem and the hack

One of the best known issues with array methods that mutate the array is when you use them in a React component. You can't mutate an array and then try to set it as a new state because the array itself is the same object and this won't trigger a new render. Instead you need to copy the array first, then mutate the copy and set that as the new state. The hack for this was to create a copy of original array first and then mutate it. For example

const fruits = ["banana", "apple", "orange"];

const sortedFruits = Array.from(fruits).sort();

console.log(sortedFruits);
// ['apple', 'banana', 'orange']

New array methods introduced in ES2023 solve this problem.

toSorted

The toSorted method returns a new array of sorted elements. It does not mutate the original array unlike its mutable counterpart sorted.

const fruits = ["banana", "apple", "orange"];

const sortedFruits = fruits.toSorted();

console.log(fruits);
// ['banana', 'apple', 'orange']
console.log(sortedFruits);
// ['apple', 'banana', 'orange']

Know more about toSorted method here

toReversed

The toReversed method returns a new array contained the elements of original array in reversed order. It does not mutate the original array unlike its mutable counterpart reverse

const fruits = ["banana", "apple", "orange"];

const reversedFruits = fruits.toReversed();

console.log(fruits);
// ['banana', 'apple', 'orange']
console.log(reversedFruits);
// ['orange', 'apple', 'banana']

Know more about toReversed method here

toSpliced

The toSpliced method, like splice, does multiple things at once: it removes the given number of elements from the array, starting at a given index, and then inserts the given elements at the same index. However, it returns a new array instead of modifying the original array. The deleted elements therefore are not returned from this method.

const fruits = ["banana", "apple", "orange"];

const splicedFruits = fruits.toSpliced(1, 2, "dragonfruit");

console.log(fruits);
// ['banana', 'apple', 'orange']
console.log(splicedFruits);
// ['banana', 'dragonfruit']

Know more about toSpliced method here

with

The with function is the copy equivalent of using square bracket notation to change one element of an array. The original array is not modified. This allows you to chain array methods while doing manipulations.

const fruits = ["banana", "apple", "orange"];

const newFruits = fruits.with(1, "dragonfruit");

console.log(fruits);
// ['banana', 'apple', 'orange']
console.log(newFruits);
// ['banana', 'dragonfruit', 'orange']

Know more about with method here

Happy Coding 🧑‍💻

All About CSS Nesting 🔥

Urmalveer Singh — Thu, 01 Jun 2023 13:06:21 +0000

One of our favorite CSS preprocessor features is now built into the language: nesting style rules.

CSS nesting is a feature that allows you to write CSS rules inside other rules, making your code more organized and readable. It is fairly new and not yet supported by all browsers. You can check the browser compatibility for CSS nesting here.

Getting Started

Following is the preview of HTML elements we will be targeting with CSS.

<div class="container">
    <h1>I am inside container</h1>
    <div class="child_container">
        <h1>I am inside <span>child</span> container</h1>
    </div>
</div>

Without CSS nesting

.container {
    color: red;
}

.container > .child_container {
    color: blue;
}

.container > .child_container span {
    color: orange;
}

With CSS nesting

.container {
    color: red;

    > .child_container {
        color: blue;

        & span {
            color: orange;
        }
    }
}

output

Try this in your browser

In above example we are targeting .child_container class within .container class using direct child selector >. This boils down to .container > .child_container.

We can clearly see that there is less code repetition when we are using CSS nesting and moreover it makes our code more readable. When we are not using CSS nesting we need to repeat the complex CSS Selectors again and again to target specific elements and apply different styles to them. CSS nesting solves this issue by using & symbol which is a reference to parent selector.

Understanding `&`

The & symbol in CSS nesting is a way to reference the parent selector when writing nested rules. It can be used to append or prepend selectors to the parent selector, creating more specific or complex selectors.

.container {
    & .child_container {
        /* .container .child_container */

        & .btn {
          /* .container .child_container .btn */
        }
    }
}

.container {
    .content & {
        /* .content .container */

        .main & {
            /* .main .content .container*/
        }
    }
}

Nesting @media

It can be very distracting to move to a different area of the stylesheet to find media query conditions that modify a selector and its styles. That distraction is gone with the ability to nest the conditions right inside the context. This bundles all the styles to an element in same place making code more understandable.

.container {
    @media (width > 300px) {
        color: blue;
    }
}

In above example the media query will only affect .container class.

Conclusion

CSS nesting can also help you with media queries, pseudo-classes, and grouping related styles together. However, you should be careful not to overuse it or create too much specificity, as that can make your code harder to maintain and override

CSS Nesting is only at version 1. Version 2 will introduce more syntactic sugar and potentially fewer rules to memorize.

Nesting is a big enhancement to the CSS language. It has authoring implications to almost every architectural aspect of CSS. This big impact needs to be deeply explored and understood before version 2 can effectively be specified.

You can visit following sites to know more about CSS nesting

Happy Coding 👨‍💻

DEV Community: Urmalveer Singh

Top 3 features in Typescript 5.5

1. Better Type Inference

Improved Inference with filter method

Enhanced Control Flow Analysis

2. Enhanced Regular Expression Syntax Checking

3. New ECMAScript Set Methods

Elysia: A Bun-first Web Framework

Getting Started

Features

Just Function

Type Safety

Standards

Plugins

Conclusion

A Guide to Free Resources for Learning Web Development

1. FreeCodeCamp (youtube)

Why FreeCodeCamp's YouTube Channel?

Recommended videos

2. CssBattle (website)

How to Get Started

3. MDN Web Docs (website)

Why MDN Web Docs?

How to Use MDN Web Docs

4. CodePen (website)

Why CodePen?

Conclusion

Getting Started With Github Actions

Understanding Github Actions

workflows

Actions

Events

Jobs

runners

steps

Creating A Workflow

Pre-Requisites

Triggering Our Workflow

Conclusion

Multithreading in javascript: Introduction to Web Workers

Web Workers

Setting Up Web Workers

1. Setting up project folder and adding HTML

2. create javascript file named main.js in the same folder

3. create javascript file named worker.js in the same folder

Running Web Workers

Accelerate Your Web3 Projects: Top Libraries, Frameworks and other tools to Explore

1. Hardhat Framework

2. Ethers.js

3. OpenZeppelin

4. Chainlink

4. Truffle

6. Moralis

Conclusion

Demystifying Consensus Mechanisms and Algorithms in Blockchain Technology

What is a Consensus Mechanism?

Need for the Consensus Mechanisms in blockchain

Popular Consensus Mechanisms in blockchain

Proof of Work (PoW)

Proof of Stake (PoS)

Delegated Proof Of Stake (DPoS)

Proof of Authority (PoA)

Practical Byzantine Fault Tolerance (PBFT)

Proof of capacity (PoC)

The Takeaway

All About Use Hook In React

About use Hook

Example

How we fetch data without use hook

Using use hook

Conclusion

4 New ES2023 array methods 🔥

The problem and the hack

toSorted

toReversed

toSpliced

with

All About CSS Nesting 🔥

Getting Started

Understanding &

2. create javascript file named `main.js` in the same folder

3. create javascript file named `worker.js` in the same folder

About `use` Hook

Understanding `&`