Contributing to Open Source: Part 3 - Adopting a New Project and Final Reflections

Hello!! 👋

If you are new here, be sure to check out the first and second blog of this series, where I discuss the planning stages and progress updates of my open source project contributions.

After facing several hurdles with my initial project, Clean and Green Philly, I’ve decided to pivot to another exciting open-source initiative: Le Git Graph. This change was inspired by my friend Peter Wan, and I’m thrilled to document my contributions to this new project.

Project Overview: Le Git Graph

Le Git Graph is a browser extension that adds a "Commits" tab to GitHub’s navigation bar, displaying a colorful commit history graph for any repository. As a developer and visual learner, this tool resonates with me—it provides an intuitive way to track a project’s progress and workflow.

What excites me most is that this is my first time working on a browser extension. It’s a great opportunity to expand my technical skill set and contribute to a tool that enhances the developer experience.

Issue 81: Disappearing Commit Button

Description:
The "Commits" button, added by the extension, disappears after navigating to certain subsections of GitHub (e.g., creating a new issue). To make it reappear, users must refresh the page, disrupting their workflow.

Investigation and Solution

Initial Findings:

The code in main.js, which adds the "Commits" button, executes only on the initial page load.
GitHub operates as a Single Page Application (SPA), so navigating within the site doesn’t trigger a full page reload. This causes the button to disappear as the URL changes.

Proposed Solution:
To ensure the button remains visible and functional, I implemented a solution to dynamically observe URL changes and re-add the button when necessary.

Observing URL Changes:
I used a MutationObserver to detect DOM changes and identify when the URL changes.
Reattaching Click Events:
- The button’s click event wasn’t working after navigation because new events were being added without removing the old ones, causing conflicts.
- I fixed this by removing any existing click events before reattaching them.
Fallback for Missing Elements:
- Certain GitHub tabs, like "Actions" and "Wiki," don’t contain the clearfix element used in the original code.
- I added a fallback using the PageLayout class, ensuring compatibility across all tabs.
Handling Browser Back Button:
- The back button posed a unique challenge. Although the button remained visible, its event listener wasn’t reattached.
- I resolved this by clearing the button’s attributes and events before reinitializing it.

Results and Reflections

Achieving My Goals

Although my original plans with Clean and Green Philly didn’t materialize due to delays and lack of updates, transitioning to Le Git Graph allowed me to stay productive and achieve meaningful contributions. This experience highlights the importance of having a backup project to pivot to when initial plans don’t go as expected. Flexibility and adaptability are critical in open-source work.

With Le Git Graph, I achieved my goal of addressing a significant usability issue and making the extension more robust. My contributions ensure that the "Commits" button behaves consistently across various GitHub tabs and scenarios, providing a smoother user experience.

How I Built the Solution

Technical Features:
- Utilized MutationObserver to monitor DOM changes dynamically.
- Implemented logic to clear existing event listeners and attributes to avoid conflicts when reattaching events.
- Added fallback mechanisms for missing elements to ensure cross-tab compatibility.
- Accounted for browser back button behavior to reinitialize the button seamlessly.
Methods:
- Incremental debugging and testing.
- Researching GitHub’s DOM structure and understanding SPA challenges.
- Iterative improvements to refine the solution.

Here's a demo of my solution:

Check out my pull request here.

Lessons Learned

Technical Growth:
- Working on a browser extension introduced me to tools and concepts I hadn’t used before, such as handling SPAs and dynamic DOM updates.
- Debugging in a live environment required a meticulous approach and patience.
Problem-Solving Approach:
- Breaking down issues into smaller tasks made them manageable and less overwhelming.
- Adapting to unforeseen challenges strengthened my problem-solving skills.
Importance of Backup Plans:
- Having a secondary project ensured I could continue contributing without losing momentum when obstacles arose with the first project.

Leveraging the Community

Engaging with the open-source community was invaluable. I:

Reviewed existing issues and discussions to gain context.
Shared my findings and sought feedback from maintainers and other contributors.
Learned from similar issues and solutions in other projects, broadening my knowledge base.