Coming Full Circle: It starts and ends with Git and GitHub

As I begin to finish my final assessment for the Topics In Open Source 2024 course, led by Professor David Humphrey, I find myself reflecting on how fitting this moment is. My journey in open source began with learning the fundamentals of Git and GitHub - understanding commits, branches, pull requests, and the intricate dance of version control. Now, here I am, contributing to a browser extension that helps others visualize and understand these same concepts better.

The Project

NirmalScaria / le-git-graph

Browser extension to add git graph to GitHub website.

Le Git Graph - Commits Graph for GitHub

A browser extension that displays the git graph for any GitHub repository.

Demo

Installation

Install the extension from the link -

For Google Chrome, Opera, Vivaldi, Brave, and Microsoft Edge:

https://chrome.google.com/webstore/detail/le-git-graph-commits-grap/joggkdfebigddmaagckekihhfncdobff

For Mozilla Firefox:

https://addons.mozilla.org/firefox/addon/le-git-graph-github-git-graph/

After installation, open any GitHub repository and a new 'Commits' tab will be visible.

Open the commits tab and follow the prompt to authenticate with your GitHub account.

Setup for Private Repos owned by an Organization

Access to private repositories owned by an organization is restricted by default. To access the commits graph for such repositories, you need to follow the following steps.

1. Go to https://github.com/settings/tokens
2. Create a Personal Access Token (PAT) with the following scopes -
   • repo | Full control of private repositories

For a more secure option, use a Fine-Grained token (beta) with the following scopes -

• repo | Read access to code, commit statuses…

View on GitHub

Le Git Graph is a browser extension that enhances GitHub's interface by adding a visual commit graph (note - if you have the repository installed locally, it'd be equivalent to running git log --all --graph).

While GitHub does have the ability to show you the list of commits on a repository, this extension provides the ability to view these commits in a graph form, which in my opinion, is really helpful.

GitHub's normal feature of showing commit history:

Le Git Graph's Commit View:

The ability to see the commit history and get a visual idea of when branches were made and merged serve to enhance one's understanding of a repository's development progress. I think those looking to contribute in open source development would find this extension to be highly valuable.

The Challenge

My contribution to this project involved fixing some of the broken behaviors when clicking the Commits button that is injected by Le Git Graph. The original issue can be found here, and my pull request showing what has been updated can be found here.

To sum up the issue - the Commits button would disappear sometimes when navigating across different GitHub links (e.g., simply clicking the name of the repository would cause the Commits button to disappear!).

The solution involved implementing robust event listeners for GitHub's various navigation events and improving how the extension detects and maintains UI elements across different page contexts. This fix ensures the Commits button stays visible and functional regardless of how users navigate through GitHub's interface, whether clicking repository links or switching between tabs.

The Learning Journey

Looking back, it's almost poetic how this project encapsulates my identity and growth in open source development:

1. Understanding Git: When I first started, visualizing Git's branching and merging concepts was one of the biggest challenges for me. However, once I understood those concepts, I started using git log --all --graph daily as if it was a matter of fact thing to do. Jump forward to the present, I'm trying to improve the functionality of Le Git Graph, which offers this visualization to others.

2. Browser Extensions: As mentioned in my previous blogs when I worked on the ImprovedTube extension - I have recently been invested in learning more about browser extensions. The work I did for Le Git Graph, has taught me about the complexities of integrating with existing web applications (you have to know a lot about GitHub's interface in order to manipulate it!). Working on this extension made realize GitHub's dynamic nature requires me to carefully handle different page states and navigation patterns - and even then, there might be things that change and I'll have to update the code accordingly.

3. Open Source Collaboration: Contributing to an existing project means understanding someone else's code, following their conventions, and thinking about backward compatibility - skills that weren't even on my radar when I first learned Git. Wrapping my head around someone else's codebase has always been quite difficult for me - even with Le Git Graph, I had to move cautiously since I'm familiar with let and const variable declarations which have block level scope, vs. var which has function level scope - believe me, these little things add up. Nevertheless, I couldn't let little things like that completely overwhelm me, instead I tried to understand the purpose of Le Git Graph by staring at its manifest.json found in the root of the project. By looking at the filenames listed under content_scripts, my top-level understanding of the extension improved.

In the picture above, you can see files that are dedicated to drawing the git graph (i.e., drawGraph.js). By taking a moment to digest these different filenames, I was able to better understand how this repository worked.

Technical Deep Dive

The technical challenges I faced were particularly interesting because they touched on multiple aspects of modern web development:

1. Navigation Handling: GitHub uses Turbo (formerly Turbolinks) for navigation, which required careful handling of different events:

   • turbo:load for initial page loads
   • pjax:end for partial page updates
   • DOMContentLoaded for ensuring our code runs at the right time

2. DOM Management: The solution required careful management of the DOM:

   • Detecting and handling different UI containers based on context
   • Preventing duplicate buttons during reinitialization
   • Maintaining state across navigation events

3. Error Handling: Robust error handling was crucial:

   • Graceful fallbacks when expected elements aren't found
   • Cleanup of stale elements and event listeners
   • Proper logging for debugging purposes

Results and Achievements

Looking at my initial goals from the beginning of the course to right before this final blog post, I would say I was able to:

1. ✅ Learn about Git and GitHub for the purpose of working in Open Source
2. ✅ Pick a niche that I wanted to focus on for development (browser extension development).
3. ✅ Find repositories that aligned with my goals and aspirations (ImprovedTube and Le Git Graph). Fixed the disappearing Commits button issue
4. ✅ Work on using my pre-existing web-development skills to contribute meaningful code to an open source project

These 4 results and achievements make me realize how far I've come since the start of my open source journey and makes me excited to venture further down this path.

Conclusion of my experience of the Topics in Open Source 2024 course

As I wrap up my journey in the Topics in Open Source 2024 course, I've seen my skills progress from learning basic Git commands to contributing to a tool that helps others visualize those very concepts. Through my work on Le Git Graph and ImprovedTube, I've grown from someone who knew nothing about browser extensions to a developer who can navigate a browser extension's codebase and potentially enhance it. This course has taught me that open source development is more than just writing code; it's about understanding existing systems, collaborating effectively, and contributing to tools that make development more accessible for others. As I move forward, I'm excited to continue growing in the open source community, armed with the knowledge, skills, and confidence I've gained from this course. Thank you Professor Humphrey, for providing great guidance during this journey and helping me discover my place in the open source world.