Forem: Adetutu Gbangbola

My Journey with the Ethereum Writing Cohort

Adetutu Gbangbola — Sat, 10 Jun 2023 20:05:34 +0000

Introduction:

In early May, while casually scrolling through Twitter, a post by a friend caught my attention. They had just signed up for the Ethereum Writing Cohort, a program designed to enhance writing skills and encourage consistency. As someone who loves writing but occasionally grapples with inconsistency, I saw this as an opportunity to improve myself. Reflecting on my sporadic writing habits, I realized the importance of honing my skills and maintaining a consistent writing practice.

The Structure and Process:

The Ethereum Writing Cohort is a three-week program designed to foster consistent writing habits and skill improvement. Each Friday, participants propose article topics on the Ethereum Discord channel. The following Wednesday, participants submit their written articles and share the links on Discord for others to read, provide feedback, and engage. On Thursdays, a one-hour Zoom meeting is held, facilitated by Grant Nissly, to review the week's progress. During the meeting, participants have 20-minute breakout sessions with 2-3 people to exchange feedback and suggestions on their respective articles.

Key Takeaways:

Participating in the Ethereum Writing Cohort provided me with invaluable insights and skills. Here are the key takeaways from my experience:

Gaining Confidence: Interacting with fellow writers and receiving feedback from them helped boost my confidence in my writing abilities. It reminded me that writing is a continuous learning process.

Learning from Others: Interacting with amazing writers from diverse backgrounds exposed me to various writing styles and techniques. Through observation and discussion, I discovered new ways to improve my own writing.

Leveraging AI: One of the most valuable lessons was learning how to utilize AI tools to improve my writing. From fixing grammar to generating concise paragraphs, I discovered how AI could enhance the quality of my work.

Embracing Vulnerability: The program empowered me to embrace vulnerability when sharing my work. By consistently posting my articles and welcoming constructive feedback, I developed the courage to expose my writing to others, knowing that growth comes from being open and receptive to different perspectives.

Conclusion:

By the end of the program, I had written three articles on Web3. This accomplishment earned me a POAP NFT and reinforced my motivation to continue writing. I discovered the importance of embracing imperfection and remaining open to feedback. Notably, one of my articles on peer-to-peer interactions in Web3 garnered significant attention. I would like to express my gratitude to Ethereum community and Grant Nissly for facilitating this inspiring program. Grant's daily motivational emails and reminders played a pivotal role in keeping me motivated and focused on meeting deadlines. I highly recommend the Ethereum Writing Cohort to anyone seeking to improve their writing skills and foster growth in their writing journey.

Exploring Tech Paths: Discovering Exciting Possibilities

Adetutu Gbangbola — Sat, 03 Jun 2023 20:55:41 +0000

Table of Contents:

Introduction
Understanding the Diverse Fields in Tech
The Search for the Right Tech Path
A Case Scenario: Linda's Journey
Actionable Advice for Exploring Tech Paths
Success Story: Jane's Incredible Journey
Conclusion

Introduction:

Hey there! Have you ever considered a career in tech? It's an incredible field with endless opportunities and constant innovation. Nowadays, it seems like everyone wants to dive into the world of technology. But here's the thing: with so many paths to choose from, it's easy to feel overwhelmed and confused. Trust me, you're not alone. That's why I'm here to help you understand the diverse options in tech and guide you in finding the perfect fit for you.

Understanding the Diverse Fields in Tech:

Hey, let's dive deeper into the fascinating world of tech! Did you know that the demand for computer and information technology jobs is expected to grow by 11% from 2019 to 2029, according to the U.S. Bureau of Labor Statistics? That's much faster than the average for all occupations. This incredible growth is driven by the increasing reliance on technology across industries. It means there's a huge need for skilled professionals who can develop, implement, and support these technologies.

Now, here's something interesting to break free from the misconception: tech isn't all about coding. Sure, coding is important, but trust me, there's a whole universe of non-coding paths waiting to be explored! So, if coding isn't your thing, don't worry. There are plenty of exciting opportunities in tech that don't involve coding. It's a vast and diverse field that offers something for everyone.

Picture this: we have the amazing field of design, where creative minds work their magic to create stunning web pages and layouts that captivate users. They bring art and technology together to craft visually appealing and user-friendly experiences.

Then, there are the data analysts, the detectives of the tech world. They dive headfirst into mountains of data, crunch numbers, and uncover valuable insights that help businesses make informed decisions. They're like modern-day treasure hunters, seeking patterns and trends hidden within the data.

Now, let me introduce you to the superheroes of product management. They oversee the entire journey of creating and launching amazing tech products. From gathering requirements to coordinating with developers, they're the ones who ensure that everything runs like a well-oiled machine.

So, my friend, let me assure you that the tech world is an adventure waiting to happen. It's a constantly evolving landscape, and there's always something new to discover. Whether you find your passion in coding, design, data analysis, product management, software engineering, systems administration, or any of the countless other paths, just know that the possibilities are endless.

The Search for the Right Tech Path:

Now, let's talk about finding your dream tech path. It's crucial to do your homework and really dig into the different options available. Take your time and consider your interests, strengths, and long-term career goals. And guess what? Tech isn't inherently hard or easy—it all depends on what you're passionate about. So, choose your "poison," as they say, and embrace the path that truly excites you. Remember, this is your journey, and you have the power to shape it.

A Case Scenario: Linda's Journey:

To make things more relatable, let's dive into Linda's tech journey. Linda started as a newbie in software development. She dedicated three whole months to learning the ropes. But as she encountered bugs and faced challenges, doubts started to creep in. Linda began questioning if front-end development was the right fit for her. So, she shifted her focus to UI/UX design. After two months of learning, she realized that designing and coming up with unique templates wasn't as easy as she initially thought.

But Linda didn't give up. She then turned her attention to product management, thinking it might require fewer technical skills. She spent two months learning the ropes of gathering requirements, communicating effectively with stakeholders, and managing projects. However, she soon discovered that product management came with its own set of complexities and challenges.

Linda's journey teaches us an important lesson. It's crucial to thoroughly research and reflect on your chosen tech path. Remember, no path is simple or free of challenges. By evaluating your strengths, passions, and willingness to adapt, you can make an informed decision that aligns with your goals and aspirations.

Actionable Advice for Exploring Tech Paths:

Self-Reflection and Assessment: Start by evaluating your interests, strengths, and long-term career goals. Consider what aspects of technology appeal to you the most and what skills you enjoy using or developing.

Research and Exploration: Once you have a general idea of your interests, dive deeper into the specific fields and roles within the tech industry. Use online resources, such as career websites, industry blogs, and tech forums, to gather information about different paths. Explore job descriptions, required skills, and day-to-day responsibilities to get a better understanding of what each role entails.

Networking and Informational Interviews: Connect with professionals who are already working in the tech field. Attend industry events, meetups, and conferences to expand your network. Reach out to individuals for informational interviews to learn more about their experiences and gain insights into different tech paths. This firsthand knowledge can provide valuable perspectives and help you make informed decisions.

Online Courses and Tutorials: Take advantage of online learning platforms, such as Coursera, Udemy, or LinkedIn Learning, to explore various tech subjects. Enroll in introductory courses or tutorials to get a feel for different topics. These platforms often offer free or low-cost options, allowing you to experiment without a significant financial commitment.

Internships and Volunteering: Consider internships or volunteer opportunities in tech-related roles to gain practical experience and exposure to different areas. These opportunities can provide valuable hands-on experience and help you determine if a particular path aligns with your interests and skills.

Continuous Learning and Adaptation: Keep in mind that technology is constantly evolving, and new opportunities may arise over time. Stay open to learning and adapting as you gain more experience and knowledge. Embrace a growth mindset and be willing to pivot or explore new paths if your interests change or new opportunities emerge.

Success Story: Jane's Incredible Journey

Let me tell you about Jane, an amazing person who found her true calling in the tech industry. She began her career as a data analyst, using her love for numbers and problem-solving skills to excel in the field. But Jane didn't stop there.

Driven by curiosity, she delved into the world of machine learning and artificial intelligence. Jane immersed herself in courses, experiments, and the latest advancements. Her passion and determination paid off as she became a skilled machine learning engineer.

But Jane's story doesn't end there. She took a leap of faith and started her own tech startup, leveraging her expertise to create an innovative software solution. Her startup gained recognition and funding, making a lasting impact in the industry.

Jane's journey proves that success in tech is within your reach. By embracing opportunities, continuously learning, and staying true to your passions, you too can achieve remarkable things. So, get ready to embark on your own incredible journey in the tech world!

Conclusion:

In the vast world of tech, finding your perfect fit is the key to a fulfilling career. Don't rush into a path without exploring the possibilities and understanding your own interests. Take your time, do your research, and trust yourself. Tech offers an abundance of exciting opportunities, and by choosing wisely, you can embark on a rewarding journey. So, let's find your dream tech path together and pave the way to a successful and satisfying career!

Exploring Peer-to-Peer (P2P) Networks in Web3

Adetutu Gbangbola — Wed, 31 May 2023 20:31:35 +0000

Table of Contents:

Introduction
What exactly is web3?
Skepticism and Fear Towards P2P
Understanding P2P in Web3
Advantages of Using P2P Networks
Limitations of P2P
Conclusion

Introduction:

Hey there! Have you ever felt the rush of excitement mingled with a twinge of fear when stepping into something new and revolutionary? Well, that's exactly how I felt when I first stumbled upon the incredible world of peer-to-peer (P2P) networks in Web3. I couldn't resist the urge to share my journey with you, from my initial skepticism to a deep understanding of the potential and advantages that P2P networks offer.

What exactly is web3?

Introducing you to the fascinating world of Web3. Imagine a digital landscape where you have more control and ownership over your online interactions and assets. That's exactly what Web3 aims to achieve.

In the traditional web, companies and centralized platforms have significant power over data, transactions, and digital identities. But with Web3, the power shifts to you, the individual. It's all about decentralization and putting you in the driver's seat.

Skepticism and Fear Towards P2P:

Imagine this: I was navigating the exciting world of cryptocurrencies, with its exhilarating investment successes and unfortunate encounters with scams. That's when I stumbled upon Web3, a game-changing decentralized system that aimed to revolutionize our interactions with assets. The concept of P2P networks caught my attention - the idea that we could bypass intermediaries and directly connect and transact with others. But amidst my excitement, I couldn't help but feel a tinge of skepticism. What if someone disappeared with my hard-earned money? Who would I turn to for help without a central authority overseeing everything? It's only natural to have these concerns, but as I dive deeper and explored the intricacies of P2P networks, my perspective underwent a remarkable shift.

The beauty of P2P networks lies in the thoughtful measures put in place to address these worries and ensure the safety of transactions. Let me shed some light on this and provide you with concrete examples that will help build your confidence in the power of P2P networks.

Understanding P2P in Web3:

Let me break it down for you. P2P networks are all about direct connections and interactions, cutting out the need for intermediaries in the traditional financial system. No more relying on third parties to handle our assets; we're in control. Web3, with its decentralized nature, empowers us to access and manage our assets anytime, anywhere. It's a revolutionary shift that aligns with the principles of transparency, security, and efficiency. By utilizing blockchain protocols like Ethereum, P2P networks bring the power of decentralization to the forefront.

Use Case Scenario: Joe's Journey into P2P Networks

Joe, an adventurous soul, decides to explore the power of P2P networks in Web3. He wants to convert his crypto assets into fiat currency, so he joins a reputable P2P platform.

Excited yet cautious, Joe connects directly with a buyer on the platform. They negotiate and complete the transaction securely. Along the way, Joe realizes the advantages of P2P networks: full ownership, privacy & lots more.

Advantages of Using P2P Networks:

Now, let's dive into the real magic that P2P networks unleash:

Full Ownership: Imagine having complete control over your assets, with the freedom to make transactions.

Meet Sarah, a freelancer who often works with international clients. In the traditional banking system, she would have to wait for business hours and navigate through complex procedures to receive payments. However, Sarah embraces the power of P2P networks. She uses a decentralized payment platform that allows her clients to directly send her payments in cryptocurrencies. With full ownership of her assets, Sarah can access and manage her funds instantly, without relying on intermediaries. She enjoys the flexibility of accessing her earnings anytime, anywhere, and can convert them into her preferred fiat currency whenever needed.

Privacy: P2P networks empower you with the ultimate privacy. No one stands between you and your assets.

Take a look at Michael, a passionate art collector who values his privacy. Instead of relying on traditional auction houses, Michael explores P2P marketplaces in the art world that leverage Web3. He discovers a decentralized platform that allows artists to directly connect with collectors. Here, Michael can discreetly browse, negotiate, and purchase artworks without revealing his identity. The privacy offered by the P2P network ensures that Michael can indulge in his passion without compromising his personal information or worrying about unauthorized access to his financial transactions.

Enhanced Security: Forget about sleepless nights worrying about fraudulent activities. P2P transactions are fortified with advanced encryption and cryptographic algorithms, making them incredibly secure.

Imagine Emma, an entrepreneur looking to expand her business globally. To secure funding for her venture, she turns to a P2P lending platform operating on Web3 principles. With encrypted transactions and smart contract technology, the P2P network ensures the security of her loan agreement. Emma's business plan and financial data remain confidential, guarded against tampering or unauthorized access. The transparent and immutable nature of the blockchain underlying the P2P network provides Emma and her lenders with increased trust and reduces the risk of fraud.

Cost-Free Transfers: Who wants to pay unnecessary fees when there's a better alternative? With P2P networks, you can say goodbye to those extra costs. Embracing decentralization means cutting out the middleman and enjoying seamless, cost-free transfers.

Let's follow Mark, a frequent traveler who needs to send money to his family abroad. In the past, he would have relied on traditional remittance services that charged substantial fees for international transfers. However, Mark decides to leverage a P2P money transfer platform in Web3. By using cryptocurrencies, Mark can send funds directly to his family's digital wallets without incurring any additional costs. The decentralized nature of the P2P network eliminates the need for intermediaries, enabling Mark to make cost-free transfers, regardless of geographical boundaries.

Takeaway

In these scenarios, we witness individuals leveraging the advantages of P2P networks in various real-life situations. They experience the power of full ownership, privacy, enhanced security, and cost-free transfers, which not only simplify their financial interactions but also provide them with greater control and peace of mind.

Limitations of P2P

While P2P networks offer advantages, such as the absence of intermediaries, they also face certain challenges. One of the challenge is the lack of a centralized authority. This means that there is no single entity overseeing transactions and resolving disputes. For example, if a participant engages in fraudulent activities or conflicts arise between users, it can be difficult to address these issues effectively.

Another challenge is related to the user experience. Non-technical or average users may encounter difficulties in accessing the P2P network and understanding concepts like security keys. These technical complexities can make it harder for them to navigate the network and utilize its functionalities. For instance, someone unfamiliar with security keys might struggle to secure their transactions or protect their personal information effectively. These challenges can hinder the overall usability and accessibility of P2P networks for non-expert users.

Conclusion:

P2P networks in Web3 offer incredible advantages, including full ownership, privacy, enhanced security, and cost-free transfers. While concerns exist about the lack of centralized authority and technical complexities, embracing P2P networks empowers individuals to take control of their digital interactions and assets. Let's embark on this exciting journey together and shape the future of online interactions with P2P networks in Web3.

Understanding Token Contracts in Blockchain For Non-Techie

Adetutu Gbangbola — Wed, 24 May 2023 20:49:17 +0000

    * Introduction
    * [Chapter 1](Tokens: Digital Assets on the Blockchain)
    * [Chapter 2](What are Token Contracts?)
    * [Chapter 3](The Rise of Malicious Tokens)
    * [Chapter 4](Understanding Token Value)
    * [Chapter 5](Case Scenario: Dealing with a Malicious 
      Token)
    * [Chapter 6](Conclusion and Call to Action)

Introduction
Hey there! The world of blockchain is expanding at an incredible pace, and it's got people buzzing with curiosity. But let's be honest, all the jargon and techy terms can make it feel like diving into a maze, especially if you're not a tech whiz. Well, fear not! In this article, we're here to break it down for you. We'll explain what tokens and token contracts are all about, and we'll even give you some tips on how to spot and safeguard yourself against fraudulent tokens. So, let's get started and demystify this exciting world together!.

Chapter 1: Tokens: Digital Assets on the Blockchain:

Tokens refers to digital assets existing on the blockchain network. For example, cryptocurrencies like Bitcoin (BTC) and Ethereum (ETH) are known as tokens. Non-fungible tokens (NFTs) is also a token, giving user full ownership of its digital assets examples are artworks. In this article, we will primarily focus on crypto-tokens.

Chapter 2: What are Token Contracts:

Token contracts are smart contracts deployed on the blockchain. They serve as digital programs that define the rules for managing tokens, ensuring secure and transparent transactions within the network.

Chapter 3: The Rise of Malicious Tokens:

The crypto market boasts thousands of tokens, with over 22,000+ listed on coinmarket count. Unfortunately, as cryptocurrencies gain popularity, so does the emergence of malicious tokens. While tech-savvy individuals can conduct extensive research, such as reviewing GitHub codes, non-technical users need not worry as there are alternative methods to ensure token legitimacy.

It's important not to be deceived by the nominal value of a token, as a token with a value of $0.00001 doesn't necessarily mean that $1 is more valuable. Factors such as total supply and market capitalization play a crucial role in determining the value of a token. In some cases, a token with a lower nominal value might have a larger total supply and market cap, making it a more valuable asset compared to another token.

Chapter 4: Understanding Token Value and Safeguarding Investments

In the world of cryptocurrency, it's crucial to understand the true value of a token and take steps to protect your investments. Let's consider a scenario to illustrate this point.

Imagine a token creator who mints 1000 tokens and initially releases 500 tokens to users for purchase. At the time of purchase, the token's value is $1 per token. The remaining 500 tokens are retained by the token admin.

To clarify, "minting", Imagine you have a digital currency that you want to create and keep track of using blockchain. Minting is the process of creating new units of that digital currency. Think of it like a printing press that creates physical money. In the blockchain world, instead of printing physical money, minting involves generating new digital tokens or coins.

However, in the unfortunate case where the token creator turns out to be malicious, they could secretly mint an additional 500 tokens, adding them to their existing 500 tokens. This increases the total supply to 1000 tokens. Subsequently, when the admin starts selling their own tokens, the value of the tokens initially purchased by users begins to decline from the original $1.

To protect yourself as a user, it is of utmost importance to conduct thorough background checks before purchasing a token. By conducting due diligence, you can identify potential risks and avoid falling victim to such manipulative practices.

Chapter 5: Case Scenario: Dealing with a Malicious Token:

Mr. A had 80 USDT in his wallet, and one day he woke up to find that the tokens had disappeared. Mr. A was confused about what had happened. Here's what occurred behind the scenes:

Previously, Mr. A had 100 USDT in his wallet. Some time ago, he purchased a malicious token called REMY (just for illustration purposes) worth 20 USDT. During the token purchase process, Mr. A interacted with a smart contract. The smart contract had a function called the APPROVE FUNCTION, which allowed the contract to approve tokens on behalf of the user. When Mr. A bought 20 USDT worth of REMY, it was expected that he would still have 80 USDT in his wallet.

Before the smart contract could provide Mr. A with the REMY tokens he purchased, it needed to deduct the 20 USDT from his wallet. By interacting with the contract, Mr. A needed to approve the smart contract to access funds from his wallet, which currently held 100 USDT.

In blockchain, the "approve" function allows you to give permission to a smart contract to interact with your tokens. This interaction could involve transferring, spending, or managing your tokens in some way. When you use the "approve" function, you specify the smart contract and the amount of tokens you want to authorize them to use. It's like saying, "I approve Jane to transfer 10 tokens from my wallet to another person."

In Mr. A's situation, the "approve" function determined the amount he authorized the smart contract to spend on his behalf. The smart contract might have approved 80 tokens out of the 100 and then released the 20 USDT he wanted to buy at that moment. This meant that the smart contract had reserved 60 USDT for Mr. A in case he wanted to buy another token in the future.

However, since REMY was a malicious token, its creator had access to the remaining 60 tokens and could withdraw them. That's what happened in Mr. A's case, where he discovered his money was missing. You might wonder why the smart contract couldn't approve the exact amount needed for each transaction. If it did, you would have to pay a gas fee for every transaction. Since the smart contract had already approved tokens on Mr. A's behalf, he could simply use the approved tokens for future transactions.

Chapter 6: Conclusion and Call to Action:

As decentralized finance continues to grow and evolve, it's crucial for all of us to wrap our heads around token contracts and their significance. When you have a good grasp of how tokens work, you can lower the chances of becoming a target for scams and make smarter investment decisions. Armed with knowledge and a keen eye for detail, you'll be able to navigate the exciting world of blockchain with confidence and peace of mind. So go out there, make informed choices, and let the power of blockchain technology work for you!.

How to Setup Solidity Environment with Hardhat

Adetutu Gbangbola — Wed, 17 May 2023 11:52:18 +0000

    * [Chapter 1](Introduction)
    * [Chapter 2](Hardhat setup with Typescript)
    * [Chapter 3](Code sample with Hardhat)
    * [Chapter 4](Conclusion)

Chapter 1: Introduction

Tooling around EVM based blockchain has improved drastically over the years, thanks to the unrelenting efforts of creators of tools like ganache, brownie, Hardhat etc.

In this tutorial, our main focused will be on hardhat, due to the large pool of Javascript developers and improving on the cons of previous tools, it has become the go-to tools for Ethereum Smart Contract Development.

Hardhat offers various features, including compiling, debugging, testing, and more. It can also be used for other EVM based development such as Binance Smart Chain,Polygon, Avalanche etc. This article will provide step-by-step guide on how to set up Hardhat with TypeScript, which can help you get started with building decentralized applications on the Ethereum Network.

Chapter 2: Hardhat Setup

Prerequisite

Node
Npm/Yarn
Command Line Interface (CLI)
Code editor (e.g., VS Code)

There are different ways to set up Hardhat on your PC, and you can choose to install it globally. However, for this tutorial, we will install it locally, allowing us to have a version of Hardhat specific to this project that can be reused in different repositories or projects. In this tutorial, I will be using Yarn and the VS Code editor, but feel free to use any tools that suit you.

Steps to set up Hardhat locally:

Create a new folder on your PC.
Open your command line interface (CLI).
Navigate to the folder you just created.
Initialize the project using Yarn. In this tutorial, I will be using Yarn version 2. You start by typing the code below in your terminal.

Code

  yarn init -2

5.Install the required node modules.
If you're using Yarn version 2, you need to perform an additional configuration of setting up the node modules. If you were using npm, this step is not necessary because npm uses node modules by default. Use the following code to configure Yarn:

   yarn config set nodeLinker node-modules

6.Install Hardhat as a development dependency.
Adding Hardhat as a dependency will populate the package.json file with all the necessary information for Hardhat. It will also install some packages in the project environment.

   yarn add hardhat --dev

After successfully installing Hardhat, you will find it listed in your package.json file.

screenshot of actions 4, 5, and 6 executed in the command prompt (CMD)

7.Initialize Hardhat.
After installing Hardhat, the next step is to initialize it using the following code. The use of Yarn in the command is necessary because we installed it locally in this project, not globally on the machine.

   yarn hardhat init

During the initialization process, I will select TypeScript as an option. However, you may choose JavaScript as there isn't much difference for this guide.

Additionally, while installing, Hardhat will suggest some dependencies for you to install. It's important to install them as they are required for the project. You can copy the entire line of code shown in your command line interface and paste it into your terminal. This will add all the necessary dependencies to your local project environment.

8.Compiling the Code
To compile your Hardhat code, simply run the following command:

  yarn hardhat compile

After successful compilation, you will see the following output in your terminal:

Once compilation is complete, you should see the following directory structure in your code editor:

contracts: contains lock.sol,
scripts contain deploy.ts,
tests contains lock.ts, and
artifacts contains the ABI (Application Binary Interface) for your contracts.

Chapter 3: Code Sample with Hardhat

Now that we have successfully installed Hardhat, let's proceed to create a new contract named Hello.sol, which will execute a basic "Hello, World!" program.

Solidity Code

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

contract HelloWorld {
    string public message;

    constructor() {
        message = "Hello, World!";
    }

    function getMessage() public view returns (string memory) {
        return message;
    }
}

Typescript code

Here, I have created a result.ts script file for deploying our contract, as demonstrated above.

note: We're deploying locally only available on hardhat

  import { ethers } from "hardhat";

async function main() {

 const HelloWorld = await ethers.getContractFactory("HelloWorld");
 const helloWorld = await HelloWorld.deploy();

const resp = await helloWorld.getMessage();
console.log('Get message response', resp)
}

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

To get the output of the code, run the following commands. The first command is used to compile the contract, and the second command is used to run the script with the title

yarn hardhat compile
yarn hardhat run scripts/result.ts

screenshot of the code directory showing Hello.sol & result.ts

Output

After deploying our contract, we can see the "Hello, World!" message displayed in the terminal.

For future Hardhat projects, you can use the project we created here as a starter file to avoid starting from scratch. Simply copy and paste the files into a new folder, excluding the node_modules folder to save copy time. Be sure to delete the existing files in the contracts, scripts, and tests folders before starting your new project.

Conclusion

In conclusion, By following this step-by-step instructions and harnessing the powerful features of Hardhat and TypeScript, developers can ensure a fantastic experience in Ethereum smart contract development. Enjoy coding and have a great time building!

Integrating Nuxt.js into Your Next Vue.js Project

Adetutu Gbangbola — Sat, 06 Aug 2022 11:04:00 +0000

Introduction

Hi there, have you been thinking of how and when to start using NuxtJS to develop amazing vue applications, Alright, i'll take that as a yes, kindly grab a seat & ride with me.

Prerequisite->Vue.js

In this article, we'll demonstrate how to get started with NuxtJS & talk about the basic things required of you to know. Here is a list of what we will be covering

    * [Chapter 1](Setting up NuxtJS)
    * [Chapter 2](Nuxt Composition API)
    * [Chapter 3](Project)
    * [Chapter 4](How to use vee-validate with NuxtJS)
    * [Chapter 5](Lazy loading component)
    * [Chapter 6](Deployment to Netlify)
    * [Chapter 7](Conclusion)

Chapter 1: Setting up NuxtJS

NuxtJS is an intuitive open source framework which comes with simplicity , thereby helping in increasing productivity to get things done faster & delivering high performance server-side rendered web application with a focus on better developer experience. For more info on NuxtJS, check here NuxtJS

For this article, we'll be developing an address book. To get started, we start by installing NuxtJS, also we will be using Boostrapvue CSS framework with it. To install NuxtJS, run the following command

you can either use npm or yarn for package installation, for this tutorial, let's use yarn.

yarn create nuxt-app (project-name).

Project name here refers to the title you want to give your project. Here is what it looks like on my cmd,

After installing all dependencies, we can then navigate into the code editor and start the development server by running the code below

yarn dev

The image below shows what a NuxtJS project folder looks like.

Chapter 2: Composition Api

NuxtJS composition API can be use with Vue 3, It provides a way to use the Vue 3 Composition API with Nuxt-specific features

To use the Composition API, you run the command shown below on your vscode terminal

yarn add @nuxtjs/composition-api

After installing composition API, the next step is to get it added to the buildModules in your nuxtconfig.js file. You can check here for more information. Composition API

buildModules: [
    '@nuxtjs/composition-api/module'
  ]

Chapter 3: Project

Now that we have installed all we needed, lets get started, We'll be building an app, It's an address book app. The first thing we will be doing is to create our routes.

To create a new route in NuxtJS, all you need to do is to create your file under the pages directory, NuxtJS will take care of all the routing configurations underneath for you. In our case, we will be creating three pages which are going to be called about, account & contact. For each of the pages, I've created an index.vue file where our code is going to be written. The pages are shown below

Also in the component folder, we'll be creating a sidebar and a Navbar component. Starting with the sidebar, the template section consists of a div with class name sidebar, the div contain three NuxtLink, this is what is going to be used for the redirection to various route, the pages created above is what is been passed into the to props. In addition, NuxtJS comes with a styling class that give styling to active classes, In the code below there is a class in style section with name a.nuxt-link-exact-active, it has a background color and color styling attached to it which get applied to any active pages the user clicked on. The sidebar.vue component code is shown below

Sidebar.vue code

<template>
    <div>     
    <div class="head-text my-2 ml-1 px-2 py-2 ">
<h5 class="pt-2">AddressBook</h5>
</div>  
<div class="sidebar ml-1 text-light">
      <NuxtLink class="sidebar-list"  to="/contact">Contact</NuxtLink> <br>
      <NuxtLink class="sidebar-list" to="/account">Account</NuxtLink> <br>
      <NuxtLink class="sidebar-list" to="/about">About</NuxtLink> <br>  
</div>
    </div>
</template>

<script>
    export default {      
    }
</script>

<style scoped>


.sidebar {
  height:100vh;
  width: 12rem;
   padding: 0.2rem;
   line-height:2.2;
   font-size:18px;
  background: #f5f5f5;
}

.head-text{
   background: #f5f5f5;
}
.sidebar-list{
  color: black;
  padding: 0.1rem;
  border-radius: 5px;
  padding-left: 0.5rem;
text-decoration: none;
}

a.nuxt-link-exact-active {
  color: white;
  background:#243B41;
  display: inline-block;
   width: 100%;
}


</style>

Now that we have created our sidebar, lets go ahead & create our Navbar, the Navbar is taken from bootstrap vue website, you can check into the bootstrap website to choose your desired. The navbar code is illustrated below

<template>
    <div>
        <div>
  <b-navbar toggleable="lg" class="ml-2 nav-text mt-2" type="light" >
    <b-navbar-brand href="#">NavBar</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item href="#">Link</b-nav-item>

      </b-navbar-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-form>
          <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
          <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
        </b-nav-form>



        <b-nav-item-dropdown right>
          <b-dropdown-item href="#">Profile</b-dropdown-item>
          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>
    </div>
</template>

<script>
    export default {

    }
</script>

<style scoped>
.nav-text{
 background: #f5f5f5;
}
</style>

Let's take a look at the output below, before that, at the root folder of our pages, I have deleted the tutorial component that comes pre-installed with NuxtJS & also deleted it from the component folder. Right now what we have in the root folder is a lorem text, check out the output below.

Contact Page

The Contact page is a page with an index.vue file and inside this file, there is a component with name Address.vue. The Address.vue component is where we going to write our codes. The contact page index.vue code is shown below.

contact page (index.vue) code

<template>
    <div style="display:flex">
     <Address class="mx-4" />
    </div>
</template>

<script>
import Address from '../../components/Address.vue'
    export default {
        components:{Address}
    }
</script>

<style scoped>

</style>

In the template folder of our Address component, we have two input fields , (the b-form-input are gotten from bootstrapvue website) with a Save button. Each of the form input have their respective v-model. In the script folder, we start by importing ref from NuxtJS, followed by the codes to solve the problem. The code is shown below

Address.vue component code

<template>
<div class=" my-address" >
<h3 class="address-title mt-1">Address book</h3>
<div class="mt-4">
<form>
   <b-form-input 
   placeholder="Name"
   v-model= "name" />

   <b-form-input 
   class="mt-4" 
   placeholder="Phone number" 
   v-model= "numbers"
    />

    <b-button @click="saveMessage" 
     :disabled="invalid"
    class="mt-3 address-btn" 
    variant="info" >
    Save
    </b-button>
    </form>
  </div>

  <div class="contact-list mt-5">
  <h5>Contact List</h5>
  <div class="d-flex justify-content-between user-info p-2 mt-1"  v-for="results in result" :key="results">
<div class="">{{results.name}}</div>
<div class="">{{results.numbers}}</div>
  </div>
  </div>
  </div>
</template>

<script>
import {  ref } from "@nuxtjs/composition-api";
export default {
  name: 'Address',
  setup(){
    const name = ref('')
    const numbers = ref('')
    const result = ref([])
    const done = ref(false)

    const saveMessage=()=>{
     const message = {
        name:name.value,
        numbers:numbers.value,
     }
     result.value.push(message) 
     name.value='',
     numbers.value=''
     done.value = true
    }

    return{ name, numbers, saveMessage, result, done }
  }
}
</script>

<style scoped>
.my-address{
width: 20rem;
}

.address-btn{
border: 1px solid green
}

.user-info{
  background: rgb(206, 210, 240);
  border-radius: 5px;
}
</style>

The output of the contact page is shown below

Contact page

Chapter 4: How to use vee-validate with NuxtJS

Lets talk about how to use vee-validate to enforce user to input in the required before submitting our forms, To do this in NuxtJS, we start by installing vee-validate & then run this on the terminal

yarn add vee-validate@3

After doing this, the next step is to add the vee-validate rules to the buildModules in the NuxtJS config files, You can check here for more info vee-validate with Nuxtjs

Adding vee-validate to the NuxtJS config files

build: {
  transpile: [
    "vee-validate/dist/rules"
  ],
  /*
    ** You can extend webpack config here
    */
  extend(config, ctx) {
    // ...
  }
}

Having done the following, we can now choose from the vee-validate available rules and get them applied to our code.

For our use case we will be using the required, alpha & numeric rule.Firstly, we will create a folder called plugins & inside the folder, we'll create a file called vee-validate.js. Inside the vee-validate.js file is where we'll import all the rules we'll be needing, check below to see code.

vee-validate.js


import { extend, } from 'vee-validate';
import { required,  numeric, alpha } from 'vee-validate/dist/rules';

extend('required', {
  ...required,
  message: 'This field is required',

});

extend('numeric', {
  ...numeric,
  message: 'The  field may only contain numbers',

});
extend('alpha', {
  ...alpha,
  message: 'The  field may only contain alphabetic letters',

});

Secondly, we'll add the plugin path to the NuxtJS config plugins

plugins: [
    "~/plugins/vee-validate.js",
  ],

After following the steps above, we can now make use of the rules globally in our code

For our first input field, we'll be using the required rule telling the user that its compulsory to fill their details & also the alpha rules telling the user only alphabet characters can be typed in. As for the second input field, we'll be using the required rule along side the numeric rules telling the users it is important to fill there details and its only numbers that is allowed.

Going back to our Address.vue component , we start by importing the ValidationProvider, ValidationObserver from vee-validate followed by adding them to the component in the script folder & returning them in the setup. Having done this, the next thing to be done is to wrap the form element with ValidationObserver. Each of the input fields is to be wrapped with validationProvider & the rules. After the form input is a div with span attribute, the span is the error msg to be displayed if the user didn't obey any of the validation rules. On each of the input fields , we have a (v-on:keyup="resetDone"), the resetDone function is to take off the error msg after submitting our forms. Also our button has a disabled prop with invalid passed to it. The invalid is coming from vee-validate, this is going to disable the button making it unclickable until the user passes every of the validation rules set to it. Code is shown below

<template>
<div class=" my-address" >
<h3 class="address-title">Address book</h3>
<div class="mt-4">
  <ValidationObserver v-slot="{ invalid }">
<form>
<ValidationProvider rules="required|alpha" v-slot="{ errors }">
   <b-form-input  v-on:keyup="resetDone"
   placeholder="Name"
   v-model= "name" />
<div class="" style="position: relative; padding-bottom:0.1rem ">
                                <span v-if="!done" style="color:red; position: absolute; left:0;">{{ errors[0] }}</span> 
                                </div> 
           </ValidationProvider>

<ValidationProvider rules="required|numeric" v-slot="{ errors }">
   <b-form-input v-on:keyup="resetDone" 
   class="mt-4" 
   placeholder="Phone number" 
   v-model= "numbers"
    />
<div class="" style="position: relative; padding-bottom:0.1rem ">
                                <span v-if="!done" style="color:red; position: absolute; left:0;">{{ errors[0] }}</span> 
                                </div> 
           </ValidationProvider>

    <b-button @click="saveMessage" 
     :disabled="invalid"
    class="mt-4 address-btn" 
    variant="info" >
    Save
    </b-button>
    </form>
  </ValidationObserver>
  </div>

  <div class="contact-list mt-4">
  <h5>Contact List</h5>
  <div class="d-flex justify-content-between user-info p-2 mt-1"  v-for="results in result" :key="results">
<div class="">{{results.name}}</div>
<div class="">{{results.numbers}}</div>
  </div>
  </div>
  </div>
</template>

<script>
import {  ref } from "@nuxtjs/composition-api";
import { ValidationProvider, ValidationObserver } from 'vee-validate';
export default {
  name: 'Address',
  components:{ValidationProvider, ValidationObserver},
  setup(){
    const name = ref('')
    const numbers = ref('')
    const result = ref([])
    const done = ref(false)

    const saveMessage=()=>{
     const message = {
        name:name.value,
        numbers:numbers.value,
     }
     result.value.push(message) 
     name.value='',
     numbers.value=''
     done.value = true
    }
    const resetDone=()=>{
      if(done.value == false) return
    }
    return{ name, numbers, saveMessage, result, done, resetDone }
  }
}
</script>

<style scoped>
.my-address{
width: 20rem;
}

.address-title{
  margin-top: 1rem;
}

.address-btn{
border: 1px solid green
}

.user-info{
  background: rgb(236, 238, 251);
  border-radius: 5px;
}
</style>

Output is shown below

The output below shows different error state as passed into our code, also the button is disabled & get enabled only when user has obey the validation rules.

Chapter 5: Lazy Loading component

Lets talk about lazy loading. LazyLoading is a good way of reducing less API calls until a user really needs to. Imagine having about 10 API calls to mount at the same time, this can really slow down your application, the best thing is to lazy load the components until when the page is been clicked on.

In this tutorial, we'll be lazyloading the about.vue page. In the index.vue of the about page , we have our AboutPage.vue component attached. To lazyLoad this, all you need do is add Lazy at the front of the AboutPage component. There is a v-if with name show attached to the component & also a function showData attached to the button.

In our script folder, our show is set to false by default and in the showData function, we turn it true which means that its only when that button is been clicked that it should make the API calls. Code is shown below

about page index.vue

<template>
    <div>
    <div class="ml-3 mt-4">
    <h5>Hello World</h5>
    <b-button @click="showData" 
    class="mt-2" 
    variant="info" >
    Click Me
    </b-button>
    </div>

    <div v-if="show">
      <LazyAboutPage  />
      </div>
    </div>
</template>

<script>
import { ref, } from '@vue/composition-api'
    export default {

        setup(){
            const show =ref(false)
            const showData=()=>{
                show.value=true
            }
            return { show, showData,}
        }
    }
</script>


<style scoped></style>

The AboutPage.vue component is where we call an endpoint, this endpoint is gotten from JSON Placeholder, link can be found here fake Json api. Code is attached below

<template>
    <div>
<div class="row ml-1">
  <div class="col-md-6 mt-3" v-for="todos in todo" :key="todos.id">
    <div class="card todo-card mt-2 p-2">
       {{todos.username}}
    </div>
  </div>
</div>
    </div>
</template>

<script>
import axios from 'axios'
import {  ref, useFetch } from '@nuxtjs/composition-api';
    export default {
        setup(){
            const todo = ref('')

             useFetch(async () => {
      await axios.get('https://jsonplaceholder.typicode.com/users')
     .then( response => todo.value = response?.data)
      .catch(error => console.log(error))
    })

            return { todo}
        }
    }
</script>

<style scoped>
.todo-card{
    border: 0.7px solid rgb(90, 65, 62);
}
</style>

A snippet of our network tab before and after the API is called is displayed below

Before clicking our button

In our about.vue page, our network tab only had 17 request on first mount, meaning that it hasn't make the API call, remember we have lazy load the component meaning, its until when the button is been clicked before it makes the API call

After clicking the button

Now that the button has been clicked, it then makes the API request, now showing total of 18 request.

Lazy Loading is a really a great way to improving the performance of your code.

Here is the output of the about.vue page

Image (Full output )

Also we have the account page, Before I talk about the account page, lets talk about how to make our sidebar appears on every pages clicked on. To do this, we'll create a folder named layouts(this is from NuxtJS). Inside our layout folder we create a file name default.vue. Here is where we are going to import our sidebar and navbar components into. Whatever is been called in the default page is definitely going to be applicable through out the application. There is a <Nuxt /> at the end of our mainnav div, this is the entry point of our application in NuxtJs.

layouts>>default.vue

<template>
    <div class="wrapper" style="display: flex">
    <Sidebar />
    <div class="">
    <div class="nav-title">
    <MainNav />
    </div>
    <Nuxt />
    </div>
    </div>
</template>

<script>
    export default {

    }
</script>

<style  scoped>
.wrapper{
    background: #e5e5e5;
}

.nav-title{
width: calc(100vw - 14rem);
}
</style>

Back to our account page. Account page isn't different from the rest of the page but on this page, we don't want neither the navbar or sidebar to show. There are instance where you don't want a certain style which is already passed to the layout folder to be applicable to a page (e.g login page ) & that's what we want to achieve with this page.

To achieve this, we create a file under the layout directory, we'll name it no-sidenav.vue. Inside the file we won't be adding the sidebar and navbar as it is in the layout, The code is shown below

<template>
<div class=""> 
<Nuxt />
   </div>
</template>

<script>
export default {
  setup () {
  }
}
</script>

Now we can make use of it in the account page, all we need do is to add the no-sidenav to the layout in the script section. Code is shown below.

account.vue

<template>
    <div>
        <h2 class="text-center mt-4"> Account page</h2>
    </div>
</template>

<script>
    export default {
           layout: "no-sidenav", 
    }
</script>

<style scoped>

</style>

The output is shown below

Chapter 6: Deployment to Netlify

To deploy to netlify, we'll go ahead and edit the build settings in our netlify dashboard. As shown below.

Chapter 7: Conclusion

This tutorial has walk us through on how to use NuxtJS to develop amazing Vue projects. The GitHub link code can be found here. Thanks for reading

❤️happyCoding

How to create a responsive navbar in vue.js with bootstrap

Adetutu Gbangbola — Fri, 06 Aug 2021 20:43:48 +0000

    * [Chapter 1](Introduction)
    * [Chapter 2](Setting up vue)
    * [Chapter 3](Using bootstrap to configure the vue router)
    * [Chapter 4](Conclusion)

Chapter 1: Introduction

Do you want to create a responsive navbar in Vuejs? Here's a guide on how to port bootstrap navbar to vuejs without any hassle.

Brief Introduction Before We Get Started

Vue.js is a JavaScript progressive framework that helps in creating web interfaces and a single-page application. Vue.js comes with a lot of features that can dramatically reduce your development time, one of them is the Vue router, if you're coming from a react background, you will have to set up all this yourself but with vue everything comes to make your life much easier. You can read up here Vue Router to learn more of all its features. The Vue router renders the anchor tag with the correct href by default. You can read up on Vue router-link

To get started here are the tools you'll be needing,

Node
npm
code editor
vue CLI

To ensure proper installation of the aforementioned tools, follow these steps for downloading and verifying them:

Node: To download Node on your PC, you can visit the official Node website here to learn more about the installation process. To verify if Node is installed correctly, follow these steps:

Open the Command Prompt on your PC.
Type the command "node -v".
Press Enter.

This command will display the version number of Node installed on your system. You should see something similar to v14.17.2

Npm: Npm is included by default when you download Node. To check the version of npm installed on your system, follow these steps:

Open your command prompt or terminal.
Type the command npm -v.
Press Enter.

This command will display the version number of npm installed on your system. You should see something similar to 6.14.13.

Code editor: There are lots of code editors, for this tutorial I will be using the visual studio code editor. You can check here Vscode setup to learn more about it.

Vue CLI: The Vue CLI only needs to be run once on your PC. To install this, you should run this on your terminal or cmd using the npm or yarn

npm install -g @vue/cli
        OR
yarn global add @vue/cli

To check if vue is correctly installed , type vue--version, This should display the version number you currently have, so you'll see something like this @vue/cli 4.5.13

Chapter 2: Setting up Vue

Creating our project folder

On your command prompt, navigate into the folder you will like to save your project and type vue create (project name here)

In this tutorial, our project name is titled navbar. We therefore, proceed to write vue create navbar on our command prompt as shown below

C:\Users\Desktop\code\T-Projects\my projects> vue create navbar

The next thing it displays is

Vue CLI v4.5.13
? Please pick a preset:
Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
Manually select features

Here we click on Manually select features to be able to choose the feature we want on our projects. You can select and deselect by using the arrow keys to move up and down & the space bar to choose. Here we will be selecting the vue router as this is what we need to create our navbar

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project:
() Choose Vue version
() Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
( ) Vuex
( ) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

We'll be using the vue 3 option, therefore we can select the vue 3.x since that's the latest release.

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router
? Choose a version of Vue.js that you want to start the project with
2.x
3.x

Once the version is selected, it pops up a few 1-2 more questions after which it runs the process. After it successfully runs, it is going to display this below

Successfully created project navbar.
Get started with the following commands:

$ cd navbar
$ npm run serve

Now let's open the created project in our vscode editor. You can just type this (code .) after the commands generated .This opens the project on vscode editor, from here we can see all the dependencies installed inside the package.json file.

Chapter 3: Using bootstrap to configure the vue router

The first thing to be done is to connect the bootstrap to our project. This can be in two ways

1) By using the npm/yarn to install bootstrap on the terminal
2) By attaching the bootstrap CDN to the index.html file
We will be going by the second option; you can get the Bootstrap Cdn by visiting the bootstrap website. The bootstrap cdn connected to our project is shown below

After successfully adding the bootstrap cdn, we can then use the bootstrap framework in our code. However our major concern in this tutorial is the navbar, therefore we will be extracting one of the bootstrap navbar templates from their websites. First of all, let's run the command npm run serve on our vscode terminal to see what we got

Yippee, our vue.js app has been launched. Taking a look at the top we have the Home and about, It was created from the router. That's one of the benefits of using a js framework like vue. It automatically creates a navbar with styles for us (Not a responsive one). Let's add two more pages to the views folder. Here will be adding careers & login for a better understanding of how the navbar works.

Now an additional link is on the screen, the career & login (To do this, create a new file in the views, name it career & login respectively, go to your index.js & add the routes . Let’s come back to the app.vue and add it to the div id = "nav"). Vue has helped us create a navbar, not just a responsive type. Also, Vue router automatically comes with css styles for the exact active navlinks.

Going back to our components folder, we have a helloworld.vue which was what generated the whole content on the above image. This won't be needed so we'll delete it from the component folder and the components in the home.vue can also be erased. Once this is done, all we are left on the screen will be the Home | About | Careers | Contact navigation

Let's visit the bootstrap website to copy one of their navbar templates. You can visit Bootstrap template to choose.

The one to be use for this tutorial is shown below

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

The output of the navbar code (Desktop & Mobile) is shown below

Now that we have picked our desired bootstrap navbar template we can then integrate it into our Vue.js files.

Firstly, let's create the files in the views components. I will be adding four pages as shown below ( Home, About, Careers & Contact )

Moving in to our Index.js files, let's creates the path as shown below

import { createRouter, createWebHistory } from 'vue-router'
import About from '../views/About.vue'
import Home from '../views/Home.vue';
import Contact from '../views/Contact.vue'
import Careers from '../views/Careers.vue'


const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },

  {
    path: '/about',
    name: 'About',
    component:About
  },
  {
    path: '/careers',
    name: 'Careers',
    component:Careers
  },
  {
    path: '/contact',
    name: 'Contact',
    component:Contact
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

Our App.vue initial state is shown below.

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>


</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

The next step is to add the navbar items to the router links but before this, here is what our template looks like

<template>
  <div id="nav">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo Here</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Careers</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav> 
 </div>
  <router-view/>
</template>

The following instructions are to be followed in changing our template.
1) Change the ul tag to a div tag

2) Remove the li class : On each of the li tags, there is a class named nav item, copy it and place it on the anchor tag & delete the li tag

3) Replace the anchor tag with the router link

After following the three(3) steps above, here is the new template

<template>
<template>
  <div id="nav">
  <nav class="container navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Logo Here</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <div class="navbar-nav mr-auto">
            <router-link to="/" class="nav-item nav-link">Home</router-link>
            <router-link to="/About" class="nav-item nav-link">About</router-link>
            <router-link to="/Careers" class="nav-link">Careers</router-link>
            <router-link to="/Contact" class="nav-link">Contact</router-link>
        </div>
        <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
    </div>
</nav>
 </div>
  <router-view/>
</template>

Now, our navbar looks nice, check the web & mobile version visuals below

In addition, the router link has helped us in styling the exact active classes, by doing so it has helped in saving us from styling the navbar separately. I have updated the styles by adding padding, background color, border radius & text-align: center to the styling

Initial CSS styles

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}

Additional styles added

#nav {
  padding: 30px;
  text-align: center;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: whitesmoke;
  background: crimson;
  border-radius: .5rem;
}

Chapter 4: Conclusion

In this article, we have been able to create a responsive navbar which can be use in our vue.js application. You can take it further by customizing to your needs & I hope you find it useful. Let me know what you think in the comment section. Also the source code can be found here Github feel free to access it

Happy Coding!

Forem: Adetutu Gbangbola

My Journey with the Ethereum Writing Cohort

Introduction:

The Structure and Process:

Key Takeaways:

Conclusion:

Exploring Tech Paths: Discovering Exciting Possibilities

Introduction:

Understanding the Diverse Fields in Tech:

The Search for the Right Tech Path:

A Case Scenario: Linda's Journey:

Actionable Advice for Exploring Tech Paths:

Success Story: Jane's Incredible Journey

Conclusion:

Exploring Peer-to-Peer (P2P) Networks in Web3

Introduction:

What exactly is web3?

Skepticism and Fear Towards P2P:

Understanding P2P in Web3:

Use Case Scenario: Joe's Journey into P2P Networks

Advantages of Using P2P Networks:

Takeaway

Limitations of P2P

Conclusion:

Understanding Token Contracts in Blockchain For Non-Techie

Table Of Contents

Chapter 1: Tokens: Digital Assets on the Blockchain:

Chapter 2: What are Token Contracts:

Chapter 3: The Rise of Malicious Tokens:

Chapter 4: Understanding Token Value and Safeguarding Investments

Chapter 5: Case Scenario: Dealing with a Malicious Token:

Chapter 6: Conclusion and Call to Action:

How to Setup Solidity Environment with Hardhat

Table Of Contents

Chapter 1: Introduction

Chapter 2: Hardhat Setup

Prerequisite

Steps to set up Hardhat locally:

Code

screenshot of actions 4, 5, and 6 executed in the command prompt (CMD)

Chapter 3: Code Sample with Hardhat

Solidity Code

Typescript code

screenshot of the code directory showing Hello.sol & result.ts

Output

Conclusion

Integrating Nuxt.js into Your Next Vue.js Project

Introduction

Chapter 1: Setting up NuxtJS

Chapter 2: Composition Api

Chapter 3: Project

Sidebar.vue code

Contact Page

contact page (index.vue) code

Address.vue component code

Contact page

Chapter 4: How to use vee-validate with NuxtJS

Adding vee-validate to the NuxtJS config files

vee-validate.js

Chapter 5: Lazy Loading component

about page index.vue

Before clicking our button

After clicking the button

Image (Full output )

layouts>>default.vue

account.vue

Chapter 6: Deployment to Netlify

Chapter 7: Conclusion

How to create a responsive navbar in vue.js with bootstrap

Table Of Contents

Chapter 1: Introduction

Brief Introduction Before We Get Started

Chapter 2: Setting up Vue

Chapter 3: Using bootstrap to configure the vue router

Chapter 4: Conclusion