This article is the seventeenth edition of the Advent of Patterns series. In this series, running from December 1st to December 24th 2024, I will document one design or programming pattern I have noticed recently. Read more about this series.
A “diff” shows the difference between two states of a document. You can use a diff to understand what has been added, changed, removed, and moved within a document
Diffs are often accompanied by metadata such as who made each change in a document, when the change was made, and an identifier that refers to a checkpoint of the document when a change was made (i.e. a wiki history, a Git commit).
Diffs are commonly used in Git, software used to manage versions of code. GitHub, a place where you can store code using the Git protocol, provides visual diffs that show how files have changed between “commits.” Commits are checkpoints of a file that have been explicitly saved into the history of a project by a developer.
The GitHub interface provides a diff visualisation which can be used to evaluate changes in a file. Here is what a diff looks like on GitHub:
The red line indicates that a line was removed or changed. A green line indicates that an addition was made. In the diff, there are two columns of line numbers: the first column corresponds with the file in its previous state, and the second column corresponds with the new state of the file.
The diff shows a few unchanged lines before and after each change. This information allows you to understand the context of the change. This is useful to help readers better understand how the change impacts the file. The diff also lists all changed files, so you can navigate between the files that have changed.
You can open this interface both when comparing different commits in the history of a file, or when reviewing changes on a branch. When you review changes, seeing a diff can help you better understand exactly what has changed and where changes have been made.
MediaWiki, a wiki tool, also supports diffs. You can compare the state of a wiki page to its previous version, or to the current version.
Here is what a diff looks like on the IndieWeb wiki, which uses MediaWiki:
In the diff, we can see what lines have been added and removed. Line numbers are used to indicate the exact location of changes. Lines before and after a change are displayed to show a user the context surrounding a change.
In this interface, the versions are displayed side by side. This allows a user to compare the previous and current version of the file.
With diffs, users can compare previous and current versions of a file. Diffs are commonly used as a tool in reviewing and evaluating changes.
The diff pattern is related to version history that I discussed earlier in this series. With that said, version histories do not necessarily need to provide diffs. A version history can link to a full snapshot of a piece of data at a point in time instead of a comparison. In practice, however, version histories commonly display diffs so that users are better able to see how data has changed over time.
In what places have you seen diffs?
