So last week I was attempting to complete an Issue for the Goodwork repo. It required me to learn PHP and then everything else was pretty straight forward! That was a lie.
Overconfidence is My Downfall
Goodwork utilized a PHP framework known as Laurel, which I obviously have no experience with since I was new to PHP as well. Hence, I am going through some Laurel tutorials to better understand the framework before taking on an issue from that project. After reading the guidelines for Goodwork contribution, I will also be required to write tests for any feature I wish to implement. Therefore, I will have to investigate that as well. I will not give up in trying to complete an issue for this repo! As learning is going quite slowly, I decided to look into other issues that I may fix on the side. My search led me to an issue with Image-Splitter.
Image-Splitter
Image-Splitter is a tool used to split an image/gif into square tiles, for purpose of printing large images as a set of emojis on platforms such as Discord. The issue involved a problem with the converted gifs not rendering properly after conversion and incorrect delays between the gif frames.
Debugging
First, I reproduced to issue on my own to understand the workflow. Afterwards, I looked for the code segment that I thought to believe was related to the issue. This was fairly easy as I searched the color code used for the gif background and the subsequent code segment was the code that dealt with the image conversions. Next, I found two lines of code that I believed to be the cause of the problem.
ctx.clearRect(0, 0, size, size);
ctx.fillRect(0, 0, size, size);These two lines cleared and filled the image of each square, respectively. So I commented the code out to see how that affected the software. The converted gif was no longer distorted but the background was no longer gray and had the original large gif image underneath. Hence, these two lines were needed but probably did not need to be in the loop they were originally. In the end, I moved the two lines out and directly before their original loop and the distorted final gifs produced the correct output! One problem solved.
The second problem was tricky. I downloaded the final gifs and their delays were correct, so there was only an issue when showing them on the browser. Looking over the code that displayed the preview, I did not see any problems, so I went to the gifs.js repo that was used to handle gifs in this project. Looking through past issues, I found an issue similar to the one I’m working on, which explained that gifs delay rates were limited by browsers. I submitted my pull request for the fix and commented on the original issue about my findings. I will have to see how the owner wants me to address the latter half of the issue.
Going forward
I will continue learning the Laurel framework so I can take on an issue from Goodwork. I will also be looking into test driven development as many projects require me to write tests for features. I have a better understanding of how fast I can work, especially with frameworks and languages I have not touched in a while. However, playing with other people’s code is proving to be quite fun!
Thomas' Blog 