Happy Fun Ball

A Lesson on Git Branches and Merging

Lesson Objectives

After this lesson, students will be able to:

Explain how git's version control allows developers to work differently on projects
Explain what a git branch is
Make a git branch
Switch between branches
Merge branches
Resolve a merge conflict

Overview

You will have 2 permanent Branches main & dev
The main branch is only for your final code you want to be deployed when the code has been tested and approved
The dev branch is a permanent branch that you use to have your work in progress and develop your app
You will also have feature branches where you work on things you want to add to the app
When your feature is done then its time to merge the feature into dev
When all of the current features are done and tested in dev then you merge dev into main
Make you sure you understand the concept here then we will demonstrate how to do this

Git Refresher

So far, you have been using git to get code (pull) from a remote repository (on github), writing your own code, tracking it with git, and moving (push) the code from your computer (local version) to github.

When using git locally (on your computer), you have been running the commands in Terminal (Command line).

A git command has a minimum of 1 argument.

Git commands are always executed by first typing git

The first argument is the command (or verb), like

git init (initialize a new git repository)
git push (send the code to a remote location)

The second(+) argument gives the first argument context (when needed)

git add . (add all files in this directory)
git pull origin main (get all files from the url that has an alias of origin, from the branch main)

Lastly, flags can be added

git remote -v (git show remote(s) and be verbose(give more detail))

Here is a table of our commonly used git commands that we've used in this course so far:

git	Argument	Flag(s)/Additional arguments	Description
git	init		Initializes a new repository
git	add	`.` or filename	Takes untracked files and adds them to the staging area so that they can be committed
git	commit	-m 'some message'	Takes a snapshot of files in the staging area/ saves this version of them as a commit
git	remote	-v	Shows the remote repositories associated with the local repository. Most repositories have an alias for their urls like `origin` or `upstream`
git	pull	upstream main	Gets files from a url with an alias of `upstream` from its branch `main`
git	push	origin dev	Sends files to a url with an alias of `origin` to its branch `dev`
git	log	--oneline	Shows a log of commits of a repo (--oneline shows a truncated message)`q` to exit
git	status		Shows the state of files in a repo (untracked, modified, staged)

Link to a more complete list of git commands

Note: fork is not on this list because fork is not a git command; it is github-specific for copying a repository on github to a new location on github.

Git VCS - Branches and Merging

Git is a VCS (Version Control System). There are a few popular ones, but git ends up being a top choice because of its branching and merging feature.

If we think back to our past projects, when we wanted to implement some major changes to our code and failed our popular options were to

⌘Z throughout our files and hope for the best
Comment out a ton of code and hope to restore the functionality of our code to a previous version
Seriously contemplate coding out our project from scratch again
Curl up into a ball and hope the code would revert via magic

Git's about page has 4 great reasons why it works so well for individuals and large teams.

Frictionless Context Switching - Switch between branches, whenever! No worries!
Role-Based Codelines - Have many versions of your code - Production, Development, Day-to-Day etc.
Feature Based Workflow - Create a new branch for each feature
Disposable Experimentation - if a branch doesn't work out, you can just walk away or toss it. It has no impact on the working code

You may be thinking 'this sounds too good to be true!' It's not! But there is a catch! Git requires changing the way we are used to working on projects. Which means it takes some time and practice to learn to use git.

git workflow from git about page

New Git Commands

To be able to use branches, we will have to learn some new git commands

git	Argument	Flag(s)/Additional arguments	Description
git	branch		Lists branches
git	branch	branch_name	Creates a new branch
git	checkout	branch_name	Switches branches
git	checkout	-b newbranchname	Creates a new branch and switches to that branch
git	diff		Let's you see the changes that you have made (before `git add`)

Even though these are just five new commands, it is going to take some practice to master them. Let's get started!

Note: You may have noticed that git merge is missing - we will be merging our branches via github, so we will not use this command.

Scenario

You have been hired by Wacky Products Incorporated. They are just weeks away from starting a global marketing campaign for their new hot product Happy Fun Ball and they want a top-notch web page to be launched as soon as possible.

Mysteriously, the entire dev team has lapsed into comas and it is up to you to save the project.

As a professional developer, you will do whatever it takes to finish this project! Everything, BUT work directly on the main branch!

Setup

Part 1 - Get the files

Browser - github:

Fork Happy-Fun-Ball (make a copy of this remote repository to your github account):
Go here and click fork (upper right) to fork it to your personal repo (Don't worry! You can totally delete it after the lesson!)

Show Screenshot

Upper right on github

- Navigate to YOUR version on YOUR github repo - Click the 'clone or download' button (on the right, below fork).

Show Screenshot

Copy or Clone button

This will give you the option to copy the link to your clipboard and make it ready to paste in the command line. - REMEMBER: This should be from YOUR repo (the link to be copied should be `git@github.com:your-github-handle/hfb.git`)

Command line:

Navigate to a directory that is not a repo mkdir (if you need to)
$git clone `githublink` (use ⌘V to paste the url from github)
The above command should create a new folder inside your current directory and make copy of everything in the Happy Fun Ball remote repository, locally (on your computer) and initialize git. Let's check:
- cd hfb into the cloned directory and then
- ls and check that
- index.html and
- main.css are in your folder (README.md & hfb.png will also be there)
- git status

Example output

On branch main
Your branch is up-to-date with 'origin/main'.
nothing to commit, working tree clean

git remote -v - to check your remote set up
Example Output
origin https://github.com/youruserhere/hfb.git (fetch)
origin https://github.com/youruserhere/hfb.git (push)

Part 2 - Configure Git to Have Autocorrect

To help with today's lesson let's be sure we have autocorrect on. Let's test:

Command line:

git chekotu
Example output:
git: 'chekotu' is not a git command. See 'git --help'.

Did you mean this?
checkout

We can configure git to have autocorrect, if it is not already set as a default. We are going to install it locally (just to this repository). If you end up liking the configuration, you can always install it globally, later.

Command line:

git config --local help.autocorrect -if the setting has updated, there will be no message
try mistyping a git command git chekotu
Example output:
git: 'chekotu' is not a git command. See 'git --help'.

Did you mean this?
checkout

Part 3 - Make a Dev Branch

Command line:

To make a new branch AND checkout the new branch(we will call our new branch 'dev'):
git checkout -b dev
Example output
Switched to a new branch 'dev'
ls
- index.html & main.css, etc. - should still be there
git status to confirm everything looks like it should
Example output
On branch dev
nothing to commit, working tree clean
Get this branch on your github repo:
git push origin dev
Example output
* [new branch] dev -> dev

Browser - github:

See your new branch on github (it should be there, refresh if you don't see it. If you still don't see it, let me know and we'll trouble shoot) It will be a new message along the top of github OR from clicking the Branch: main button
Screeshot

pull-down menu

Command line:

VsCode .open the files in Vs Code
open index.html open index.html in the browser (remember you can do open i and then press tab to autocomplete index.html)

Part 4 - Organize yourself

We are going to be going between the browser, the command line and VsCode frequently. Be sure you can work efficiently and effectively by setting up a good workflow! Start by organizing your browser, command line and VsCode so that you can easily switch between them (remember to use Spectacle). Close extra tabs and browser windows.

Here is how I worked on this project(You will have to also account for Zoom and Slack):

window organization

Browser:

My repo
Happy Fun Ball index.html
README.md for this lesson
Color Names (we'll be referring to this a few times, there is a link below)
All other tabs are closed, no other Browser windows are open

VsCode:

directory tree.
index.html
main.css

Take a couple minutes to get familiar with the code you'll be working on.

New Feature - Link the HTML and CSS

Your first new feature! Working in index.html, you will add a link to main.css, then you will merge it into the dev branch, and then into main.

Part 1 - Make a New Branch

Command line:

Let's make a new branch specifically for our new feature
git branch - to check that you are on the dev branch. This command will show all the branches and highlight the one you are on.
Example output:

example output of `git branch`

git checkout -b link-files - this will create a new branch (a copy of the branch we are switching from, in this case: dev) called link-files and check it out

Example output:
`Switched to a new branch 'link-files'`

Part 2 - Work on New Feature

VsCode - index.html :

In the index.html - between the</title> and </head> tags, let's insert a link to our css :
<link rel="stylesheet" href="main.css">
⌘S - Save our changes in VsCode

Browser - index.html:

⌘R - Reload our browser view of the index.html
The CSS should now be loaded into our index.html

Part 3 - Feature Completed! Use Git to Track/Add it

Command line:

git status
git add index.html
git commit -m 'index.html and main.css linked'
git push origin link-files (Remember: originand link-files can be autocompeletd by using tab)
Example output:
Counting objects: 3, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 402 bytes | 0 bytes/s, done.
Total 3 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), completed with 1 local objects.
To github.com:bigpoppacode/hfb.git
* [new branch] link-files -> link-files

- Check github to see that the new branch is there

Screenshot

github new branch screenshot

Part 4 - Merge New Feature into Dev Branch

Browser - github:

See new branch (either a message will pop up or use the left side pull down to see)
Screenshot
You will either have a yellow bar with your branch name and a green compare & pull requestor you will have to choose the Pull requests tab (the yellow bar does not always appear. It does not automatically mean that something is wrong)

Note: if you do not get the yellow bar, you will have slightly different navigation to complete this step, a detailed outline is down below in the Part 6: Merge Dev Branch into main section.

Push the Compare & pull request button that is on the right of the yellow bar
Select YOUR fork (click on base fork: Krafalski/hfb and then scroll to your username/fork), wait for the page to update to the next screenshot image:

choose your fork

Select base:dev and compare: link-files

selecting your base and compare

Screenshot

github pull request

- Wait a moment to let github tell you if there are any merge conflicts

Screenshot

image of able to merge

All clear! Go ahead and press the Create pull request button, wait a moment and you should see a green Merge pull request button about midway down.
Screenshot

Merge pull request view

- Press the button, then the button will change to say `Confirm merge` press it again to confirm the merge!

Screenshot

image of a successful merge on github

Note: When you work on a team it is unlikely that you would merge your own pull requests

Note: You can refuse a merge and close the pull request by pressing the grey Close pull request button further down

Part 5 - Get the Latest Remote Version of Dev, Locally

Command line:

git checkout dev (Notice: no -b)
git pull origin dev
Check VsCode (index.html has the link to CSS)
Your browser view (index.html is displaying with CSS loaded - remember to ⌘R/refresh your browser to be sure you are seeing the updated version)
If everything looks good, let's merge these changes into the main branch

Part 6 - Merge Dev Branch into main

Command line:

git pull origin main (this should come back as clean but it is a good habit to pull before you push)

Example output
`From github.com:Krafalski/hfb`
` * branch main -> FETCH_HEAD`
`Already up-to-date.`

git push origin dev (this should also come back as clean - since we have changed nothing in our code), it is good to get in the habit of checking yourself often!

Example output
`Everything up-to-date`

Browser - github :

If you are still on the merge page, navigate back to the main view
Open the Pull Requests tab
On the right select the green New pull request button
Select YOUR fork (click on base fork: Krafalski/hfb and then scroll to your username/fork), wait for the page to update to the next screenshot image:

choose your fork

Wait for the page to update so you can
Compare base: main to compare: dev
Wait to be sure there are no conflicts
Green Create pull request button
New screen that lets you add comments, midway to the right press green Create pull request button
green Merge Pull Request button
green Confirm Pull Request button

Command line:

git checkout main(Notice: no -b)
git pull origin main

VsCode/Browser

Check to make sure everything has updated as expected (index.html has link to css and when you refresh the browser, the CSS still loads)

New Feature - Update the colors

Work on a new feature: Working in the main.css file, you will update the colors of the Happy Fun Ball web page

Command line:

Before we begin, let's make a new branch specifically for our new feature:
- Check that you are on the dev branch **
- git branch will list all your branches and have a * next to the branch you are on. Then:
- git checkout dev
- git checkout -b color-updates
** GOTCHA: Branches can be created off any other branch. Be sure you are on the branch that you want to branch off of before creating a new branch!

VsCode - index.html:

You probably noticed that index.html had a typo! On (or around) line 19 class="pr" should actually be class="price".
Let's update that! (Remember ⌘S/save) Now, it's not really our task, or our file to work on, but we're just being proactive and helpful! What could possibly be wrong with that?

Command line:

Let's go ahead and
git status
git add index.html and
git commit -m 'fixed typo in index.html', there! We added our changes and put in a descriptive commit message. We are undoubtedly awesome.

VsCode - main.css:

Now let's update the colors in the body, let's change color (font color), and background-color to whatever our heart desires. Go ahead and use hexadecimal colors, rgb, hsl or some of the standard web colors.

Make changes here in main.css

When we've found the colors we like, we can go ahead and
⌘S/save

Command line:

git status - see the status of our files
git diff - see what we have changed
git add main.css and
git commit -m 'updated colors'
git log --oneline -see our commits so far (q to exit)

See Branching in Action

Command line:

git checkout dev (Notice: no -b)

VsCode - main.css:

See that our changes are gone

Browser - index.html:

Refresh the page and see that the page has reverted to the original version

Let's get back to our changes!

Command line:

git checkout color-updates (remember you can use tab to autocomplete branch names too!)

Go through VsCode and the browser to see that your changes have come back

VsCode - main.css:

Let's make one more color change, now that we are on our color-updates branch. .price change the color from orange, to whatever color you want
Can't find .price?
⌘F will open a find/replace tab at the bottom of VsCode and let you look for .price
esc to close the find/replace tab
make your changes (we are changing the color of elements with the class of price)
⌘S -Remember to save your file
Refresh your browser to see your changes

Starting on a New Feature When We Haven't Finished Our Previous One

There was an error! The price of Happy Fun Ball is supposed to be $24.95, not $14.95!

Let's make a new branch off of the dev branch to hotfix this major problem! **

Command line:

git checkout dev
Oops! We forgot to git add . & git commit -m''!!

error: Your local changes to the following files would be overwritten by checkout:
main.css
Please commit your changes or stash them before you switch branches.
Aborting

We will commit our changes (we will not cover stash today):
git add .
git commit -m 'changed .price color'
git checkout dev
git checkout -b price-fix to make a new branch off of dev (and automatically be switched to the new branch) **

VsCode - index.hmtl:

Update the price of happy fun ball from $14.95 to $24.95 (~ line 19 of index.html)
⌘S/save

Command line:

git add index.html
git commit -m 'fixed price of Happy Fun Ball in index.html'
git pull origin dev (this should come back clean, but it is good practice to pull before pushing)
git push origin price-fix to create a new branch on github

** GOTCHA: Branches can be created off any other branch. Be sure you are on the branch that you want to branch off of before creating a new branch!

Merging Our New Feature into the Dev branch

Browser - github:

See our new branch (either a message will pop up or use the left side pull down to see)
Screenshot
Select the Pull requests tab
On the right side, push the New pull request button
Select base: dev and compare: price-fix
Wait a moment to let github tell you if there are any merge conflicts

Screenshot
![github all clear](https://i.imgur.com/L72S16y.png)
All clear! Go ahead and press the Create pull request button
A new screen will appear, enter a message if you like, otherwise push the Create pull request button
merge pull request button, wait a moment, then go ahead and confirm the merge! (Note: when you work on a team, it is unlikely that you would merge your own pull requests)

Screenshot
![Merge Pull Request message and button](https://i.imgur.com/2yUuGmq.png)

Going Back to Our Updated Colors Feature

Whew! That was exciting! It's nice to be back to working on this feature. We know there were changes to the dev branch, so let's get them

Command line:

git checkout color-updates
git pull origin dev - to pull down your changes from the remote to your local copy

...

ERROR! Merge conflict! Example output:

* branch dev -> FETCH_HEAD
c1df4fd..cc1ba3e dev -> origin/dev
Auto-merging index.html
CONFLICT (content): Merge conflict in index.html
Automatic merge failed; fix conflicts and then commit the result.

Uh-oh...

Merge Conflict (and Resolution)!

VsCode - index.html :

View the conflict in VsCode

index.html file

Delete everything between (including these lines as well) <<<<<<< HEAD and ========:

Which is ALL of this:

<<<<<<< HEAD
<h3 class="price">Only $14.95</h3>
=======

This conflict is our doing, let's get rid of our mistake from working in index.html when we were only supposed to be working in main.css and keep the change made from the price-fix branch
Now that we've removed the conflict let's finish cleaning up the conflict and remove the line >>>>>>> 3b73c340f2c158a80ce20828fd94ad83ea60b444

Note: your numbers/letters after the >>>>>>> should be different

Let's also clean up any extra white space
⌘S

Command line:

git add index.html
git commit -m 'fixed merge conflict'
git push origin color-updates
Example output
Counting objects: 11, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (11/11), done.
Writing objects: 100% (11/11), 1.05 KiB | 0 bytes/s, done.
Total 11 (delta 7), reused 0 (delta 0)
remote: Resolving deltas: 100% (7/7), completed with 3 local objects.
To https://github.com/your-github-handle/hfb
* [new branch] color-updates -> color-updates
We fixed it! Now we can continue working on our project

Finishing and Merging Your Color Updates

VsCode main.csss:

Make your final updates to main.css

Command line:

git add main.css
git commit -m 'updated colors'
git push origin color-updates

Browser - github :

Pull Request
Compare base: dev to compare: color-updates
Wait to be sure there are no conflicts
Create Pull Request
Merge Pull Request
Confirm Pull Request

Command line:

git checkout dev
git pull origin dev

VsCode index.html/main.css :

Take the time to review that the changes to the dev branch that you wanted are there and there are no errors or bugs
Only working code should ever be merged to main!
If everything is ok, go ahead and merge the changes to main
If you made changes, remember to
git add and
git commit -m ''

Command line:

git pull origin dev (yes, we just did this, but it is a good habit to do a pull before doing a push. It is ok if git tells you Already up-to-date )
git push origin dev (it is ok if git tells you that Everything up-to-date)

Browser - github:

Pull request
Compare base: main to compare: dev
Wait to be sure there are no conflicts
Create Pull Request
Merge Pull Request
Confirm Pull Request
Check to see that your changes have been successfully made to the main branch

Hungry for More?

Make a new branch, continue to update the Happy Fun Ball web page, and merge back your changes (New Feature Ideas: change color of Happy Fun Ball. Add a google font. Add some js to show/hide Happy Fun Ball's Warnings.)
Research and try git stash
Delete a branch locally and remotely :
- git push origin --delete branch_name
- git branch -d branch_name

Sudden and Permanent Shut Down of Wacky Products Incorporated

Well, it was fun while it lasted?