This was the first release of OSD 600. In this release, I was dealing with fixing bugs or adding features in other users repositories who have done Lab 2, mentioned in the previous post.
I first started by finding repositories that might have some bug or some features I can add to. I stumbled upon two repositories, one which had a bug and other one to which I wanted to add a feature. To find bugs I just cloned the repository and tested it. When I found the bug I filed an issue. To do that you can follow the link here . Click this link to see my filed issue : https://github.com/ImmutableBox/whiteboard/issues/1. You will see in the issues tab the bug I wanted to fix which was affecting the readability of the note in the app. I filed another issue for adding a feature which was a scrollbar in a different repository, for viewing the issue click this link: https://github.com/nazneennahar/my-note-/issues/1
A note on ‘Branches’
Image 1: A visual representation of how ‘branches’ work in Git. View Image Source
A branch is a key component to fixing issues in any project repository. It creates a separate stream of code, with the exact same code of the original project but it is separate in way that you can do anything you want from removing code to adding code, it will not effect the original project. You can submit a request which is called a “pull request” to ask the original project contributor to review and merge the modified project containing the code you wrote with the original project.
After this, I began working on the fixes for both issues.
Original Repository Link: https://github.com/ImmutableBox/whiteboard
To begin, I forked the repository into my account, then I cloned the forked repository into my computer by using command git clone “repo-url.git”. The issue in this repository was that when the application was ran on devices with smaller screen like mobile devices the elements of the application did not scaled properly which lead to zooming in and out frequently to see content. This caused readability issues which are shown in the pictures below :
In Visual Code, I added code to fix the bug in index.html which was a meta tag to set scale:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I ran the application locally to see the issue was fixed and it was. See the picture of the application running after the fix below :
You can view my fork of repository with my code I added by clicking on the link : https://github.com/jatinAroraGit/whiteboard
When satisfied, it was time to create a new branch and submit a pull request to fix the issue and get my code merged into the master branch of original repository. I followed the instructions here. Now, I waited for the original creator to review and accept my fix for the issues.
Pull Request Link : https://github.com/ImmutableBox/whiteboard/pull/2
Adding a feature
Original Repository Link: https://github.com/nazneennahar/my-note-
Issue Link : https://github.com/nazneennahar/my-note-/issues/1
I did the same steps for the second repository to which I added a scrollbar as a feature. The reason to add a scrollbar was to enable scrolling in the div where the note was typed so that the div does not keep on expanding when more text is added in it. The need for this feature can be seen in the picture below:
In the picture above, the div keeps on expanding and so does the whole body of the website to fit the content of note. The feature was simple to add and I added the style overflow-y: auto !important; to the element like this :
<div id="notification" contenteditable style="background-color:maroon; color: white ;width:700px; height:300px; overflow-y:auto !important;"></div>
You can view my fork of the repository with the new code I added by clicking this link: https://github.com/jatinAroraGit/my-note- . The application looked like this after the fix:
I followed the same steps and submitted a pull request for my code to be merged into the original master branch.
Pull Request Link: https://github.com/nazneennahar/my-note-/pull/4
On pull request submission I discovered there is a conflict in merge, so I tried resolving it tried to keep the original code with addition of style property overflow-y : auto !important; to keep things same resolved it and now it was ready to get merged with original master branch.
It took some time, but finally my code was merged into the repository by the user to fix the bug and the issue was closed. As of now, the other repository in which I added a feature is still not have been merged. Nevertheless, working on this release was a good exposure to how contribution works in an open source community.
What happened with my application repository ?
If you have not read my previous blogs, I created a web taking note application in it (Link To Blog Post). The application got two issues filled in it which were related to adding new enhancements. You can see the issues by clicking the link to issues list : https://github.com/jatinAroraGit/note-down/issues?q=is%3Aissue+is%3Aclosed
Issue #1 and Issue #3 were both fixed by the contributors who created the issues and they both submitted a pull request.
- Issue #1 Pull Request Link : https://github.com/jatinAroraGit/note-down/pull/2
- Issue #3 Pull Request Link : https://github.com/jatinAroraGit/note-down/pull/5
I reviewed both of these and saw the changes were made were in accordance to my style of coding and fixed the bug. I ran their version of my note taking app on my local machine and confirmed that the features were added and were not interfering with anything else in the app. I merged both of the requests to the master branch and thanked each of them for their time and effort for fixing the issues and closed issue #1 and issue #3.
Open Source Communications
Communicating with the open source community can really be helpful when it comes to making a project better through reporting and fixing of issues. For this release, I had to communicate with other programmers to fix issues or know more detail about some bugs. Some Examples are below:
Repository Issue Link: https://github.com/smilegodly/whiteboardapp/issues/1
I filed the issue in this application’s repository which you can read about in the issue link above. I was about to start working on my fix but other open source community member replied to my issue that the bug was no longer found. I cloned the repository again and ran it locally. There were no bugs and found out the repository owner fixed it himself. So, I did not waste time on fixing the issue and asking for a pull request for something which was fixed already.
Communication is also key to fixing issues assigned to you and see if the original project owner accepts the code you submitted a pull request for.
For example the issue I fixed ( Issue Link ) , the pull request was accepted and the original repository creator commented back on it and let me knew that my code for fix was good and accepted. This gave me a satisfaction as this was my first ever fix that got merged and filled me with more confidence to go explore open source world in deep.
Happy Coding !
Create branches & pull requests using Git: https://github.com/processing/processing/wiki/Contributing-to-Processing-with-Pull-Requests
Create Issues : https://help.github.com/en/articles/creating-an-issue