Blog

Release 0.3 — Part 2

This blog post is a bit different than the others, as well as this part of my third release.

Continue reading Release 0.3 — Part 2

Advertisements

Release 0.3 — Part 1

Type of Release

This release is regarding the bug fix. The issue page for the bug is here.

How it was Chosen

After working on URL bar icon bug, David Humphrey suggested me to continue working with something relative to that area. He sent me a link to this bug. I thought that it was a really great suggestion! Therefore, I start working on it. After spending quite a time without having any success, I decided to distract myself with another bug for some time and then come back to it. I start going through the issue’s page when I found this bug, which is about making validations to the credit card. Validations!

The reasons I am so excited about the validations is that I have a lot of experience with them. When I was working on the Ionic project, one of the things I was responsible for were validations. So I thought that it was an amazing distraction! After spending a whole day on them though, I realized that not all things that look simple are simple. I felt really overwhelmed. I found two great bugs, and I have no clue even where things went wrong, I am not even talking about finding the solution. I came to the point where I needed to find another distraction from both of the above bugs, and I actually did.

What is the Expected Result

Before:

After:

Process & Solution

I started by looking for a file, which was quite a simple task to do since I am more familiar with the project structure now. I had a feeling that it had something to do with less, therefore I went straight to the less directory where I found the needed file:

Then I needed to find where is the bug is located exactly. In order to do that:

  • Reproduce the bug
  • Find what’s is causing it and where. If you can, use Developer tools! ( for Brave it’s F12)

With a very few manipulations, I found out which class I needed to look at.

After looking at the code, I thought that the current behavior is actually expectable. I wasn’t sure though, so I decided to ask:

The way I saw how to fix it, was to make it static. After spending some time on it and trying a couple of different things eventually, I was able to fix it:

Result

You can check my Pull Request. Below you can see the actual result:

Release 0.2 — Part 3

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.

It all started with my pull request (you can read about it in my previous post).

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.

But because of those errors, another issue was open in order to fix them. And I was assigned to do a review for a pull request that fixes it.

More detailed about this in Process & Solution section.

Expected Result

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.

Errors

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.

Review

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.

Reviewer Guideline

Pull Request Approval Process

  • 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

npm start

Test

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.

Result

Pull Request

Issue

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.

Release 0.2 – Part 2

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.

Expected Result

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.

Then I found out that there is another issue that was referenced to initial one.

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.

Honestly, it took me a while. I was going through the functions. I tried a couple of different things, but none of them worked. Then, I tried to break the code in order to understand which part is responsible for what. The funny thing actually was, that for the first couple of hours that I was trying to break the code, I actually couldn’t. I was changing things. Replacing urlBarIcon with urkbarIconContainer, and it would still behave the same way. I was extremely surprised. I understand when it takes me a while to fix something, but it was my very first time when I actually had problems breaking the code. I have spent three days trying to fix it and I couldn’t. One of the struggles that I faced was lack of knowledge in JavaScript and React. Since the solution wasn’t coming easy on me, I started searching for similar issues.

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.

Result

Pull Request

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.