Forem: Abhay78920

How to create Sidebar navigation menu in ReactJS with react router and framer-motion

Abhay78920 — Mon, 13 Feb 2023 07:47:19 +0000

Hi there 👋,

Checkout this cool sidebar.

Here is the Demo Link:
https://react-sidebar.vercel.app/

I have created this using Styled-components, react-router and framer-motion for page transition. You can use this kind of sidebar in creating Dashboards.

For this project I have used these libraries,
▶️ reactjs
▶️ Styled-Components
▶️ react-router-dom
▶️ Framer-motion for page transition
You can use this to learn or for your portfolio.

I haven't added drop-down menu yet but if you want it then you can add it and feel free to create more sections.

Any suggestions are welcomed!

Thanks For Reading😄

What is Redux ? Simply Explained!

Abhay78920 — Mon, 13 Feb 2023 07:41:00 +0000

Hi there,

It's been a while I have created anything. I was getting lot's of messages to create tutorials on Redux! So here it is. I have spent many days to make this tutorials more simple and easy to understand.
Now let's dive in ^_^

before going into what is Redux? Let's see why we needed Redux in the first place.
The Problem

Let’s say as a root component you have app.js file in your project, and in the component tree, the first layer contains 3 components and in the 2nd layer there are two child component of 2nd component.

Here, you have fetched the data from an API and you save it in the state of 2nd component. You can use this data state in child components by directly passing them downwards.

Now the problem occurs when the neighbor component which is 3 want to access that data state.

So the problem is when multiple components that need to share and use the same state.

This can be solved by “lifting up” the state to the parent component. So you can lift state from 2nd component to the app.js file. and then you can use this state in the 3rd component.

But that does not help always because in large application there are many states needed to be used in many different components, so it is not the best practice.

One way to solve this problem is to take state outside of the component tree and set it as centralized. So that any component in the tree can access and update the state without worrying about it’s hierarchy in the tree.

This is the basic idea behind Redux: a single centralized place to contain the global state in your application, and specific patterns to follow when updating that state.

You can use redux to store the state and you can use it to any component without worrying about the hierarchy.
**
Now let’s see how application works normally in react without redux.**

Consider this action as a trigger to update the state and when state gets changed then view updates the UI with new state.

For simple counter application, when we increment counter value then increment event goes to state and state updates new value then, view re-renders ui based on the updated state.

So let’s see what happens when you use Redux.

In the redux there is a function called reducer.
This reducer function takes two arguments, first is the state itself, and second is the action object.

Action object can have a type of action like increment and any data that wants to modify the state.

Now based on previous state value and action type redux calculates new value for state and updates it.
These all things happens inside the redux store, you can say it as any centralized database for state management.

Then when view get new state value it re-renders the UI.

Let me show you another example of how redux works!

As you can see here this is a simple gif which explains how redux works, you can find it on the official redux documentation.

Now using this UI you can either deposit or withdraw money.

when we click the deposit button, click event goes to event handler, based on event, event handler dispatches an action with the type as deposit and any details needed in the payload property.

This reducer accepts two things, state and the action object. Previous value of state is 0$ and action is for deposit, so the reducer will update the new state by depositing 10$ amount.

you can see in the UI balance, it changed from 0 to 10$.

Redux by definition
It is a Predictable State Container for JS Apps.

It is,

Predictable --> because it helps you write applications that behave consistently, and can run in different environments (client, server, and native).

Centralized --> because of this feature, we don't need to lift state to parent components and we can use state from any component we want due to this centralized behavior.

Debuggable --> There is an extension called Redux DevTools which is an excellent tool to debug Redux applications. Using this tool you can see when, where, why, and how your application's state changed.

Flexible --> because it works with any UI layer, and has a large ecosystem of addons.

If you're confused about anything related to this topic feel free to ask me 😉!

Thanks For Reading and Supporting.😄

Everything You Need To Know About Web Accessibility

Abhay78920 — Mon, 13 Feb 2023 07:32:41 +0000

Undoubtedly, the internet is one of the most important inventions in our modern time. Currently, there are 4.33 billion internet users, which is equivalent to half the global population. The internet technology has truly changed the way we do things. From accessing news and information to obtaining an education, planning our career, seeking jobs, transacting with government offices, buying things, etc. It’s hard to imagine life without it. With its growing importance, it is inevitable to make the web accessible to everyone. More than a requirement under the Americans with Disabilities Act of 1990, web accessibility is a social responsibility of those who design and develop internet sites, tools, and applications.

What is Web Accessibility?

Web accessibility is making sure that the internet (from websites to tools and other platforms) can be accessed by everyone. And by ‘everyone’ we mean all individuals, including those who have cognitive or physical impairments or limitations. When people think about ADA web accessibility, they usually think about blind or deaf people. But it’s not just them who should be given the opportunity to access the internet with ease. Every individual who suffers from any disorder, disease, or disability should also be considered when designing websites. In addition to physical disabilities, web accessibility also covers people who have situational disabilities and socio-economic restrictions (e.g. those with lower bandwidth should still be able to access the information or service they need online). Accessibility is Important for Individuals, Businesses, and the Society It isn’t hard to see the importance of web accessibility to individuals. Think of a first-time mom who has to learn to do everything with a baby in her arms or a person who has just been through major surgery. Another example is a retiree who is still learning how to navigate the internet from her phone. Making the web accessible to individuals regardless of their status, age, condition, or situation is important to make their web experience a positive and meaningful one.

What is Higher Order Component (HOC) in React JS?

Abhay78920 — Mon, 13 Feb 2023 07:28:52 +0000

When it comes to advanced topics in React. you must have heard about the HOC(Higher Order Component). Now this HOC is not that much complex to learn but avoid learning it directly by taking complex example.

I'll try to make it as simple as possible.
Now first of all let's see what kind of problem HOC solves?

Well, sometimes we have two different components which implements same logic such as,

As you can see below,

Now for both of this components they have the same logic like counter.

Now let's see the definition of HOC which mentioned in the ReactJS.Org

A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.
Now as mentioned above we can implement logic of component in single HOC and then we can use it in required components.

Let's see how this HOC is a pattern that emerges from React's compositional nature and not a part of React API.

import React, { Component } from "react";

const HOC = (Component, data) => {

//You can do modification in data then pass it to the component

  return class extends React.Component {
    render() {
      return (
        <Component />
      );
    }
  };
};

export default HOC;
As you can see this is one of the pattern of HOC component where, It takes two arguments one is component in which we want to add logic and second argument is data. We can modify this data and then can pass it to the component. Now this HOC will return a React component which returns more Enhanced Version of component

Let's try it in our likes and comments component. Both of them is using the same logic as we use in the counter.

So create new file called Hoc.js and write below code.
`import React, { Component } from "react";

const HOC = (Component, data) => {
  //console.log("data", data);

  return class extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        count: data,
      };
    }

    handleClick = () => {
      this.setState({
        count: this.state.count + 1,
      });
    };

    render() {
      return (
        <Component

          CountNumber={this.state.count}
          handleCLick={this.handleClick}
        />
      );
    }
  };
};

export default HOC;`
Here we have implemented logic for counter.

Line no 3: we can pass component and data.

Line no 6: Returns a React component.

Line no 7 to 19: This lines represents the same logic we use to implement counter.

Line no 25: Here we have pass state of the counter.

Line no 26: Here we have passed a function to increment counter state.

Now let's see how we can use this HOC.

Below is the like component.
`import React, { Component } from "react";
import HOC from "./HOC";

class LikesCount extends Component {
  render() {
    return (
      <div>
        {this.props.CountNumber} <br />
        <button onClick={this.props.handleCLick}>Like👍🏻</button>
      </div>
    );
  }
}

const EnhancedLikes = HOC(LikesCount, 5);

export default EnhancedLikes;`

Line no 8: To display no of likes.

Line no 9: Button to increment likes.

Line no 15: Here we have used the HOC component. We have passed our Likes Component and no 5. Why 5? because let's assume that there are already 5 likes then we can implement counter logic from no 5.

Line no 17: Here we will export the new Enhanced likes 
component returned by HOC.
Line 15: Here we are sending different data. (10 instead of 5)

Don't forget to call enhanced Version of component that you have exported in your component file. Just like this,

import React from "react";
import "./App.css";
import EnhancedLikes from "./components/HOC/LikesCount";
import EnhancedComments from "./components/HOC/CommentsCount";

function App() {
return (

);
}

export default App;


> Now in simple terms, HOC took LikesComopnent and data then returned an enhanced LikesComopnent by implementing Counter logic in it.
We can do the same for CommentComponent,
`import React, { Component } from "react";
import HOC from "./HOC";

class CommentsCount extends Component {
  render() {
    return (
      <div>
        Total Comments : {this.props.CountNumber} <br />
        <button onClick={this.props.handleCLick}>Add Comment!</button>
      </div>
    );
  }
}

const EnhancedComments = HOC(CommentsCount, 10);

export default EnhancedComments;`

After implementing this you will understand that we don't have to write same logic for more components.

There are many uses of HOC like,

If user has already logged in and you want to check user's login status in more then one component or pass user's data then you can pass it to HOC then wrap HOC component around those components.

How to build a Fabulous Todo App using React, Redux and Framer-Motion

Abhay78920 — Mon, 13 Feb 2023 07:21:30 +0000

Hey,

I know building TODO List always won't get you too far😴, But It can teach you basic concepts and implementation of particular framework.

here is the demo of what we're going to build in this tutorial.👇👇
Link: https://react-redux-todo-app-lac.vercel.app/

Now please if you're starting this tutorial watch till the end because doing it half won't teach you anything. So let's dig in.🤩

In this tutorial we're going to build this TODO app with animations using Framer-Motion.

What will you learn after this Tutorial?

-How to use Redux Toolkit
-How to use Framer-Motion for awesome animations
-Method to sort and display lists
-CRUD operation (obviously🤭)

You must have basic understanding of Redux to follow this tutorial, don't worry if you don't know the basics of Redux you can visit my channel, there is playlist to learn redux.

Let's get Started
First, The below is the folder structure for this small project so make sure you create it.

Folder Structure

Follow below commands to create react-app and install required libraries!

npx create-react-app your-app-name
cd your-app-name
npm install react-redux @reduxjs/toolkit framer-motion react-icons

we're going to use these all four libraries,
react-icons is to add svg files in our app.

First let's add one input and add button in the Todos.js.

As you can see in above code it has one input with handleChange() method and one add button.

Creating Reducer and Store
Now let's create our Reducer and actions.
Open reducer.js file and write below code:

Explanation:

Now here we're going to use createSlice() function.
This function takes 1 object having 3 parameters,
--> name of the slice function
--> initial State
--> All reducer logic inside reducers {} object

Line 1: import createSlice function.

Line 2: create initial state here it is an empty array.

Line 5: Here we have used createSlice function and passed all 3 required parametrs.

Line 13: We have created one action called addTodos this action get an callback function which have two arguments (state, action). Then this function will return state with adding action.payload (payload contains one todo item).

Line 22: Here we have exported addTodos as action from addTodoReducer.

Line 23: Here we have exported reducer from addTodoReducer.

So, let's create our store and pass this reducer.

Open store.js and write below code:

In the above code we have used configureStore function.

This funcion takes one reducer and automatically takes care for the Redux DevTools extension so we don't have to write about it explicitly.

Now our store is ready with reducer that we have created.

Connecting Redux Store with React App
Let's connect this store to our React application.

I like to connect store in the index.js file.
Open index.js file.

import Provider from the react-redux and store from store.js

Now just wrap your component with this Provider and pass store in the Provider just like this,

Now our Redux store is connected with our React App.

Connect React component with Redux
Let's use this store and Redux functionalities in the Todos.js component.

To connect this component with Redux we will use connect() method from react-redux.

Open Todos.js file.

import connect method from react-redux.
import { connect } from "react-redux";
Now instead of simple export default Todos change it to this line:
export default connect(null,null)(Todos);
This is how we use connect method, It's like higher order function that takes your component (Todos in our case) and add redux functionalities to it then return it.

Now add props in your component and log this props you will see and Object having dispatch method. Which means your component is now connected with Redux.

Let's use todos state in our component.

To use state from redux we have to pass mapStateToProps method in the connect method.
and to use actions or functions that we created inside the reducer (like addTodos) we have to create and pass mapDispatchToProps method and add it to the coonect method.

So let's create both of this methods in the Todos.js component.
const mapStateToProps = (state) => {
return {
todos: state,
};
};
This method takes state as argument and will return state as we want here i want state as todos.
const mapDispatchToProps = (dispatch) => {
return {
addTodo: (obj) => dispatch(addTodos(obj)),
};
};
This method takes dispatch as argument and it can dispatch action to reducer.
here, I want to add todos so this method returns and addTodo method.
addTodo method dispatch an addTodos action with an obj(which contains todo item, it will acts as action.payload ).

here, make sure to import addTodos action from reducer file.

now add both of this methods in the connect just like this,
export default connect(mapStateToProps, mapDispatchToProps)(Todos);
let's connect input and add button with this state and methods.

import React, { useState } from "react";
import { connect } from "react-redux";
import { addTodos } from "../redux/reducer";

const mapStateToProps = (state) => {
return {
todos: state,
};
};

const mapDispatchToProps = (dispatch) => {
return {
addTodo: (obj) => dispatch(addTodos(obj)),
};
};

const Todos = (props) => {

console.log("props",props);

const [todo, setTodo] = useState("");

const add = () => {
if (todo === "") {
  alert("Input is Empty");
} else {
  props.addTodo({
    id: Math.floor(Math.random() * 1000),
    item: todo,
    completed: false,
  });
  setTodo("");
}

};

const handleChange = (e) => {
setTodo(e.target.value);
};

return (

type="text"
onChange={(e) => handleChange(e)}
className="todo-input"
value={todo}
/>

  <button className="add-btn"  onClick={() => add()}>
    Add
  </button>
  <br />

  <ul>
    {props.todos.length > 0 &&
      props.todos.map((item) => {
        return <li key={item.id}>{item.item}</li>;
      })}
  </ul>

</div>

);
};
Line 23: Here I have created add function. First it will check it todo state is not empty if it is empty then shows an alert else it will use addTodo method from props.
in this method we will pass todo object which contains
id, todo text, completed boolean which is initially false.

Line 50: Make sure to connect add() with onClick of button.

Line 55: here I have mapped values from todos state.
If todos.length > 0 then it will map it and shows all todo items you add.

All-Inclusive Insights On The Metaverse Technology And Its Future Potential

Abhay78920 — Mon, 13 Feb 2023 07:04:41 +0000

Metaverse Technology: Overview, Use Cases, And Future Potential
Virtual Reality (VR) has been one of the most fascinating contributions of the technological boom in the past decade. The metaverse, the most significant emerging tech trend of modern times, is set to elevate this experience to the next level. How about an immersive 3D digital experience that combines multiple virtual and physical worlds? Well, this is exactly what the metaverse promises. The concept is being considered the future iteration of the internet and will enable users to meet, socialize, play games, and work with other users within 3D spaces.

The term "metaverse" was conceptualized by Neal Stephenson in his science fiction novel Snow Crash, written in 1992. The novel envisaged that individuals could escape from the real world into a virtual world called "Metaverse" with the help of digital avatars and explore this virtual world to the fullest. Decades later, with the advent of innovative technologies like Augmented Reality (AR), VR, Artificial Intelligence (AI), machine learning, blockchain, etc. it has become possible to convert this fascinating concept into reality. Several brands like Facebook, Microsoft, Nvidia, and Decentraland have started to explore this area over the past couple of years.

The metaverse technology grabbed the spotlight and became a topic of keen interest recently, when Facebook changed its brand name to Meta in October 2021 and planned to focus on exploring the metaverse in full. This article speaks about the metaverse technology in detail and provides glimpses of its future prospects.

How Does A Metaverse Work?
A metaverse is a virtual, digital 3D universe formed by merging various kinds of virtual spaces. Users can enter this digital universe using their virtual identity in the form of digital avatars and can move across various metaverse spaces for shopping, hanging out, or meeting friends, just as they would in the real world. The only difference is users can enjoy immersive experiences from the comfort of their own homes. Simply put, activities that happen within isolated environments in the real world will now happen virtually, within the metaverse.

Examples
For example, if a user taking a virtual tour within a metaverse spots a store and shops there via immersive commerce, the order that they place will be delivered to the address provided. Other instances of metaverse experiences include participation in virtual social events, purchasing digital land and building virtual houses, joining fellow viewers of a virtual rock band concert, paying visits to virtual museums to view the latest works of art, and participating in immersive learning through virtual classrooms, etc. Businesses can leverage this technology by carrying out interactions with digital humans for business purposes, like employee onboarding, sales, providing customer services, and many others. Users can also utilize a metaverse for creating, sharing, and trading assets or experiences.

Unique Traits Of The Metaverse
The metaverse is unique in its own way. It is an interoperable network comprising 3D virtual worlds rendered in real time. An unlimited number of users can experience these virtual ecosystems persistently and synchronously. During this experience, a user’s individuality is maintained. Moreover, a metaverse is massively scaled and ensures the continuity of data, like objects, identities, entitlements, interactions, payments, history, etc.

Who Owns The Metaverse?
The virtual space offered by the metaverse is device-independent and collective, so no single vendor owns the space. The transactions within a metaverse are made using non-fungible tokens (NFTs) and digital currencies.

Technologies That Empower The Metaverse
The functioning of a metaverse requires a combination of several cutting-edge technologies like Virtual Reality, Augmented Reality, Artificial Intelligence, machine learning, blockchain, an AR cloud, Internet of Things (IoT), spatial technologies, head-mounted displays (HMDs), and 3D reconstruction. Apart from these avant-garde technologies, the metaverse will also need the support of software tools, apps, platforms, hardware, and content generated by users.

Blockchain will validate value transfer, credibility, and data storage within a metaverse; AR will enable 3D visualization of objects, interaction in real time, and the merging of the virtual and real worlds; while VR will provide users with a sensory experience like that of physical reality. However, while AR implementation needs only a camera-enabled device, VR requires more expensive equipment like multi-modal screens and HMDs. Metaverse technology is more likely to employ a combination of AR and VR, popularly called Extended Reality (XR). Integration of AI, machine learning, and IoT will facilitate crucial functions like limitless interactions and seamless integrations of data.

3D reconstruction helps in creating virtual spaces that are realistic and look natural, leading to the formation of a digital ecosystem that is almost like the real world. With the help of special 3D cameras, one can render accurate models of objects, buildings, and physical locations. These models are 3D photorealistic. Computers then process the 4K HD photos captured and the 3D spatial data for generating a virtual duplicate or digital twin of the real physical world that can be experienced by the users.

The Current State Of Metaverse Implementation: Use Cases
Today, there exist several individual metaverses that have limited features. Presently, the gaming sector provides the experience closest to the metaverse experience, as compared to other industrial domains. Decentraland, a start-up, created a unique virtual world for its website users in the year 2017. This virtual world has its own economy as well as currency. It integrates social elements with NFTs (representing cosmetic collectibles), cryptocurrencies, and virtual real estate. The players of this blockchain game participate in active governance on the platform.

Microsoft launched Mixed Reality smart glasses named HoloLens in 2016. The video game Roblox also provides nongaming services like virtual meetups and concerts. Facebook is in the process of creating a social platform powered by Virtual Reality. Furioos, created by Unity, streams entirely interactive 3D environments in real time. Here, the environments are rendered by Unity’s GPU server infrastructure that automatically scales itself. SecondLive offers a virtual 3D ecosystem that is being utilized for learning, socializing, and business. This metaverse also provides an NFT marketplace where collectibles can be swapped.

What Does The Future Of The Metaverse Look Like?
In the near future, the metaverse is expected to consolidate all isolated immersive virtual ecosystems and merge them into a unified whole. The outcome will be a single huge-sized all-inclusive metaverse that can be accessed using a single browser (just like the internet offering various websites). For instance, a user working in a virtual office can conduct a Mixed Reality meeting using an Oculus VR headset and can indulge in a blockchain-powered game after finishing work. The user can then manage their finances and portfolio inside the same metaverse.

The metaverse will transcend social media platforms and virtual gaming. The metaverses are expected to become more multidimensional in the near future owing to the usage of VR glasses and headsets. Using these VR gadgets, users can stroll around physical spaces in reality for exploring 3D spaces. Metaverses have the potential to facilitate decentralized governance, establishing the digital identity of an individual, remote employee workstations, etc.

Challenges Likely To Arise While Implementing A Metaverse
Tech experts have predicted certain challenges that are likely to be encountered by a metaverse. The major challenges include controlling the privacy of users and businesses and authenticating the identity of individuals who are moving around the virtual world disguised as digital avatars. As a result, unscrupulous persons or even bots can explore the metaverse under the disguise of an individual, and scam other users or damage the reputation of business brands. Also, the usage of AR and VR with the camera on can lead to data breaches of personal information.

Concluding Thoughts
The metaverse is a collective, virtual, open space developed by integrating virtually enhanced digital, as well as physical, reality, known for offering immersive experiences to users. Although this concept is in its infancy and has a long way to go before reaching stability, it possesses an immense potential to disrupt the AR/VR experience altogether. Several big players including Facebook are investing heavily and working relentlessly to make this concept a success in the coming years. The metaverse is expected to offer decentralized, persistent, interoperable, and collaborative business opportunities and models that will help companies to elevate digital business to unprecedented heights.

Web3 vs. Web 3.0: They are NOT the same!

Abhay78920 — Mon, 13 Feb 2023 06:31:22 +0000

What?! Wait a second… Web3 and Web 3.0, ain’t they the same?!

What I’m going to demystify today is probably one of the most common misconceptions in the blockchain and crypto space. Including myself, only until recently, thanks to one of my students on Udemy who pointed out to me that I had misused this term in one of my masterclasses, I would not have known about this. Read on if you don’t want to make the same mistake as I did!

If you search ‘Web3’ on Wikipedia, this is what you’ll find in the very first sentence of the article:

You see, even Wikipedia notices this common confusion among most people. Web3 and Web 3.0 are NOT the same.

Web3 and Web 3.0, even though they are both visions of how the Web will ideally be evolved in the future and both are attempting to fix the problems of the current Web, they are fundamentally different.

To put it in simple terms, Web3 refers to the decentralized and blockchain-based web, while Web 3.0 refers to the linked or semantic web. Let’s break them down a bit further.

Web3
To understand Web3, we need to first understand Web1 and 2.

Web1- is the initial version of the internet, where everything was read-only and static with zero interaction.

Web2- it is what the current web is. It refers to the read-and-write version of the internet, where users can create content and share them, other than read-only. This creates a much more interactive version of the internet.

However, there is this dark side of Web2 — centralization. Several giants, such as Google and Facebook actually own and control the data of their users, and they use these data to manipulate users in somewhat unethical ways. Users basically have no control over the ownership of their identity, data and the content they have created.

Here comes Web3. Web3 is tempting to solve this centralization problem by introducing the idea of Read, Write and Own. I talk a lot about Web3 here.

The term ‘Web3’, was coined in 2014 by Gavin Wood, who is the Ethereum co-founder and Polkadot founder. The core idea behind Web3, is to fight against the current centralized dominance and power of the giants, and return the power of ownership back to the users.

But how? Through a decentralized online ecosystem by the implementation of blockchain. The vision of Web3 is to let the users be in total control of their identity, data, and the content they create, and they can decide who can access this information and who cannot. This can be achieved through the use of decentralized data storage powered by blockchain technologies and self-sovereign identity in a community-driven setting, such as DAOs (Decentralized Autonomous Organizations — to learn about DAOs, check DAO 101, How to create a DAO in 5 min and this course).

In Web3, you also have ownership on the internet. NFTs, for example, allow us, for the first time in history, to own digital items.

The potential way to achieve this is to have users keeping their own identity, data and content they create in a cryptocurrency wallet like Meta-Mask. By signing in with this crypto wallet, users can have total control over all their data as they are the only people who have the keys to their wallets. Unlike signing in to a Facebook account or Google right now, you don’t actually have any control over any of your data, but Facebook (or should I say Meta?) does. These centralized platforms can potentially sell your data, lock you out of your account, or even erase your account and all of your data if they want to.

Okay, enough about Web3. How about Web 3.0?

Web 3.0
Web 3.0, also referred to as ‘semantic web,’ is a vision of the inventor of the World Wide Web, Tim Berners-Lee, who described the semantic web as a component of Web 3.0. Semantic Web is essentially an extension of the World Wide Web, through the standards set by the World Wide Web Consortium.

What’s the Semantic Web? It refers to the vision of the web where all the data is machine-readable, hence all the data on the internet can be connected with each other.

This is to solve a problem of the current internet: lack of intelligence and efficiency. The current internet has web links or URLs, which connect documents with each other. However, these documents are not raw data that is machine-readable. That’s when information silos happen. Imagine you move to another country one day and change your current location on your Facebook profile, your Linkedin profile will not be automatically updated without you having to log in and change that manually. This is not intelligent or efficient at all.

The vision of Web 3.0, or the Semantic Web is to be able to connect everything at the data level in the web, so once you change the information in one platform, the same information will automatically be changed everywhere. This can be achieved by storing all the data in a place called Solid.

Solid is the project in which Tim Berners-Lee wants to decentralize the Web without using blockchain. Tim believes that there are better options than blockchain technology to deploy services on the internet, as he worries that blockchain data are all open and public (maybe he can check these privacy networks). Other than the privacy concerns, there will be loopholes where a third party can still be able to track and analyze users’ data and activities on the Web, which is essentially the biggest problem of the Web today.

On the other hand, Tim thinks using blockchain is expensive as each transaction involved in the network will come with a cost, while the maintenance of the blockchain infrastructure also doesn’t always come cheap. And that is against Tim’s belief that the internet is for everyone, which was his fundamental goal when he created the World Wide Web.

According to his project Solid’s website, ‘Solid is a specification that lets people store their data securely in decentralized data stores called Pods. Pods are like secure personal web services for data. When data is stored in someone’s Pod, they control which people and applications can access it.’ Basically, the goal of Pod is true data ownership and increased privacy.

Somewhat Similar, Somewhat Different

As you can tell by now, both Web3 and Web 3.0 are attempting to create a new version of the Web, tempting to solve the problems of the current Web. However, their fundamental goals and approaches are different.

Web3, the decentralized and blockchain-based Web tries to empower the users by giving them back the power over their own identity and data through the use of blockchain technologies, while Web 3.0, the linked or semantic Web, tries to reuse and link machine-readable data across the Web to improve the intelligence and efficiency by using data interchange technologies.

Some Final Thoughts

Perhaps it doesn’t really matter what the differences are between Web3 and Web 3.0, they are both trying to build a better version of the internet, and both of them are still in process, which means ideas and technologies can still be altered and improved along the way.

Talking about technologies, at the end of the day, who really cares about the technologies being built behind an idea anyway (except the coders and engineers I guess)? Just like 99% of people have no idea how electricity, internet protocols, and encryption work today while they are using them every single day.

It is the idea that matters, that idea of wanting to build something greater for everyone, that drives us all to move towards a brighter future. I cannot wait to see how it will all evolve!

Build Website with ReactJS, Styled-components and GSAP for Scrolling Animations

Abhay78920 — Mon, 13 Feb 2023 06:17:15 +0000

Hi there,

Recently, I saw an website with cool scrolling effects and so I have decided to create website in ReactJS with cool scrolling animations using GSAP.

Here is the Demo Link:
https://agency-website-eta.vercel.app/

For this project I have used these libraries,
▶️ react-js
▶️ GSAP for scrolling animations
▶️ Styled-Components
▶️ React-slick and slick-carousel for Carousal

First I have created design in Figma, and used some of it's awesome plugins and resources. I have listed all the resources used in this website in the github ReadMe file.
Things that I have learned building this project,
▶️ Good Folder structure for React Projects
▶️ How to create Hamburger Menu with only css
▶️ How we can leverage advantages of component structure
▶️ How to use GSAP in React JS for awesome animations while scrolling
▶️ Uses of Lazy and suspence in reactJS
▶️ Many awesome CSS animations etc.

You can use this to learn or for your portfolio and if you want to use it else where small credit would be appreciated (not compulsory), just check license of all images and other assets before using it commercially.

I will try to improve it's speed and performance.
I haven't added react-router yet but if you want to create more pages then you can add it and feel free to create more sections.

Any suggestions are welcomed!

Thanks For Reading😄