My First Open-Source Contribution: A Beginner's Experience
6 December, 2022
2
2
0
Contributors
Introduction
If you are here, I know that you are either trying to make your first contribution or you just need the motivation to overcome the fear of contributing to open-source.
I know how overwhelming it can be because, just a week ago, I was going through something similar.
1.
I was scared to get started.
2.
I didn't know which project to contribute to, and when I could find one, I wasn't sure if I could pull it off.
3.
I would scour through websites like goodfirstissues.com and end up disappointed when I couldn't find any projects that I could contribute to.
Now, a week, I have successfully created a PR which even got merged!
I hope that you will find my experience worthwhile!
How I found my first issue
So, I have been following Theo for over a month, and his videos have helped me get a good perspective on web development and feel motivated.
He and his community created an open-source CLI tool called create-t3-app to quickly set up a fully typesafe full-stack application.
They also created a new documentation website that explains the tech stack used.
I was exploring the documentation website, and that's when I found the issue. The issue was that when I split my screen to view the docs alongside the code editor, the navigation pop-out of the website was not displayed. I immediately noticed it and headed over to their GitHub repository.
Not gonna lie, I was hesitant to create the issue myself. But, as I went to the issues page, there it was! Someone had already found that same bug and had created an issue for it.
When I read through the issue, I observed how well the issue had been documented. They had mentioned at what screen width the navigation pop-out was breaking.
Honestly, I never thought about the screen width even though it was so obvious.
My initial plan was to create an issue stating that the navigation pop-out was breaking when using the website in split-screen (Pretty dumb, right?)
That's when I understood the importance of communicating clearly.
Now, even though the issue had been created, it was still an unconfirmed bug. So, I ended up screen-recording the bug on my end and posted it there, and asked if I could work on the issue as it seemed like an easy fix.
One of the maintainers replied in a short time and assigned me to work on that issue.
My project set-up
Now, it was just about forking the repository, cloning it to my local machine, and fixing the error. Simple, right?
Actually, yes, it is.
Before I cloned the project, I wanted to set up WSL on my laptop which would provide an isolated place to work with open-source projects. Linux is the best way to do this because most projects will have set-up guides for Linux, and setting up projects on Linux is much easier than on Windows. You can also set up WSL by following this tutorial if you have not yet.
Navigating the codebase
Since this was just a documentation website, there was not much to search through. Although the project uses AstroJS, I didn't have to care about that. I just had to look for the media queries in the CSS file.
Once I found that I changed the max-width property from 767px to 768px.
And the bug seemed to have been fixed and it felt so easy! But not for long...
The GitHub workflow
With the error fixed, it was time to create a pull request!
I had already created a new branch to edit the code, and now I just had to commit the changes and push the branch.
Now, this is the crucial part. Every open-source project will have its contributing guidelines. Most of your doubts regarding the steps to open a pull request will be found there.
Now, committing the code is easy, but different projects might have different ways of doing it.
In this project, they used Conventional Commits. I learned the correct way writing commit messages because of this, and it was fun!
Once I committed the code and pushed the branch, I created the Pull Request with the necessary details filled in as mentioned in the contributing guidelines.
Final Push
It was review time, and I was sure my PR would be approved.
Not so soon!
The change I made had caused another weird bug which was informed to me by one of the maintainers.
I had no idea how to fix it, but one of the contributors asked me to change the max-width value from 768px to 767.5px.
I made that change, and surprisingly, the bug was fixed!
I didn't even have to break my head over it.
This bug was a weird one from the start, but hey, it helped me get my first shot at open-source, and I am grateful for it.
Finally, I pushed the code again for review. This time, it was approved and merged with the main branch!
And that feeling of getting your PR merged and seeing that purple box saying "merged" is something I want to see more of.
I felt proud and accomplished after making my first open-source contribution. It was a great opportunity to apply my skills and knowledge to a real-world project and to learn from other contributors and project maintainers. I also enjoyed the sense of community and collaboration that comes with working on an open-source project.
In conclusion, I highly encourage others to consider contributing to an open-source project. Not only is it a valuable way to give back to the development community, but it's also a great learning opportunity and a way to build your skills and showcase your work to potential employers. Thanks for reading, and happy coding!
css
javascript
open
source
develevate