The fourth issue I worked on is for a web and mobile application developed using React to facilitate thinking processes and documenting ideas. The app website link is here:
em - The thinking app
em is a revolutionary, new thinking app designed to work seamlessly with your natural thought process.
The issue was related to the misplacement of user status for mobile app display. The issue link is as below:
Mobile: Fix status message placement · Issue #102 · cybersemics/em-proto
The status message (Connecting, Offline, etc) should be position: fixed in the upper right hand corner regardless of…
For the web version, the status message is correctly displayed at the upper right corner of the page. However, the mobile version displays the message at the upper right of the footer, which looks very strange. The maintainer mentioned that the status should always be shown like the web version.
After examined the code, I found that the status component is included in the Navbar component. There is a flag to check if it is Mobile version to be displayed. However, it only renders the status at top if it is not Mobile version. For the Mobile version, the Navbar component was added at the bottom footer area. Therefore, the solution to this issue is to remove the condition check and always render the Navbar including the status at top and remove the rendering for Mobile version at the footer. The pull request link is as below:
Fix#102 status message placement for mobile by haichuan0424 · Pull Request #126 ·…
Hi, I have changed the position of the status message to be always displayed on upper right corner no matter for web or…
Hacktoberfest Overall Experience
After submitting this pull request, I have completed all 4 pull requests for Hacktoberfest. Reflecting on the whole month experience, there are a number of things I found interesting or learned. First, I was amazed by the number of people working for open source projects and the number of projects. Some of them are from work famous organizations. I felt exciting that we can get access to some well used products such as vscode, node.js, React, etc. and learn how professional programmers develop the projects. Second, for solving issues, most of time I spent was on set up and understanding the logic of the codes. All 4 pull requests only require to change a few lines of code, however some of them cost me a few hours to discover the logic. I wish I could spend more time to work on even more complicated projects. Third, it is great experience to learn git and get familiar with the interaction in the open source community. I was surprised by how quick people respond to my comments or pull requests.