Hello everyone! 🙋🏻‍♀️

Today, my contribution to one of the external projects was successfully merged after a few days of review. 🎉

Project 👩🏻‍🏫

I really loved working on different open source repositories during the month of Hacktoberfest and I decided to continue making contributions.

One my Hacktoberfest contributions was made to the cool VSCode extension project called VS Code Pets. It allows you to add and play with different cute pets in your VS Code window to boost productivity and help you stay focused.

I personally started using it after I made my first contribution to it and it always brings me joy to see these little pets whenever I start coding.

Additionally, they made a new release where they included all changes including my first contribution and it was so nice to see my name documented as part of it. They keep track of releases in CHANGELOG.md.

Issue 👀

As for the internal project, I worked on the no-code translation issue, here, I wanted to try something more related to my field.

I picked an issue which had very little description, but I have figured it out. It mentioned that whenever a cat receives a ball, its image gets significantly larger, which is not a supposed behaviour.

Solution ✨

First of all, in order to better understand an issue, I has to try to recreate the situation myself. I opened up the VSCode Pets extension and tried throwing a ball at different cats. There are three options: brown, white and black. All of them got larger indeed when a ball was caught. I checked other pets as well to make sure it is solely related to the cats.

Once I confirmed the cases, I started going through the code to understand how it is structured. I was thinking that the issue might be related to how the images get transformed from the running state to the ball caught. However, after spending some time, I figured out that mostly the way the states are managed is applied generally and not only to the cats. So, something else should cause it.

I went back to the issue and saw someone else comment a table of different gif dimensions and ratios. The gifs displayed cat movements in different states. After comparing the gif images, I realized that only the ones with the ball had much smaller dimensions. So, this might have been causing the issue.

However, I never worked with gifs before, so I was not sure how to proceed. I researched myself and found some tools for resizing gif images, but still did not know if it was the right way. So, I decided that it was better to ask the creator of the issue and the maintainer for some recommendations. Later, I was glad I did it as @tonybaloney (Github username) gave me great instructions on what to do. I was initially right and used the tool I found to resize the gifs.

After I was satisfied with the images, I had to test my work to make sure that now the sizes get displayed correctly. I was told to run the extension in development mode, but as I have never developed a VSCode extension before, I did not know how to do it. I found the official documentation with instructions, but the F5 option did not work for me. Luckily, I found another article which mentioned that I can use "Run & Debug" tab and that was how I did it.

Pull request 🔎

Overall, I only had to wait for the reviewer to confirm my changes and approve the pull request. There were no major complications, as I have tested my work.

Conclusion 💡

Previously, I have never worked with the development of VSCode extensions or with gif images, so this was a very valuable experience for me. I expected the solution to be code related, however, the issue has its own idea on how it should be fixed, which was interesting to figure out.

Also, the project did not have a CONTRIBUTING.md file which usually contains all instructions to get started with contributions. So, I had to explore most of the things myself. Therefore, I made another suggestion to the owner.

Comment for #304

gulyapulya commented on Nov 18, 2022

@tonybaloney Also, as a suggestion, it might be great to create a CONTRIBUTING.md file with instructions for contributors who have little knowledge of VScode extension development and other areas to speed up their introduction to the project. :)

View on GitHub

Overall, very happy with what I have achieved. ☺️