The complete Web Developer in 2018

Git and GitHub Guide

Part-2
Branching
 For all the windows users.
You can use Gitbash terminal, or a Visual Studio Code terminal.
Download it here https://git-scm.com/downloads

GitBash for windows

VS Code displays a branch name.

However, It doesn't display a branch
name In the PowerShell terminal.

My suggestion is to work with the

Git Bash terminal.

VSCode
 Refers to Section 15, video #145
Git and GitHub Guide Part-2 Branching

The complete
Web Developer in 2018
Andrei's Marcy's
Little feature Bonus features branch
branch

Master
Master Branch
branch Final product

Mister x features Don't

branch Work on master
 Create a new branch

Let's create a new branch (terminal)

1. Type git branch littlefeature (this will create a new branch)

2. Type git branch (will display all branches available)

3.Type git checkout littlefeature (Switch to a new branch)

Little
feature
Branch off

master master

* master means we currently on master branch.

Note:
If something went wrong and you need to delete
the branch, type git branch -d littlefeature
The above command will delete the mistaken branch

4. We successfully switched to a new branch

 Let's modify index.html now

1. Open index html (use IDE or terminal) Type: start code

index.html

2. Locate the <h2> tag and change the title to

<h2>This is thebackground</h2>

3. Save all, then do the following procedure...

4. git add index.html

5. git commit -m“changing title“
6. git push

If it doesn't work and you get an error

fatal: The current branch littlefeature has no upstream branch.

To push the current branch and set the remote as upstream,
use git push --set-upstream origin littlefeature

Fix.
Type git push –set-upstream origin littlefeature

After using the above command once,

you can then use a regular
git push command (without notifications)

Finally, you can cheat and type this

git push origin littlefeature
 Go Back to https://github.com

1.We now see a yellow notification

You recently pushed branches

2. If we click the green button

Compare & pull request
It will open the a pull request window

Marcy
Marcyi've
i'vechanged
changedthe
thetitle
title
What do you think?
What do you think?

3. Eneter a message, check the changes

And finally click the create pull request
button
Note:
We've made a change to index.html
Marcy will decide aprove it or not.
 Hey marcy I made a pull request
Okay now STOP! Do something about it

Do you really understand what is going on here!?

No...
Yes or Yes!?
Andrei
marcy

Hey Marcy I made a pull request. Please look at my html file,

compare new changes to the previous one.
And if they good enough please pull them, and merge them into the master branch.
Marcy is an administrator and she will open your pushed files on a littlefeature branch.
She will compare them to the previous one, and decide whether to prove these changes or not

Hi Andrei!
Let's compare your changes
Important Hmm..okay looks good!
At this point you as a developer I'm pulling this into the master
Little
Just need to wait for Marcy's approval. feature Okay it's merged now!
That's it. Branch off
Don't be confused by the rest of the
diagrams.

Let's see How Marcy handle my

master master
request on her side as Administrator.

With this information in mind let's

Proceed to the next step.
 We successfully created a pull request (PR)
As you can see antonykidis(Andrei) wants to merge
3 commits into master from littlefeature

Hey Marcy I did a little

Change on little feature,
is it okay for me to
Merge it to master?
?

Little
rg e

feature
Me

1 commit
master master 2 commit
3 commit

Let's see
what Marcy
will probably do..
 Marcy will Open-up a pull request link

Cli ck
1.

3.Click

2.Click

Hover
on
plus
sign
 Hey everything Looks good!
(Click a plus sign)
1.Strat a review, add some comments, submit
the Review.
2. Click Review changes, add a comment, and
Finally click Submit review
3. Click Merge pull request, then confirm merge.

l l req u est.
il l mer ge a pu
ew
Then Sh
Pull request is now merged into the master.
Marcy can now delete littlefeature branch if she want.
 Merge Conflicts 07:45 (time)

What if Marcy wants to create her own feature!?

Marcy's bigfeature

Master Master
branch branch

Andrei's
Littlefeature
 I want to create my Marcy will create a new branch like this
own „bigfeature“
branch. Step 1

1 git branch bigfeature

2 git checkout bigfeature

Andrei's Marcy's bigfeature
Littlefeature

Master Master
branch branch

Step 2

Marcy changed the title back to the

Background generator

Step 3 She will then do a regular procedure, to save the changes.

If something went wrong, and you
want to delete the branch, you can use
The following commands.
1 git add index.html And start all over again.
2 git commit -m “reverting back to old title“
git branch -d branch_name
3 git push
git branch -D branch_name
 Now go back to a GitHub. We again see
The pull request. Don't compare and pull request
This time!

Before comparing and pulling a request

Marcy decided to add an exclamation mark
to the title

Marcy adds exclamation mark

2
She then Save all...and follow the below steps 3
1
1 git add index.html

2 git commit -m “adding exclamation mark“

3 git push

Let's go back to GitHub.

So now we have 2 commits
1. is the background generator
2. and the background generator! with the exclamation mark
4
1. Click Compare and pull request button,
2. Add a comment. 5
3. Click Create Pull Request button.
4. Merge pull request button.
5. Finally click Confirm merge button.
 Marcy just merged a pull request from a bigfeature branch.
Meanwhile, Andrei decided to create a new branch too

In the terminal window, Andrei wil enter

Conflict the following commands:
branch 1. git branch conflict
2. git checkout conflict

Me
Marcy's bigfeature

rge
Master Master

d
branch branch

3 Andrei decided to
completly remove the
Andrei's
background generator title
Littlefeature 4. save all

He will then go back to a terminal

And enter the following commands:

5. git add index.html

6. git commit -m“deleting title“
7. git checkout master
8. git pull l
. htm
9. git checkout conflict e x
10 .merge master into the conflict branch. Ind
11. type git merge master
 Conflict
branch

ng
rgi
me Master
branch Master
branch

littlefeature
Important to read!

Let's understand the problem.

1. We Made a conflict brach.

2. Then we removed the title from HTML.
3. Then Andrei did git add . Then git commit -m „deleting title“
6. By now you should recieve the following error But before pushing these changes back to a GitHub, he decided to
Merge whatever in the master, into his conflict branch. Yes, he could
7. If you Open a (Visual Studio Code/Sublime) push the title-less index.html back to a GitHub. But he came up with
You sould see the the following output: another idea: He said let's see what is in master these days....
Let's see what is inside the master now. Let's pull it intothe conflict just
to be updated. Yes sure, he didn't know that master is now different from
a conflict, because he did not pulled nothing for a while (just an example)

4. So we got back into the master branch.

5. We then pulled master's current version (to a local computer)
6. Then we merged the master into the conflict. Just to be sure the conflict
is synchronized with the master. But we have invoked an error. Because
master contains a title, but a conflict branch doesn't have a title.
So we get an intuitive user frendly notification from VS code or sublime.
Saying that there is a changes to be made, and your files different from master.
So!?...Where is the catch? Why we all need this??? you say....
Okay, You worked on some branch, so once in a while you want to update
Your branch with a latest changes. So it is easier to merge a master into
Your OWN branch, rather then download files manually, copy all of its contents, then
Paste all of these into your own branch. You see the difference??? :-)
What if a master branch contains thousands of files? You will get nuts until you copy
them one by one into your branch. So We simply merging the master, and it does
all the dirty work for us. without worrying we missed something.
 <<<Head This is conflict brach

>>>master This is master branch

I don't know you I don't know you

conflict master
Andrei's
Littlefeature
Marcy's bigfeature

Master has a title Ask Marcy first if she want to leave the title.
<h1>background Generator!<h1>
Master Master If yes, we can accept the Incoming changes by
branch branch clicking the Accept incoming link,Or delete
manually the following:

Merging master <<<<<<<<<<< Head Current change

==================
into conflict >>>>>>>>>>> Master Incoming change

Conflict has NO Leaving the

title <h1>background Generator</h1>
Conflict branch In place
If you edit the file manualy
Finally use the following commands
1 git add index.html

2 git commit -m “Okay we leaving the title as is“

3 git push

In the next section We'll see

how to keep your fork up to date
 keep your fork up to date

Origin area (forked repo)

Dmitry
Hey there! Our forked repo has a Configuration file
I am a forked copy We have to set it up before
Of the below repo We can sync with origin

Our configuration listed here

Type git remote -v
To view this message

https://github.com/zero-to-mastery/ZtM-Job-Board
Master brach Upstream area (original repo)
 #Step1 Configuring a remote for a fork

Fetch == pull
Push == push

Dmitry
Dmitry

We all set up now

But we still have to pull

From upstream, and
Merge with origin.
 # step 2
Let's Pull, and merge

Upstream Origin repo

merging

Dmitry
Origin Forked repo

Done!
We now synced with the original
repository
What the hell Was that? I am a „Configuration“ file.
Okay let's try „explanation for dummies“ I can do some tricks.
But tell me what should I do.
As I had a real hard time to understand this the easy way
Okay seems like you want
To setup your fork, so it could
Without Comunicate with upstream repository.
My config file
I am a real dumbass
.Git/Config.file Aha...I can now sync all the changes
You made in original repo with the fork.
Tell me how should I
Connect a forked repo
with GitHub's origin
repo, and keep it up to
date?

My forked repo Awaiting your

instructions here.....

Git remote add upstream....

I forgot to tell you that

I have a special configuration file
In my .git folder
Non of your friends thold you of
Its existence?
GitHub ….I Kill you!
Some repo is here A simple representation of config file
As seen in gitbash terminal.
To sync a fork with the original repo you have to
set up comunication rules between these two in the
Forked repository configuration file (in .git) folder
 TO BE CONTINUED
IN PART 3 (Contribute to the open source)