First Trial of Real Open Source Contribution.
Tags: opensource, materializecss, javascript, hacktoberfest
Published: 2022-10-12 05:20:11

### 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](https://github.com/materializecss/materialize/issues/118). 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](https://materializecss.github.io/materialize/) 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](
https://github.com/materializecss/materialize/pull/290). It is still under review but I feel positive that my PR will be accepted once I thoroughly address the feedback. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5oz7ycsoyp8pggg9n6e.png)*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!