Hacktoberfest: Challenge #3

My Experience Looking for Issues

This time it took me quite a while to find another issue to work on. There were so many repos that I found that weren't active, didn't have any open issues, or the issues were too complicated/already assigned to someone else. I didn't expect that finding issues would be that hard!🥵🙈

Lifehack When Looking for Issues

Eventually, I remembered one of the repos that I've used before to contribute to one of the Hacktoberfest issues, I thought that it would be nice to give back (hint hint😉😉😉 something to think about when looking for an issue... hint😉) to that repo. I quickly gave up everything I was doing and went to check it out to see if it is even active and if it has any open issues I could work on. To my surprise, no one except the author has ever contributed to that before, so I am now officially one of the first contributors there.😋

Implementation Process

The issue I chose to work on was bigger than the previous two I chose for Hacktoberfest, I had to implement a whole new feature. It was about creating dynamic badges by uploading a JSON file and providing a badge label and a query. I had to use TypeScript to implement backend and Vue.js to create views for the frontend. I never used Vue.js before, so I was scared at first because I didn't want to contribute badly😅. I still gave it a try though because I really wanted to give back to that repo and it is also amazing to be able to learn something new. Luckily, the code base was very organized, it had templates, unit tests, nice refactoring, and even automatic checks... Coding paradise👼🌈

I felt like I was working with JavaScript and React because of how similar the structures of TypeScript and Vue were to them.

The process of implementing the View for this feature was very straightforward. I just needed to follow the templates and structures that were already there because I noticed that all of the pages on the website looked pretty much identical. So I just added/edited the parts I needed for the feature and removed unnecessary parts.

The back-end was a bit challenging but I managed to do it by reading the code the author wrote before for a similar feature and I was trying to follow it through to implement a new one. The first thing I did was implementing the unit tests. I learned about the describe, it, and tobe functions for unit tests. Here is a small code snippet how they would look like in work that I implemented for this issue:

describe("#dynamicBadge", () => {
  describe("Url, label, and query", () => {
    it("displays a badge with a given label, URL and query", () => {
      expect(
        dynamicBadge(
          "version",
          "https://raw.githubusercontent.com/MichaelCurrin/auto-commit-msg/master/package.json",
          "version"
        )
      ).toBe(
        "![](https://img.shields.io/badge/dynamic/json?label=version&query=version&url=https%3A%2F%2Fraw.githubusercontent.com%2FMichaelCurrin%2Fauto-commit-msg%2Fmaster%2Fpackage.json)"
      );
    });
...
});

This test will test whether the function will return the proper values given the version, query and label. It will "expect" certain input and make the output "to be" what we passed.

Then, I was implementing the code such that it would pass all the tests I wrote. I was building a badge URL that will show dynamic badges. Lastly, I added the route to connect the new page to the website and updated documentation.

Overall, I was following the process of implementation the author had when implementing Generic Badges feature, so hopefully it is going to become a great addition for that repo. Here is what I ended up with: cute PR. This repo inspired me a lot to refactor code better.

Takeaways

I learned that it is not worth to always be scared of a new language/technology to work with. When you have enough basic knowledge about programming, as long as you read through the code and try to follow the style and structure, you will be able to get a feel of a new tool. For example, when you start working on a repo you've never worked before, go through the folders and files, and try to analyze the structure and skim the code. That way, you may become less scared of a new language and possibly notice the familiar patterns from other languages/tools. Once I found out that Vue is very similar to React, I didn't feel as afraid anymore. So...don't jump right into coding, familiarize yourself with the code base first.😉