Getting prepared for first real open source contribution
As usual, it's not easy to start something that I've never done. Either was my first open source contribution. I finished the week's all the work as well as some part of next week's school work. So that I could create enough room to focus on my first open source work. Then, I started searching through repos and issues. Maybe my search skill is not so great now. There aren't many hacktoberfest repos and issues. Some repos are more like knowledge collections like gathering data structure and algorithm. I looked through Java project first. Some projects are too big for me while some have not many contributions. Finding a right issue for me was not an easy process. Eventually I decided to work on Javascript project. I think most actively used language in open source is Javascript. I tried to cautiously choose an issue that I can actually do some meaningful work. So I picked a couple of frontend issues because I can estimate what to do and how much efforts are needed.
Finding an issue to work on is like job hunting
So my first open source task is to add input by typing to timepicker. I expressed my willingness to contribute, and waited for a response while continuously finding another issues in case that my proposal is declined or not responded for long time. Fortunately, there was a positive response and maintainer assigned me for the issue. I felt relieved because the issue is now seen as someone is working. Now all I had to do is to do my best to implement a feature.
Good understanding of code base and the issue is the key
I thought setting up a dev environment shouldn't be difficult. But I had to spend quite a lot of time before starting actual work. There is CONTRIBUTING.md, but it doesn't explain how to start. Probably it's obvious how to start to the experienced. Then, next step was to understand how the code works. As usual, I added console.log(...) in most of functions to watch when they are called and what they do. Once I picked up a basic understanding of the code, I began to think about how I should implement the feature. I was initially thinking to implement a dropdown since it would be aligned with graphical interface of timepicker. However, I realized it's not appropriate to display 60 rows of dropdown to input a minute and I didn't want to develop a whole new dropdown interface like iOS to hide a majority of rows. I went back to the issue ticket to refresh my mind. I felt I was dumb because the issue is clearly stating that it needs user input by typing needs to be implemented. I wasted my time but it's good that I have a better strategy.
My first contribution is out there
So the key point is to use input tag for user to type while not harming any part of existing styling. input tag is tricky because I had to forcibly override basic CSS attributes. I think Materialize CSS has a consistent and well-defined styling that I don't want to ruin any part of it. I added an event handler with my main function inputFromTextField(). Existing function gets hour and minute input from graphical interface. Now I had to do the reverse. Once user inputs a number, the clock gets drawn. I wasn't 100% satisfied, but I wanted to ensure that my strategy is ok for the maintainer. So, I organized my code so that it looks ok for PR review. I was very nervous to send my PR but this is my first open source contribution trial. It is still under review but I feel positive that my PR will be accepted once I thoroughly address the feedback.
Adding time input by typing to Materialize CSS timepicker
Conclusion
Without taking this OSD600 course in Seneca, I would probably not try any open source project. I've made my first step to real world open source project. It's difficult to find issues that I can work on. I feel nervous when I write a comment on issues or when I send a PR. The first step is always the hardest. But the next step will be much easier. Now I feel accomplished by contributing to real world project. And the open source atmosphere is very welcoming and friendly. So stay tuned for my next contribution!
Top comments (0)