Hacktoberfest -Final

Hacktoberfest has finally ended today, the experience was great. Contributing to open source project was a challenging task, but it also provided a great opportunity to work with real world projects that people actually use. 

In the final week, I worked on two issues from the same project. This project is another web application, 
it utilizes a npm package called "youtube-audio-stream" to allow users to search for YouTube videos to add to their playing queue. The first issue I worked on was to change the queue Card(React-Bootstrap) layout, all I had to do was to change the react bootstrap attributes and make the Card objects in the queue larger and display more characters of the video title. After I was done with this issue, I felt like this was a good practice but it was not good enough for a 4th PR for the Hacktoberfest event, therefore, I decided to take on an extra issue, since the repository had a bit over 20 issues, I selected one that was about the right difficulty for me, that was to add functionality to clear the entire queue in the play list. To achieve this, I created a new functional React component for the delete button using "material-ui" which is a UI framework for react and wired it up with a on click function which will remove all videos in the queue after receiving confirmation from the user.

Throughout the entire Hacktoberfest event, I feel like I have spent more time looking for issues rather than actually working on the issues, mainly because most of the issues were either taken or seemed too difficult, if I were to participate in Hacktoberfest again, I would try to spend less time finding "good" issues and challenge myself to work with things that I don't have experience with. Solving the third and fifth issue made me proud of myself, since those two required researching and learning new frameworks, I have never worked with functional React component before those projects. The course lectures on how to unitize Git commands helped me a lot during the development, since Git and GitHub are extremely powerful tools and easy to work with to contribute to open source projects.

Links：



Comments

Post a Comment

Popular posts from this blog

Working on the Telescope Project

Image
Two weeks ago, I've had my first chance of working with the Telescope project and utilized it's back-end API to work with my DLCheck Project. In the past few days, I got more involved, played around and worked with Telescope's front-end portion. One of the issues that I found in the project repository got an idea from the Node.js webpage and requested for a React Component to display the contributors' information to thank them for their effort in developing/maintaining the Telescope project. In the beginning, I was a bit lost by reading the existing code, but luckily, the telescope project was developed using the React JS library and utilizes Material-UI framework, I have worked with a project which was also developed using the same tools during my Release 0.2 assignment, therefore, I was able to understand pieces of codes fairly quick. The new Card Component was overall not that hard to implement but it still took me a quite bit of time, I was given a custom React Hook...
Read more

Hacktoberfest -1

 This week the Hacktoberfest event has finally started and I had the chance to contribute to real open source projects. Finding an issue that I can fix took way longer than I thought it would, most of the issues were either taken or they were too complicated for a first time contributor. After a while of searching around GitHub repos with "good-first-issue" labels applied, I found a couple repositories that seemed interesting to me. One of the repositories requested for a new URL redirects in their projects, I thought this was an easy fix, but that it was more complicated than I thought it would be, the original repository had no instruction on how to run and test the application, therefore, I had to leave a comment in the issue asking for instructions. As it turns out a test must be written first before adding any code to the project, and when I ran the initial test before adding anything into the project, I was already getting testing errors, it seems like a challenging one...
Read more

Using Code Formatter and Linter

This week I was introduced to automated code formatting and linter to check for mistakes in code, I have heard of those tools before but never used them until this week. Those tools assisted me to maintain the code structure and readability, using those tools resulted in huge differences between the original project and "fixed project". To install Prettier, I followed their official installation instructions, which can be found here , and I did the same to install ESLint . There was a small problem that I ran into when I ran "eslint file.js" command, the system warmed that "eslint" is not a valid command, this was eventually solved by installing the eslint-cli, which was not mentioned in the official instructions. After I finished the set ups and configurated the tools, I ran the "script npx prettier --write ." to automate the formatting, this changed hundreds of lines in my .js files, I wasn't really surprised by this because I have always t...
Read more