Skip to main content

Collaborating with issues and pull requests on Github

This week I got the chance to get my hands dirty with some code, learn the ins and outs of git and collaborate on projects on Github. Slowly things are coming back to me after not doing development for a while with Javascript, HTML, and CSS. I also learned something new with CSS which I will discuss below. After a few classes on Git by my instructor, I was lost and confused. But after working on these projects and actually putting what he thought into practice, I managed to get the hang of working with git. I also had the opportunity of working with projects on Github which helped me get some real practice on how to collab with other developers. I had to opportunity of collaborating with two other developers, MusaNajwa and wajeehsheikh. After looking at their note-taking applications and looking through their code in the repositories, I decided that there are some few improvements that I can add to their applications.

Mirconote

Looking at this applcation I came across an issue that was bothering me. The user had to click within the text editing area in order to start taking notes. In order to make it more user-friendly, I decided to add a way for there to be focus on the text editing area when the page loads for the user. I was super excited to start my first collaboration with another developer. With excitement, I issued my first issue ever. When I received the go on the feature from the devloper I forked the branch and cloned it to my local desktop. Being excited I made a huge mistake. I started to work on the master branch of the clone instead of creating another branch of my cloned branch. It was a good lesson to learn and hopefully, I will not repeat that mistake again. 

My way of implementing the feature was using the javascript method focus(). on the div element. I also decide to add a little bit of styling to when focus is placed on the text editing area. Using CSS :focus I was able to add the box-shadow property to the area giving a focus like feeling. After finish the feature, I committed my implementation and published the branch to my Github. Afterwards, I created a pull request to the developer of the main branch. After the merge, it was great to see my contribution help improve the application.

Wajeeh's Notepad


After playing with this application I realized that the user has to erase the current text within the text editing area on the page. Removing the current text and replacing it with a placeholder to display a piece of text while the focus is not on the text edit area would improve the usability of the application. Knowing how to raise issues, I issued my second issue on a project. Afterwards I forked the repository. This time I made sure not start working on the master branch of my forked repository. Using git checkout -b, I created a new branch and started my fix toward this feature.

Tackling this wasn't going to be easy. Since the placeholder attribute only works with input types and we needed to figure out a way of applying to a div. After a bit of research and reading articles, I came across this article. This article introduced some new CSS pseudo-classes that I had never used before to me. After some development with the code, I was ready to commit what I had done and create a pull request to the projects repository. After committing, pushing my branch and creating a pull request, my code was merged by the developer into the main branch and within minutes deployed on the application. 


Contribution to my project

With my own Whiteboard application, I had few contributors help me over the past week fix bugs found within my code and improve the usability of my application. The first bug was issued by ODAVING which addressed an issue with the user interface of the application and the second bug was issued by eekbatani which addressed a typo made within the code. The last contributor MusaBajwa made an improvement by placing focus upon load page on the editable text area. After receiving the pull requests from each contributor, I analyzed their code to see what implementations had been done. Afterwards I learnt how to merge pull requests to main branch project and thank each contributor for their contribution to my application.

Comments

Post a Comment

Popular posts from this blog

Here i come Hacktoberfest

An amazing opportunity has appeared for me, giving me the chance to get involved in the open-source community. Its  Hacktoberfest  in a few days and I'm super excited to get my hands wet with some code! Hackertoberfest is an event hosted by Digital Ocean every October to get people involved and contribute to open source projects. As a beginner in the realm of open source, I will be participating in this event to reach the two goals I have set for myself. Click here for more information about Hacktoberfest Goals Git The first goal is learning more about how to use git. If you have been reading my previous blogs, I'm new to using Git and I have been learning the basics for over the past few weeks. But I feel like there's still more to learn and experience with Git. Participating in this event will help me utilizes that and help me become proficient in it.  C# & TypeScript The second goal is to learn a new programming language. My focus will be on C#
Post a Comment
Read more

Taking on new technology

In my last week's blog, I talked about the two objectives I would take on during November. In the middle of working on the contributions, I decided to change my issue for the internal open source project. I'm hoping to continue with this issue for next pull request I have to submit for my course. As you know, the external open source project I chose to contribute to was vscode . In the beginning, when i saw this issue , i thought this would be an uncomplicated and straightforward issue to work on within a big open source project. Before i forked the clown, i took a good look at the documents they had to just get a sense of how to contribute to the project and do the simple tasks of running and testing. After cloning, i had an issue running the project, this is where i spent some good time reading the documentation again, but i was just having a hard time running the project. I managed to get it running after a few reads.  Thanks to another contributor i had a hint of where
Post a Comment
Read more

Rhymus Application

The last day of Hacktoberfest is here and I submit my last pull request. It has been a great exposure to the open-source community. Before starting hacktoberfest I set two goals: Git - How to use git C# & TypeScript - Learn new languages Working with multiple projects, I managed to get a hang of using git. Unfourtonalty I didn't have the chance to give C# & TypeScript. My plan is to focus on this goal for the next month as we dive into working with big open source projects. rhymus This week I had the opportunity to work on rhymus .  the bug was to display the score to the player once the game was over. At first, the developer wanted the score to be displayed in a pop-up. I tried using javascript alert() method on but it didn't look very user-friendly, so I decided to come up with a design and suggest it to him. I decided to add the scoreboard on the card once the game was over and would be removed for a new game. Afterwards, I made the pull request and
Post a Comment
Read more