Get started with open source, even if you are a GitHub beginner
Photo by Tim Marshall on Unsplash
Contributing to open source is one of the best ways to learn and up your skills.
There are a variety of reasons why one should contribute to open source projects such as improving the library or framework, meeting other people, and much more.
However, even after knowing the advantages of contributing to open source, many don’t actually contribute because the entire process feels a little bit overwhelming.
Hence, I have tried to simplify the process of contributing and broken it into four steps for easy understanding for absolute beginners.
Before going forward, please know that you need a good grasp of the framework you are going to contribute to and the language it uses — as well as a GitHub account.
You can create a GitHub account by going to their official page and signing up for free. You don’t need to pay to contribute.
Let’s get started!
Step 1: Finding Issues
The first step to open source contributions is to find apt issues that you would be able to resolve.
The best place to look for such issues is to go to the GitHub page of the framework or library you enjoy using and then heading over to the issues section.
Otherwise, you can always search for topics like ‘JavaScript’ or ‘frontend’ in GitHub and manually search random repositories and their issues.
Vue Repository. Source: Author.
In the picture above, you can see that I have specifically searched for issues that are labeled “good first issue” as well as “contribution welcome” which are commonly used labels for issues that are beginner-friendly and they are a good place to start.
Contributing to such issues initially is good because it will give you practical hands-on experience on how to contribute and get you started.
If possible, try to find issues and contribute to a repository such as Vue and React which have a large community.
Step 2: Understanding the Rules
Even though the process of contributing is fundamentally the same, it can differ slightly from project to project.
Usually, each project has a set of rules they want you to follow and keep in mind when writing code and contributing.
How to find these rules?
These rules and guidelines are generally put in the README file.
Sometimes, they put these guidelines in a separate file but that’s not very common and you may find the link to the file in README.
Gif of Vue repository. Source: Author.
You will find various rules and guides as to how to set up the project, project structure, etc.
You must follow these rules. Otherwise, your contribution might get rejected.
Step 3: Making Changes
Now that you have found the issue you want to resolve as well as read the rules and guidelines, it is time to actually code and fix the issue!
Fork button highlighted. Source: Author
To make changes, you must fork the repository. In layman’s terms, forking will create a personal copy of the project that you can work on.
Changes you make to your personal copy won’t affect the actual repository.
For example, if I fork the React library then a personal copy of React will show on my GitHub account, and I can then make changes to it without affecting the official, public React library.
Once you have forked the project, you have to clone it. Cloning basically means downloading or copying the code to your local machine on which you can use an IDE like Visual Studio Code and start editing.
To make the process simpler, you can use the GitHub CLI.
GitHub clone project. Source: Author.
Once you have cloned, head over to your personal copy and click on the green ‘Code’ button and get the GitHub CLI code.
You can paste this line of code in your editor’s console to download your personal copy onto your local machine.
Step 4: Pushing Changes and Submitting
Once done editing, you need to push your changes to your personal copy stored on GitHub.
To do so, you need to create a branch with a relevant name.
If you are adding a warning or alert, your code to create a branch might look like this:
git checkout -b added-warning-alert
After this, you need to add all your files and commit your changes. This process looks like this:
git add.
git commit -m "Added warning message"
The text between quotes is your message related to this particular commit.
Finally, we need to push all the changes we made to the personal copy stored on GitHub.
To do so, run the following command:
git push --set-upstream origin added-warning-alert
We have to first inform GitHub that there is a new branch called ‘added-warning-alert’ that we have created earlier and that all the changes need to be pushed onto this branch.
Lastly, we need to send a pull request. A pull request is a proposal of your changes to the original, actual repository you forked in the previous steps.
For example, if you forked and edited the Vue repository and then made a pull request, the official Vue repository will get your proposed changes, and they will review it before merging it with their repository.
To make a pull request, go to the Pull Request section of your personal, forked repository after making the changes and click the ‘Compare & pull request’ green button.
You will see a message box where you have to write about the changes you made.
Generally, the contribution guidelines cover the structure of these comments and messages. You should refer to that.
Once done, hit the ‘Create pull request’.
You have just made your first pull request, and if your changes are approved they will be merged with the official repository!
Conclusion
Contributing to other’s projects and reading code written by someone else is a fantastic way to grow as a developer.
It is wise to use the modern practices of the language — if permitted by the repository — as they result in shorter, readable code that also makes the project more future-proof.
While contributing is a great way to learn, it might come off as an overwhelming, discouraging process.
Therefore, I recommend going for projects that have a large community working on them as they will help you if you get stuck somewhere.
Hope you found my article helpful.
Thanks for reading!