First Steps into Open Source

This week I have taken the first steps into the environment of open source development by contributing to other projects, but also accepting pull requests from other contributors. The task given was to fix one bug and implement a new feature into existing code by using Git to create different branches in a Github repository, but also to push and commit these code changes. This task was really eye opening as it showed the endless possibilities when it came from utilizing these convenient tools.

Fixing a bug

The bug that I fixed revolved around the appearance of the web page. The background of the website was interfering with the text printed once a button was clicked. Below is what the bug looked like.

Image for post
Image for post
before CSS

The change to the code was a fairly simple fix as it only worked with the html file. To fix this bug, I noticed that all of the CSS in the web page was programmed in-line for the html document. To add on the existing code, I added two in-line CSS attributes into container that stored the text.

background-color:white; — This was to display a white background around the text

display:inline-block; — This was used to scale the size of the container to the text and since inline-block; moves the element beside the parent element. A <br> tag was added before the text container to move the element back to the original position.

This is what the final product looked like

Image for post
Image for post
after CSS

Adding another feature

The feature that I added was a quality of life fix as it was hard to erase the text. To fix this issue I added a clear text button to the existing code and had to modify two files including the HTML and Javascript file. This is what the web page looked like before modification

Image for post
Image for post

The code was really organized as they had the HTML and Javascript separated. In the HTML I added a button beside the Save Note button, this is what the code looked like

<button class=”btn btn-info mt-2" id=”clear” type=”button”>Clear Text</button> — To add on their existing code, I used the preexisting class used in their CSS file and named the id as “clear” to be referenced later in the Javascript file

In the Javascript file, I noticed that the programmer used JQuery to reference their HTML elements and to conform to their standards. The changes I implemented looks like the following

const clearFile = () =>{ $(‘#notes’).text(‘’);} — This is the function to clear the text for the “notes” id.

$(‘#clear’).click(clearFile); — This links the button of “clear” id to the function clearFile.

When the clear button is clicked, it will empty the “notes” id which is the element that store the text. This is what the final product looks like

Image for post
Image for post

Steps to creating a pull request

The above changed was created using the following steps.

  1. Fork the repo
  2. Git clone the forked repo
  3. Create an issue
  4. Create a branch with the following command: Git checkout -b issue-#
  5. Change the code and test to make sure it works
  6. Git add the files you changed
  7. Commit the changes using the following command: Git commit -m “Fix #_: Message”
  8. Git push origin issue-#
  9. Go on the Github repo and request pull request

What Worked

This was a learning process and contained many steps but once you got the hang of the commands, creating a pull request became easier.

Coming with previous development experiences, I found that implementing into the existing code was easy. Although the existing code was small, I found that staying within the programmers coding style to be the most challenging part. Another challenge I faced when implementing was fighting the urge to fix issues that do not belong to the issue I created. Overall the creating of the pull request worked smoothly and definitely would follow the above steps again.

Reviewing Pull Requests

Github is like a community and contains many individuals that enjoy to fix issues with your code or even implement enhances. On my note-taker web application, I reviewed 3 pull requests as shown below

When reviewing these posts, I would review the logic of the code to ensure that everything would work when I pulled the request. If everything checks out and does not interfere with the existing code, I would pull the request and test to see if the web page is functioning as intended. If everything works as intended, I would comment and close the issue to say that everything is working properly.

Community involvement

To ensure that the assignment goes smoothly for others. I ensured that others know how to do the assignment and that they know when its due through text and in person. If others needed to file an issue, I also reassured them that they can always contribute to my repository and I am open to any bug fix or enhancement.

Links

Issues

Pull Requests

Reviewed Pull Request

Written by

Hi my name is Ryan Wilson and these blogs are for a course called OSD600

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store