6

6Git & Brackets a worked example

6.7

Merging, conflicts and deleting branches

I’m going to demonstrate merging branches in exactly the same way I did theoretically in section 2.4.

I’ll start by adding another page to the lab-01-website. The master branch still has the latest version of the deployable code (although d-01-intro is more advanced than the master branch, it is under development—new branches should always be based on the latest deployable code, see appendix b).

I’m going to add a new 02-about.htm page and I’m going to do so by creating a new branch from the [25c1410] commit point on the master branch. Switch back to the master branch, create a new branch d-02-about and switch to this new branch.

Now we have Figure 6.56

Figure 6.56 - A third branch

Figure 6.56   A third branch

Time for another file. In the new d-02-about branch add 02-about.html in the root folder (same place as index.html) and add the following code to it:

02-about.html
<html lang="en">                     <!-- Declare language -->
    <head>                           <!-- Start of head section -->
        <meta charset="utf-8">       <!-- Use Unicode character set  -->

<link rel="stylesheet" type="text/css" href="11-resources/01-css/style.css">

        <title>PracticalSeries: Git Lab — About us</title>
    </head>

    <body>
        <h1>A Practical Series Website</h1>

        <h3>About Us</h3>

<p>This page explains who we are and how we came to be doing this.</p>

    </body>
</html>
Code 6.7   d-02-about branch—create new file: 02-about.html a

Save the file, and in the Git pane tick the box to stage the file:

Figure 6.57 - 02-about.html

Figure 6.57   02-about.html

Commit the changes with the commit message:

D: Incremental Build - 02-about page
02-about.html added.

Give the new commit point the tag d-P01.02.01. In my case the commit point is [3f15582].

I now have four commits:

Figure 6.58 - Current commits

Figure 6.58   Current commits

The workflow is:

Figure 6.59 - Second new branch with first commit

Figure 6.59   Second new branch with first commit

I’m going to do some jumping about between branches here to set up the merge situation. First switch to d-01-intro and change the style.css file:

style.css
h1, h2, h3, h4, h5, h6 {           /* set standard headings */
    font-family: sans-serif;
    font-weight:normal;
    font-size: 3rem;
    padding: 2rem 5rem 2rem 5rem;
}
h3 { font-size: 2.5rem; color: #4F81BD;}
Code 6.8   style.css modified in d-01-intro a

The only thing I’ve done is to change the colour of the h3 element in line 30; I’ve made it blue by adding a colour declaration (see below):

h3 { font-size: 2.5rem; color: #4F81BD; }

Save the file, tick the stage box and commit the change to style.css with the commit message:

S: Staged - 01-intro page
Style.css modified <h3> colour changed to blue.

It makes the page look like this:

Figure 6.60 - 01-intro.html page

Figure 6.60   01-intro.html page

My commit point is [f5aeb76]. Tag the commit with the label s-P01.01.P02. This will be the last commit on this branch (hence the tag, see appendix b).

We are now at this point:

Figure 6.61 - Second commit on d-01-intro

Figure 6.61   Second commit on d-01-intro

The next thing is to merge the two commits on the d-01-intro branch onto the master branch, like Figure 6.62:

Figure 6.62 - Merging one branch into another

Figure 6.62   Merging one branch into another

6.7.1

Merging a branch with Brackets

This is something new, we haven’t merged a branch with Brackets yet, this is how you do it.

I want to merge the d-01-intro branch back onto the master branch.

The first thing is to switch to the receiving branch. In this case we need to be on the master branch. To do that; click the small arrow next to the d-01-intro branch in the file tree and in the dropdown select master:

Figure 6.63 - Switch to master branch

Figure 6.63   Switch to master branch

Back on the master branch, if you open the history, you will only see the first two commits:

Figure 6.64 - Switch to master branch

Figure 6.64   Switch to master branch

Also, the 01-intro.html file and the 02-about.html files are missing (these don’t exist on the master branch). I’m showing the style.css file in Figure 6.64, you can see here that the master branch version doesn’t have the h3 changes.

Once again:

SWITCHING BRANCHES CHANGES THE FILES
IN YOUR WORKING DIRECTORY

Ok, now to do the merge.

Click the small arrow next to the master branch in the file tree.

I want to merge in the changes on the d-01-intro branch—to do this, click the merge icon terminal icon next to d-01-intro in the dropdown menu (Figure 6.65):

Figure 6.65 - Brackets—merge branches

Figure 6.65   Brackets—merge branches

This will open the merge branch dialogue box:

Figure 6.66 - Brackets—merge branch dialogue box

Figure 6.66   Brackets—merge branch dialogue box

The first line target branch, can’t be changed; it is set to this because we were on themaster branch when we made the merge.

When I make the merge (by clicking ok), Brackets will create a new commit point on the master branch. This is a called a merge commit.

Merge commits, like every other commit, need a commit message and that is what the next line is. The merge message box is asking for a one line commit message, enter:

P02: Published (merged d-01-intro).

The PR button next to the message puts in an automatic pull request message. Pull request is a GitHub thing, I haven’t covered this yet (see § 10.1.2). For the minute don’t push the button—you will just have to delete the text it puts in the box if you do.

The next two tick boxes:

rebase—rebase allows us to effectively re-write history. I don’t like rebase and I recommend you don’t use it. I explain it as a topic and why I don’t like it in appendix e.1. Leave this box unticked.

Tick the final box create a merge commit even when the merge resolves as a fast-forward. A fast-forward merge is basically a merge with no conflicts. I still want a commit point after the merge, even if there were no problems. Tick this box. That’s it, click ok. This will generate a merge result dialogue box:

Figure 6.67 - Brackets—merge result dialogue box

Figure 6.67   Brackets—merge result dialogue box

Ok, we changed two files (01-intro.html and style.css) and I’m willing to bet there were 19 additions and one deletion. Click close.

The master branch is still active; it now has a new commit, the merge commit, [abf1121] in my case. Give this the tag P02 and open the commit history:

Figure 6.68 - Brackets—master branch after merge

Figure 6.68   Brackets—master branch after merge

The master branch now has five commits on it. The last one being the merge commit. The workflow now looks like this:

Figure 6.69 - Workflow after d-01-intro merge

Figure 6.69   Workflow after d-01-intro merge

At this point, everything on the d-01-intro branch has been merged on to the master branch—d-01-intro still exists and it still has the two commit points on it (you can see this if you change to the branch and view the commit history). However, the branch doesn’t contain anything we need—the commits have been merged on to the master branch.

The best thing to do now is delete the d-01-intro branch. It’s served its purpose and we don’t need it anymore (we can always recreate it if we need to work on 01-intro again).

6.7.2

Deleting a branch with Brackets

This is easy; make sure that the branch you want to delete is not active. In my case I’m on the master branch and I want to delete d-01-intro so this is ok.

Again click the small arrow next to the master branch in the file tree.

This time I want to delete the d-01-intro branch—to do this, click the delete icon terminal icon next to d-01-intro (on the left) in the dropdown menu (Figure 6.70):

Figure 6.70 - Brackets—delete a branch link

Figure 6.70   Brackets—delete a branch link

This will open an are you sure? delete local branch dialogue box, click ok and the branch is gone.

This gives the workflow of Figure 6.71.

Figure 6.71 - Brackets—delete a branch workflow

Figure 6.71   Brackets—delete a branch workflow

6.7.3

Merging a branch with a Conflict

Last bit.

I’m going to create a conflict on the d-02-about branch and then try to merge it back into the master branch (just like the theoretical arrangement in § 2.4.1).

Switch back to the d-02-about branch. I’m going to modify exactly the same line in the style.css as I did with the last change to d-01-intro. But this time, we’ll make the h3 element red.

style.css
h1, h2, h3, h4, h5, h6 {           /* set standard headings */
    font-family: sans-serif;
    font-weight:normal;
    font-size: 3rem;
    padding: 2rem 5rem 2rem 5rem;
}
h3 { font-size: 2.5rem; color: #c0504d;}
Code 6.9   style.css modified in d-02-about a

Again this is a modification to line 30 (below):

h3 { font-size: 2.5rem; color: #c0504d; }
d-02-about branch

This will conflict with line 30 on the master branch, this has:

h3 { font-size: 2.5rem; color: #4F81BD; }
master branch

The d-02-about modification makes the 02-about page look like this:

Figure 6.72 - 02-about.html page

Figure 6.72   02-about.html page

Save the file, tick the stage box and commit the change to style.css with the commit message:

S: Staged - 02-about page
Style.css modified <h3> colour changed to red.

My commit point is [28a335c]. Tag the commit with the label s-P01.02.P03. This will be the last commit on this branch.

We now have:

Figure 6.73 - Second commit on d-02-about

Figure 6.73   Second commit on d-02-about

Now switch to the master branch and merge in the changes on d-02-about (in just the same way as § 6.7.1). Click the merge icon terminal icon next to d-02-about in the dropdown menu (Figure 6.74):

Figure 6.74 - Brackets—merge d-02-about

Figure 6.74   Brackets—merge d-02-about

Again we have the merge branch dialogue box:

Figure 6.75 - Brackets—merge dialogue box

Figure 6.75   Brackets—merge dialogue box

This time enter the merge message:

P03: Published (merged d-02-about).

And click ok.

This bit is confusing—bear with me.

This opens an empty Merge result box:

Figure 6.76 - Brackets—empty merge dialogue box (conflict)

Figure 6.76   Brackets—empty merge dialogue box (conflict)

It’s empty because the merge hasn’t happened (yet). Just close the box, (you can’t enter anything on the line—as much as it looks as if you should be able to). Click close. What we want is behind it

That’s the confusing bit over—just the strange merge result box.

Things look a bit different now. This is the result:

Figure 6.77 - Brackets—with a merge conflict

Figure 6.77   Brackets—with a merge conflict

First thing is we now have an abort merge button in the Git pane. Click that and we go back to where we were before we tried to merge the files (i.e. where we were in Figure 6.73).

Brackets is trying to tell us there is a conflict in the style.css file. It’s opened the file in the editor and is showing the lines with a problem. It looks like this:

style.css
<<<<<<< HEAD
h3 { font-size: 2.5rem; color: #4F81BD; }
=======
h3 { font-size: 2.5rem; color: #c0504d;}
>>>>>>> d-02-about
Code 6.10   style.css with a conflict

It starts with a line of less than signs:

<<<<<<< HEAD

the HEAD tells us that what follows is from the current head (which is on the master branch).

The line that follows is the code as it is on the master branch:

h3 { font-size: 2.5rem; color: #4F81BD; }

Then we have a row of equal signs, this is just a divider:

=======

The last two lines show the code as it is on the merging branch: d-02-about:

h3 { font-size: 2.5rem; color: #c0504d;}
>>>>>>> d-02-about

The greater than signs identify the merging branch (d-02-about).

Brackets is telling us it can’t decide what to do and it wants us to manually change the file to the correct version.

I could select either version and just delete the other one, or I could enter something completely different. In this case, I’m going to put the file back to how it was at the start (without specifying any colour).

Make the modifications:

style.css
h1, h2, h3, h4, h5, h6 {                    /* set standard headings */
    font-family: sans-serif;
    font-weight:normal;
    font-size: 3rem;
    padding: 2rem 5rem 2rem 5rem;
}
h3 { font-size: 2.5rem; }

.cover-fig {                    /* holder for cover image */
Code 6.10   style.css with a conflict
  • You must delete the lines with the less than, greater than and equals signs too.

Mine looks like this after the modifications, Figure 6.78:

Figure 6.78 - Brackets—modified file after conflict

Figure 6.78   Brackets—modified file after conflict

Save style.css and make sure it is staged (tick the box in the Git pane).

Now click commit.

This opens a normal commit dialogue box. Its message will have the first line we entered initially.

P03: Published (merged d-02-about).

It will also have the information that a conflict occurred in style.css

Mine looks like this:

Figure 6.79 - Brackets—Post conflict commit

Figure 6.79   Brackets—Post conflict commit

Just click ok. Brackets will automatically change to the master branch. In my case the new commit is [07fe437]. Tag the new commit P03 and view the history:

Figure 6.80 - Brackets—master branch after commit

Figure 6.80   Brackets—master branch after commit

The workflow is now:

Figure 6.81 - Second Merging the second branch after conflict resolution

Figure 6.81   Merging the second branch after conflict resolution

Finally, the last thing to do is delete the redundant branch (d-02-about). Again click the small arrow next to the master branch in the file tree, click the delete icon terminal icon next to d-02-about in the dropdown menu.

We’re done. The final workflow is all on the master branch, Figure 6.82:

Figure 6.82 - Final arrangement, all merged back to master branch

Figure 6.82   Final arrangement, all merged back to master branch

All the commits from the two branches that were created are now merged onto the master branch line.

6.7.4

Merging multiple conflicts in multiple files

Ok, this is a bit of a topic in its own right; but really it’s just more of what we’ve been doing in the previous sections.

There are one or two important points about it: how do I know I’ve found all the conflicts? But rather than bore you with the minutiae I’ve separated it into its own appendix where I cover it in excruciating detail.

See it in all its technicolour glory in appendix f.



End flourish image