DEV Community: Ayebidun Ezekiel

Introduction to Git and Github

Ayebidun Ezekiel — Fri, 03 Jun 2022 09:03:20 +0000

Outlines

Introduction to git
Types of version control
Introduction to github
Why use github
How to create a github account
How to install and configure git

Introduction to git

When you are working on a simple project, such as a single page html, it is very easy to remember the last thing you changed and where the changed occurred.

Version Control Systems (VCS) help a software team manage changes to source code over time. VCS software includes tools for saving the state of a project, viewing the history of changes, and reverting changes.
Developing software without using version control is risky, similar to not having backups. VCS can also enhance and speed up development. Depending on the version control software used, many developers can work on the same code at the same time.

Types of version controls

There are two types of version control.

Centralized version control system
Distributed control system

Centralized VCS

All the team members or people working on the same code connect to the central server to get the latest copy of the code, and to share their changes with others. The pitfall of centralized VCS is if the server goes offline, we can’t collaborate and save snapshots of our project. So, we have to wait until the project comes back online.

Distributed Version control systems

we don’t have this problem. Every team member has a copy of the project with its history on their machine. So, we can save the snapshots of our project locally on our computer. If our server is offline, we can synchronize our work directly with others.
One of the most popular version control systems is Git, a distributed VCS.

Git has another advantage - it is distributed.
Rather than having only one single place for the full version history of a project, every developer's working copy of the code is also a repository that can contain the full history of all changes. Git was created by Linus Torvalds in 2005 for development of the Linux kernel, with other kernel developers contributing to its initial development.

Introduction to github

GitHub is the cloud-hosted Git management tool and git is Version Control System. Github helps us to share and store our code easily.

Why use github

Github helps us to share and store our code easily. With the help of github we can work on project irrespective of our location or schedule.

How to create a github account

The steps below illustrate how to create a github account;

Load GitHub website on your browser or click GitHub

Create a new account by clicking the sign up button and fill up necessary information such as username, email password etc.

lastly login to your github account using your registered username and password Boom you now have a github Account.

How to install and configure git

Before we can monitor or control our project, we need to have git install and configure on our local machine.

Setup and installation

You can download git from here and for installation, use these instructions provided by git (if it’s not already installed).

configuration

if it's your first time using git then you need to configure it, so that git can identify the user. follow the steps below to configure git on your local machine

Steps to configure git on your local machine(computer)

Search for command prompt on window and command Line mac
then open program to lunch the command interface
on your command line run the command below to configure git on your machine:

git config — global user.name “Your Name”
git config — global user.email youremail@example

So far, we have been able to cover some basics of git and github, in our next article we are going to be covering How to push our project to github. Please do comment, share and like, see you in the next article.

How to push your project to github

Ayebidun Ezekiel — Sun, 24 Apr 2022 12:08:57 +0000

Introduction

Github helps us to share and store our code easily. Today we will learn how we can push a project which is stored locally to a remote server or github. Before we push the project to Github, we need to configure and install git on our computer and you also need a GitHub account.

If you don’t know how to configure and install git read this Introduction to git and github. If you have already set it up. Let’s continue.

Below are few steps to take to push our project to github

Create a github repo
Initialize Git in the project folder on your local machine
Add the files to the git staging area
Commit the staged files.
Add the remote origin
Push to GitHub

Create a github repo

The first step in pushing your project to github is creating a
github repo. you can do that by following this link . fill information such as project name, description if you want to, and click on create the repository.

Initialize Git in the project folder on your local machine

To initialize git in your project, open command line in the root directory of your project and type the command below

   git init

if you see this, it means you have now initialize git in your project.

Add the files to the git staging area

Add the files to the git staging area, where all the untracked files will be part of the staging area and will be ready to get tracked.

touch readme.md
git status

The touch is a command in git command line follow by the file name with his extension to create a file.
This command git status is used by git to track files.

Now the file created is colored red meaning its untrack, so let add the file to the staging area so it could be track by git.

git add 'file name'

git add .

The git add 'file name' is used to add a single file by its name.extension while git add . is used to add all file at once to the staging area.

Commit the staged files

Commit in git-speak, is the term used for saving changes. Git doesn’t add changes automatically. You need to specify which file and changes, you need to save by adding the files. The commit command saves changes in the local repository of Git.

git commit -m “Initial Commit”

In this command “-m” is used to tell the git, that we are adding a message.

Add the remote origin

Now to go to github to copy the link to our repo or click here

After copying the address, you have to add the origin of the remote repo to the local repo by using the following command.

git remote add origin https://github.com/Ezekiel8807/web.git

this address should be the address of the repo you created on your github account.

Push to GitHub

This is the last phase, now type the following command to push your code to the online repo. Before we push we need to check whether our branch is main or master to check that type the following command.

git branch

In these case my branch is "master" yours might be "main". To push your project use either of the two command below base on your branch name.

git push origin main

git push origin master

if you see this, congratulaton your project is now life. you can now share with friends or other developer.

finally let check the project we push to github by clicking here

So far, we have been able to cover how to push our project to github in continuation of the last article INTRODUCTION TO GIT AND GITHUB. Please do comment, like and share.

File upload

Ayebidun Ezekiel — Fri, 11 Mar 2022 16:01:45 +0000

What is the best method for handling image upload and preview

How to setup back-end server using express and node js.

Ayebidun Ezekiel — Wed, 20 Oct 2021 15:02:41 +0000

I will be explaining to you how to setup your back-end server using express and node js.
Before we proceed let us understand some of the terms we be using here.

what is node

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that is built on Chrome's V8 JavaScript engine. It uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.

It has its own package ecosystem, called npm (Node Package Manager), which is the largest ecosystem of open-source libraries in the world.

Typical tasks for a server are to handle user requests, open a file on the server, access the database, and return the content to the client. But not all web-servers work the same way. In the case of Node.js, it is important to stress its single-threaded, non-blocking, and asynchronous I/O.

For example, consider this comparison of how PHP handles the events of a file request versus how Node.js handles one.

php:

The server requests a file from the file system.
The server waits until the system opens and reads the file.
The server returns the data to the client.
The server handles the next request. opens and reads the file.

node.js

The server requests a file from the file system.
The server handles the next request.
When the system opens and reads the file, the server will return the data to the client.

Since we now understand what node.js is, let's do justice to express.

What is express:

Express.js, or simply Express, is a back end web application framework for Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js.

Lastly let know what server actually mean.

what is web-server:

A web server is software and hardware that uses HTTP (Hypertext Transfer Protocol) and other protocols to respond to client requests made over the World Wide Web. The main job of a web server is to display website content through storing, processing and delivering webpages to users.

Now that we now understand what all the terms mean, let create our web back-end server using express and node.js.

Firstly let's download and install all the application we will be using for this project. They include;

1. Node.js

Download node.js

2. Vs code - text editor

Download vs code.

After the installation process is done, let's open command line or git to setup our back-end server project

   cd Desktop
   mkdir back_server
   cd back_server
   npm init --yes
   npm install --save express
   touch index.js
   Code .

Let's explain the functions of the command above.
cd desktop: change directory to desktop.

mkdir back_server: create a folder 📁 called back_server in desktop.

npm init --yes: initialize node inside back_server. --yes is simply use to skip process.

npm install --save express: it's use to install express in our back_server folder 📂. --save is use to save express as dependency inside the package.json file.

touch index.js: create index.js file inside back_server folder.

code .: Open vs code editor.

Now that our setup is ready, let's start Some coding.

Open the index.js file with vs code

const express = require('express');
const port = 3000;

//initialize express
const server = express();

//index router
server.get('/', (req, res) =>{
   res.send('Hello world');
});

server.listen(port, ()=>{ `server is running at localhost:${port}`});

Let explain the code about.....

We require express module
initialize it to a constant server
create an index router /
send a response of hello world
Then the server is pin to port 3000 to listen to any server call.

Finally let's run our server

   node index

Let's lunch our browser and enter localhost:3000

Wow😲 that cool our server is now running fine. Please leave your comments and advice. Thank you🙏

Types of html inputs

Ayebidun Ezekiel — Fri, 15 Oct 2021 09:31:54 +0000

There are lot of html syntaxs for allowing inputs in our projects.
2day let take them one after the other for better understanding..

Text input

   <input type="text">

input:

Input are reserved word in html enclosed with the opening and closing tag (< >).

type:

Type is one of html attributes in html, they are generally use specify the type of input needed.

text:

Text is one of type_value for the input attribute Type. It's use for getting input data in form of strings or characters.

Number input

   <input type="number">

number:

Number is one of type_value for the input attribute Type. It's use for getting input data in form of numbers.

Email input

   <input type="email">

email:

Email is also one of type_value for the input attribute Type. It's use for getting email address. Other input aside a correct email address throw error.

Button

   <input type="button">

button:

Button is also one of type_value for the input attribute Type. It's use for creating buttons

Password input

   <input type="password">

password:

Password is also one of type_value for the input attribute Type. It help to hide sensitive data.

Option input

   <input type="radio">

   <input type="checkbox">

   <input type="range">

radio, checkbox and range:

They are type_value for the input attribute Type. It's use for getting multiple data at a time.

Color input

   <input type="color">

color:

Color is also one of type_value for the input attribute Type. It's use to get color value.

Url input

   <input type="url">

url:

Url is also one of type_value for the input attribute Type. It's use for getting url as input data.

Date input

   <input type="date">

date:

Date is one of type_value for the input attribute Type. It's use for getting date as input from a form.

Media input

   <input type="image">

   <input type="file">

image and file:

These are also type_value for the input attribute Type. They are use for getting media data such as;

Music file
Image file
Document e.t.c

Creating a cool profile card

Ayebidun Ezekiel — Wed, 13 Oct 2021 09:52:57 +0000

Hello guys,
today i will be showing how I created this cool profile card, let's get started..

Create a workspace

   cd /Desktop
   mkdir profile_card
   cd profile_card
   touch index.html
   touch style.css

cd /Desktop: is use to change directory to the desktop 🖥️

mkdir profile_card: this command is use to create a folder called ptofile_card.

cd profile_card: the command is use to navigate inside the profile_card folder.

touch index.html: create a index.html file inside the profile_card folder.

touch style.css: create a style.css file inside the profile_card folder.

create profile card

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA- 
         Compatible" 
          content=" IE=edge">
         <meta name="viewport" 
         content="width=device- 
         width, initial-scale=1.0">

    <title>Profile page</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="profile-block">

        <div class="cover-img">
            <img src="c.png" alt="cover-photo">
        </div>

        <div class="profile-image-box">
            <img src="a.jpg" alt="profile picture">
        </div>
        <span>Ayebidun Ezekiel</span>
        <p>Full_stack Developer</p>

        <div class="more">
            <button type="button" >Portfolio</button>
        </div>
    </div>
</body>
</html>

styling our profile card

*{
    width: 100%;
    margin: 0;
    padding: 0;
}


.profile-block{
    top: 20%;
    left: 15%;
    width: 250px;
    position: absolute;
    border-radius: 5px;
    box-shadow: 0px 0px 4px 0px #5c75b1;
}

.cover-img{
    width: 100%;
    height: 150px;
}

.cover-img img{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat:no-repeat;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.profile-image-box {
    top: 80px;
    left: 65px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    border: solid 7px #4d6cb2;
    box-shadow: 0px 0px 4px 0px #5c75b1;
}


.profile-image-box img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.profile-block span{
    font-size: 25px;
    font-weight: bold;
    margin-top: 50px;
    position: absolute;
    text-align: center;
    font-family: 'franklin gothic medium', 'arial narrow', arial, sans-serif;
}

.profile-block p{
    margin-top: 80px;
    text-align: center;
    font-weight: lighter;
}

.more{
    text-align: center;
}

.more button{
    width: 150px;
    height: 30px;
    border: none;
    margin-top: 40px;
    color: #ffffff;
    font-weight: bold;
    margin-bottom: 50px;
    background-color: #5c75b7;
}%

Hey👋,

Ayebidun Ezekiel — Sat, 25 Apr 2020 14:09:54 +0000

I'm Ayebidun Ezekiel.

A fullstack developer with over 5 years of experience and very passionate about it. And open to collaboration.

Get In Touch

Facebook: Add me
Twitter: Follow me
LinkedIn: Connect
GitHub: Ezekiel8807
WhatsApp +2348100196214