DEV Community

Cover image for Git and Github Tutorial: Beginner to Advanced (Part 3)
SUCHINTAN DAS
SUCHINTAN DAS

Posted on

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

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.

Banner image


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 :

Demonstration of 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 :

Demonstration of 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 :
Conflict on App.js


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-

  1. 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--------------

  1. 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.

Editor's UI on conflicts

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 βœ…

Best Practices Image

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 -

  1. Try to follow microservice model for big projects.
  2. Make use of some framework to reduce reductant code and for getting controllers , middleware , web bundle etc.
  3. Try to divide the work properly so no two developers find the need of working on same file.
  4. 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 -

Pull Request Demonstration

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.

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

Step 1

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

Step 2

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

Step 3

  1. 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.

Bonus Step

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
Enter fullscreen mode Exit fullscreen mode


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>
Enter fullscreen mode Exit fullscreen mode

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)"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>


πŸ–‡ Delete all Local and Remote branches

Want to delete a folder or file ? Use this command to achieve it ! Most useful while you need to execute such commands through terminal of Cloud.

git rm -r [filename/foldername]
Enter fullscreen mode Exit fullscreen mode

Output:

rm 'file_location'


Thank you

You have made it till the end of this whole series πŸ€—. More such series are on the line .

It would be encouraging if a small comment would be there on the blog. I go through each one of them so do comment πŸ˜‰.

If you want to get a notification πŸ”” when it would be published , don't forget to tap on the follow button ☝.

And at last I want to say πŸ‘‡

Keep coding #️⃣ , keep rocking πŸš€

Discussion (6)

Collapse
rukundob451 profile image
Benjamin Rukundo

Awesome read. Everyone should give it a go.

Collapse
suchintan profile image
SUCHINTAN DAS Author

Thanks Benjamin πŸ™‚, for providing a feedback. It really matters a lot !

Collapse
rukundob451 profile image
Benjamin Rukundo

Surely Das, possibly you could give this a read too dev.to/rukundob451/git-and-github-.... Thank you!

Thread Thread
suchintan profile image
SUCHINTAN DAS Author

Sure will check this out Benjamin !

Thread Thread
rukundob451 profile image
Benjamin Rukundo

Yes surely, you will tell me what you think?

Thread Thread
suchintan profile image
SUCHINTAN DAS Author

Sure , I have posted my comment on that post itself.