This is my 3rd and final series of the release 0.4 blog post. If you have not read previous ones or want to refresh your memory, here is the plan and the progress I made so far regarding this issue

In my last blog, I talked about my research and now we are going to put those research into code. The guideline I used to make the structure is how the queue look like when it has song in it:

Image for post
Image for post

Creating Placeholder object for first row

The first row has 5 components in it:

In the placeholder objects, we have to put these components but without any action available in it. The whole purpose is to give viewer an idea of the appearance. To do so, first I import those components and skeleton inside QueueSection.js file and dealt with each one by one. …

Last week, I shared my plan for release 0.4. Now, let’s take you guys on a ride of my progress so far.

The issue I chose was I asked the main contributor to assign the issue to me and got a quick reply of an encouraging YES.

Image for post
Image for post

In this issue, my main task was improving the “queue” page when there is no queue.

Setting up the project

To set up, I followed their It was straight forward. I cloned the project, did npm install for backend and frontend, ran their backend and frontend at the same time with npm run dev . Everything went smoothly. …

Finally, it came to the end of the term and end of my lab sessions working with link checker tool. This was a crazy wonderful journey! ( note: not a goodbye post…we still have a long way to go! )

For this last lab, I got the chance to work with publishing my link checker tool so that it can easily be installed and run without going through the hassle of cloning the repo and following lists of instructions. The process of accomplishing it is easier than it sounds.

As I used node.js to build my tool, the approach I chose for the release is using npm.

After successfully finishing on release 0.3, it is time to move on to the next release. For my previous releases, I had been working with Grommet, Telescope, and many more. For this release, I wanted to try something new and exciting!

I started my hunt on GitHub. I always have hard time finding issue that I would enjoy. Either the issues are too easy or too difficult! After some unsuccessful attempts, a thought came to mind, “Why not look at other’s contribution on release 0.3?” And, this is how I found out about this repo, Qasong. …

This week had been another new learning experience. I learned about automated testing, different testing framework, various test cases, code coverage analysis and continuous integration. To apply my very amateur knowledge about writing test, I started coding in my CL tool, find-broken-link(fbl).

Testing framework/tools

The testing framework I chose is Jest. It is a popular Javascript testing framework and as my project is in node.js, I felt this framework is perfect for me. Another reason I chose this framework is because of abundance of example available online.

Set Up The Framework

To set up Jest in my project , I took following steps:

For my external project PR, I continued working with Grommet Community which I contributed on my release 0.2. After my first contribution on release 0.2, I decided dive more into the similar issue. It was organizing the stories based on its component types.

As I worked before with this community, the set up had already been done. The first PR I made was organizing Header/stories by type of its component which is Layout. The task was similar like I did for release 0.2: export the components, access them form separate file and define a layout.

Image for post
Image for post

As a result, I thought about organizing another story and sending another PR. I chose Layer/stories for my second PR. After a while working on it, I realized how different it was comparing to others. So far all I had to do was exporting the component and put them inside specific layout. But for this one, I dealt with these new issues and learned how to do…

For my first ever Telescope contribution, I chose one of the issues regarding validation schema with express-validator instead of Ajv .

Image for post
Image for post

I have never worked with express-validator , so it was a great chance to learn about it. As a result, my first step was familiarizing myself with how express-validator works. I found there was not many great examples available in internet. Only option is availabale is their official documentation. Though the documentation is well made, it lacks more advanced examples.

Anyway, after installing express-validator , I had to search what options were available in express-validatorwhich can be replaced with the existing rules used by Ajv . My task was validating feed schema by POST/feeds. …

We all want our code to look beautiful, consistent, bug free and elegant, but nobody wants to do those tasks manually because it takes a huge amount of time. We already pressed for time to fix “real bug” and making our code runnable. We wish what if there was automatic tool who can check for our “silly” bugs, fix them, organize our code in a prettier way. Well, the wish is now REALITY! Someone also had the same regret and they made the tools for us which are called Static Analysis Tooling.

This week I had the chance to work with two of the awesome tools, Prettier and Eslint for my link checker tool. Prettier format codes (removing/adding extra lines, extra padding and so on). Eslint is for reporting simple mistakes we all do but easy to not notice it . It also can fix bugs which are fixable. …

This week was getting to know Telescope week.

Setting up Telescope

I used mac to set up Telescope because I was aware that how painful it is to setup Telescope in Windows. Hence, I avoid it and I am glad that I did that. Because of that, it went smoothly. I installed docker which makes easier to run Telescope. So far, I did not encounter any major issues 🤞

Lab 6

The task of this lab was working with Telescope REST API. We have to grab the last 10 blog posts and check all the link inside each blogs. I could have just done it simpler way and be done with it, but I wanted to try something different and MULTIPLE ways. …

Just a few hours left until the thrilling Hactoberfest to end!! So far I have worked on adding documentation, fixing bug and removing unused code for my other 3 PRs. For my last PR, my goal was to code and make noticeable changes. I found the perfect issue on this repo named Grommet.

Image for post
Image for post

My last contribution for Hactoberfest

This is my first time working with storybook but their documentation has enough details to guide me. The issue was working with front-end and format different components based on their type. They have different components such as box, card, header, footer and so on. All of them were stored in one section. The task was to organize them by their type. For example, Card is a type of Layout component. …


Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store