My second issue
This blog post will be up quite a while after the completion of this PR, I have been putting off writing about it but here it is a few weeks later.
The second issue that I wanted to take on I wanted to upgrade from a markdown change like in my first PR. In this second PR I set out to find a small code change to make. After staring at the issue board for an hour or two I finally came across one that I was surprised was not taken. I found this open source Facebook messenger app called Caprine. This was and still is really cool to me, the opportunity to work on something that was so well put together and much larger than my previous project.
You got a problem?
The issue itself seemed simple. It was to change some elements in the dark mode messenger to better fit the dark mode theme. I did not really know the full extent of what would go into it but I thought I could certainly do it. I was right it wasn't as difficult as I thought, but that's not to say I did not learn anything from it.
By the end of the process I had made more than a few commits to the project that were unusable, I am glad that the maintainer of the code was active and kind in guiding me through the little mess I had made.
The change was evidently a small CSS one localized to the dark mode CSS file they had set up, the problem was getting used to the class names that Facebook uses for CSS elements which look something like this: "x1o1ewxj x3x9cwd x1e5q0jg x13rtm0m x1ey2m1c xds687c xg01cxk x47corl x10l6tqk x17qophe x13vifvy x1ebt8du x19991ni x1dhq9h x1wpzbip". Beautiful.
Once I had narrowed down the problem class it was no problem to change the color to something more in line with the dark mode theme but the color I used was a bit off and the maintainer preferred me to use predefined Facebook variables so I went back to the drawing board.
I noticed in the end that the element I was trying to match the color of did not use a variable for its color but was also hard coded, the reason it was so hard for me to find the color was because it was done kind of differently, the element that was being colored was being colored by "border-right-color", "border-left-color" to make it appear as though it had a solid color background. At the time it was a hardcoded color that I copied and applied to the element that I wanted to change and that worked out, I checked now and Facebook already has a variable they are using for it instead of the previous hard coded value. In any case, I changed the elements color and I changed another element to be transparent since it was a stark white, I also added some comments that the maintainer had asked for.
I didn't lint it.
The maintainer liked what I had done with the attachment element that I had initially set out to change but the recipient pill being transparent was strange so he recommended I change it to another background color and I did, there were also a lot of highlighted spaces and there was a no new line warning and I started scratching my head.
It was at this point that I remembered I should lint my code because I noticed that my commits were breaking their git actions.
This whole issue was a little embarrassing for me to tell you the truth because it was 2 lines of CSS and maybe 4 times as many commits. It was definitely however a learning experience and by the time I was done and my code was accepted I was kind of proud that I would have a small temporary part in this cool project.
My second issue: https://github.com/sindresorhus/caprine/issues/1932
My PR: https://github.com/sindresorhus/caprine/pull/1933
Top comments (0)