Posts

Release 0.4 Complete

     In my previous blogs, I have planned out my release 0.4 contributions, I have been reading documents and watching tutorials, communicating with the developers of the project ever since. Today, I have finished my two contributions on the qasong repository. In the previous blog, I have talked about how I fixed one of the issues, in this one, I will talk about the other.     The second issue, which I considered to be the more challenging one, is an issue I opened in the repository myself, this is an issue I created from one of my release 0.2 contributions. The confirmation button on the clear queue section, produces a browser default confirmation window, I really should have worked with Material-UI based component to make a dialog component myself since this is the framework that the project relies on. The browser confirmation window looks ugly, but it got the job done, since I didn't know how to work with most Material-UI components back when I was worki...

Update on Release 0.4

Image
     In this blog, I will provide updates on my previous post , in the previous blog, I have set my plans and goals for 2 of my release 0.4 open source project contributions. Since then I have been working on those issues and have done a good amount of work.     I started with the issue which I thought would be easier to solve, that is to add a Material-UI based component to alert the user that the song queue has been saved once they click the save queue button. This issue itself didn't seem too challenging in the beginning, but in the middle of implementing this, I was able to find many parts of the code that is some-what related to this feature that needs improvements or some debugging, therefore, aside from implementing the save alert, I also fixed those issues. The list of issues that I fixed could be found in my PR .     After I requested for the issue mentioned above, one of the the qasong team member sent me a document on Material-UI Alert comp...

Contribution Plan

Working with open source projects could be difficult, sometimes planning ahead of time could be helpful. During the past few days, I have been trying to find issues to work on, something that is challenging but could also be implemented within a couple of days, after a while of deciding what project and issues to work on, it occurred to me that there is something that I can do. While working on release 0.2 project few weeks ago, I ran into an issue in a music queuing web application GitHub repository named qasong , that is to add a clear queue button and prompts the user for confirmation. Therefore, I went ahead and added that new feature to the project. The new functionality behaves normally and works, the PR for this issue was eventually reviewed and merged, but I was not satisfied with it. While working on this issue, I was stuck on the "confirmation" part, the application was built with Material-UI components, but since I didn't have much experience with Material-UI,...

Updating DLCheck Release

Back then when DLCheck had very limited functionalities and features, I decided to release the project and hosted it on npm, that was probably not a good idea because the project was incomplete and needed more features and test. Today, I have pushed 4 versions in total and I am happy with how much I have added to the tool. Steps I took to push to release to NPM:     - Go to package.json.     - Give project a name, a main entry point and bin (mine is index.js).     - Give project a version number, this will be the version number showing on npm after you push it.     - Register an account on npmjs.com .     - In the command line, run "npm publish" command, it will ask you to log in using the account you just         registered. I asked a friend of mine who is also a programming student to follow my README in order to install the DLCheck npm package on his end and test the tool, the process was smooth since he has e...

Code Testing

Image
In order to enhance the DLCheck tool, code testing is mandatory, it ensures the codes' behavior to a certain extent and allows the contributors to discover bugs as they try to update the tool. The tools I chose to perform testing with my code is Jest , combined with the nock  npm module.  I chose to use Jest because it is one of the most popular testing frameworks for JS code and it is simple to set up and use, the nock module was extremely powerful as it allows me to manipulate requests to servers and customize the response in order to keep the test results consistent. If I have used a real url to perform the testing, for example, google.ca, Google's server may go down and be temporarily unavailable, which will fail the tests, however, with the nock module, I will always have the customized response that I want for each test.Setting up the tools mentioned above is easy, simply follow the instructions here  to set up Jest, and run " npm install --save-dev n...

Revisiting the Artistify Project

Image
During the Weeks of Release 0.2, I have worked on a project called Artistify, which is a Music application which utilizes a npm package to work with the YouTube API and allow users to produce a music queue. This week, I revisited the project repository. And found out that there were huge differences than it was few weeks ago, the project that I forked was already behind by around 100 commits, the Project name has been changed, the application front-end has gone through a lot of updates as well. I found this project very interesting ever since I started on working on it, since I usually like to listen to music when doing work, studying or playing games, I have actually used the application a couple times. The user experience was decent except for a few minor issues, but there was this one bug that I found very annoying which is when clicking the "remove song from queue" button that is included in the row that displays the song, the song is removed, but it also triggers the pla...

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...