Forem: syed muhammad bilal

WEB3.0

syed muhammad bilal — Thu, 30 Mar 2023 15:41:40 +0000

Web3.0 is the next generation of the World Wide Web that is being developed to enable decentralized applications and services, often referred to as the decentralized web. It is a vision of a future where the internet is more secure, more private, and more decentralized. In this blog post, we'll explore what Web3.0 is, the changes that have come in the past two to three years, and its potential impact on the future of the internet.

What is Web3.0?

Web3.0, also known as the decentralized web, is a new iteration of the web that is being developed to enable decentralized applications and services. It is built on top of blockchain technology, which is a distributed ledger that allows for secure and transparent record-keeping. Unlike Web2.0, which is built on centralized servers controlled by large corporations, Web3.0 is built on a decentralized infrastructure, which is more resistant to censorship and provides users with greater control over their data.
The main goal of Web3.0 is to create a more open, transparent, and secure internet that is controlled by the users rather than by large corporations. This means that users will have more control over their data and can choose to share it only with trusted parties. In addition, Web3.0 aims to eliminate the middlemen in various industries, such as finance and real estate, by providing a decentralized platform for transactions.
Changes in the past two to three years

In the past two to three years, there have been significant changes in the Web3.0 space. Some of the notable developments include:

1. Increased adoption of blockchain technology

Blockchain technology has gained significant traction in the past few years, with more companies and organizations exploring its potential applications. This has led to the development of various blockchain-based platforms and applications, such as Ethereum, Polkadot, and Cardano, among others.

2. Development of decentralized finance (DeFi)

Decentralized finance, also known as DeFi, has emerged as one of the most promising applications of blockchain technology. DeFi refers to a new financial system built on top of blockchain technology that allows for peer-to-peer transactions without the need for intermediaries. It includes applications such as lending, borrowing, and trading, among others.

3. Emergence of non-fungible tokens (NFTs)

Non-fungible tokens, or NFTs, have become increasingly popular in the past year. NFTs are unique digital assets that are stored on a blockchain and can be bought, sold, and traded like any other asset. They have been used for various purposes, such as digital art, collectibles, and gaming items, among others.
Potential impact of Web3.0

Web3.0 has the potential to transform the internet as we know it. By providing a more decentralized and secure infrastructure, it could lead to greater user control over data and more open and transparent systems. It could also disrupt various industries, such as finance, real estate, and healthcare, by eliminating intermediaries and providing a more efficient and cost-effective platform for transactions.
However, there are also challenges that need to be addressed in the Web3.0 space, such as scalability, interoperability, and security. As the Web3.0 ecosystem continues to evolve, it will be important to address these challenges to ensure that the potential benefits of Web3.0 can be realized.

Conclusion

Web3.0 is the next iteration of the internet that is being developed to enable decentralized applications and services. It is built on top of blockchain technology and aims to create a more open, transparent, and secure internet. In the past few years, there have been significant developments in the Web3.0 space, such as the increased adoption of

"CURD" operation in Express js

syed muhammad bilal — Thu, 30 Mar 2023 15:27:32 +0000

Express.js is a popular Node.js framework that is widely used for building web applications and APIs. One of the most common operations performed in web development is CRUD (Create, Read, Update, and Delete) operations. In this blog, we'll explore how to perform CRUD operations using Express.js with a simple example of code.
We'll start by creating a new Node.js project and installing the Express.js package using npm. Open up your terminal and run the following command:

npm install express

Once installed, we can create a new file called server.js. In this file, we'll require the Express.js module and create a new instance of the Express.js application.

const express = require('express');
const app = express();

Now, let's create a simple in-memory database using an array of objects. In this example, we'll create a simple "products" database with the following schema:

const products = [
  { id: 1, name: 'Product 1', price: 10.0 },
  { id: 2, name: 'Product 2', price: 20.0 },
  { id: 3, name: 'Product 3', price: 30.0 },
];

With our database in place, we can now start building our CRUD routes.

Create (POST)

To create a new product, we'll create a new route using the app.post() method. This method creates a new route for POST requests.

app.post('/products', (req, res) => {
  const { name, price } = req.body;
  const id = products.length + 1;
  const newProduct = { id, name, price };
  products.push(newProduct);
  res.status(201).json(newProduct);
});

In this example, we're creating a new route for the /products endpoint and using the req.body object to extract the name and price of the new product. We're then generating a new ID for the product and adding it to the products array. Finally, we're returning the newly created product in the response with a status code of 201.

Read (GET)

To read products from the database, we'll create a new route using the app.get() method. This method creates a new route for GET requests.

app.get('/products', (req, res) => {
  res.json(products);
});

In this example, we're creating a new route for the **/products **endpoint and returning the entire products array in the response.
We can also create a route to retrieve a single product by ID.

app.get('/products/:id', (req, res) => {
  const { id } = req.params;
  const product = products.find(p => p.id === parseInt(id));
  if (!product) {
    return res.status(404).json({ message: 'Product not found' });
  }
  res.json(product);
});

In this example, we're creating a new route for the /products/:id endpoint, where :id **is a parameter that represents the ID of the product we want to retrieve. We're using the Array.find() **method to find the product with the specified ID in the products array. If the product is not found, we're returning a 404 error with a message. Otherwise, we're returning the product in the response.

Update (PUT)

To update a product in the database, we'll create a new route using the app.put() method. This method creates a new route for PUT requests.

app.put('/products/:id', (req, res) => {
  const { id } = req.params;
  const { name, price } = req.body;
  const productIndex = products.findIndex(p => p.id === parseInt(id));
  if (productIndex === -1) {
    return res.status(404).json({ message: 'Product not found' });
  }
  const updatedProduct = { id: parseInt(id), name, price };
  products[productIndex] = updatedProduct;
  res.json(updatedProduct);
});

In this example, we're creating a new route for the /products/:id endpoint, where :id is a parameter that represents the ID of the product we want to update. We're using the req.body object to extract the name and price of the updated product. We're then using the** Array.findIndex()** method to find the index of the product with the specified ID in the products array. If the product is not found, we're returning a 404 error with a message. Otherwise, we're updating the product in the array and returning the updated product in the response.

Delete (DELETE)

To delete a product from the database, we'll create a new route using the app.delete() method. This method creates a new route for DELETE requests.

app.delete('/products/:id', (req, res) => {
  const { id } = req.params;
  const productIndex = products.findIndex(p => p.id === parseInt(id));
  if (productIndex === -1) {
    return res.status(404).json({ message: 'Product not found' });
  }
  const deletedProduct = products.splice(productIndex, 1)[0];
  res.json(deletedProduct);
});

In this example, we're creating a new route for the** /products/:id** endpoint, where : id is a parameter that represents the ID of the product we want to delete. We're using the** Array.findIndex()** method to find the index of the product with the specified ID in the products array. If the product is not found, we're returning a 404 error with a message. Otherwise, we're deleting the product from the array using the **Array.splice() **method and returning the deleted product in the response.

Conclusion

In this blog post, we've learned how to perform Update and Delete operations using Express.js with a simple example of code. By combining these operations with the Create and Read operations we learned in the previous post, we can create a fully functional CRUD API using Express.js.

"Hello world" created the server in express js

syed muhammad bilal — Thu, 30 Mar 2023 14:58:55 +0000

First, we'll need to install Express.js using npm. Open up your terminal and run the following command:

npm install express

Once installed, we can create a new file called server.js. In this file, we'll require the Express.js module and create a new instance of the Express.js application.

const express = require('express');
const app = express();

Next, we'll create a simple route that responds with "Hello World!" when accessed. We can do this using the app.get() method, which creates a new route for GET requests.

app.get('/', (req, res) => {
  res.send('Hello World!');
});

In this example, we're creating a new route for the root URL ('/') and using the res.send() method to send the text "Hello World!" as the response.
Finally, we'll start the server by calling the app.listen() method and specifying the port number to listen on.

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

This starts the server on port 3000 and logs a message to the console when the server is listening.
Here's the complete server.js file with all the code together:

const express = require('express');
const app = express();
app.get('/', (req, res) => {
  res.send('Hello World!');
});
app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

Once you've created the server.js file, you can start the server by running the following command in your terminal:
node server.js
Now, if you open up your web browser and navigate to http://localhost:3000, you should see the message "Hello World!" displayed on the page. Congratulations, you've created a basic web server using Express.js!

Rect js vs Angular js - Library vs framework

syed muhammad bilal — Sun, 06 Nov 2022 18:04:07 +0000

What is Rect?

Rect we are also known as Rect js which is a free and open source library for the front-end developer and based on script language (JavaScript) that is based on UI components. This library was created by the meta(which belongs to Facebook) and it's maintained by them that is also an open-source contribution that any developer can contribute to this library.

Coding style of react

import React from 'react';
import ReactDOM from 'react-dom/client';

const Greeting = () => {
    return (
        <div className="hello-world">
            <h1>Hello, world!</h1>
        </div>
    );
};

const App = () => {
    return <Greeting />;
};

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

what is Angular?

angular is a leading framework for building javascript heavy single page-based web applications. single page apps or SPA,s load the entire content within a single page. this single page is usually an index.html file. this means once the page is loaded clicking on the link will not reload the entire page but simply update sections within the page itself.

coding style of Angular

/* avoid */
import { Component, NgModule, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

interface Hero {
  id: number;
  name: string;
}

@Component({
  selector: 'app-root',
  template: `
      <h1>{{title}}</h1>
      <pre>{{heroes | json}}</pre>
    `,
  styleUrls: ['app/app.component.css']
})
class AppComponent implements OnInit {
  title = 'Tour of Heroes';

  heroes: Hero[] = [];

  ngOnInit() {
    getHeroes().then(heroes => (this.heroes = heroes));
  }
}

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  exports: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

const HEROES: Hero[] = [
  { id: 1, name: 'Bombasto' },
  { id: 2, name: 'Tornado' },
  { id: 3, name: 'Magneta' }
];

function getHeroes(): Promise<Hero[]> {
  return Promise.resolve(HEROES); // TODO: get hero data from the server;
}

Difference between Library & FrameWork

However, there are technical differences between them. One core difference between a framework and a library is the use of queries. When using a library, the programmer decides when and where to call it. When using a framework, the framework dictates that. It provides the basic framework and tells the programmer what is needed. Accordingly, the necessary code is inserted by the developer and supplements the framework according to the desired function. In the end, however, it is the framework that calls up the code when it needs it and is also responsible for the running of the program.

What is (SPA) Single Page Application?

A single-page application is an app that works inside a browser and does not require page reloading during use. You are using this type of application every day. These are, for instance: Gmail, Google Maps, Facebook, or GitHub. SPAs are all about serving an outstanding UX by trying to imitate a “natural” environment in the browser — no page reloads, no extra wait time. It is just one web page that you visit which then loads all other content using JavaScript — which they heavily depend on. SPA requests the markup and data independently and renders pages straight in the browser. We can do this thanks to advanced JavaScript frameworks like AngularJS, Ember.js, Meteor.js, and Knockout.js. Single-page sites help keep the user in one, comfortable web space where content is presented to the user in a simple, easy, and workable fashion.

What is (MPA) Multiple Page Application?

A multi-page app (MPA) means a traditional web application that loads on the server’s side. Each time a user refreshes a page or navigates from one page to another, the browser requests data from the server. As the name suggests, MPAs have multiple pages that function separately at all levels: in development, in the eyes of real users, and from the perspective of search engines. Most modern MPAs are developed with HTML for basic functionality, CSS for styling, and JavaScript for interactive elements. Any large eCommerce site, such as Amazon, that features numerous categories and pages and has both static and interactive elements is an example of a multi-page application

Difference between virtual Dom & real/Browser Dom in React

A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing’s power to directly change what’s on the screen. Manipulating the DOM is slow. Manipulating the virtual DOM is much faster because nothing gets drawn onscreen.
DOM stands for 'Document Object Model'. It is a structured representation of HTML in the webpage or application. It represents the entire UI(User Interface) of the web application as the tree data structure.