Better code review using gifs and flow charts

If you write code for a living you have probably encountered this issue many times. Reviewing code can be extremely hard, especially on a large scale projects with multiple contributors.

When I read Clean Code by Robert C. Martin I encountered this funny but yet accurate measurement to code quality.
Robert staits : " The only valid measurment of code quality: WTFs/ minute "

As developers we would like to bring WTFs/minute to a minimum, but sometimes our code is just to complicated to be self-explanatory. Thats why I would like suggest two methods to improve your team code review experience.

Using gifs

When opening a pull request, you can add a gif showing your code changes expected behavior in addition to the text description you have added to it.
for example:

few things too keep in mind while using gifs on pull requests:

1. Keep them short and include only the essential changed parts.
   long gifs can be hard to follow.
2. In order to reduce the gif file size and for keeping your teammates focused, it is best to record only the part of the screen you need for the demo. (for example     github will not let you upload files larger than 10MB.)
3. There are multiple tools for capturing and editing gifs. Personally, I find              CleanShotX the most convenient.  

Using Flow Charts

Sometimes our changes are just too complex to describe with gifs. In that case I find it  helpful to add a flow chart to the pull request body.
This way, your teammates can understand rightaway what problem you are trying to solve and which files are taking part in each flow.
for exmaple:

few things to keep in mind while using flow charts:

1. Creating flow charts can seem tedious, but you'll get better at creating them the  each time. Besides the pull requests flow charts can easily answer a lot of          
   product and marketing questions.
2. You may find out that creating a flow chart for your task is good idea regardless of how helpful it is for collaborating. When I create a flow chart for my task it     raises multiple questions that leads to a better overall design and solution.
3. For me, Lucidchart is the way to go when creating charts, but there are other     alternatives, choose the one that suits you best.
4. To understand more about flowcharts and its components you can visit
   this  article.

conclusion

This short article presented two different ways to refine your code review collaboration.