DEV Community: Victor Nwoguru

WEB 2 VS WEB 3

Victor Nwoguru — Wed, 02 Mar 2022 19:19:53 +0000

INTRODUCTION

There is a lot that comes to mind when we talk about the web and how various devices communicate on the internet. The discovery of how the web works can be fascinating, especially for those with no background in computer science. More recently, there have been lots of talk about web 3 with buzzwords like blockchain, cryptocurrency, NFT, metaverse, smart contract, and so on; all of which leaves one with questions like “Is there a new internet?”, “What is web3 about?”, “Is this for everyone?”. In this article, I will be highlighting the major differences between Web 2 and Web 3.

The Beginning of things

The best way to understand where we are at is to know where we are coming from. If we want to differentiate Web 2 from Web 3, it then means that there must be Web 1. Sure, there was Web 1! Web 1 included static web pages which served content from the file system of servers, it did not offer any functionalities for interaction with the content, with few content creators and more content consumers.

Evolution of Web 2

Web 2 comprises of user-generated content, usability, and interoperability for end users. Its focus is on changes made in web page design and web usage. It encourages interaction and collaboration among users with peer-to-peer transaction, thus giving rise to ecommerce and social media platforms.

Features of Web 2

Free sorting of information, permits users to retrieve and classify the information collectively.
Dynamic content that is responsive to user input.
Information flows between the site owner and site users by means of evaluation & online commenting.
Developed APIs to allow self-usage, such as by a software application.
Web access leads to concern different, from the traditional Internet user base to a wider variety of users.

The Revolutionary Web 3

Web 2 being more sophisticated than Web 1 still had some setbacks such as security on the web, disclosure of personal data to “trusted” institutions who in turn use them to their unfair advantage because users voluntarily gave it to them in order to use their platforms/services. Web 2 gave all the power to these institutions because of its “centralised” model. Web 3 solves all of these problem; security, privacy, and it operates a decentralised system putting the users in control.

Features of Web 3

Web 3 leverages artificial intelligence for offering correct results at a faster pace alongside accessing real-time insights.
Web 3 also enables users to capitalize on the potential of 3D visuals and graphics.
Web 3 refers to the Semantic Web functionality. It implies that Web 3 could support understanding the meaning of words. As a result, machines and humans could easily find, share and analyze information in web 3.0.
You can also find the prominent trait of improved privacy and security in Web 3.
Web 3 focuses on the safeguards for user data and identity. Web 3 employs advanced authorization mechanisms through distributed ledger technologies and encryption for securing user identity and data.

All these features sounds interesting and it will be nice to explore Web 3 to have a first hand experience, right? Yes! I have been picking and reading up bits of these concepts on the internet for a while. Just recently, I discovered Block games ( a program where participants get to learn how to build for the most popular blockchains, then compete against others to build projects ), this program is organised by Zuri and Nestcoin. I look forward to leveraging on the information gathered so far and things I will get to learn on this program to build amazing Web 3 projects.

Follow me on twitter: vichukwu

Where To Find Free Resources To Jumpstart Your Software Development Career

Victor Nwoguru — Fri, 19 Mar 2021 11:33:49 +0000

The journey to becoming a software developer can be hard when you are not exposed to the right learning resources. The truth is, there are so many resources online, however, most of these resources are not beginner-friendly or properly structured to guide learners. Someone asked me recently where he could find free learning resources online to start learning and honing his software development skills. His request inspired me to write this article to help as many that would be in need of this. I would be highlighting a few platforms that have helped many beginners over the years navigate the learning hurdles to becoming professional developers.

W3Schools

W3Schools is a good place to start with as a beginner. They have tutorials on HTML, CSS, JavaScript, Python, Java, C++, C#, R, SQL, PHP, ASP, Node, Artificial Intelligence, Machine learning and more. There are also tests and exercises to practice what you have learnt.

Visit w3school

FreeCodeCamp

This is another great platform that has helped a lot of people jumpstart their careers in software development. You can see this fact from the testimonies on their website. The amazing thing about FreeCodeCamp is that you get a certificate when you finish a course. You learn at your pace and you get real-world experience when done.

Visit FreeCodeCamp

Odin Project

Odin project provides you with a structured full stack curriculum that includes HTML, CSS, JavaScript, Git, Node, Databases, Ruby and Ruby on Rails. You will also be able to connect with other students and build a portfolio of projects.

Visit Odin Project

YouTube

YouTube is a great place to learn anything you desire to learn. There are awesome, experienced and well-grounded tutors dishing out tutorials week in week out on YouTube that you can learn from. A few of them are;

Travsey Media - Full stack Web Development

Kevin Powell - Frontend Development

FreeCodeCamp - Software Development, Machine Learning, AI, Gaming and more.

Wrapping Up

I hope this article helps someone looking for this information. Even as experienced devs these platforms are also helpful for learning new skills and refreshing the mind with basic concepts.

Please feel free to add more platforms in the comment section. Peace ✌️.

CSS VARIABLES: USAGE AND BROWSER COMPATIBILITY HACK

Victor Nwoguru — Mon, 04 Jan 2021 15:46:31 +0000

You probably must have used CSS variables before now or maybe not. If you have used CSS variables before, you could have experienced some browser compatibility issues especially when you have to support users using Internet Explorer. I know, I can relate, it can be a pain😢 but you have to deal with it as a dev. In this article, I intend to introduce CSS variables and also share the solution I found for browser compatibility issues when using CSS variables. Whatever your level of acquaintance with CSS variables is, I believe you would have fun reading and learning while I share what I have learnt.

Before I proceed, I will like you to note that the terms CSS variables and CSS custom properties/custom properties are synonymous, and would be used interchangeably throughout this article.

CSS Variables Explained

The concept of variable in CSS is similar to the concept of variable in many programming languages. CSS variable is a way of storing CSS values for reuse elsewhere on a stylesheet. It makes it easier to apply the values to a property and also change the values without having to look for where they are on your stylesheet, thus, making your code clean and understandable.

Declaring A Variable

The naming concept for a custom property is to begin a property name with a double hyphen -- and a property value in a ruleset.

:root {
    --primary-color: #c4c4c4;
}

The common practice is to use the :root pseudo-class which is the root element of a tree representing the document, thus, making it globally available. However, you can choose to scope the custom property.

.hero {
    --primary-color: #c4c4c4;
}

In the above example, --primary-color is scoped to the hero class. Scoping a custom property limits its availability to CSS selectors other than the one it was declared for.

Usage

Now that we are done declaring the variable, the next thing would be to use the already declared variable. To use the variable, you need to add the custom property name inside the var() function for use as a property value.

p {
    color: var(--primary-color); 
}

div {
    background-color: var(--primary-color);
    border: 1px dashed var(--primary-color);
}

Fallbacks can be created in case something goes wrong as a result of your browser not being able to find the custom property.

div {
    background-color: var(--primary-color, #c4c4c4);
}

In the above example, the color code #c4c4c4 after the comma is the fallback value that would be used if --primary-color is not available.

Fixing Browser Compatibility Issue

On caniuse.com, the browser that doesn’t have support for var() is Internet Explorer, so this hack is for (IE) Internet Explorer. The browser compatibility issue can be resolved with the polyfill created by @nuxodin.

Just add this script tag to your HTML

<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\/script>');</script>

...and that’s it, it’s done 🎉. The compatibility issue is fixed. This support is for IE11.

Bonus

There’s another solution created by @jhildenbiddle, this is not a polyfill but a ponyfill.

To install it, add this script tag to your HTML

<script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2"></script>

Or use npm

npm install css-vars-ponyfill

then import it

import cssVars from 'css-vars-ponyfill';

Its usage

Because it's a ponyfill, a function must be called in order for processing to take place.

/* In your js file */

cssVars({
  rootElement   : document
});

…this does the magic✨. This supports IE 9+

Thanks for taking out time to read this article. I hope it has been helpful? When working on your next project and you are not using any preprocessor like Sass or Less, you can always use CSS custom properties/variables and the highlighted polyfill and ponyfill to take care of the browser compatibility issue. See you later✌️.

Reference

Stack overflow