Alright well, now comes the not-so-fun part.

Sooo... it's been a while I hope your October has been going well, mine's been nice, decent weather, especially for someone who loves the cold. Anyways, yes, it has been quite some time since my last blog and my hacktoberfest has come to a close with my final PR which I will be talking about 2 blog posts from now! I may have not been keeping up with blogging but luckily, the thoughts and hardships of each PR are still fresh in my mind.

The 2nd issue I worked on was for a fun little chat application called Whassupbro which is a funny play on words for WhatsApp - but for bros! In the specific issue, it was asking to add an emoji keyboard to the app. I figured this would be a little spicier than what I had done before, so I happily asked to tackle the issue.

Change is good

So when first starting out I had a rough idea as to what I needed to do. Firstly, I knew that this was a solved case, so I looked around for an emoji keyboard library to utilize as opposed to having to create one from blood, sweat, and JSON files. The one I ended up using was emoji-mart and it was quite easy and efficient to implement the changes. The issue with this PR was that I had to really boil down all the CSS used and figure out a good way to implement what needed to be done. I knew the app was using TailwindCSS which made it hassle-free to implement any styling to the components I was adding. I eventually got it working with all the different components of the app and got it submitted in a PR.

However, during my testing with my implementation, I made a grave mistake and broke one of the many accessibility rules when developing a web app, and that was not testing my implementation at multiple resolutions. Maybe it was the sleep deprivation, or maybe it was carelessness, but I ended up submitting a PR for what was a very broken emoji keyboard.

The way I was handling the position of the keyboard was by making its position % based on the resolution. I quickly realized after I had received feedback that it was a very bad way of positioning something like that because it makes it impossible to account for the billions of resolutions that someone could have their screen at. So I went back to tackle the CSS and eventually made the keyboard static with an absolute position at the left side of the component and all was well and the pr was approved. #2 done!

Knowledge is good

What did I learn? Well, I definitely learned to take more time with my CSS and not try and rush implementation but on top of that, I learned how to scan projects better to learn where exactly I need to add my changes. Sometimes I forget how much a good night's rest and some good food do for problem solving which was definitely a factor in finding the appropriate CSS to style the component. All in all, I was left motivated to complete my final 2 PRs and was determined to go above and beyond what was necessary in order to achieve that.