The 12 Days of Git, Day 4: Double-checking Changes with Git

On the fourth day of Christmas, my true love gave to me… four different lines.

Our Twelve Days of Git song is really starting to take shape, and today we’ll cover double-checking changes with Git before you commit them.

Here’s what we’ve covered so far:

Now, go to the folder we’ve been using, and edit the index.html file. Change the text inside the <title> element, and add a <p> element on a new line below the <h1> element, as shown in the listing below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Santa Tracker: Bringing the North Pole to You</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <h1>Santa Tracker</h1>
    <p>Bringing the North Pole to you since 2015</p>
</body>
</html>

Likewise, edit the main.css file as below, to add a color in the rule for the <h1> element and to change its alignment.

body {
    background-color: #222;
    color: #f0f0f0;
}
h1 {
    color: #ff0000;
    text-align: left;
}

Be sure to save these changes, and then, in the terminal, enter the following Git command to the see the difference between your last committed changeset and the current state of your files.

git diff

You should see output like this:

diff --git a/index.html b/index.html
index de1667d..b523b31 100644
--- a/index.html
+++ b/index.html
@@ -2,10 +2,11 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Santa Tracker</title>
+    <title>Santa Tracker: Bringing the North Pole to You</title>
     <link rel="stylesheet" type="text/css" href="main.css">
 </head>
 <body>
     <h1>Santa Tracker</h1>
+    <p>Bringing the North Pole to you since 2015</p>
 </body>
 </html>
diff --git a/main.css b/main.css
index f0898fd..a9e1d83 100644
--- a/main.css
+++ b/main.css
@@ -4,5 +4,6 @@ body {
 }
 h1 {
-    text-align: center;
+    color: #ff0000;
+    text-align: left;
 }

Notice that the output of your command is in two section, the first of which starts with diff --git a/index.html b/index.html and the second of which starts with diff --git a/main.css b/main.css. Without any additional arguments, the diff command will loop through all the files that have changed since your commit, and show you the changes to each file as if you run the command with that file path as an argument. To see just the changes to a particular file, add its path as an argument to the command, like so.

git diff main.css

Now, the output will only be:

diff --git a/main.css b/main.css
index f0898fd..a9e1d83 100644
--- a/main.css
+++ b/main.css
@@ -4,5 +4,6 @@ body {
 }
 h1 {
-    text-align: center;
+    color: #ff0000;
+    text-align: left;
 }

The next line of output for each file is metadata about the “versions” of the file Git is comparing. The following two lines are a legend to remind you that lines prefixed with a minus sign (-) represents line that have been removed from the file, and lines prefixed with a plus sign (+) have been added to the file.

Then come parts of the file that have changed. Git prints a few lines before each change, and a few lines after, in order to provide context. Notice, that lines that have changed—as opposed to only being removed or added—are shown twice, first the old version of the line prefixed by a minus sign, and then the new version of the line prefixed by a plus sign.

It’s a good habit to pace your commits to Git so that the versions you’re saving represent logically groups of changes. For the changes in the example above, a possible commit message may be “Change branding style of the website”. If you are a writer who is versioning your next great novel with Git, you may have a commit labelled “Revise scene where the long-lost sibling returns”. Regardless, it is extremely helpful not to stuff too many changes into one commit.

One good way to encourage this habit of small, focused changesets is to run git diff before you commit. You could just see which files have changed by running git status, but with the diff command, you will see exactly how much has changed. If you see pages and pages of differences, it will be a subtle reminder to work in more manageable chunks.

Let’s wrap today’s verse up by staging these changes to be committed.

git add —A

Now, if you run git diff again, you will get no output, because Git is anticipating that you will be committing all the changes you have staged with add. If you want to double-check your changes one last time before committing them, run the diff command with the --cached option.

git diff —cached

For now, let’s commit these commands and have some eggnog.

git commit -m'Change branding style of the website'

To see all the options available for the command we’ve learned today, check them out in the online Git reference:

git diff

Check in tomorrow for The 12 Days of Git, Day 5: Saving Changes Remotely with Git

On the fourth day of Christmas, my true love gave to me… four different lines.

Leave a Reply Cancel reply