First bug in open source!

My colleague Sean discovered this issue while browsing Angular’s web documentation.

At first glance, it seems like the h3 tag is overflowing onto its outer div. Should be an easy fix. But, before I even begin, I had to sign Google’s CLA. This is Google’s way of protecting themselves from future lawsuits.

Getting Angularjs locally

To get Angular on my local machine, I forked the repo, then cloned to my local machine. Before I build Angular, I went to the actual documentation to see if I can manipulate CSS for a quick fix. I went with the initial recommendation from the issue publisher:

And it does fix the current issue as you can see below:

For Angular to accept my pull request, it must pass all tests, comply with their coding rules and commit message guidelines. Since all I did was alter the value of a single property, getting past the test was a breeze. When it came to the commit messages, more effort was needed. Here is their guideline:

See in detail what goes into each line here.

This is what my commit message looks like:

Spot on!

Here is my pull request if you wish to see other info such as the formatting of my pull request message.

This is a rather quick fix, but what if this same h3 is overflowing in other areas of the documentation? Came across another similar error:

One of the Angular core members also pointed out to where I should be looking:

Thanks Pete!

Now, to cut off the head of the snake.

I didn’t come to the specif pixels easily. I’ve shown my solution to my colleague Sean, and boy does he has a pair of sharp eyes that I’m envious of. I didn’t believe it when he said the fix for the header was a few pixels off… so I took out my ruler to prove myself wrong. Haha…

3 pixels too far left!

Now that my fix is ready, I’m ready to update my existing pull request. This can be done via git amend:

Git commit --amend

This command will open up a text editor in the terminal and allow me to amend the previous commit message.

First merge in open source! Woot~

So there you have it, my experience of my first fix in open source. Along the way, I’ve also learned the following:

1. Technique for searching for a specific file in a large code base: find something unique on the page! For my bug, I plopped “Interface interfaces are valid tokens” into the VSCode’s file search to get the exact file I want.
2. Using Git Amend: Why is this better than just submitting another commit? Less pollution in the commit history!
3. Always think about the bigger picture. Think about whether I can hit two birds with one stone, so that I can improve other areas of the software.
4. Contributing to an open source project is exciting!

Look out for my next blog on my second fix in Mozilla Devtool’s Debugger.html!