Hello!! đź‘‹
Check out the first blog of this series here.
In the second part of my open source journey, I’ll provide an update on my contributions to Clean and Green Philly. This post covers my progress, challenges, and lessons learned so far.
Issue 1024: Filter Scrolling Bug
Description: When applying a filter, the interface scrolls to the top of the filter list, breaking user concentration. Users should remain in their previous scroll position for a smoother experience.
Investigation and Solution:
- After investigating, I found that React’s re-rendering behavior (triggered by state updates) causes the scroll position to reset.
- My approach was to save the previous scroll position (
scrollTop) when a filter is applied and restore it after the component re-renders.
This solution works but has a minor drawback: the UI briefly scrolls to the top before returning to the saved position, creating a flashy effect. To address this, I’m considering implementing a smoother animation using Framer Motion, as it’s already part of the project’s toolset.
Here's a demo of what my solution looks like:
Current Challenge:
While attempting to commit and push my changes, I encountered a separate issue (Issue 1038) that has blocked my progress.
Issue 1038: Dependency Vulnerability
Description: A cross-spawn vulnerability in the dependency tree prevents code commits. Specifically, the project uses @semantic-release/npm, which has a dependency on an outdated version of npm that includes cross-spawn@7.0.3, a vulnerable package.
Investigation and Solution:
- The root cause lies in the
package-lock.jsonfile, which locks the vulnerable version ofcross-spawn. - My proposed solution is to update all dependencies and regenerate the lockfile. Since manually editing the lockfile is not recommended, I attempted it cautiously, confirming that
npmis the only dependency of@semantic-release/npm. This workaround allowed me to resolve the issue locally.
Current Challenge:
I’ve shared my findings and proposed solution with the maintainers, but I’m awaiting feedback to confirm the best course of action before proceeding.
Issue 927: Creating a Stakeholder Outreach Page
Description: External stakeholders need an efficient way to reach out to the team. The proposed solution is a contact page that collects data via a Google Form linked to a Google Sheet. This eliminates the need for a backend.
Progress:
- The UX/UI team is working on mockups for the page.
- Despite my follow-ups over the past three weeks, I’ve not yet received the final mockups. The most recent update from the team was last weekend (Dec 7-8), but no tangible progress has been shared so far.
Reflections and Lessons Learned
- Technical Challenges: Investigating bugs and dependency issues has deepened my understanding of React’s rendering behavior and dependency management.
- Collaboration: The delay in receiving mockups underscores the importance of clear communication and realistic timelines when collaborating with cross-functional teams.
- Community Interaction: While awaiting responses from maintainers, I’ve realized the value of patience and persistence in open-source contributions.
Despite the hurdles, I’m determined to meet my goals. In the next post, I’ll share how I adapt my approach to overcome these challenges and reflect on the overall experience of contributing to Clean and Green Philly. Stay tuned for Part 3!
Top comments (0)