Now that we are done with hacktoberfest, we have some experience with contributing to the open source projects. So we were tasked with make bigger contributions as opposed to random line fixes or documentations. So I started looking for issues that I thought were cool and could be done by me.

I was able to find these two issues. First step for me to do was to assess if I can complete the issue, after which I asked the maintainer to assign to issue to me. I worked on two issues the first week.

Issue #1 - Youtube Chrome Extension

Well this was supposed to be an issue with some development, but it turns our what we were trying to do was not possible. I still want to take about it, because I poured a lot of hours into this. In short, the project is a chrome extension which makes your youtube experience more pleasant. I had never worked with extensions before, so there definitely a bit of a learning curve here, and a lot of the documentation was for the older manifest version which is not supported by browsers these days. The most challenging part for me was to understand the architecture of the extension and understand how my changes would fit in.
The issue was about getting the extension detect the skip button when it appears and click on it, so that we are not doing it manually. I added some javascript which would run every 5 seconds and query the DOM for the skip button and click on it. I had two problem with this:

1. Youtube changes the class name of the skip button. So we cannot just use a const for querying the skip button.
2. Youtube can distinguish between a user click and a click done using javascript. Additionally it blocks the latter, which made it impossible for me to implement this issue.

Issue #2 - Chat Craft

I had a lot of fun working on this issue, and learned a lot of things along the way. So Chat Craft is a web chat bot with integrations to different LLMs made specifically for programmers. My issue was to upgrade the version of the HTML renderer with the current stable version of the library we were using. The library was called @iframe-resizer/react and we were using a really old version. So was upon me to upgrade this. I started with looking at the documentation and found out that they split the code into two new packages. I installed one using pnpm i. I followed the documentation and changed the way we used the iframe.
When I started I was able to get nothing work for the first two hours no matter what. It turns out I was supposed to pass a license flag to the package which in our case was an open source license. I just ignored it when I started because I thought I will add it at the end of my programming session. When I got everything working I pushed it and made a PR.
I was told to use the child script from the package itself as opposed to hard coding it. I hardcoded it because we the script from the previous version was hard coded as well. That goes to say that the old code is not set in stone and when in doubt we should clarify with the maintainers. I added another package and uses the script from the package. Lastly, we found out that there was a lot of console spam made from the new package, which was a turn off. So now we are looking at other potential libraries for HTML parsing for react.

Conslusion.

I learned a lot of things from my two contributions this week. I started my open source journey with making documentation and small CI fixes. But now I more confident when talking to people over issue on github. I think this is just the start and I shall slowly start working on bigger and impactful issues soon.