This blog post is a bit different than the others, as well as this part of my third release.
Type of the Release
For my second release, besides working with translations and fixing a bug I had a chance to make my first review ever! Never thought that I would actually do a review myself anytime soon, but thank’s to Brave Developers who provided me with such a great opportunity and experience!
How it was Chosen
This is a pretty long story, but I will try to make it as short as possible.
First, it got merged. I honestly never had my pull request being accepted so fast. It was accepted the same day, and I was extremely excited about it. Another thing is the response that I received, which was literally the best reaction toward my pull request I ever had:
I really enjoy contributing to Brave. The community is extremely helpful, supportive and welcoming. I am pretty sensitive person and I always try to do the best I can. With that said, I do a lot of mistakes and I fail. A lot. The combination of those makes me feel very anxious and scared about everything I do, cause I don’t want to fail and I don’t want to look stupid. Even the idea of doing something stupid drives me crazy. But then how can I progress without making mistakes and overcoming my failures? Brian Clifton, Sriram, and other Brave Developers helped me in all different ways to learn from my own mistakes and fix them. They supported me, and no matter what they didn’t judge me. And I can probably write a whole separate blog about how crazy I am about contributing to Brave, so I should move on, for now, cause once I start, I won’t be able to stop anytime soon.
Second, I have received an invitation to become a contributor!
Third, I’ve done a lot of errors and mistakes in my pull request. The beauty of it? I learned so much from those mistakes. I learned my lesson, I am gonna do my best to avoid them in future.
More detailed about this in Process & Solution section.
So this is the expected result that I was supposed to have after my fix:
Process & Solution
As I already mentioned, I had some errors in my pull request. Due to those errors, a couple of things happened:
- The new issue was opened
- My pull request was reverted
- Pull request was made by another developer to fix my errors
- I was assigned to that pull request as a reviewer
- During the review, I found one more error made by me and requested to change it myself
All the above was a short overview of what happened. Now let’s dive deeper.
I had two lint errors:
I haven’t covered edge cases:
What have I learned?
- Always double check lint errors!
- Always double check (or triple check if needed) my own code! Even if you don’t see any errors, close laptop and check again in a couple of hours.
- Don’t touch things that you weren’t asked to do. It was totally my idea to change the color of the icon, cause for me it seemed to look nicer when I changed it. However, I haven’t thought it through when I did it. I caused more problems than bringing the solution. I learned my lesson, don’t fix things that no one asks for. This can lead to more problems especially if you are new to the project.
- Do your research on the edge cases! Make sure to cover them!!!
- If you want to change something that no one asked you to change, consider opening a new issue regarding that change.
Once I have been assigned to do a review, I freaked out. But not for long. I followed my own blog posts and did something similar to what I usually do. Such as:
- Look at the Documentation
I will never stop mention that Brave did an amazing job on their documentation, no matter what I need to do the first thing I do is check that.
- Reach Out
Since I have never been involved in the reviewing process, I reached out for help. Huge Thanks to David Humphrey who showed and explained how a review should be done.
So how I did the review?
Added the person’s repository as a remote on a local machine:
git remote add srirambv https://github.com/srirambv/browser-laptop
Check if a remote was added:
git remote -v
Download objects and ref from another repository:
git fetch srirambv
Checkout to the branch which has the fix ( in my case connection):
git checkout connection
Build & Run
In separate windows run:
npm run watch
I didn’t have to write my own Test Plan, I was already kindly provided with one:
Changes work perfectly!
Next step is reviewing the code:
I reviewed the code, and I found one more issue regarding my previous fix. The padding should be changed a little. Since the code is mine I left a comment and requested to make the fix myself.
So the next step was fixing the extra spaces near the icon:
After making the fix and testing it I tried to push the changes, but I couldn’t.
I reached out for help. I reached out to Brave developers and my professor & classmates. I thought that the problem was regarding the ssh keys or I made an error during the setup. As it turns out, when someone gives you the access to their repository, you receive an invitation that you have to accept. Okay, that was very embarrassing. I haven’t seen an invitation, therefore I assumed that the problem is in totally different place. On another side, if I would not reach out, I wouldn’t find out what was the problem and I would not be able to push the changes.
The amount of new experience & knowledge I gain while working on the second release is just insane. I am really grateful to David Humphrey and Brave Developers for all provided help & support.
Type of the Release
This release is regarding the good-first-bug. The issue page for the bug is here.
How it was Chosen
There is not much story into how I found it. I was browsing though good-first-bugs and saw this issue. It seemed like a manageable and interesting bug to fix.
Process & Solution
So when I just had a quick look at this issue, I thought that it is going to be a very easy and straightforward bug to fix. I thought that it is just a small CSS fix. I have to admit, I was wrong. However, after all, I also have to admit that I am extremely happy that I was wrong. I learned so much fixing this bug.
I started by reading the issue page.
Basically, part of the URL has an icon which is clickable. When you click on it, it will show you connection information. However, the area around the icon should be clickable too.
So now, instead of just changing the area around the icon, I’ve set a bar a bit higher. I wanted to make the whole area clickable.
I started by opening VScode and looking for the keywords, which in my case I considered to be urlbarIcon and urlbarIconContainer.
I have found a couple of files. I looked through them, trying to understand the code. I was trying to understand what is wrong, where and how to fix this.
Note to self:
Always! Always look for the related issues!
There was a related issue mentioned, which is about making the bookmarkButtonContainer clickable. What’s meaningful about this is the fact that this issue was already fixed. Cool, let’s look at the issue and the fix for it:
The next step was to find bookmarkButtonContainer in VScode and see how it was done:
Since on the merged pull request, the fix was about adding the following two lines:
I assumed that most probably the fix has something to do with them. It didn’t. I spend hours playing around with width and height. It wasn’t working.
I have spent whole three days, and I barely made any progress. I felt confused, overwhelmed and I seriously thought that I would never be able to fix it.
So I took a step back. If I can’t make the whole area clickable, let’s try to make the area around the icon clickable. After playing around with CSS for a couple of hours, I actually successfully accomplished that goal.
All I had to do was to change margins a little and add a padding for the urlbarIcon. That made that area around the icon clickable.
Okay, great. This is at least some progress, but that is not enough. I also need to make the whole extended validation certificate information be clickable. The problem is, I don’t know how. I have tried. I failed. I tried again and again. Failed a lot. Failed miserably. Next step? I reached out for help.
Which was extremely helpful! No, I haven’t fixed the issue right away. But since I have spent a couple of days working on the code, I already familiarized myself with functions, it finally made sense what I was supposed to do. It took me a couple of days more until it worked.
Note: There were a couple of things that I haven’t discussed here, but it will be addressed and discussed in Release 0.2 — Part 3
What have I learned?
- Never give up. Even when it seems that you are not capable of doing something.
- Use all available resources. Check all regarding issues. Google.
- Failed? Try again. Failed? Focus on something else. Try again.
At the begging of the semester, one of the goals that I set for myself was to contribute to an open source project in as many different ways as possible.
So you decided to contribute to an open source project!
My first contribution to Brave!
This term I will submit release at least once every two weeks.
Let’s setup Brave!
Why would you contribute to Brave?