Release 0.2: Pull Request #3
This time I wanted todo more with this pull request. Before I added a documentation file and the other was renaming a function throughout a program. For PR #3 I worked on a project called UMusic which is a webpage that allows users to search for music from SoundCloud and make/play playlists straight from page.
My job was to make the website mobile responsive. This was actually quite time consuming as a lot of the previous code was not designed with mobile devices in mind.
To start I looked over the code in each of the files to see how the maintainer setup the base of the code before. Most of the work I did was in a CSS file, but I had also implemented two function in a JS file and a single div and button in the html file.
I never really made a site mobile friendly before so this took a little bit of research to know how to get the job done. To not tamper with the original CSS styling I did most of the new CSS work in a block of code that is only used once the screens width lowers enough.
A lot of the CSS work was trial and error to get it just right to match the style setup before, but I had reached an issue when it comes to the amount of content displayed for smaller screens. The code was originally designed to have to Divs with all the content, one floating to the left, and the other to the right, issue is there is just way to much content to display. To solve this I added a button that only appears when in mobile mode. This button switches between the playlist and searching content sections so it is more readable for the user. This was possible by creating a function to linked to the button that sets the display to "none" for certain Divs and then the CSS would make the new pages look better.
Here is the content split between two pages:
After the first PR
After my first PR was accepted the maintainer asked me to fix a bug that happen during mobile view. The bug was a div stretching down to far which was fixed with a little CSS work. I was also asked to implement a new feature to redirect to the playlist tab when selecting a song.
Once that was done I made another PR for the maintainer to review. The maintainer came back to me to report a bug that happens while viewing on a mobile device. The bug hide some of the page content when you would select the search bar. Here's a photo:
This problem was caused by my event listener for checking when the user goes from mobile to desktop wrongly hide some content. To fix this I reworked my checks on the screen width.
The reason I didn't notice this was because this bug could not be replicated through chromes debugger on my desktop via changing views. I had to actually use
surge.sh to make a temporary page I could go to on my phone to see the bug. Once I finished fixing the new bug I pushed my changes up which GitHub automatically tied to to my current PR which was great. The maintainer accepted my PR after this point.
What did I learn?
From this weeks PR I learned how to update a desktop viewable only webpage so it could work on mobile devices. I don't typically work with CSS that often so it was nice to refresh my skills with it and learn how to detect screen width changes on the go. I tried to commit every major change I did during this PR and I used rebase from lab 5 again to organize my commit history.
I also learned how to use Surge to test my frontend work. I actually really liked how simple it was to setup and use so I plan to use this more in the future.
Comments
Post a Comment