Continuing with my release 0.4, I started putting my plan for the two selected issues into action. After talking with the project maintainers and noting down almost everything I needed to know, I was confident that I could get both pull requests up for review within the week. Sadly, things did not go as planned.
At first, I intended to reuse the existing table layout and only made tiny modifications. However, I soon realized that this approach only made everything more difficult. By duplicating the code, not only did I make the already bulky HTML even harder to read, but it also made naming classes, IDs, and performing DOM manipulation to render the data more challenging. After several days of just writing and deleting the same code, I decided to go back to the drawing board.
- Initial design
To make the final product matches the provided example, I had to choose between flexbox and grids. Both of them will get the job done, but to my experience, I find that grid is much simpler to use. After hours of sketching out the design in my notebook, it was time to write the actual code. I started working my way slowly through each section of the layout, adding minor adjustments and constantly going back and forth between the Bootstrap documentation to ensure the result looked good on the web.
- My ugly sketch of the new layout
- Final result
Another roadblock I had while working on this issue was figuring out how to fetch the data and render them to the UI. I initially thought I had to make an API call and process the data, but one of the maintainers mentioned that doing so was unnecessary. Thus, I had to play around with the return values inside the function responsible for fetching the data. After hours of logging different variables, objects, messages, and a couple of calls with one of the maintainers, I managed to get everything worked and combine it with the design I made earlier.
Surprisingly, I hadn't had as much trouble working on this as the previous one. As a lot of the work was similar to one of my labs about continuous integration, I was able to use it as a reference and quickly get my pull request up for review.
It has been a rough week, but I managed to get both the issues up and ready for review. By the time this blog is up, #issue-107 has been merged successfully, while #issue-2416 was on its final stage of reviewing. I'll be waiting for feedback and making any modifications where necessary.