Acing your pull requests with animated GIFs

As part of your continuous integration and delivery approach or even progressive delivery, if you will, you want your code to go live fast. To assure the quality and maintainability of your code you use pull requests. Another person needs to review and approve your changes. This process can take some time since the reviewer needs to visualize the result of your code in his/her mind. In this post, I will explain how to get your pull requests approved faster with animated GIFs.

A cool hover effect

To support the case for animated GIFs you’ll need something visual. As an example, I will use styling written in CSS.

Consider the following code:

.cool-hover {
  transition: background-color 1s ease;
}
.cool-hover:hover {
    transition: background-color 1s ease;
    background-color: #517AEC;
}

An HTML element that includes the class “cool-hover” will display a blue color when a user hovers over the element.

The file changes in the PR could look something like the following:

From the above code, the resulting behavior may be apparent. When your code becomes more complex, the time to explain the behavior to someone that reviews your PR increases.

Animated GIFs to the rescue

We will record a short clip of the behavior so we can add this to the PR. There are various tools available. I am using ScreenToGif. It is easy to use and free.

Open the recorder:

Adjust the screen size to capture the behavior and hit on record:

When you click on the stop button another window opens in which you can edit your recording. You can do a lot of postprocessing here. Click on save:

The encoder will start running and will generate the GIF.

If you are using Azure DevOps, you need to edit the description before dragging and dropping the GIF.

Open the destination folder and drag the GIF to your PR page in the browser.

Azure DevOps will create a URL for the GIF for easy reference. Click on “Save” and your PR is ready for review.
You can also add a “before” GIF and do some basic styling to make it more visually appealing:

Conclusion

Adding animated GIFs to pull requests can be a powerful method to reduce the review time. It is also more apparent how your code changes translate to the front end and leave less room for discussions. Finally, consider the moment when you schedule a release and you want to communicate the release notes. Now you have an overview of all associated work items with their accompanied PRs and animations. These can be interpreted by people who are not a developer.

Let me know what you think

Any comments are more than welcome! You can add those in the comments section below or drop me a message on LinkedIn.

I am a specialist at Qxperts. We empower companies to deliver reliable & high-quality software. Any questions? We are here to help! www.qxperts.io