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

Steps Into Open Source

Visual Studio Code is the project I plan to use to help me get involved within the open source community. Developed by Microsoft, it has become one of the most popular source-code editor out there. An editor with beneficial features built in such as:
·Debugging·IntelliSense·Git source control·Integrated terminal·Extension marketplace
Plus there’s so much more that I haven’t mentioned. The application is written in Typescript and supports Windows, OS and Linux.

During my internship I came across the release notes of Visual Studio Code for the month of August. Out of curiosity I quickly scanned the notes and reached the bottom of the page. I was amazed at the number of contributors there were helping Visual Studio Code become a better application. I also realized that there are other developers that are part of a community I had never knew about. Taking the Open Source Development course offered at Seneca will pave the way for me into this community.
Repository




Post a Comment
Read more

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.


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# and Typescript, two languages that I have briefly touched before but I stil…
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 to files with a given file path. This was really helpful as…
Post a Comment
Read more