DEV Community: Yunwen Eric

A better way of using flutter packages

Yunwen Eric — Sat, 30 Mar 2024 13:36:01 +0000

Context

I have been using package_a (ex: fluttertoast package) in my flutter project and it worked well. However, for some reasons, I have decided to change to a similar but better package.

Problem:

As soon as I change this package in my pubspec.yaml file, my IDE throws missing imports errors all over my codebase

Wrong way

Better Approach Create a separate class with a static method to display your toast

Call the static Method

In your app’s UI, invoke the static method to display your toast

What did we fix?

The alert_service has the class for showing the alert. Rather than changing the implementation in all of our app’s UI as in the former, in the later, we just need to change the package in the alert_service where it is used

Final Thoughts

Depending on other flutter packages is very important in flutter projects, however, it is important that even though we depend on these packages, we write modular and reusable code that is not too tightly coupled to dependencies.

Let's connect

Follow on X
Follow on LinkedIn

If you were to uninstall all secondary extensions in your text editor and leave just Three(3) what will they be?

Yunwen Eric — Sat, 19 Jun 2021 20:33:51 +0000

Introduction :

A code editor simply put is a playground that aids you write your code in a nice, easy and quicker way.

There are several code editors both free and paid out there. They all share some commonalities. One of which is the ability to install additional helpers (extensions) to facilitate your development. In-built or primary extensions comes pre installed with the editor while secondary extensions are installed by users when need be.

In the comments, drop your 3 secondary extensions (extensions you find absolutely necessary) as well as the code editors respectively

I'll start:

Live server --Vscode
Beautify --VScode
ES6/ES7 JavaScript Snippets --Vscode

3 Ways to pass data to view in laravel 8

Yunwen Eric — Fri, 09 Apr 2021 21:48:37 +0000

Introduction

Laravel is a MVC(Model View Controller) Framework build with PHP. It has been one of the most starred and most popular backend framework on github. This is simply because Laravel makes it easy for developers to build small, medium or large|complex applications in a very short time with little stress and fewer lines of code.

In Laravel, our view is written using the blade templating engine, which is pretty nice and quiet easy to learn as well.

For this tutorial, we are going to use a fresh laravel Project

1. Create a laravel project with composer or laravel installer

laravel new Dataparse

2. Create your routes in the web.php file

Route::get('/users', 
[ProductController::class, 'index']);

Route::get('/users', 
[ProductController::class, 'usingwith']);

Route::get('/users', 
[ProductController::class, 'usingview']);

3. Create your controller using the php artisan command

php artisan make:controller ProductController

This creates the Product controller

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ProductController extends Controller
{
    \\
}

Create view in the resources/views folder

Here create a file called home.blade.php

Some of the ways to pass data to the view dynamically are;

1. Using the compact Method:

The compact method creates an array from existing variables given as string arguments to it. Below is an example of how we'd use the compact function.

 public function index(){
        $name = "Tony Stack";
        return view('home', compact('name'));
    }

In view, use the blade syntax to parse data

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
 initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>User</title>
</head>
<body>
    <h1>User Page</h1>
    <p>{{ $name }}</p>
</body>
</html>

2. Using the With Method:

The with method allows you to pass just a single variable to a view.

 public function usingwith(){
        $name = "Tony Stack";
        return view('home')->with('name', $name);
    }

In the home.blade.php file parse the date

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>User</title>
</head>
<body>
    <h1>User Page</h1>
    <p>{{ $name }}</p>
</body>
</html>

3. Passing data directly in view method:

 public function usingview(){
        $data = [
            "name"=>"John Doe",
            "age" => "23"

        ];
        return view('home', ["data"=>$data]);
    }

In the view, parse the data using the @foreach blade syntax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>User</title>
</head>
<body>
    <h1>User Page</h1>
    @foreach ($data as $item )
    {{ $item }}
    @endforeach
</body>
</html>

Hurray you made it. Congratulations!

Implementing React Routes (Part -2) Link Vs NavLink

Yunwen Eric — Sat, 13 Feb 2021 09:45:16 +0000

Recap:

Hello guys
In our previous tutorial, we learned how to add simple routes to our react app.
Today will be a short tutor on when to use NavLink and Link tags in React and we shall concentrate on the Nav component created in the last tutorial. Link

Overview

Before getting started, it is important to know that react uses the JSX(JavaScript XML) syntax which allows you to write JavaScript in HTML in a nice and easy way.
For more details about JSX, Click here

What is NavLink and Link in React?

The react-router-dom parckage we installed in the previous tutorial gives your access to using either the NavLink or the Link which we can use as tags, This is actually is the representation of the 'href' attribute of the anchor tag or the 'window.location.href' object.

What is the difference between NavLink and Link?

Well actually, the main difference between these two's is a class attribute. When we use the NavLink as a tag, it automatically inherit an active class when clicked. On the other hand, the Link tag does now have an active class when clicked.

When should I use the NavLink?

Just as the name implies 'NavLink', we use it mostly on navigation bars. This is because the active class permits us to define our custom styling in the App.css stylesheet. As such, we can use it to style our active buttons which in notify the use on which page he/she is currently on.

When should I use the Link?

The Link tag can be used where we want to do just some routing with no special effect. For instance; we can use the Link tag for scroll-to-top button, add to card buttons, submit button and more.

Here is our nav component.

import '../App.css';
import {NavLink} from 'react-router-dom';

let Nav =()=>{
    return (
     <div>
         <nav>
             <div className ='logo'>
                 <p>Logo</p>
             </div>
             <div>
               <ul>
                <li><NavLink to = '/home'>Home</NavLink></li>
                <li><NavLink to = '/about'>About</NavLink></li>
                <li><NavLink to = '/contact'>Contact</NavLink></li>
              </ul>
             </div>
         </nav>
     </div>
 )
}

export default Nav

Now let's go to our app.css stylesheet and add some styles

a{
  text-decoration: none;
  color: #0e151d;
  padding: 10px 20px;
  border-radius: 5px;
  background: #fff;
  transition: all ease-in-out 0.2s;

}
nav a:hover{
  background: rgb(166, 175, 255);
  transition: all ease-in-out 0.2s;
}

Finally, let's add some styles to the active class

 nav .active{
  background: #5855F3;
  padding: 10px 20px;
  border-radius: 5px;
  color: #fff;
}

Illustration:

Here is an illutration of how it works

Repo: Link to part 2.

Please do well to star my repo if you like this post. Until then, keep learning, keep coding and keep innovating.

Next: React Route with Params

Implementing React Routes in 4 Minutes (Part 1-- simple routes)

Yunwen Eric — Fri, 29 Jan 2021 16:19:15 +0000

Introduction

What is a route?

A route is simply a specific path. Just like going home after a class, you might decide to use a specific path to get home. Similarly routes takes us to our target destination.

In react, we might have several components we want to display at a specific time or action by a user to display a different interface or view. In this case, routes play an important role.

In this post, we are going to create a simple react app with 3 components (home, about, contact), then use simple routes to navigate to these separate components.

1. Creating react app:

We are going to use the npx.

npx create-react-app my-app
cd my-app
npm start

App Structure

2. Creating the various components:

Now I will create a directory called 'components' in the src folder and place all my components in them.

About.js
Home.js
Contact.js
Navbar.js
Footer.js

Since we are not passing some data for now, we will use stateless(functional) components.

The sample navbar.js file looks like this:

import '../App.css';

let Nav =()=>{
    return (
        <div>
            <nav>
            <div className ='logo'>
                <p>Logo</p>
            </div>
            <div>
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </div>
            </nav>
        </div>
    )
}

export default Nav

3.Install react-router-dom:

npm install react-router-dom

4. Import all of the components you created in the App.js file

import "./App.css";
import Nav from "./components/nav";
import Footer from "./components/footer";
import About from "./components/about"
import Home from "./components/home"
import Contact from "./components/contact"

5. Add your Nav and Footer components in the jsx

function App() {
  return (
      <div className="App">
        <Nav />
        <Footer />
      </div>

  );
}

6. In the Nav component, import NavLink from the react router module and replace your anchor tags with the NavLink tag. The to Attribute should point to the route you are need. Eg:

'/' and '/home' for Home component
'/about' for About component,
'/contact' for Contact component.

import {NavLink} from 'react-router-dom';

<nav>
    <div className ='logo'>
        <p>Logo</p>
    </div>
    <div>
        <ul>
            <li><NavLink to = '/home'>Home</NavLink></li>
            <li><NavLink to = '/about'>About</NavLink></li>
            <li><NavLink to = '/contact'>Contact</NavLink></li>
         </ul>
    </div>
</nav>

7. Import the BrowserRouter and Route from the react-router-dom in App.js

import { BrowserRouter, Route } from "react-router-dom";

6. Wrap the returning div in the App.js component in the BrowserRouter tag. Then use to the Route tag to specify each tag.

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Nav />
        <Route exact path = '/' component = {Home}></Route>
        <Route  path = '/home' component = {Home}></Route>
        <Route  path = '/about' component = {About}></Route>
        <Route  path = '/contact' component = {Contact}></Route>
        <Footer />
      </div>
    </BrowserRouter>
  );
}

7. Save and refresh then run the script.

npm start

You should have this display.

Here is the link to the github repo. It contains all codes and the css file as well.Please do well to leave your comments and taughts. Thanks
Github repo

Next: Implementing React Routes(Part 2- Why Use NavLinks and Not Link tags)

How to properly install MongoDB on windows 10

Yunwen Eric — Thu, 17 Dec 2020 09:11:48 +0000

What is MongoDB

MongoDB is a cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas. MongoDB is developed by MongoDB Inc. and licensed under the Server Side Public License (SSPL).
Relational databases are fast growing and gaining grounds in modern day tech related fields like AI, Machine Learning, Big Data, Data sciences and more. Nowadays, relational databases are easy to learn and approach as well and MongoDB happens to be one of them.

Procedure

To install MongoDB, the following steps should be used:

Step 1:

Head to the official MongoDB website and download the latest version of MongoDB Community server. Click here

Step 2:

Locate the downloaded file and run the installation by right clicking on it then clicking install on the dropdown.

Step 3:

Agree to the terms and conditions of installations then click on next

Step 4:

After approving the terms and conditions, this page pops up. Click on next to continue

Step 5:

Choose the type of installation you’ll need. The complete installation is recommended as it will completely install all necessary and demanded features of MongoDB. But if you are an advanced user and want to go ahead with custom installations, that’s okay. For simplicity, I will use the complete installation procedure. Click on next after this.

Step 6:

Next, you need to specify the configuration of MongoDB. If you will like it to run as a network service user or a local/domain user.

Step 7:

Click on install and wait for the process to complete

Step 8:

Be patient and wait while the installation process completes

Step 9:

Click on finish and you are done

Conclusion

To use MongoDB, you will need to run the script from the installation directory. How ever to make it accessible everywhere on your command line, you will need to add it to your system path.
If you will like me to write a post on how to add this, comment on this post and let me know

Thanks
Merry Christmas and Happy New Year 2021

Convert user story of a simple library to ER and Relational diagrams in less than 10mins

Yunwen Eric — Wed, 02 Dec 2020 08:56:49 +0000

Introduction

The development process of an app/web app, follows 5 steps;
Analysis, wireframing, Designing, Development, Deployment and Maintenance. Designing appears to be the 3rd step. In this step, it entails both frontend and backend design. The frontend design is concerned with the User Interface while the backend concentrates on the database.

Database designs is very critical and important as it determines the nature the application works, data is manipulated and accessed. For applications that might scale up in the long term, it is very important to design a proper database which will suit future use and demands.

A user story is a tool used in Agile software development to capture a description of a software feature from an end-user perspective. A user story describes the type of user, what they want and why. A user story helps to create a simplified description of a requirement.

Convert user story to ER Model

To convert from, read through the user story and note all verbs and nouns. The verbs represents Relationships while nouns represents entities(objects). Carefully select and pick out the necessary nouns(entities/objects) and verbs(relationships).

This is a sample user story I will be using Readme

ER Model Approach

Entities(Objects)

Books
Book copy
Patron

Relationships:

Loan
Reservation

Attibutes(Properties):

ISBN, Title, Author, Name, Due date, Date of reservation, copy #, loan1, loan2, library card #.

Primary Keys:

Attributes that can uniquely identify an entity

ISBN
Library card #
Copy #

ER Diagram

Relational Diagram

Drawing tool:

Lucid

Conclusion:

The ER Model is based on real life scenarios; creating relationships between entities base on their real life applications.

The Relational Model is an approach in database design that organizes data base on first principle predicate logic. This organization primarily is in forms of tables.

20 Top frontend free development online tools

Yunwen Eric — Tue, 24 Nov 2020 11:43:11 +0000

Introduction

Logos (Updates June 2022)

Logo Creator

Are you wondering about how to go about creating a brand for yourself?
Don't stress anymore. On this platform, you just need a name and a tagline that's.
You can also customise your brands using the design editor which is easy to use and does not require you to be an expert in UI/UX. You can export your assets in several formats as well!

Design

Figma

Figma is a vector graphics editor and prototyping tool. It is primarily web-based, with additional offline features enabled by desktop apps for macOS and Windows. This can really come in handy for design.

2.Removebg:

Remove backgrounds 100% automatically in 5 seconds with zero clicks. You upload an image, and it automatically removes the background for free.

3.Photoresizer in KB

Instantly resize and compress photos to an exact file size in KB. Works entirely in your browser – fast, private, and free. Perfect for government forms, exams, job applications, and online portals that require strict upload limits.

4.Free Logo

FreeLogoDesign is a free logo maker for entrepreneurs, small businesses, freelancers and organisations to create professional-looking logos in minutes. Get a free logo for your website, business cards or correspondence.

5.Inpaint

Inpaint reconstructs the selected image area from the pixels near the area boundary. Remove undesirable objects from your images, such as logos, watermarks, power lines, people, text or any other undesired artefacts.

6.Tiny Png, Compressjpeg

TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files.

Colors

1.Material color

This site aids you with diverse and a variety of colours for your designs

2.ColorZilla/eye dropper

ColorZilla and eye dropper are browser extensions that aid you in easily picking up the colour code from any site with very high precision. Imagine you need the colour code.

3.Colors.co

This site gives you the option to select several colours, generate several colours and instantly get their colour of a particular site, no need to explore the dev tools to inspect the colour. Just use this tool to get the colour.

4.CSS Gradient, UI Gradients

Automatically generate your CSS gradient with a suitable GUI.

5.CSS Generator

Automatically generate the best box shadows, borders and more for free and get CSS code.

6.Animista

These tools aid you in generating CSS animations and automatically get the CSS equivalent code.

7.Free CSS Preloaders

Illustrations

Undraw

Undraw gives you a ton of illustrations for your design. It has a search bar where you can query based on what you are designing. You can also select your custom colour and all illustrations will be redesigned based on the new colour within a second.

UI inspiration

Dribble Dribble gives you a variety of designs for development. You can search for your designs as well as find designs based on the type of device: Mobile or web.
Uplabs

Images:

Pixabay
This is a site where you can freely download images, illustrations, videos and vectors. These images are freely licensed for commercial use.
Pexels
Similar to Pixabay, this site offers pictures and images of various sizes and orientations for your site free of charge.
Unsplash
Unsplash is similar to other image providers, has a large variety of images and an advanced search bar. The search bar permits you to search wrt orientation, gender, number of people and more.

Diagrams

Draw.io This tool is very important for prototyping and designing. It can help you to draw your front-end design structure if you want to share ideas with your friends.

Step by step installation of XAMPP on Windows 10

Yunwen Eric — Mon, 09 Nov 2020 15:39:07 +0000

Introduction

XAMPP is a free and open-source cross-platform web server solution stack package developed by Apache Friends, consisting mainly of the Apache HTTP Server, MariaDB database, and interpreters for scripts written in the PHP and Perl programming languages.

XAMPP stands for:

X: Cross Platform, as it supports all the moder operating systems like Windows, Mac OSX, Linux etc.

A: Apache Web Server

M: MySQL database management system.

P: PHP installation

P: Perl scripting language

How to go about it

Requirements:

Before stating the installation process, you should have the following;

A Computer with windows 10 Properly installed
A stable Internet connection

Step1: Download Xampp

Firstly, go to the official Xampp website and download the windows version
Click here

Step 2: Run the installation package

Double click on the installation package or right click and click 'run as administator'

Step 3: Choose the location for installation. It is recommended to use the default location. Click next

Step 4: Select your default installation language in the dropdown on the top left

Step 5: Uncheck or check the box

If you don't want to be redirected to the apache and friends site for more details on Xampp. Click on the next button to continue. This will start up the installation process. Just seat back and wait for the installation process to complete

Step 6: Prompt

Occasionally, the installation process will prompt you to allow network access for the apache server. Once you permit this, the installation process will smoothly continue.

Step 7: Finalizing the installation

Once this is all done the finale installation page appears. If you want to run Xampp instantly, check the box and click on finish.

Congratulation

Felicitation, you have successfully installed Xampp on your windows 10

10 Reasons why you should be a developer in Cameroon

Yunwen Eric — Thu, 05 Nov 2020 20:33:07 +0000

Introduction:

A developer is an individual that builds and create software and applications. He or she writes, debugs and executes the source code of a software application. A developer is also known as a software developer, computer programmer, programmer, software coder or software engineer. Cameroon is one of the developing countries in central Africa facing several challenges especially in the tech domain. There are several reasons why you might want be in Cameroon and this post seeks to encourage you to engage in this field

Reason #1: Few Developers, much work to do!

Based on statistics given from DAXX, this proofs that Africa contribute very little to the world developer communities. Research from Quartz Africa shows that Africa is growing but Cameroon is not even among the top 10 countries in Africa. This makes the market pretty rare with fewer developers. Hence a promising field.

Reason #2: The level of Cameroon on the development hierarchy

Cameroon is ranked 151 in the world (21 in Africa) on the 2018 Human Development Index showing a lot of development opportunities especially in the technological fields. Developing countries, face a lot of technological related problems. Therefore, engaging in tech as a developer is a bonus.

Reason #3: Job Market/Freelancing

Anyone in Cameroon operating a business, no matter how small wants to scale up and have a larger audience. They may need sites, mobile apps, publicity and more. As a developer in Cameroon, you easily come in contact with job opportunities. This is still no big deal. You can start free lancing as young as you are and gain experiences all the way up. From the Salary Explorer Statistics, an average developer in Cameroon earns a monthly income of about 120 -500k. Some of these jobs may sometimes require advanced skills or technologies you have not learned.
The next point explains what you can do.

Reason #4: You learn and collaborate everyday

Truth being that as a developer, technology is advancing every day, old technologies are becoming obsolete and new technologies are coming up; How do you handle all these? Well, you don’t need to learn all technologies, In fact you can’t. All you need to do is keep an open mind and be ready to learn. A developer community provides you with a chance to even learn alongside with others, thus sharing your difficulties and solving challenges together. Some dev communities include; The Seven Dev Community Douala, GDG Bamenda, GDG Buea, GDG Douala, Facebook Developer cycles Douala etc. As a developer, learning a different technology won’t be so hectic as you might think. The next reason explains why.

Reason #5: Tons of available free learning resources

As mentioned earlier, there are several learning resources on the internet that may aid you as a developer. There are online resources, which concentrate only on web development, android and more and give you an extended library to learn. Some of these includes;

Reason #6: Several competitions

As a developer, I happened to have stumbled across several competitions and contest online. Several companies and organizations both home and abroad that are ready to encourage people to get into technological fields. Some schools also organize hackathons and coding challenges in schools to encourage learning and get more people involved in tech. Some top competitions include; Google summer of code, Top coder, Google hashcode, Microsoft Imagine Cup, etc

Reason #7: Being a developer is not really difficult.

Many people think because they were not good in Mathematics, computer sciences or any other science related subject, the field is not ideal or suitable for them. Truth being that, you are as good as you put in your time and energy. I have seen several developers who haven’t even done sciences in their life, now coding and writing computers programs and they are really good at it. Initially, you might feel like ‘this isn’t for me” but believe me every developer gets to that point where they get stuck and feel miserable (imposters syndrome). You don’t need to cram, the more you learn and do, the more it sticks. Still in Cameroon, we got tones of self-taught developers who have made it and have successful careers.

Reason #8: Certifications doesn’t count that much

Unlike several other fields like medicine, accountancy, etc, where you need to present a proper training certification, and even proof that you were amongst the top 5 in your training batch, the developers market is not so. People are far more interested in what you can do and what you have done so far with what you have learned. Most developers are employed based on recommendations, activeness in developer communities, github trek and more.

Reason #9: Easily get projects/ Open source

It’s very easy to get a project and implement in Cameroon. Given that Cameroon is not too technological advanced, you have hundreds of projects flying around the internet which have been implemented in other countries but not in Cameroon. This saves you from the stress of thinking “what can I do with what I have learned”. Open source projects are project that give you access to their code base and you can freely modify to meet your needs. Contributing to open source projects give you a chance to meet other developers, relate, learn and even make money. Most paid techs projects are usually open source projects.

Reason #10: You can easily Switch specialties

You will accept with me that a doctor switching specialties from a gynecologist to an ophthalmologist is almost unrealistic and difficult. This is accounted for several reasons such as time spent in training, experiences and much more. It will take some gynecologist years to become an ophthalmologist. But as a developer, switching your specialties from a web developer to and android developer is a matter of weeks or months depending how easily the you can learn.

Conclusion

There are several other reasons why you should be a developer in Cameroon. Based on the statistics and details given above, I hope this spurs you to be a developer. So what are you still waiting for? Get up and start up your career.

In my next post I will be exploring some top tech hubs and schools in Cameroon that can get you started or along.
Make sure to leave your comment let me know what you think!

Step by step installation of MySQL Workbench on windows 10

Yunwen Eric — Thu, 05 Nov 2020 08:31:50 +0000

Introduction

What is MySQL?

MySQL is an open-source relational database management system (RDBMS).Its name is a combination of "My", the name of co-founder Michael Widenius's daughter, and "SQL", the abbreviation for Structured Query Language. A relational database organizes data into one or more data tables in which data types may be related to each other; these relations help structure the data. SQL is a language programmers use to create, modify and extract data from the relational database, as well as control user access to the database. MySQL is used by several developers and tech companies such as facebook, github, netflix, youtube, ebay, paypal, linkedIn, etc.

What is MySQL Workbench?

MySQL Workbench is a visual database design tool that integrates SQL development, administration, database design, creation and maintenance into a single integrated development environment for the MySQL database system.

Requirements

A Pc with windows 10 properly installed with; Microsoft .NET Framework 4.5.2, Microsoft Visual C++ Redistributable for Visual Studio 2019 and Microsoft Windows 10 or Windows Server 2019

Stable Internet Connection

Procedure

Step 1: Download MySQL Workbench

Go to the official MySQL Workbench page and download it. You can easily do that by Clicking here

Step 2: Locate file and Run Installation

GO to your download folder or wherever the file has downloaded in your pc and double click on the file or right click on the downloaded file then choose install

Step 3: Next

Click on the next button to proceed with the installation

Step 4: Select installation Directory

Choose the folder you want to install MySQL Workbench. Usually, it is advised to leave the default installation path chosen by your system. When you are done, click next.

Step 5: Select the type of installation:

In this step the type of installation you want. By default the complete installation is chosen by the system. But if you are an advanced user and know how to walk your way by the custom installation, then choose the custom install. It is recommended to select the complete installation.

Step6: Review for final Installation:

In this final step, review your installation steps. If there is anything you see not proper, the go back and adjust it else you wont be able to do so. So far so good, everything is okay. Click on install to proceed.

Step 6: Wait

Take a seat and wait for the installation process to run to completion.

Step 7: Done

Once this is done, click on finish to proceed. uncheck the box to the extreme bottom left if you don't want to run MySQL Workbench immediately. I'd prefer you run it instantly to see if it was properly installed.

Step 8: Test

If everything went well then congrats you did it. You should see a window open up that looks like this.

Conclusion:

Congratulations you did it. If you faced any difficulties in this post, Please do well to comment and share your feedbacks. Thanks

My First HacktobeFest Experience

Yunwen Eric — Sat, 31 Oct 2020 18:38:37 +0000

What is HacktobeFest?

Hacktoberfest 2020 is a month long virtual festival event to celebrate open source contributions presented by Digital Ocean, Intel and DEV. It is the easiest way to get into open source!

How did I know about HacktobeFest?

I learned about HacktobeFest at a tech talk organised by seven Academy on open source
It was so inspiring how I could learn and apply in the code base of other people.
So I set forth to do by first open source contributions.
I stumbled across several repositories and was able to contribute and send my 4 pull request. In some days later, I recieved notifications telling me that my pull request were merged.
Though all these repositories were just simple repositories teaching me about how to use GitHub and sending pull request,and some of my pull request are yet to get matured it was a great learning opportunity.

Repositories

My thoughts

I learned alot and it was an awesome experience. I was glad I could complete the challenge. From now henceforth, I know how to go by looking into other open source projects and contributing meaningful code.

Thank you so much HacktobeFest 2020.