Posts

Release 0.4 Completed

Image
     This is the final blog post for this semester. I've finished and sent out a Pull Request for my Issue on Import Youtube Playlist Feature. There were some changes in terms of how the items are returned as items, and due to that, the number of items in a valid playlist will be reduced to 100 items.     In this project, I spent a lot of time going through routes and components, as well as how the frontend gets data from its server by using Axio HTTP requests. I got the UI part of the issue done relatively quick due to me getting quite used to making react components, but the majority of the time was spent on knowing how Youtube API will work as well as how I can set up an API endpoint in the server for the data that I will need to retrieve for my feature.     Basically, the user will enter the playlist's URL into the input box and that string of URL will be passed to a function on click and concatenated to the server's API path where an Axios request will be made to call

Release 0.4 - qasong Import Youtube Playlist

Image
       I have started working on the Issue  after the repository's owner Ian had assigned it to me. As of now, I could say that I am about 40 percent to finish adding this feature. So far I added a new component inside the Navbar's menu which when clicked will show a dialog box prompting for a Youtube playlist URL.     The input box's value will be passed to another function that accesses the server to generate an object containing the Youtube playlist's items in the same format as qasong's queue items. If the URL is blank or invalid, an error message will appear above the button to notify the user.     As for how to get the playlist's items, I learned that you could access data from Youtube links by utilizing Google API's Youtube API. One problem that came up is that it requires the use of an API key that is created from Google Developer Projects which might hit a limit for the number of requests allowed to be made. I then tried to use several npm packages

Release 0.4

     The final assignment is finally here, it is almost time to say goodbye to this semester. Throughout the semester, we've done many different things and was involved in several open-source projects where we learned and overcame problems. This is the best course to explore Github and get some hands-on experience with programming, the open-source community is vast and filled with professionals that you can work with as well as learn from.     For the final assessment, I'd like to work on a feature that I've never touched before to prove that I did indeed grow as a programmer from taking this course. I decided to work on a repository that had started contributing to since Release 0.2, qasong . I picked this because they are a project that is near launch and I grew to like their team's effort as well as what they do, I definitely learned a lot more about React by contributing.      I am currently contemplating on taking an old issue that was never taken since September,

Lab 9 Blog

    It is finally time for us to publish our Release 0.1 projects for public use! As we are getting close to the end of the semester it is about time for everyone in the class to publish their very first package so others can use it. I myself am excited to finally finish the first release of our project.     We are instructed to choose a package release method, and since I've uploaded it to Node Package Manager for my project's initial release, all I have to do is to use NPM and update the existing package . I had decided to google the methods for the project's initial release, the only things I really have to do in this lab is to update the release tag in my package.json as well as other documentation about the tool. To update an existing package, you simply had to use "npm publish" in the repository folder after logging in using "npm login".     After the documentation about the features, instructions, and versions are all up to date, I had a few frie

Lab 8 Blog

Image
       Lab 8 was about managing a project complexity through automated testing, this week we worked on our  Release 0.1  link checker by creating testers using Jest and other testing frameworks for the language we used in our project. Adding automated testing sequences for projects is important for consistency, usability, and security for any application. A good and solid testing program covers most of the code with different testing methods.     Different languages require a different testing framework to set up with, and since my project was written in Node.js, the best choices I had were either  Jest  (created by Facebook) or  Mocha . I went with Jest because I am familiar with React which was made by the same company so I could expect handling similar coding styles. Jest can be installed by using the Node Package Manager and then activate the command by declaring the test scripts in package.json.  To get started with testing, write your first test by creating a test.js file that im

Release 0.3 Internal PR

Image
     One of the Pull Request  for Release 0.3 was to work on an Issue for Telescope, knowing that I had already done an issue on Telescope during Release 0.2, I was happy to make another contribution to the project. This time, I decided to work on the notification favicon .     At first, I thought it was just a simple task of creating a version of the favicon with a red dot on the top right corner and then changing the favicon from a component, but it was a lot more than I bargained for. There are several things that need to be done in order to get this feature working, the state of the current window's visibility must be determined first in order to execute the hook that changes the favicon. Once that is done, you will have to obtain the id value of the previous app page's top post and compare it to the current state's top post's id. When all the conditions are met, the favicon of the website should switch to the badged version until the window is visible again.     Al

Release 0.3 External PR

Image
     In this month's Release 0.3 assignment, we were required to make a total of two Pull Requests. One of which is a pull request that is an external project, we will be making another contribution to other people's repository. I decided to revisit one of the repositories that I visited back in Release 0.2, the Artistify web app . I felt more comfortable to work on something that I already took the time to understand, the owner of the repository made a big change to the project compared to the last time I worked on it and I am excited to make more additions to their project.     This time I worked on two separate issues in one Pull Request due to the first issue being required to complete before working on the second issue . The issue asked for someone to add a spinner animation or placeholder while the Top 100 list on the Billboard page is loading. This sounded really similar to what I did for the third pull request in Release 0.2, which was adding a loading/error component