Major differences between Web 2.0 and Web 3.0

Adeola Fadeyi — Wed, 02 Mar 2022 15:43:42 +0000

Okay...pause.

If there's a web 2.0 and web 3.0, then there's got to be a web 1.0 too, right?🤔
Well, yes - there used to be web 1.0.

What is Web 1.0?

Back forward to the early 90's and 20's, the internet was just at it's inception and it was called the ARPANET. The military service used it to send encrypted messages over to each other during the cold war.
It later thrived and users consumed static web pages content without participation. It is popularly called "read-only web". The users were mostly readers.
Web applications like Yahoo and Netscape browser were at the center of this new ecosystem.

Fast forward to the 20's and now is the dawn of web 2.0.

What is web 2.0?

This refers to the advent of web applications that allows users to contribute to a website's content.
Users can interact with a page by liking a content or post, posting a review or tweet and by even creating an account.
It is popularly referred to the "read-write web". This came as a major upgrade to the "web 1.0" static contents, and provides dynamic content based on data collected from the users.

So in essence, the Facebook feed of a user is going to be a little or totally different from that of another user based on the data collected from the preferences of each user.
Web applications in this internet ecosystem includes;
Social media apps like Instagram, Twitter, amongst others.
And blogging platforms like WordPress, Drupal.

The client side of this apps is run on powerful technologies like Ajax and JavaScript frameworks.
While the server side is run on powerful software applications like Python, Perl, PHP, Nodejs amongst others.

It is also worthy to note that some critics claim that web 2.0 doesn't represent a new version of the world wide web, but merely continues to use so called "web 1.0" technologies and concepts, while adding a few features.

And now, Web3.0!.
Why is there even a need for the next web?
Why an upgrade?

What is Web 3.0?

This is the era of Internet applications run on distributed and decentralized networks, most common being the blockchain.

What does this even mean?🥵

It only means that instead of data stored on a centralized server i.e the servers provided by these companies, it will be scattered across a computer networks - this in turn limits the power of these companies. Here, the users collectively operate the blockchain, making each user a boss.

The applications taking this internet ecosystem by storm includes the Bitcoin blockchain, the Ethereum blockchain amongst others.

In this type of Internet, the users simply creates a single personalized account, thereby creating a public record on the blockchain for every transaction.

Key differences between Web 2.0 and Web 3.0

Web 2.0 is built using software applications like JavaScript frameworks and PHP amongst others for the client side and server side respectively while Web 3.0 is built using smart contracts - this enables the automation of token based transactions.
Web 2.0 operates on the concept of centralized system while Web 3.0 operates on distributed and decentralized system/ledgers.
Web 2.0 doesn't afford the users control over their data as a result of the centralized servers while Web 3.0 gives user the full control over their data.

For educational and engaging Blockchain content, visit;
https://blockgames.gg,
https://nestcoin.com,
https://zuri.team.

Thank you for reading!!🤗

Build a video player with React.

Adeola Fadeyi — Sat, 16 Oct 2021 21:27:09 +0000

The use of video content on webpages is becoming increasingly popular. Its importance cannot be overestimated as it engages users, and creates a lasting impression in just a few seconds.
It is for this reason that the steps involved in the creation of a video component using React will be discussed in this article.

The component supports YouTube and Vimeo to allow for the flexibility in its use by users.

Sandbox

We completed the entire project on Codesandbox, and you can fork the repo to run it.

CodeSandbox id="react-videoplayer-f62ej" title="React-Videocomponent"/>

Prerequisites/Installation

No advanced requirements are needed. However, a basic knowledge of React installation is required.

To create a React application, open the terminal window or command prompt and change the directory to the folder where you want to create the application.

Moreover, an online code editor which supports React can be used.

Run npx create-react-app react-video-player to create the application.

The above command installs the create-react-app package into the react-video-player folder of our application. The react-video-player can be given a different name, but should be in lower case.

Change directory to the application folder by running cd react-video-player command.

After the application has been created, install reactjs-media from a terminal window to install the application dependencies.

npm install reactjs-media

Start the application by running npm start.

Creating the video component

To structure the video player, the video component remains our primary interest. The video component of the reactjs-media involves an effortless process. To do this, the original code in the src/App.jsfolder is replaced with the snippet below.

import "./styles.css";
  //imports basic styling from the css file.
import { ReactVideo } from "reactjs-media";
  //imports the React video component the reactjs-media dependency.
export default function App() {
    //exports the default app into the index.js for rendering
    return (
    //defines the properties of the video component
    <div className="App" style={{ height: 500 }}>
      <h1>React video player</h1>
      <ReactVideo
        src="https://player.vimeo.com/external/527751333.hd.mp4? s=6c0db75ad52213d37e122ed4038c6150997e870e&profile_id=172&oauth2_t oken_id=57447761"
        autoPlay
        primaryColor="blue"
        poster="https://images.pexels.com/photos/7422113/pexels- photo-7422113.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
      />
    </div>
    );
    }

The audio component could also be created using a similar approach.

Conclusion

In this article, we went through the creation of a video player using a React component that supports YouTube and Vimeo. The application dependencies with the video component which is reactjs-media was installed through npm.

This article would not be complete without a mention of how this single page application can be authenticated with Auth0.
With Auth0, an authentication API would be integrated into the application in just a couple of steps. To find out how, visit https://auth0.com/docs/libraries/auth0-react.

In addition, the media and other image assets can be stored in the cloud with just a few clicks using Cloudinary. For a detailed overview, visit https://cloudinary.com/documentation/upload_images.

As the code was run in codesandbox, the images might need to be resized to fit the desktop screen, if it is going to be run from an offline code editor. To resize the images, follow the complete walkthrough on https://cloudinary.com/blog/cool_tricks_for_resizing_images_in_javascript.

DEV Community: Adeola Fadeyi