SUCHINTAN DAS

Posted on Jun 9, 2022

Git and Github Tutorial: Beginner to Advanced (Part 3)

#github #git #beginners #tutorial

Table of Content

📌 Introduction

📌 Git Terminologies

📌 Setup of Git and Github on System

📌 Concept of Github and Git

📌 Staging

📌 Beginner commands of Git

📌 Merging Conflicts

📌 Resolving Conflicts

📌 Some Practices to avoid Conflicts

📌 Pull Request

📌 Advanced Git Commands

📌 Thank you

Important Note ‼

Hello fellow readers, this is a going to be third part of the series Git and GitHub Tutorial: Beginner to Advanced. Are you a new reader?

Here's the link to previous parts of the series -

👉 Part 1

👉 Part 2

Ok now let's move forward with the topic without wasting anymore moments.

Merging Conflicts

I know most of you guys are familiar with merging and is even familiar with the command that is used to merge two branches. Now's lets dig a little bit deeper over the topic. I can guarantee you, it would worth it.

While merging of two branches there are two types of scenario's that occur-

No Conflicts :

In this case the changes are on different files so Git is not confused about merging them and Auto-merging is done by Git itself 🙂.

Output:

Merge made by the 'recursive' strategy.
src/components/testComponent.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)

Conflicts :

In this case two developers 👨‍💻 have edited the same file with two different things. Due to this reason when the merge is done it is landing into a conflict as Git can't understand which changes are meant to be kept and which ones to be discarded 😔.

But don't worry ! Git is a smart system and it knows it needs to ask the user in such cases. Let's see how it looks-

Output :

On terminal :
Auto-merging src/App.js
CONFLICT (content): Merge conflict in src/App.js
Automatic merge failed; fix conflicts and then commit the result.

On Editor :

Resolving Conflicts 🤙

Now that you have faced a conflict on the codebase , let's learn how to fix the same.

❗Note: I am using VS Code while taking some screenshots. If you are on a different code editor, it may vary a bit. The editor is just a tool, so don't worry too much if you are on a different one, the concepts are important and all other things would be same.

There are two ways to fix this-

Manual : let's take the adverse case for an instance that someone is using notepad for coding. I know that's somewhat funny 😅! but for that person the editor would not make things easier 💁‍♂️.

Here's the format of the conflict through git on codebase-

<<<<<<< Your current branch
----------------current branch code-----------------
======
----------------merging branch code-----------------
>>>>>>> Merging branch

Just select the one you want to keep and remove the others. Let's take you want to go with the current branch code.

So, change this to -

--------------------current branch code--------------

Using Editor : If you are using a good editor than your editor would be helping you fixing such conflicts. Let's see a demo image how it looks on an editor.

The files which have conflicts are at Staged changes so you can either list them, or see all the files which are Red colored to get an idea of those files with conflicts.

Secondly with the use of those buttons you can select the code of which branch you want to move forward with and it would remove all other unnecessary stuffs for you on it's own.

As you are done with removing all such things just add all the files with git add . and then same procedure of commit and push ( git commit -m "commit_message" + git push )

Some Practices to avoid Conflicts ✅

Facing too many conflicts on a codebase can be a tiring task to handle. Here's some good practices to avoid such conflicts which would make your life easier -

Try to follow microservice model for big projects.
Make use of some framework to reduce reductant code and for getting controllers , middleware , web bundle etc.
Try to divide the work properly so no two developers find the need of working on same file.
A good and active communication are always important which helps in resolving or avoiding such conflicts very easily .

I know this section is something which most of you guys will think as not so important , but which you would be working over a codebase you will know why we need such stuffs.

Pull Request

I know some people would have heard it quite frequently while working in a company or open source projects. In case you haven't don't worry ! I am here to introduce you to this concept 📕.

Let's try to understand it through a diagram -

While working in a organization 🏢, there need some control over what things can go to the important branches. Like dev branch which is mostly second important branch where all the things related to next release are integrated.

Main branch is one of the branch that organization uses for CI CD pipeline with their hosted website. So, anything in that branch will go live in front of the users 💁.

So, yes only some people should be able to push any code to these critical branches. Otherwise things can go very bad.

That's where Pull Request ( PR ) comes into play. Every developer when they want to merge their code with any of these critical branches. They make a pull request through GitHub GUI and the authenticated person will check all the code and if it is correct, allows the merge to happen.

Let's see how to create one Pull Request through GitHub GUI.

Go to GitHub > Repository > Pull Request > New Pull Request

Select both branches ( Format: To <- From ) > Create Pull Request

Write PR title > PR Explanation ( It's important ) > Create Pull Request

Bonus Step 🟢( Conflict on Pull Request )

Are you are reviewer ? And got a PR like this ? Worry not let's cover this issue for you so that you can work without any worries.

To fix this use these command ( GitHub GUI will not help you here !)

Commands :

git checkout base_branch_of_PR
git merge compare_branch_of_PR
**solve conflicts as discussed in merging conflicts**
git push

Advanced Git Commands ✌

I know many people were waiting for this set of cheat sheets. So, here we are-

🖇 Create and Checkout Branch Single Command

Now you know all the beginner commands to do the same. Why not speedup this process with a single command ?

git checkout -b <name_of_branch>

Output:

Switched to a new branch 'name_of_branch'

🖇 Command to list all recent worked branches

Now you know all the beginner commands to do the same. Why not speedup this process with a single command ?

git for-each-ref --count=10 --sort=-committerdate refs/heads/ --format="%(refname:short)"

Output:

testbranch1
testbranch3
main
testbranch
feat/001

🖇 Delete origin with no Remotes

Many times we have a branch deleted from the repository but we didn't noticed it and it's local reference is still there. Use this to delete them in one go.

git fetch --prune

Output:

No Output

🖇 Delete all Local and Remote branches

Are you done with a project. Want to clear all branches and local code stored on it ? Use this -

git reset --hard

Output:

No Output

🖇 Logs of Git

Want to get a view of all the changes that are done to Git. Yes, it's possible in Git to view history.

git log

Tap Enter for more and q to exit.

Output:

commit ba40fd60c55b00ef828d6f5490d7b3d014a9d33 (HEAD -> testbranch3, origin/testbranch1, testbranch1)
Author: Your_Name < your_email >

🖇 Summary of Logs of Git

Can't get a good idea with just the title ? Use this command to get a good detailed brief over all the logs

git log --summary

Output:

commit 8ba40fd60c55b00ef828d6f5490d7b3d014a (HEAD -> testbranch3, origin/testbranch1, testbranch1)
Author: your_detail
Date: Thu Jun 9 16:51:35 2022 +0530

commit for PR

commit dc98f62f53deee69fcc9a1088b606e49fc6d3
Author: your_detail
Date: Thu Jun 9 11:10:01 2022 +0530

🖇 Compare two branches

Are you going to create a PR . What if I tell you , you can compare two branches on the terminal itself and get and idea how many changes are there between the branches. It's cool right ?

git diff <source_branch> <main_branch>

Output:

diff --git a/src/App.js b/src/App.js
index 57beeed..c3b970f 100644
--- a/src/App.js
+++ b/src/App.js
\@@ -7,7 +7,7 @@ function App() {
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
- Change2
+ Change12
</p>