DEV Community: Ifeanyi Fredrick Okwuobi

Web 2.0 and Web 3.0 what's the Difference

Ifeanyi Fredrick Okwuobi — Sun, 06 Mar 2022 14:38:59 +0000

Only yesterday we were learning about the web and today we are learning that the web we knew or thought we knew about had a version and its called web 2.0 or is it web 1.0, only to find out we are headed for web 3.0 already and some of us just started getting a hang of this web 2.0 or is it web 1.0 wait what's the difference hmmmm.

web1 - this simply a read only phase of the Web.

The first generation of the World Wide Web existed between 1991-2004. It was also known as the read-only web. It enabled the broadcast of information and it allowed users to search for it and read it. It mostly consisted of static webpages, and there weren’t many content creators around. Although it was revolutionary for its time, interaction and functionality was rather limited.

Web2 – a stream of interaction

The current version of the Internet as we know it – less static and more dynamic. Web2 started to become popular in 2004, when the first Web2 conference was held. The system behind it aims to actively engage users, and the content itself is more user-generated.
The way we share and deliver information has been transformed with Web2 components like blogs, wikis and social media platforms. Take Facebook or Twitter as examples: users can not only read information, they can also share thoughts, perspectives and opinions by liking, sharing, tagging, tweeting etc.
Undoubtedly, there is a dependency on “Big Tech” companies to provide the infrastructure and services we need – a reliance Web3 hopes to remove. Web2 refers to the version of the internet most of us know today. An internet dominated by companies that provide services in exchange for your personal data.

web 3.0 – a stream of interpretation
Web3, in the context of Ethereum, refers to decentralised apps that run on the blockchain. These are apps that allow anyone to participate without monetising their personal data.Web 3.0 is the future, and a more intelligent, autonomous and open version of the Internet.
Computers will be able to interpret information in a way that is more similar to humans, and by using technologies like Blockchain, Artificial Intelligence (AI), Augmented Reality (AR) and Virtual Reality (VR), users will be given more personalised content and experiences.

Practical Comparisons

web 2.0 Twitter can censor any account or tweet Web 3.0 tweets would be untouchable because control is decentralised
web 2.0 Payment service may decide to not allow payments for certain types of work, while in Web 3.0 payment apps require no personal data and can't prevent payments
web 2.0 Servers for gig-economy apps could go down and affect worker income while in Web 3.0 servers can't go down they use Ethereum, a decentralised network of 1000s of computers as their backend

In a nutshell the differences between Web2 and Web3 is Web2 is dominated by companies while web3 is dominated by everyone.

Article on CSS Position and Display Properties

Ifeanyi Fredrick Okwuobi — Fri, 29 Oct 2021 18:57:00 +0000

What is CSS Position? What is Display Properties?

CSS Position:

This is property of CSS that decides how an Element targeted by a CSS Class, ID or HTML Tag is position in the overall HTML Document/ Page.

According to Mozilla Developer Network (MDN) The position CSS property sets how an element is positioned in a document, using one of the following properties: static, relative, absolute, fixed and sticky followed by the top, right, bottom, left and z-index secondary properties which determine

the final location of positioned elements.

This simply means that to position an element in CSS, we just need to first, target the HTML Element we wish to add the “position” property to add a style tag to it by way of adding a class or Id key to it or just its HTML name would do. NB: this would cause all other tags with the same name to by positioned also, hence we use a CSS tag to target the element and then add the style declaration “Position” to the element and set it to one of the following attributes position: static;position: relative;position: absolute;position: fixed;position: sticky; Finally set it to any the following attributes: - Top, right, bottom or left to set what position or location on the HTML page/Document it would stay at.

Now what do those attributes do?

Attributes:

Static: This is the default setting for HTML elements which states that the follow the normal flow of the HTML Document (Page) and in this state the “Top, bottom, left, right and z-index properties” do not have any effect whatsoever on the element position.

. element { 

       position: static; 

    }

Relative: This property works like a static property as it is positioned according to the normal flow of the HTML document and it does not affect the flow of other Elements, however, when a secondary property such as “top, bottom, right or left” is applied to the element it is positioned relative to its initial position I.e., it moves to another position based on the distance of where it was initially located.

. element { 

   position: relative;  

   top: 40px;  

   left: 40px; 

    }

Absolute: This property removes the Element from the normal flow of the document, meaning that the document provides no space for the element and it is positioned relative to a positioned ancestor element or parent container. For example, when the element is within another and that element is positioned with the relative, absolute, sticky, or fixed property then the element automatically calculates its position from that positioned parent. Else, it keeps looking upward through the ancestor chain until it finds one that is positioned and if it does not find, then it is positioned relative to the containing block which in this case may be the body of the HTML document.

. element { 

position: absolute;  

top: 40px;  

left: 40px; 

}

Fixed: this position property works exactly like position absolute; however, it takes its position from the position of the containing element depending the element’s position on the viewport and remains so and does not scroll with the rest of the HTML document. Consequently, it can be used to make navigation bars that remains fixed to the viewport and allows the user reach it when needed.

. element { 

position: fixed; 

}

Sticky: This property makes the element move normally with normal flow of the document however, when it is positioned with a secondary attribute like top, left, bottom or right it becomes positioned based on a scrolling parent or ancestor.

. element { 

position: -web-kit-sticky;  

position: sticky;  

top: 40px; 

}

Display Properties:

The CSS display Property is a key property of CSS that is used in the layout of HTML Elements, this particular property alongside other CSS Properties aid in the effective layout of HTML Elements without which it would a challenging time trying to create proper layouts for HTML Documents.

CSS Display Properties are numerous but there three(3) major Properties that account for the bulk of layout uses namely: Block, Flex and Grid. Consequently, the rest of the properties are achieved by combining a mixture of the main three (3) display properties. The Display Properties are attached to a HTML Document using the following syntax:

block: 

    display: block;  

display: inline;  

display: inline-block; 

Block-attribute:

Setting the display property of the element to block creates a type of block a round the element which makes other elements around it go down to next line, in order words the element generates a block element box, generating line breaks both before and after the element when in the normal flow.

Inline-attribute:

This attribute causes the element to allow other elements stay beside it. In order words, the element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space

Note: Browsers that support the two-value syntax, on finding the outer value only, such as when display: block or display: inline is specified, will set the inner value to flow. This will result in expected behaviour; for example, if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout. According to MDN(Mozilla developer Network)

Flex: 

    display: flex;  

display: inline-flex;

When the element gets the Display property it makes the element into a block element and its children following certain attributes namely:

justify-content 

align-content 

align-items 

align-self 

place-content 

place-items 

row-gap 

column-gap 

gap

The element behaves like a block element and lays out its content according to the flexbox model.

CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.

Syntactically,

          . box { 

            display: flex; 

            justify-content: space-between; 

          }

Grid: 

display: grid;  

display: inline-grid;  

display: flow-root;

The element behaves like a block element and lays out its content according to the grid model.

A grid is a set of intersecting horizontal and vertical lines defining columns and rows. Elements can be placed onto the grid within these column and row lines. CSS grid layout has the following features:

. wrapper {  

display: grid;  

     grid-template-columns: 200px 200px 200px;  

   }

This makes the wrapper container divide into 3 columns of 200px in size.

My Goals for HNGI8 for the next 8 weeks

Ifeanyi Fredrick Okwuobi — Mon, 16 Aug 2021 09:45:10 +0000

How to become an HNGi8 Finalist

I remember when I got the mail from zuri asking me to join the long awaited HNG internship!!! wow what a day it was, finally I get to ask hard questions of myself as to how far I have grown in this journey into the "dangerous" world of tech, of course I quickly registered and began the necessary preparations for completing this noble endeavor which includes prayers, lifting javascript weights on websites like freeCodeCamp, reading motivational books like The Secret , The Alchemist , repeating mantras like "with great power comes great responsibility" you know basic preparations. However, the truth was that HNG internships is not walk in the park, according to their website "The HNG Internship is an ambitious attempt to change the way education is done in Africa. It’s the bridge between learning to code, and becoming the best in the world." further research revealed that "The Internship is designed to surface the very best of candidates out of a large pool of participants. It is fast paced and challenging, and helps people learn how to work in teams, deal with pressure and quickly expand their knowledge.". Now, don't get me wrong, I am not trying to scare anyone I just want to remind myself why I am in this and how I intend to get to the end of this "rocky,dangerous but fun" journey with my head held high and my chest pushed out while standing at the front of the finish line to receive my HNGi8 T-shirt. Consequently, I am taking the following steps to ensure the HNGi8 finalist T-shirt fits perfectly with v-neck sef. They are :

Get better at Data Structures and Algorithms i.e really grind and solve at least one Algorithms question a day on any challenge platform like codewars, hackerrank and coderbyte.
Practice Just in Time Learning(JITL). what!!! you may ask, well this article by Ayomide Oyekanmi tells a story to show you why.
Be ready to learn anything, try anything and practice anything to complete any task.
Focus on getting from stage to stage
Make helpful friends, help others, socialize and complete the Internship.
Get better at using figma to design, start with this tutorial How to figma
Get better at using Git, start with this tutorial git
Get better at Javascript, start with this tutorial Javascript
Brush up on HTML using this tutorial HTML
Make sure the finalist T-shirt fits perfectly lol.

That's it and I know it would be a fun filled ride to the top.