View multi-file diffs with commit preview

In the latest GitHub for Atom release, we’re introducing two new features that will improve your commit experience.

Rendering diffs in the editor

Previously, DOM elements were rendered for every line of each diff, which meant a lot of work for React and the DOM to process. This led to rendered diffs being limited to less than 32k bytes, resulting in the inability to load large or multiple diffs.

Now diffs are rendered using Atom’s TextBuffer. The text buffer’s most important benefits are improved performance when loading large diffs and the ability to render multiple diffs. A few other perks include keyboard bindings to use Atom shortcuts with the ability to navigate around diffs, as well as copy and pasting code from a diff.

Rendering diffs with TextBuffer makes it easier to review and edit code from within a diff view whether you’re making changes now or in the future. TextBuffer provides options, such as:

• Editable diffs: the ability to change text within the diff view
• Code folding: collapsing and expanding blocks of code
• Syntax highlighting: highlighting different “parts of speech” of code using different colors
• Multi-cursor edits: the ability to change text within the diff view in multiple places at once

Commit preview

Now you can use the option to “See All Staged Changes” before you commit, opening diffs of all staged changes in one pane. Seeing all changes at once makes it easier to double-check your work and write a meaningful commit message about your changes. Commit preview uses the new and improved diff rendering to render multi-file diffs.

While building out this feature, user research sessions gave us informed data to make (and finalize) changes to the design, color, and text of the button. This feedback helped us feel confident that the updates created a more intuitive workflow and led to a more polished diff view with a cleaner look.

What’s next for GitHub for Atom

User experience is important. Our goal is to make it easy to write, review, and collaborate on code within Atom. We have plenty of updates in store, but look out for upcoming improvements to pull request reviews.

If you have feedback about what we’ve worked on—or ideas for what you’d like to see in the pull request workflow—reach out to us in the Atom repository. We’re always looking for participants for our ongoing usability studies.

Sign up to help us improve GitHub for Atom

Written by

Meaghan Lewis

@meaghanlewis