Making Pull Requests fun again

Pull Requests can get very dry and exhausitive when it is delivered to reviewers containing all text. This also makes it extremely difficult for reviewers to get a clear picture into how your changes actually impact the app, especially when it comes to UI/UX changes. But how do we show UX changes in a PR? GIFs!! 🎉

These are not only nice to look and add even more contextual information for the reviewer to note and take into consideration, but they also help show the UX that will be added/fixed/updated/changed with the new code. This is beneficial as it allows this to be vetted prior to the possible churn of merge, review, test, and tickets being created and/or punted back from QA. So what do we do?

Creating a video of the device with the new changes

This can be done a variety of ways, with tons of apps existing on the Google Play Store and Apple App Store to facilitate this, as well as OS support on iOS and certain Android OEMs. With all these I prefer not having to utilize 3rd party processes or applications to facilitate things, so on the Android side of things I take advantage of the built-in screenrecord binary available via adb. To start a screenrecording you simply execute:

1adb screenrecord /sdcard/<file-name-of-your-choosing>.mp4

and this will start the recording. To cancel/end the recording simply kill the process in your terminal (Ctrl + c on macOS). To extract the recording from the device/emulator simply:

1adb pull /sdcard/<file-name-of-your-choosing>.mp4

PRO TIP: You can also utilize adb to capture screenshots of your connected devices in a similar fashion, taking advantage of exec-out.

1adb exec-out screencap -p > <desired-file-name>.png

If you are like me, you also like utilizing automation and scripts to remove some of the multi-step operations you can use this script.

1#!/bin/bash
2outputName=$1
3
4trap "pull_video" SIGINT SIGTERM
5
6function pull_video() {
7 echo "pulling $outputName"
8 sleep 1
9 adb pull /sdcard/$outputName
10}
11
12adb shell screenrecord /sdcard/$outputName

The script will auto pull the recording from the device on process cancellation via Ctrl+C 🎉🎉

Gifski + ZEIT Now = PR 😍

If you went to add the recording you created to bitbucket you would be greatly saddened that they only directly support the adding of static images via their import tool. In addition to that, being a mp4 it requires the reviewer to have to launch the video and/or download it to view it. Fear not there is a relatively simple solution involving the use of a video to gif conversion tool that you choose and the power of serverless functions and cloud storage provided by ZEIT Now. To get started you must setup an account here. Once your account is created and you are able to sign in successfully you are ready to continue.

Setting up the now CLI

Now that you have your account setup you will need to setup the CLI tools for ZEIT Now. To do so you will need node and npm to install the cli tools. The easiest way to do this is to use homebrew.

To install node, install it with brew like you normally would: brew install node.

Verify that it installed correctly by entering node -v and npm -v ; you should see the versions print out for both as a result. If it does not please refer to this guide for troubleshooting steps.

example

Now that you have node installed you will need to install now cli. To do so execute:

1npm i -g now

Once that is installed, you will need to login to the CLI tools via now login.

Converting your video to a slick GIF

For this example on macOS, we will utilize Gifski, which is available for free on the Apple App Store on macOS.

Upon launching Gifski, you will be presented with their import UI, where you simply can drag and drop the recording onto it.

https://files-f5dh1rwl2.now.sh

Simple UI is simple.

Once you have selected a video for conversion, Gifski will allow you to configure dimensions, frame-rate (FPS) and other aspects for the GIF. For proper file size and dimensions, we aim and recommend resizing the video down to 33% of the original. You can normally leave the FPS alone.

Once satisfied with your options, click convert and allow Gifski to do it's thing. Depending on the original file size the conversion can take anywhere from 30 seconds to 10 minutes (for the 4k macOS screen recordings). Feel free to grab a coffee for those conversions ☕️.

Once Gifski finshes the conversion process, your GIF will show in a screen similar to the drag-and-drop import option that Gifski provided. You can now proceed to upload the freshly minted GIF to the files repo on ZEIT Now.

Upload the 💰

Simply drag-and-drop the displayed GIF into your terminal and prefix the path with now and let it do its magic. 🎩

https://files-6vd4y6icg.now.sh

Again, depending on the size of the resulting GIF (and your internet connectivity speeds), the upload can take a minute or two (or longer to complete. (Your coffee should be cool enough to consume if it was hot now.)

Once your file is uploaded now will present you with a URL for use in the PR (highlighted in the screenshot below). As you can see there is an alternate URL that will always route to that last uploaded file to the context scope, so it's advised to not use that one as once you upload another GIF or file it will be replaced; leaving your PR with an unintended file linked.

https://files-hv2dav4y1.now.sh

Putting it all together in the PR in one markdown entry

Once you reach the end of your PR filling in all the applicable information in the template, you will reach the screenshot/GIF and additional information section. Watch the magic unfold before your eyes. ✨

https://files-b4mjm0fc7.now.sh

hold the ooh's and aah's

![example](paste your url)

Conclusion

You should now have a snazzy auto-playing GIF visible in your PR showing off all your hard work you put in to get the feature, bug, or other change implemented into project. Be proud knowing that your reviewers will have a clear picture of the implemented UX and UI, with an easy to view and compare window into the project.