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

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

Whiteboard Application: Built with Open Source Projects

I just took my first steps into the open source world and it was amazing. As my first project, I built a note taking application with the help of some open source projects and Github. I’m going to admit, I was a bit scared at first because I hadn’t touched web development in months so I was I rusty in Javascript and other web technologies. Thanks to my instructor, I was able to set-up everything on Github with ease and execute git commands that I had forgotten. All in all it was a good experience and was nice to get back into coding after a long break from it. Whiteboard Application The point of this application is to allow users to takes notes on a webpage. There are also features such as saving what you have written on the whiteboard or clearing the whiteboard all at once. The application was built using the following open source projects: ·          Filer ·          PaperCSS ·          Hotkeys FilerJS Browser Filersystem library allowed us to read and write
Post a Comment
Read more

Time to Leave Application

Wow! The third week of Hacktoberfest is coming to an end and it has been an experience for me so far. Before hacktoberfest, I never thought that I would be able to contribute to other people's projects and actually see my contribution be committed to a project. This week was a huge step for me. I had to opportunity to work on a project that I found very interesting and test my coding skills with the application. The best part of the experience was that it gave me the chance to collaborate on the issue with the main developer where we discussed how to come up with a solution. After the solution was provided, my code was merged into the main project which gave me a sense of accomplishment and satisfaction,. The Project After countless hours searching through GitHub for an open-source project to contribute to, I came across Time to Leave  developed by thamara. This application is like a reminder that allows users to log their work hours it the application and receive a notificat
Post a Comment
Read more