Wrapping up Hacktoberfest with a contribution to Tooljet

Introduction

Contributing to open source has been a lot of fun this Hacktoberfest! I started off with a small JavaScript game called ZTM Quest, then fixed a React frontend bug in a larger project called Wren AI, and even tackled another React bug in an even bigger project called Apache Airflow. To finish off Hacktoberfest, I wanted to wrap up with an easy fix, as my midterms are coming up and I’ve started preparing extensively for them, alongside participating in hackathons and other learning opportunities.

Thus, I picked up an issue to update the documentation for a project called ToolJet. ToolJet is a low-code platform for building business applications that connects to databases, cloud storage, GraphQL, API endpoints, Airtable, Google Sheets, OpenAI, and more, allowing users to build apps using a drag-and-drop application builder.

My issue was to update the documentation for the Divider Component (Issue #10977), and the maintainer had clearly detailed what needed to be done.

So, I got started with my usual flow: I forked the repo, cloned my remote copy of the upstream, set an upstream, and branched off to a new branch called issue-10977. The project also has a community, similar to the other projects I’ve contributed to, but I didn’t join this time since the fix was relatively small. Despite being a minor fix, this project is pretty huge.

Working on the Code

As mentioned earlier, the maintainer was very clear about what changes he wanted for the project and which files needed modification. I started going through the markdown files mentioned by him one by one and made the changes he requested. As a bonus, I also formatted the markdown files. Usually, I refrain from making changes beyond what is required, but this time I felt that the additional formatting would be appreciated by the maintainer, resulting in cleaner documentation.

Here are the four changes he wanted me to implement in two documentation files:

1. Replace "Fx" with fx (removing the backticks and making it lowercase and bold).

2. For each h2 (created using ##), remove the 24px padding-bottom. The div that wraps the h2 headers and the section below should only have a padding-top of 24px with no padding-bottom.

3. Replace the word "widget" with "component" wherever applicable (please do not update the URLs).

4. Add a divider before the "Styles" section reference.

Once I completed all the changes, I submitted my pull request (PR #10982) and awaited feedback from the maintainer. The maintainer replied with some change requests, and I had to admit that I was hasty in trying to finish this PR, which led to a lot of mistakes and not properly reading the instructions. I’m grateful for the maintainer’s patience and for allowing me to complete my PR.

Conclusion

This was a good experience since I just managed to finish Hacktoberfest. Before signing off, I have some advice for everyone reading this blog: If you contribute to an open source project, no matter how small the change, take it seriously. This will make life easier for both you and the maintainer. Don’t make the same mistakes I did!