My First Steps in Contributing to Open Source
“Ever tried. Ever failed. No matter. Try again. Fail again. Fail better.” — Samuel Beckett
“This week I happily stepped into the list of Open Source contributors” — I hope I would say! In reality, though, things went a little different. And here is what happened.
One of the challenges for this week for me was to file and fix my first bug on GitHub, as well as to introduce my first feature. To begin with, let’s discuss the the first issue. I checked out Brett Dennis’s note taking application and I absolutely enjoyed the simplicity and clarity of his design approach.
Nevertheless, I also noticed a little bug: the cursor would not be set to the text input area from the moment of the page load. I though it would be great to implement this in order to improve user experience. So, I forked the repo and started implementing the thing:
const elem = document.querySelector('#note');
if (err || !data) {
elem.innerHTML = "Welcome to my Notepad!"
}
else {
if (data) {
elem.innerHTML = data;
}
}
// Set focus to the editor
elem.focus();Soon enough the bug addressed was fixed and I created a pull request. However, I was struggling with the Visual Studio Code’s auto formatting feature, that would not allow me to stay consistent to the authors coding style. As a result, I had to fix a missing line at the end of the document, for which I was kindly asked in the discussion under my pull request.
After fixing it, I was able to push the update. In order to explain my intention and clarify the code changes, I wrote a number of sentences which described why having the cursor pre-set on the element is important, and how it would affect the app. After reviewing my update Brett finally merged it to his project.
Another contribution that I made was to add a feature to an existing project. Thus, Z-Note came to my attention. It had a well-implemented saving algorithm with some interesting visual representations. Ilya Zhuravlev, the creator of the project, also applied PaperCSS styling, which made the notes look like real paper ones.
Nevertheless, the background was just plain white, which seemed sort of boring to me. I thought, it would be great to add some colors and emotions to the app by addign a background picture and created an issue. It took me some time to find a proper image, and set it to the background properly. Here is a snippet of the CSS code I came up with:
body { background-image: url("background.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; height: 100vh; margin-left: 2rem;
}
After supporting my code with a brief description of the feature that is being suggested, a pull request was created. It is yet to be known if the creator accepts it or not, but I personally think it looks cool this way!
On the other hand, I have also received an issue report on My Note Keeper, my reincarnation of the popular simple web app.
Ilya suggested me to have a word-counter feature for my app, and I had no reason to refuse that offer. I have commented on the thread, and assigned him to the issue, labelling it later as an enhasement. I am looking forward to seeing his pull request soon! (to be continued…)
Through accomplishing the following activities I was able to
- learn the fundamentals of Open Source community life
- practise both contributing and accepting contributions myself
- managed workflow with git using branches to work on issues
- gained valuable experience in looking for bugs and finding ways to improve existing code
By sharing my experience with my fellow students I was able to help them in getting into the working process of an Open Source developer building his way into the community.
