This chapter is from the book
This chapter is from the book
This chapter is from the book
11.3 Pushing Branches
In this section, we’ll apply our newfound collaboration skills to get Alice to request a bugfix from Bob, who will make the correction and then share the result with Alice. In the process, we’ll learn how to collaborate on branches other than main, thereby applying the material from Section 10.3 as well.
Recall from Section 10.3 that the trademark character ™ is currently broken on the About page (Figure 10.7). Alice suspects the fix for this involves adding some markup to the HTML template for the website’s pages, but she’s already agreed to attend a tea party (Figure 11.18),6 so she only has time to add a couple of HTML comments requesting for Bob to add the relevant fix, as shown in Listing 11.9 and Listing 11.10. (We’ll cover HTML comments further in Learn Enough HTML to Be Dangerous (https://www.learnenough.com/html).)
)
Figure 11.18: Alice has a tea party to attend and so asks Bob to fix the website.
Listing 11.9: A stub for the fix to the ™ problem.
~/repos/website/about.html
Listing 11.10: A stub to add the ™ fix to the index page.
~/repos/website/index.html
Notice that Alice has wisely asked Bob to fix the index page as well (Listing 11.10) even though the current error only occurs on the About page. This way, any ™ or similar characters added to index.html will automatically work in the future. (As noted in Section 10.3, having to make such changes in multiple places is annoying, and it’s also brittle and error-prone. The correct solution is to use templates, which we’ll cover starting in Learn Enough CSS & Layout to Be Dangerous (https://www.learnenough.com/css-and-layout).)
Alice has decided to follow a common convention and use a separate branch for the bugfix, which in this case she calls fix-trademark:
[website (main)]$ git checkout -b fix-trademark [website (fix-trademark)]$
This shows something important: It’s possible to make changes to the working directory (in this case, the additions from Listing 11.9 and Listing 11.10) before creating a new branch, as long as those changes haven’t yet been committed.
Having made the new branch for the fix, Alice can make a commit and push up the branch using git push:
[website (fix-trademark)]$ git commit -am "Add placeholders for the TM fix" [website (fix-trademark)]$ git push -u origin fix-trademark
Here Alice has used exactly the same push syntax used in Listing 9.1 to push the repo up to GitHub in the first place, with fix-trademark in place of main.
If Alice sends Bob a note before she heads off to her tea party, Bob will know to do a git pull to pull in Alice’s changes:
[website-copy (main)]$ git pull remote: Enumerating objects: 7, done. remote: Counting objects: 100% (7/7), done. remote: Compressing objects: 100% (1/1), done. remote: Total 4 (delta 3), reused 4 (delta 3), pack-reused 0 Unpacking objects: 100% (4/4), 444 bytes | 148.00 KiB/s, done. From https://github.com/mhartl/website * [new branch] fix-trademark -> origin/fix-trademark Already up to date.
Bob can check his local working directory for the fix-trademark branch that Alice created and pushed, but it isn’t there:
[website-copy (main)]$ git branch * main
The reason is that the branch is associated with the remote origin, and such branches aren’t displayed by default. To see it, Bob can use the -a option (for “all”):7
[website-copy (main)]$ git branch -a * main remotes/origin/HEAD -> origin/main remotes/origin/fix-trademark remotes/origin/main
To start work on fix-trademark on his local copy, Bob just needs to check it out. By using the same name (i.e., fix-trademark), he arranges for it to be associated with the upstream branch on GitHub, which means that git push will automatically push up his changes:
[website-copy (main)]$ git checkout fix-trademark Branch fix-trademark set up to track remote branch fix-trademark from origin. Switched to a new branch 'fix-trademark' [website-copy (fix-trademark)]$
At this point, Bob can diff against main to see what he’s dealing with:
[website-copy (fix-trademark)]$ git diff main
diff --git a/about.html b/about.html
index 173e5fe..4d4b780 100644
--- a/about.html
+++ b/about.html
@@ -2,6 +2,7 @@
<html>
<head>
<title>About Us</title>
+ <!-- Add something here to fix trademark -->
</head>
<body>
<h1>About Us</h1>
diff --git a/index.html b/index.html
index 024ada5..d8e946f 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,7 @@
<html>
<head>
<title>A whale of a greeting</title>
+ <!-- Add something here to fix trademark -->
</head>
<body>
<h1>hello, world</h1>
Now all Bob has to do is actually implement the fix. If you’d like a challenging exercise in technical sophistication, try Googling around to see if you can figure out what the problem might be, and also how you might fix it. In case you’d like to do this, I’ll wait here while you look…
All right, the problem is that the page doesn’t have the right character encoding to display non-ASCII characters like ™, ®, or ℒ. The fix involves using a tag called meta to tell browsers to use a character set (or charset for short) called UTF-8, which will let our page display anything that’s part of the enormous set of Unicode characters. The result, which you would not necessarily be able to guess, appears in Listing 11.11 and Listing 11.12.
Listing 11.11: A fix for the ™ problem.
~/tmp/website-copy/about.html
Listing 11.12: Adding the ™ fix to the index page.
~/tmp/website-copy/index.html
Like the img tag introduced in Section 10.1, meta is a void element and so has no closing tag.
Having made the change, Bob can confirm the fix by reloading the page in his browser, as shown in Figure 11.19.
)
Figure 11.19: Confirming a working trademark character.
Confident that his solution is correct, Bob can now make a commit and push the fix up to the remote server:
[website-copy (fix-trademark)]$ git commit -am "Fix trademark character display" [website-copy (fix-trademark)]$ git push
With that, Bob sends a note to Alice that the fix is pushed, and heads out for some well-deserved rest (Figure 11.20).8
)
Figure 11.20: Bob’s reward for a job well-done.
Alice, now back from her tea party, gets Bob’s note and pulls in his fix:
[website (fix-trademark)]$ git pull
She refreshes her browser to confirm that the ™ character displays properly on her end of things (Figure 11.21), and then merges the changes into main:
)
Figure 11.21: Reconfirming the trademark fix before merging.
[website (fix-trademark)]$ git checkout main [website (main)]$ git merge fix-trademark [website (main)]$ git push
With the final git push, Alice arranges for the remote main branch on GitHub to get the fix. (Syncing up Bob’s main branch is left as an exercise (Section 11.3.1).)
Of course, git push publishes the change only to a remote Git repository. Wouldn’t it be nice if there were a way to confirm that the ™ character—and the rest of the website—displays correctly on the live Web?
11.3.1 Exercises
Bob’s main branch doesn’t currently have Alice’s merge, so check out main as Bob and do a git pull. Confirm using git log that Alice’s merge commit is now present.
Delete the fix-trademark branch locally. Do you need to use the -D option (Section 10.3.2), or is -d sufficient?
Delete the remote fix-trademark branch on GitHub. Hint: If you get stuck, Google for it.