As I begin to finish my , 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
Browser extension to add git graph to GitHub website.
Le Git Graph - Commits Graph for GitHub
Installation
Install the extension from the link -
For Google Chrome, Opera, Vivaldi, Brave, and Microsoft Edge:
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.
- Go to
Le Git Graph's Commit View:
, and my pull request showing what has been updated can be found 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.
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.
for initial page loads
pjax:end for partial page updates
DOMContentLoaded for ensuring our code runs at the right timeDOM 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
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:
- ✅ Learn about Git and GitHub for the purpose of working in Open Source
- ✅ Pick a niche that I wanted to focus on for development (browser extension development).
- ✅ Find repositories that aligned with my goals and aspirations (
ImprovedTubeandLe Git Graph). Fixed the disappearing Commits button issue - ✅ 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.
Community-Analysen & Experten-Meinungen 0
Verwandte Story-Cluster & Quellen (Vektor-KI)
Ähnliche Beiträge
Auch interessante Nachrichten Coming Full Circle: It starts and ends with Git and GitHub
Thematisch verwandte Begriffe: Coming, Full, Circle, starts · 6 Treffer
GPT-6 Astra is generally available in GitHub Copilot
Catching Cross-Language Copy-Paste Debt with Static Analysis and AI Pair-Programmers
Tengu, a Mirai-style Linux and IoT botnet
Videos werden geladen ...
Beiträge werden geladen ...
Videos werden geladen ...
Beiträge werden geladen ...
Videos werden geladen ...
Beiträge werden geladen ...
Videos werden geladen ...
Beiträge werden geladen ...
Videos werden geladen ...
SOCIAL SHARE CARD GENERATOR