DEV Community: Abdullah Al Mamun Fahim

Release 0.4 Release

Abdullah Al Mamun Fahim — Sat, 07 Dec 2024 21:50:31 +0000

For this week I was once able to work on one more issue, despite my reservations about having enough time to work on a issue with couple final exams on the calendar this week.

Investigation

When I was looking for issues I found this issue interesting. The problem is when searching on the search bar the recommendations were the oldest talks, instead it would make more sense to just show newer talks. There was a recent PR that implemented a global search. I thought this issue was addressed since it uses spotlight search. But after some investigation I found the issue was still present. So I dove into the code base seeing that new global search uses something called spotlight search that uses turbo. So after some digging I found the talk controller under spotlight. After reading the code I realized I can just sort it by date attribute and since it shows the first 5 it'd be the right fix.

Aftermath

So, I made my PR, one of the maintainer thanked me for the catch and recommended that I do the same for events since it shows the oldest events as well. So after the change I was waiting for further feedback. The owner mentioned that talks implementation for spotlight search can be made better. There is a scope called ranked that uses the keyword presence in title and description to create ranking. It also made sense to show relevant results(ranked) rather than the first 5 of the newest talks. He also gave me suggestions on updating the implementation as well. They use BM25 algorithm to create the ranking. We could also include how old the talk is to update ranking. For example, we can penalize newer records using a scale. Another suggestion was to use talk date as tie breaker when ranking(bm25 score) is the same.

I tried the first recommended scope and I still got the newest records in all cases, while the second recommendation had a mix of newer and older records in some cases. I played around with the given multiplier for the first recommendation, but I didn't see any significant changes. So I informed the owner about my finding. He made a new PR to show me how the bm25 ranking works and updated the multiplier as well. In my testing I went as far as 0.000001 but in the PR I noticed he used 0.000000001. And I did notice better results. After the update, and some waiting my PR was merged.

Finish Line

This was a great experience. Working in production ready codebase lends to a great learning opportunity. Knowing Git and GitHub made my life a lot easier. I'm proud of what I was able to accomplish in just 4 months. I got to interact with a lot of new codebase and was genuinely surprised how nice everyone was. Although sometimes waiting for the response was a bit boring but it was really nice. Looking at previous PRs is also a great help on how the code base in handled and how the code is written. Overall, it was pretty good.

Release 0.4 Progress

Abdullah Al Mamun Fahim — Tue, 03 Dec 2024 20:02:00 +0000

For this week, I was able to contribute to Ruby projects and also practice my ruby skills. And I can gladly say I found the perfect repo. They are responsible for Indexing all Ruby related videos from conferences and meetups worldwide similar to pyvideo.org. I thought it was the best place to contribute to give back to the ruby community.

You can find them @rubyvideo.dev!

I was able to work on two more issues.

Issue #1

This issue was about showing language to the talks page. It would be a great addition to non-English speakers. My first instinct was to see if they already have feature showing languages and they did. They have have language name and emoji on talk cards adn it was only shown if it is in any language other than English. So, I followed how it was done. They already had a helper to get the language the talk was in. And I knew what I had to do. Next step was to choose where to display it. They UI is very minimal so I had to be conscious about where to put it. So, I decided to put it in the description. After I made the PR. It was merged very quickly. So, after working on this repo I understood how the codebase was and what they were using.

Issue #2

This issue was a bit of work and a lot of research. Someone wanted to be able to open YouTube video in YouTube instead of watching it on the site. Rubyvideo use a lightweight JavaScript library for their video player called Vlitejs. My first instinct was to look at PRs involving modifications to the video player. And there was a PR adding playback feature to the video player. They did it via JS using event listeners. So, Now I had an idea of how to implement it. Next I took a look at the JS library used to see if they have any built in way to implement it. Unfortunately they didn't. So, I planned to add and icon on the player itself. When clicked it would open the video in a new tab.

So, I went to implementation and most of my work was invideo_player_controller.js. Using JS and HTML query I get the video ID and added an onClick eventlistener to open open a new tab with the video ID. Next roadblock was to add the YouTube Icon. They used FontAwesome for their icon library and they download an SVG from their site and use it. So, that's what I did. However, I could not set the color for some reason. Even with modifying the css of the added classname the color would not change. Only other was it worked was adding the SVG code inline using innerHTML. I did not like that since that's not how its done across the app and adding the SVG can lead to reusability. After trial, error and some research I found that Vite has built in feature to import svg code from and .svg file. After sometime I was able to get it the way I liked it and I made the PR.

The owner left some feedback on css changes and having the video playing while the a new tab opens. They liked my idea but wanted some fixes. I updated my PR and after sometime they wanted more changes. They wanted another button on the outside as well. So, I had to refactor and add eventlisteners in two places and updated the view file. And I was right about reusing the icon because I had to add it to the button outside as well.

After that I was left another feedback on refactoring it to use <a> tags instead of buttons so that Mac users can cmd+click to open in new tab and they left a code suggestion which didn't make sense. after some back and forth I realized they didn't want buttons and event listeners instead they wanted <a> tags with Stimulus.js functionality. After some research and more back and forth, I was able able to makes changes the maintainer wanted. It was nice cause I was not aware of stimulus.js and how it worked. And finally it was merged. I'm glad they were quick with their response so that I could quickly update the code.

What's next

I want to work on more issue but not sure if I'll be able to fit in this week with finals approaching. Not sure if it'll be an issue in JS or Ruby but I'd want it to be in Ruby as well. As of now I'm looking for a new issue. Hopefully I will find it soon.

Release 0.4 Planning

Abdullah Al Mamun Fahim — Tue, 26 Nov 2024 01:57:43 +0000

As we go into the final release we are supposed to work on issues that we can feel proud of at the end of the semester. I plan on working on more Ruby related issues. Since I have an upcoming co-op where I will be working in Ruby on Rails.

With the end of the semester being busy with finals I don't have any particular repos in my mind. I want to work on issues that will help me hone my skills in Rails. I find the Ruby ecosystem is not as popular as JS ecosystem so I want to do my part to contribute to the Ruby ecosystem. In my previous issues I work on bug fixes and adding more tests. I plan on doing something similar this release as well. My only concern is the time commitment with each issue I work on since I have finals for other courses as well. Also I will be trying to find multiple related issues to work on since that is not a guarantee I will try to work on at least two issues.

Hopefully next week I will have issues that I have worked on. If time permits I will also look at some additional issues. Right now my target is to work on at least one rails related project.

Release 0.3 #2

Abdullah Al Mamun Fahim — Tue, 19 Nov 2024 03:51:59 +0000

While I looking for my second issue I came across rails_icons. It reminded me of react-icons but for rails. Since I have have some experience in Ruby on rails and its been a while since I used it so I wanted to get some practice.

Approach

The issue is currently in order to use this gem the user must provide a set. Some supported libraries don't have multiple variants (maybe just “solid” or “outline”). Also any custom added library might not have one, giving the user mental overhead to come up with a name. So, the set parameter to initialize the RailsIcons::Icon instance. The issue includes all the places it is used.

Implementation

My first Idea was to set default value of set to nil. After that I had to update logic for everywhere @set is used. After looking at the code I noticed @set is not used directly. It is used by getter method set which returns the set value if its present else it'll return RailsIcons.configuration.default_set. I had to do some research on how to update the logic because now in initialize method @set can be "" if nil is passed. So now set method can return "" which didn't look right. So I wanted so that if @set is "" set method would return nil. And I found .presence helps me do the same thing. After that I put conditinal return statement in error_message, error_message and custom_library method. But custom_library was initially returning the set instead of the library. So I modified it to return library and in library_set_attributes I separately dig for set value. After I ran my changes I had to run bundle exec standardrb to fix the lint errors and rails test to run the test suit. Since I'm using WSL I has some issues running rails test. So I had to run bundle install. After that all the tests were passing.

The PR

Since I was done I made a PR. After making the PR the owner left some feedback requesting some changes. And once change I made was on thee conditional return statement had some code repetition. So putting arguments in an array and calling .compact_blank fix this issue leading to a single return statement. I also used splat operator to deconstruct the array to pass to respective user. As for other changes I made I left my explanation and additional questions. Currently awaiting response from the repo owner but I don't foresee any drastic changes being requested.

Conclusion

Working on a ruby project after taking a long break was refreshing. Since Ruby has a lot of use full methods & operator. There's always a method to help handle complex logic. Compared to hacktoberfest issues this was a lot more work with more work ahead. I definitely had to extend myself more on this release cycle.

Release 0.3 #1

Abdullah Al Mamun Fahim — Tue, 19 Nov 2024 02:30:58 +0000

Last week I worked on a issue writing unit test for PathProcessor Block processor in react-chatbotify. Since I've been writing tests for my own project, it seemed on brand to write a test. Although the project is in TS, it can be difficult to write unit test for a component that you are unfamiliar with.

Read The Code

So the first step was to read the code of PathProcessor.ts. It handles processing of path in current block. takes three params, block an instance of Block, params an instance of Params and goToPath which is a function which takes a string. I saw there's two imports for Block and Params. So I checked the Block and Params type. Although Block is a bit complex its not really used by PathProcessor aside from its one attribute. Next is params with relatively simple implementation. Although I don't understand the entire code, I just had to understand how these types work in respect to PathProcessor. And the logic on PathProcessor is relatively simple its just a sequence of guard clauses.

Writing The Test

I before writing the test I also took a look at previous PRs that are similar to mine. And the owner wants the only the logic of the component tested not everything that is used by it. So Basically I was testing all the logical paths of PathProcessor. Based on the logic I would only need the path attribute of block. As for params I did not understand how it was being used so I mocked the entire object. I initially tired to mock only the needed attributes but I could not get all the tests to pass reliability. So, I did what I learned in my co-op that if the function is not the focus of the test just mock it. So that's what I did. While mocking I also followed how it was done in AudioService.test.ts as recommended by the repo owner. And I followed the similar syntax. After a lot of trial and error I got 100% coverage.

Making PR

After I was able to finalize my code I made my PR. I noticed the repo owner uses conventionalcommits, so I adjusted my commit messages accordingly. And finally the PR was merged on the first try! This was definitely more difficult than the hacktoberfest issues. Reading and navigating the large code base to write the test was definitely challenging. But so far so good!

Explainer.js Release 1.0.0 🎉

Abdullah Al Mamun Fahim — Mon, 18 Nov 2024 20:43:05 +0000

This week we have to implement versioned relase and publish it to npm.

Clean Up

Right now I run the application via node index.js which is inconvenient when you are using it like a npm package running under node. So, the first step was to ensure it can run with explainer --args. So I had to make some adjustments.

Research

Next step was to do do some research on how I can upload my project on npm. First resource I came across was how I can unscoped public packages. Looking through the steps everything seemed to be done. Then I noticed the section about .npmignore to exclude files that I don't want to publish to npm. And finally I'm supposed to run npm publish.

So I did some research on .npmignore. And I found this part in the docs on what files I should exclude. So I made my .npmignore. I also took the opportunity to update my README.md to reflect how I'm supposed to install the package and updated the usage of my tool as well. Next I ran

npm publish

But I got an error saying I should run

npm adduser

Normally that would open the browser to login from the browser. Since I'm using WSL I had to find a way to login via ternimal. So, I found this Stackoverflow thread. In short, to login via terminal run

npm login --auth-type legacy

After I ran

npm publish

And my application was published.

Testing

For my testing I choose someone that is not taking the course. We hopped on a call and I gave him the npm link. First issue he faced was two different installation script. One generated by npm and what I wrote npm i explainer.js vs npm install -g explainer. Next, when running inside a project it works fine. But the issue was it reads the package.json from the current directory. So it was reading package.json from his project. Cause it was showing version of his project instead the one in my package.json. And if opened just from a terminal it'd crash. So I went back to my code and realized the issue of reading package.json. So I had to make some adjustments and it was extra difficult since I cannot use __dir since I'm using ESM. So I had to look up how to make it work under ESM. After the fix I updated the README.md again and pushed and released released another version. This time it went perfect and there was no issue.

Release 0.1.0 🎉

And finally (drumrolls please), Explainer.js is out for everyone. Checkout it out @ https://www.npmjs.com/package/explainer.js

Making CI pipeline for Explainer.js

Abdullah Al Mamun Fahim — Mon, 11 Nov 2024 01:13:32 +0000

This week we I made a CI pipeline for my Explainer.js. Since I have different scripts set up over the last few weeks it was fairly simple.

Setting up CI in Explainer.js

First set to setting up CI pipeline is adding a YML file in the .github/workflows directory. I used the default version of the node.js CI template from GitHub but with some changes. First I made a draft PR with the default options. Then I pulled the branch and made several adjustments. I changed the name, broke the build job into three separate jobs. Build to install node and then lint-and-format and finally test to run the tests. I also used needs keyword to skip the next job so if the previous one fails it will skip the next one. So, if node set up fails it will not run lint-and-format and if lint-and-format fails it will not run tests. Which did happen a few times because my index.test.js was not set up properly so I had to make a small fix by passing the test-api-key via argv for it to run. It was running fine locally because I have a .toml and .env set up already. Setting up lint-and-format was fairly easy since I run the script when I try to commit locally so it automatically formats my files. I made changes to the default YML file according to my needs of my project. And It works pretty good! Check it out.

Working in DocBot

I worked on DocBot. Although the project is in JS, this project uses a different testing framework called vitest which is jest compatible. One thing I immediately noticed how fast it was compared to just jest. And the terminal output is super polished. Making working on the issue a quite enjoyable. I worked to make file.test.js test suite OS agnostic. I ran it in my WSL termial which ran fine but it did not run in cmd.exe. I immediately noticed now the expected path structure was different. Something I came across when I finished writing my tests in explainer.js last week. I use WSL by default but I rememebered not everyone has it so I ran it in cmd.exe and I had the same issue for the tests I wrote in FilePathResolver.test.js so I had to fix it. So, it is easy to overlook running the terminal in different os when using the default setup vscode terminal. So after some trial and error I fixed it and made my PR.

Adding Jest To Explainer.js

Abdullah Al Mamun Fahim — Fri, 08 Nov 2024 02:21:39 +0000

This week we were supposed to add test to our cli tool. So far the most frustrating thing to do.

Why I chose Jest

I'm a huge supporter for TDD(Test Driven Development). Almost every piece code should be tested. During my co-op more than half of the time I spent writing test for my PR. I believe that experience really helped me understand the necessity of testing. I was surprised to see how similar the testing framework in JS and Ruby are. I used Jest which is very similar to RSpec I have used during my co-op. To mock http resquest I used Nock kinda similar to something called VCR.

Issues I have faced (A lot of em)

Main problem I faced was I used ESM instead of CommonJS. Which made my life much harder. First issue was jest.mock not working. After some research I realized the way to mock is different in ESM. Unfortunately even after following the docs I could not get it to work. So, I had to do jest.spyOn. Second issue I faced was since execa runs in child_process the index.test.js although runs it does not effect the coverage report. So I had to use jest.spyOn to rewrite the test. I also had to refactor index.js so that it does not take the flags I'm passing to jest. Other smaller issue I faced was, using node --experimental-vm-modules --no-warnings node_modules/jest/bin/jest.js -c jest.config.mjs instead of jest -c jest.config.mjs cause I was using ESM. I also had to use mock-fs to replicate file system to test FilepathResolver.test.js because simple jest.spyOn did not test it thoroughly enough. I was surprised how many roadblocks were cause by just using ESM and it just reflects what a mess JS is.

After a lot of trial error I got a pretty good coverage.

Hacktoberfest Recap

Abdullah Al Mamun Fahim — Mon, 28 Oct 2024 03:42:10 +0000

As Hacktoberfest comes to a close, looking back it was pretty good. I wish I could do this under better circumstances. With additional course load than normal, midterms and some personal life stuff I was under more time crunch than usual.

My approach for the hacktoberfest was to try new tech that I'm not familiar with. The lead to me working in some python repos as well. If I had more time I would've tried some rust repos as well. Since in the beginning I saw some rust issues that looked simple but since I would have to learn a new language I was reluctant on taking those on. But I would say I did get to try some new things specifically in python. It was nice learning how differently projects can be set up and how complicated some of them can be depending on the project size.

Since the beginning the problem was finding issues to work on. I was also kind of picky about my issues. I wanted to work on applications/tools that are actually used by people with a high fork count. I did not want to work on repos that are not maintained. Moreover, I was looking for issues specifically labelled Hacktober and I must be honest that label is a bloated. Almost half of the issues are either for repos that was made two weeks ago specifically for hacktoberfest. Although in the beginning there was a lot of issues but just a week in the label became so bloated. In the future, I would just look for issues that are labelled good first issues. Something I did for my last week since I literally went to page 100 of hacktober label. And there are actual repos with legitimate issues.

Most surprising part was how nice some people were. Although there was some waiting to be done at times, overall everyone was very nice as my professor mentioned. Although I did get ignored for one of the issues. I made a PR and someone part of the repo just self assiged and made the same PR as me. I followed all the rules but still got ghosted. That was a bit discouraging. But overall everyone was super nice and it was fun actually contributing to real projects with a user base. 10/10 would do again.

Adding Static Analysis tools

Abdullah Al Mamun Fahim — Sun, 27 Oct 2024 23:50:40 +0000

For this weeks lab, we are supposed to add Static Analysis tooling. So we are supposed to add source code formatter, linter, IDE integration, Pre-Commit hook and CONTRIBUTING.md.

For my source code formatter, I choose Pretter. It is very popular and I have seen it other projects but I never had to set it up from scratch so I wanted to do that. First thing I did was go to thier docs and followed their install instructions. I also updated the .prettierignore so that I could exclude the files and directories I don't want to be formatted. Then I ran

prettier --write .

from the install docs. It worked so I added a npm script "prettier": "prettier --write ." so that I can run it easily in the command line. I reverted all the changes since a lot of the changes are not something I wanted in my project. So I went to options section to define my own format. Then I ran and committed the changes. Most of the changes were from enforcing single quotes and changing EOL from CRLF to LF.

For my linter I chose ESLint. Similar to Prettier I have never set it up. The docs for ESLint was kinda hard to follow. But similar to prettier I went to the docs then to the get started. Followed and ran the scripts to install it by running npm init @eslint/config@latest. After I ran

npx eslint .

and it worked. There was no errors thankfully. I also added ignores object so that it doesn't run on node_modules and examples directory. And finally I added npm script so that I can run it easily in the command line.

For my pre-commit hook I choose husky. It was fairly simple. Since I had pre-defined scripts on my package.json it was just adding a single line npm run clean. I noticed it was running the lint and prettier on the entire code base on the entire codebase which didnt look okay. So I did some research and found lint-staged followed their instructions on installing it and then followed https://github.com/lint-staged/lint-staged?tab=readme-ov-file#packagejson-example to add my custom defined npm script and it was that simple.

My IDE of choice was VS Code. It uses extensions which I already had so I used the workspace docs to define my own.

I believe this is something that should be set up at the very beginning of the repo's life so that all the code-base is the same from the beginning and reduces chance of braking something with future implementation.

Hacktoberfest week 4

Abdullah Al Mamun Fahim — Sun, 27 Oct 2024 19:25:21 +0000

As the week progress is becoming more and more difficult to find legitimate issues with Hacktoberfest labels. This week in my search I went to page number 100 and couldn't go any further. Maybe I'm just picky about my issues or there's acutally no good issues left with the label. So in my search, I searched with the label good first issue.

This time the search was a lot less work and I found two legitimate repos.

For the first repo, it was labrute, an react remake of online game http://labrute.fr. I love gaming and a huge supporter of game preservation. So I chose this one. Since the issue was very simple I looked for another repo. After a while I found tabbycat, "Debating tournament tabulation software for British Parliamentary and a variety of two-team parliamentary formats". With 831 forks it looked promising and it is actually used by people.

For my first issue I started on labrute. I just had to update the brute and updatedBrute in updateClanPoints method. After searching for the method there was a lot of method calls so I had to look for the reset method file. After finding the file and updating. I made the PR. This time the PR was against the main repo so it was pretty simple.

For the next one I immediately found the file since in the issue the file and line number was included. Also since its a application made in Django, I had to be extra careful since I have not worked on Django in a while. In the issue I was given to options to implement the solution. Either field_class = forms.EmailField or field_kwargs = {'validators': [EmailValidator()]}. So I looked at the codebase and there was no use of forms.EmailField. And after looking at the docs EmailValidator was the better choice. So I imported EmailField form django.core and added it to the ReplyToEmailAddress class. After the update I made the PR. The only issue was I missed to add a whitespace. So I amended the last commit and force pushed. But after a while I saw a gitworkflow had failed. So I checked the workflow to see what had failed. It was a flake8 error where the import of EmailValidator should be in the beginning of the import statement since it is alphabetically first. So I made a new commit and pushed to origin.

As of writing both of my PR has been merged. I have asked both owners if they could add Hacktoberfest label to the issues.

Hacktoberfest week 3

Abdullah Al Mamun Fahim — Sun, 27 Oct 2024 19:00:13 +0000

As previously suspected, hardest part of the hacktoberfest has been to find issues to work on. My first place to look was the issues labeled Hacktoberfest. It's even more difficult to find issues that are actually part of legitimate repo. As in its not just made for hacktoberfest, not just a random project but something that is used and actually maintained.

After a lot of searching I found this issue. The issue is part of erxes, "an alternative to the combined functionalities of Hubspot (CRM & Marketing automation) and Qualtrics (Experience management)" according to the repo. With 1.1k forks the repo looked very promising.

So after leaving a message expressing my interest in the issue, I forked the repo and went to work. The issue is mainly to replace sendContactsMessage method with sendCoreMessage in all plugins. Because, the implementation is identical since they both send message to the core.

Firstly, I wanted to see how many instances of sendContactsMessage was in the code base and it was 347. My approach was two step. Find the definition and then the usage. So I filtered the files on vscode by files that have messageBroker.ts as its name and there was only 31 results. There I noticed some files had both sendContactsMessage, sendCoreMessage and some had only sendContactsMessage. So I had to remove the definition or update the method name in each file (since the definition is identical).

After that my next step was to find all the usage of the method sendContactsMessage. It was a lot but with find and replace I was able to replace all the method reference. Only issue was the import statements where now if both sendContactsMessage and sendCoreMessage was imported now there was two sendCoreMessage. So I had to go in each file and manually remove them. This took a while. After I was done, I wanted to do be sure there was no reference of sendContactsMessage in the codebase. But I found the definition in one file that was not updated, since the file was not messageBroker.ts but the definition was in a file that was in messageBroker directory. After the update all the sendContactsMessage was removed. Then I manually checked all sendCoreMessage reference just to be sure I didn't miss any import or duplication.

Once I was done, next step was to make a PR. When I was reading the contribution guidelines (something I should've read before I started), I noticed I was supposed to make a branch off of the dev branch instead of master. Locally, I had to set upstream. Make a new branch from that upstream dev branch. Then I did git cherry pick to select the two commits I made from my old branch to the new one (based on upstream dev). Thankfully there was no conflicts. Then I made the PR with no conflicts with the dev branch. As of writing this, I have not heard back from the owner and someone else from the company has self assigned the issue and made the same PR as me. Hopefully they accept my PR.