My first contribution to Open Source

In this post I am going to share my first experience contributing to an Open Source Project on Github with you.

After coding for just over a year now, I decided that it is time for me to get “Out in the Open”.
Namely trying to collaborate with other developers on an shared project. (And starting this Blog ;-) ).
Understanding all the involved processes for this intent was not easy at all times, so I decided to share my experiences with you.
May it help you on your journey to your first successfully merged Pull Request.

The Basic Process

To understand the basic principles of what we are going to do I recommend you this videos from @kentcdodds:

Youtube
or
Egghead
Both are basically teaching the same process. But there is no harm in watching both to better internalize and understand the topic.

@kentcdodds presents a GitHub Repository in both videos for which you can contribute in order to practice the process. Unfortunately for us, the Repository seems to be archived by now, meaning it does not accept any further contributions.
So I needed to find my own project to contribute to, which was probably the hardest part in my quest.

Finding a Project

Finding an project can be hard and overwhelming, at least it was for me.
But remember that the key point of your first contribution does not necessary have to be to solve the hardest puzzle out there, but to get your feet wet and to become familiar to the process.

A good starting point is this Blog-Post from the same tutor as the videos above.
He recommends trying to contribute to an project that you already use frequently.
I looked in the big frameworks like React, Gatsby, etc.
There are a lot of open issues in there, some of them kindly flagged as “Easy”. But for me they were pretty much all above my head for being honest.

The Blog-Post mentions some useful Links where you might find a project for you.
An other promising source is this Website.

After searching for some time I settled on one of the resources from the Blog-Post, namely this Twitter-Feed.
The problems which get posted there are very easy most of the times. They deserve there name of being only for first-timers.

The Way to my first Pull Request

The problem I had chosen was indeed very simple. Changing the Scroll-Up-Speed for mobile devices. The Project-Maintainer even gave an explanation in which file to search for the problem.
The Maintainer accepted, assigned the issue to me and I was set to start:

Most Open-Source-Projects contain a file CONTRIBUTING.md or something similar.
There you can read about the process the Project-Maintainer wants you to follow in order to submit a Pull Request. I will describe what I have done but you need to check for your project by yourself.

Creating a Fork

First you need to create a Fork of the Project.
This will place an exact copy of the current project in your GitHub-Account so you can make your changes to the code there.
Just click the Fork-Button in the right upper corner of the current project:

Cloning the Project

After a short period of time the Repository will appear in your account. It will be marked as forked from the original Repository. From here your can clone it to your local machine.

The command for my example was:

git clone git@github.com:Develrockment/sbuttons.git

Setting an Upstream-Repository

In order keep the copy of the Repository on your Account in sync with the latest changes of the original Repository you need to define the original Repository as Upstream-Repository.
Therefore you need the address of the original Repository and use it in this command:

git remote add upstream git@github.com:shahednasser/sbuttons.git

After that you pull the information about the available branches of the original Repository:

git fetch upstream

The result should look similar to this:

We want the Master-Branch of our local copy of the Repository to stay in sync with the Master-Branch of the original Repository so we do:

git branch –set-upstream-to=upstream/master master

To be honest this step would not have made an difference for my commit because there were no changes going on in the original Repository. But it is an good practice to get used to doing this.

Create a new branch

Next you need to create a new local branch in which the code changes will take place:

git checkout -b slowerScrollMobile

Then install the necessary Node-Packages:

npm install

Change the Code

The changes which are necessary to the code will of course be different for everyone so I wont got into to much detail here.
For my specific example the project was using jQuery which I had absolute no experience in.
But after a short period on Google I found the function which was responsible for the Scroll-Animation:

  $('.scroll-top').click(function () {
    $("html, body").animate({
      scrollTop: 0
    }, 100);
  });

(In order to learn more about the jQuery animate() function visit: https://api.jquery.com/animate/)

The requirement of the Project-Maintainer was to reduce the animation speed for mobile screens, so I changed to code to:

$(".scroll-top").click(function () {
    let scrollSpeed = 100; /* Default */
    if ($(window).width() <= 640)
       scrollSpeed = 210; /* For small (mobile) Screens */
    $("html, body").animate(
       {
          scrollTop: 0,
       },
       scrollSpeed
    );
  });

When you are confident, that you solved the problems necessary for your Pull Request, commit the changes. Make sure to set a useful Commit-Message for the Project-Maintainer:

git add .
git commit -m “Scroll-Up Speed slower on mobile screens”
git push origin slowerScrollMobile

After that change to GitHub which automatically detects your changes and offers you to “Compare & pull request” your changes:

After that you will be asked which Repository's should be compared in order to form a Pull Request out of the difference between them.
You need to compare the Master-Branch of the original Repository with the Branch of your Repository in which you made your code changes:

On the next screen you need to write an message along to your Pull Request. Make sure to write a precise description of what you have done to the code in order to make the work off the Project-Maintainer as easy as possible:

After that your Pull Request is submitted and you need to wait for the Project-Maintainer to respond.

Making Changes

Sometime the Project-Maintainer will answer your Pull Request with a need for additional changes to your committed code. In my case the Project-Maintainer was not happy with the formatting of my code :

In Order to implement the further changes you first correct them in your code:

  $(".scroll-top").click(function () {
    let scrollSpeed = 100; /* Default */
    if ($(window).width() <= 640)
       scrollSpeed = 210; /* For small (mobile) Screens */
    $("html, body").animate({
          scrollTop: 0,
       }, scrollSpeed);
  });

By executing git status you can check which files have been modified by you:

Now you push your changes again:

git add .
git commit -m “Fixed Formatting”
git push

In GitHub your new commit will be visible right below the request for change of the Project-Maintainer. In order of making sure that the Project-Maintainer sees the new code you again write a message in the same thread:

Now you again need to wait for the Project-Maintainer to respond.
In my case the code was accepted and merged into the Master-Branch.

Good Luck on your journey to your first contribution to Open Source!