DEV Community: Charles Freeborn

A high level overview of Web 3.0

Charles Freeborn — Thu, 23 Jun 2022 13:19:47 +0000

Introduction - The internet, society, and our lives

The internet has undoubtedly played a significant role in our lives and communities over the past three decades. We can even argue that the internet is one of the greatest inventions of mankind. For it has changed (and will continue to change) the course of humanity forever.

Think about it for a moment, this article was written from Warri - a city in Nigeria and can be read from anywhere in the world. This is possible, thanks to the internet that has enabled people from across villages, towns, cities, countries, and even continents to share information in real-time, carry out economic activities and rendering of services to advance humanity.

We can’t even imagine what life will be like if we didn’t have access to the internet. Yet, with all of the tremendous impact of the internet in our lives and society, its history is relatively young.

The early years of the internet

Web1.0 - Read-only

At the most fundamental level, we can say that the internet is a global network of connected computers. And there are applications that run or are built on top of the internet. One of these applications is the web.

The early internet code-named “internet 1.0” or “Web1.0” existed in the period between the 1990s and early 2000s. These internet era was characterised by decentralization.

Web 1.0 was built on top of open protocols like HTTP, SMTP, FTP, IRC and SMS, which anyone can then build on top of.
The vision for the internet (open protocols) - the cyberspace was to allow anyone to build and contribute to the web. And thus, advancing the course of humanity.

So at the core of web1.0 was community-governance (open protocols - HTTP, SMTP, FTP), decentralized networks, and being able to contribute and create contents for the web, if you had the technical knowledge.

Web 1.0 was known as the read-only web because few individuals (or corporations) created the contents and the end-users only consumed the created contents - static read-only content. This is the premise on which the term “static web” is hinged.

But web 1.0 had some limitations. Some of these limitations included:

Stateless - Web 1.0 didn’t capture user data or state. This meant that if you a user visited a website, the website had no way of knowing that the user had previously visited it.
No standard protocols. Today, we have different protocols that power the web - think for example payment gateways, search, social media. In Web 1.0, there were no standard protocols or technologies to make these possible.
Strong technical knowledge/expertise - The regular people were cut off to a large extent in web 1.0. To contribute to web 1.0 even if it meant building a website and sharing content, required a strong technical knowledge.

In the quest to solve some of the limitations and challenges of web 1.0, web 2.0 was born.

Web 2.0 - Read/Write

Web 2.0 was born or created to solve some of the challenges and limitations of web 1.0. One of these challenges was the capturing of “state” or user-data. In the Web 1.0 era, websites were unable to capture state or user data or even knowing if a user had previously visited the website.
So as a web master, it was difficult to know the demographic of your end users, meaning that you couldn't build products and render services targeted at these end-users.

The first attempt at solving this challenge of capturing state and user data was the HTTP cookie, which was created by Lou Montulli at Nescape. With HTTP cookie, a web master can tell if a user had visited a website previously.

And so with user state being captured, we transitioned into Web 2.0.

The Web 2.0 era span the early 2000s into the current period.
Web 2.0 is often referred to as the read/write web. And here's why - technologies (products/platforms) were built to make it easy for users to create content and interact with the web in real time. In web 2.0, you don't need to have strong technical knowledge to create contents and share these contents.

Organizations already have the technologies setup for you to do the content creation, all you needed was to sign up as a user and use the platform. What's more, you could also interact with the contents of other users - read/write.
At the fore-front of web 2.0 is? You guessed it right - social media.

Value was created in Web 2.0 and organizations made money from user data and building of products, services, and technologies that are currently powering the modern web.

Examples of these products built on top of Web 2.0 will include Email (recall SMTP), Cloud storage and transfer of files like DropBox and Drive (recall FTP), Slack (recall IRC).
And then for examples of services (and technologies) built on top of Web 2.0, include Payment platforms and gateways like PayPal, search like Google, social media like Facebook and Twitter, e-commerce like Amazon, and eBay.

As products, services, and technologies were built on top of user data, some of these organizations became extremely valuable and in the long run, powerful. In making our usage of the web easy and our lives better, there was a downside to this - our usage of the web, the internet, data and how we now see the world is largely controlled by these mega corporations.

Often referred to as state aggregators, these organizations became the dominant players of the web 2.0 era.

What’s more about web 2.0, is that the purpose for which the internet was created now seem to be defeated. For example, while Web 2.0 became the dynamic web, wherein everyone with access to the internet can create content and interact with the web, giving rise to the term "read/write" web, the monetary reward went to the corporations.

So think of Web 2.0 as a phase where users created content and corporations profited out of the users content and even used the user's data to build products (and sell ads) tailored to the users via their captured data.

We often refer to Web 2.0 as read-write, since it gave users the power to read and publish contents of their own.

But in spite of the major wins and advancement of web 2.0, there were major challenges. One of these is the movement away from the main reason while the web was created in the first place - open cyberspace where everyone could contribute without control or gatekeeping from powerful individuals, organizations, and the government.

The limitations and challenges of Web2.0

Centralization is at the core of Web 2.0.

And here’s why - most internet traffic (web and app usage) goes through the network of a few large corporations. And by relying on these few large corporations to host all the content of the internet makes it possible for these companies to determine the course of our lives on cyberspace like controlling speeches, the choices we make based on the contents being fed to us, how we now use the world, and even shutting down entire services by the government.

Here are some of the challenges and limitations of web 2.0, listed in no particular order:

Privacy
Power and Control
Monopolistic behavior
Ownership
Monetization of apps

Web 3.0 - Read/Write/Trustless

The original vision of the internet was for everyone to build on the network without fear of it being shut down or controlled across national borders. The internet was built originally to support a distributed system - a network without centralization.

Web3 is built on stateful protocols like Ethereum.

At the core of web3 is the idea of consensus protocols and standards with money baked in.

Web3 is built for interoperability. Think for a moment about DeFi - Decentralized Finance - which is attempting to build a new financial system without central financial institutions. This is one of the most promising layers being built on Web3.

Web 3.0 is hinged on decentralization - herein, ownership is shared and isn't placed on a single individual, and/or corporation. And at the core of decentralization is community participation. Think DAOs - Decentralized Autonomous Organizations.

From the lens of monetary value accrued, decentralization is about moving money around to the people who create and the people who consume, and to the people maintaining and improving the protocol - network.

The three fundamental principles to understanding how IPFS works

Charles Freeborn — Wed, 10 Nov 2021 16:49:51 +0000

Introduction - What is IPFS?

The InterPlantery File System - IPFS - is a peer-to-peer distributed system for storing and accessing files, websites, applications, and data.

IPFS is designed to power the Distributed Web - DWeb.

As a peer-to-peer protocol, IPFS asks lots of connected computers on the network to share information that a user requests for, via the file’s (website, app, or data) content. In the ecosystem, using the content of a file to serve user’s requests is known as content addressing - which we will discuss in this article.

But before we get to IPFS and content, perhaps we first take a look at the centralized web - its limitations and challenges, and how IPFS is at the forefront of powering the Distributed Web and solving the challenges of the centralized web.

It is worth noting that by using IPFS to download files from another system, your computer also becomes a distributor. And herein is one of the strengths of using IPFS as a protocol - your system becomes a part of a decentralized network, helping to spread and distribute information.

Challenges and limitations of the centralized web

The web today as we know it is highly centralized.

“Power” is held in the hands of a few powerful corporations. This implies that most of the things we do on the web, for example making a post or even sharing something online is owned by someone else - the powerful corporation.

To a very large extent, a centralized web is driven by a data economy - the utilization of the content created by users and using it against these users.

A centralized web leads to the absolute control of information, how we see information and exploitation via the taking of advantage of how we now perceive things.

How does IPFS works? A look at the underlying concepts

From a high level perspective, IPFS works by finding the information you are looking for by its content. This is known as content addressing and is achievable, through the Content Identifier - CID. We will discuss CID in the next section.

In better understanding how IPFS works, we will take a deep dive into the underlying principles behind IPFS.

The three fundamental principles to understanding how IPFS works

Unique identification via content addressing:

One of the key differences between the centralized web and the decentralized web is the identification and retrieval of data/information on each. On the centralized web, location addressing via a URL (or URI) is used to identify and“locate” data.

On the flip side, the decentralized web uses content addressing through a unique content identifier - CID - to retrieve data from various sources (peers and/or nodes).

A content identifier - CID is a particular form of content addressing developed for IPFS. It is a single identifier that contains both a cryptographic hash and a codec, holding information about how to interpret data. And with cryptographic hash, anyone using the same algorithm on the same data will get the same hash. For context, most content in IPFS is hashed using the sha2-256 algorithm.

The content identifier doesn’t indicate where the data is stored. It however, forms a kind of address based on the underlying content of the data.

Content linking via Directed Acyclic Graphs (DAGs):

Data is accessed from peers in decentralized web, and not from a central authority. From a high level overview, a graph is a mathematical abstraction that is used to represent relationships among a collection of objects. We use node to refer to an object in a graph and edge to refer to a relation among objects.

DAG is a compound word apparently and so it seems appropriate to lay the foundation for what it means by breaking them down.

Directed Graphs: A graph is said to be directed if each edge has some sense of direction. The connections between nodes only correctly associate in one direction, and a single-head arrow indicates this direction. We use genealogical terms like ancestor, descendent, parent, and child to refer to nodes in a directed graph.

Acyclic Graphs: An acyclic graph has no loops in the graph. This means there is no way to navigate from that node back to itself along the graph’s edges.

Directed Acyclic Graphs - DAGs: A graph that is both directed and acyclic is called, you guessed it right? A directed acyclic graph - DAG.

Content discovery via distributed hash tables (DHTs)

A distributed hash table - DHT is a distributed system for mapping keys to values. In IPFS, the DHT is used as the fundamental component of the content routing system and acts like a cross between a catalog and a navigation system.

DHT maps what the user is looking for - a CID - to the peer that is actually storing the matching content.

There are three types of key-value pairings that are mapped using DHT:

Provide records - map a data identifier to a peer that has advertised that they have that content and are willing to provide it for you. Used by IPFS to find content, IPNS over PubSub to find other members of the pubsub topic.
IPNS records - Map an IPNS key - the hash of a public key - to an IPNS record.

Peer records - map a peerID to a set of multi addresses at which the peer may be reached. Used by IPFS when we know of a peer with content, but do not know its address and manual connections for example: ipfs swarm connect/p2p/Qmxyz…

Further Learning Resources

Thanks for reading and if you find this article insightful, please share across social media.

Here are some learning resources to help you in getting started with IPFS.

ProtoSchool
IPFS YouTube Channel
IPFS docs

Do note that this article was originally written on the IPFS blog.

What is CSS? A simplified introduction to CSS

Charles Freeborn — Thu, 18 Jun 2020 20:47:00 +0000

Image by Pankaj Patel on Unsplash

What is CSS - Cascading Style Sheets?

In the absence of styling, browsers interpret HTML in its default state - color of texts will be black, background will be white, headings will be bigger, as expected over regular texts.

CSS - Cascading Style Sheets - is the language for handling the look and feel of web pages. CSS handles how web pages appear to users, that is the presentation and accessibility of the document to users.

CSS can be used for basic styling of texts, to complex effects like animations. For example, CSS can be used to define color, font-size, and/or background of websites created in a markup language (HTML) document.

CSS Syntax

CSS syntax takes the form of a rule-based language. You define rules stating how styles should be applied to particular element(s) on a web page.

The syntax consist of selector(s), and property: value; pair which is referred to as declaration.

selector {property: value;}

For clarity and ease of reading, it is recommended to write your CSS like so.

selector {
          property: value;
         }

We can have more than one property: value; pair in a CSS rule. And this will we call a declaration block.
Let's assume that you want the heading of your web page to be of text blue and a font size of 6em. You will achieve this in CSS, writing the rule as a declaration block, like so.

h1 {
    color: blue;
    font-size: 6em;
   }

And when we say CSS is a rule-based language, what do we mean? It implies that we start with a selector and in the code sample above, the selector is the HTML element <h1> that the rule will affect. The curly braces {} holds one or more declarations. The property is the CSS rule, whilevalue is the value to be assigned to the property - how we want the property to be affected.

And for the code sample above, our property: value; declaration is respectively color: blue; and font-size: 6em;.
Properties in CSS, accept values that are consistent with them. A color property will accept or take color values.

Comments in CSS

Comments - non executable piece of code - in CSS can be written like so.

/* This is a single line comment in CSS */


/* 
This is also a multi-line
comment in CSS
*/

Whatever is written inside of /* */ is noted as a comment and will not be interpreted by CSS.

And some of the reasons, why we use comments in programming is for clarity of purpose, for our future reference or other developers who may be reading our code or working on the project with us.

Applying CSS in a web application - HTML document

The earlier part of this article focused on defining CSS and its syntax, but CSS is meant to work closely with markup documents like HTML.
So how do we apply CSS to a web app - HTML document?

1. Inline Style

A single HTML element can be styled, by applying CSS inside the style attribute of the HTML element.

Let's assume that you want the heading in your web page to be a warning text with the color of red. You can use inline style to achieve that like so.

<!DOCTYPE html>
<html lang = "en">
<head>
   <meta charset="utf-8">
   <title>CSS Example - Inline Style</title>
</head>
<body>
   <h1 style="color: red;">Inline Style</h1>
   <p>It is not recommended to use CSS like this. That is inline styling</p>
</body>
</html>

Here is the code sample in Codepen.

It is not recommend to use CSS like this because of the difficulty in maintenance of the web app, as a required change to the style, will require a lots of CSS edits on the page.

2. Internal (Embedded) Styles

In internal styling, both HTML and CSS is found in a single page.

You apply CSS to an HTML document by putting the <style> element, in the <head> of the HTML document.
Here is how.

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>CSS Example - Internal Style</title>
<head>
 <style>
   body{
     width: 960px;
     margin: auto;
     background: lightblue;
   }

   h1{
     color: blue;
   }
 </style>
</head>
<body>
  <h1>Internal Styling Sample</h1>
  <p>You can also style your web page using internal styling as shown.</p>
</body>
</html>

Here is the code sample in Codepen.

Internal styling is better than inline style, but the drawback for this method, is working on a web app with multiple pages - the developer will have to style every page associated with the app internally, which comes at a high cost of maintaining the site.

3. External Styles

Applying the principle of separation of concern of the core web technologies - HTML, CSS and JavaScript - where HTML is for content/structure, CSS for presentation and JavaScript for interactivity/behaviour with the user, we can use this principle to style multiple web pages in an app, using a CSS file.

CSS file ends with the .css extension.

You apply a .css file to an HTML document using the <link> element like this, <link rel="stylesheet" href="main.css"> and this will be in the head of the HTML document.

Here is an example, first the HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>What is CSS?</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <h1>External Styling Sample</h1>
  <p>This is a sample page styled using external style sheets.</p></body>
</html>

Next the .css file.

body{
  margin: auto;
  width: 960px;
  background: #C9F3F3;
}

h1{
  color: #9B59B6;
}

p{
  color: #9B59B6;
}

Here is the code sample in Codepen.

The above code sample, assumes that the main.css file is in the same directory (folder) as the HTML file. Do note that the href attribute of the HTML file must match the path of the .css file, for the linking.

Conclusion

This is the first in the series of articles, I hope to write, covering the core fundamentals of CSS.

And if you find this article interesting, please share.

This article was first published on my blog

You can find me on Twitter