How to Send Your First Open Source Contribution

We love open source software. Contributing to open source software can boost you career. Some of the key benefits of doing so are:

  • Find greater job prospects: In open source you are visible to the public. You get more visibility with prospective employers. They can also assess your skills by reading the code you wrote.
  • Improve our skills: Learn how dozens of people across different timezones coordinate with each other to build a complex system. This implies writing very well maintained code. Contributing to open source implies learning the best practices.
  • Improve software you use: You also get to give back to the community.

How can you send your first contribution to open source software? We'll walk you through an example in this post.

Good First Issue is a platform created by DeepSource. Developers use it to browse through repositories that have simple issues to solve. We’ll see how Watermelon can help us solve a good first issue.

React JSON Schema Form is a simple React component capable of building HTML forms out of a JSON Schema. I’ve used this open source project in the past and I gotta say it’s great. There are web apps that need to render different variations of a form based on a set of rules. React JSON Schema Form helps devs manage this.

Let’s start by reading the list of good first issues the project has. There are 10 of them. There’s one that’s documentation-related. That seems like a very good one to get started.

Issue #1424 seems like a good one to get started


Let’s go to the file that contains the part of the documentation in question. Let’s hover and highlight that block of code to see what Watermelon can tell us.

After doing a deep research with Watermelon we conclude we can proceed to make the change. The different documentation reorganizations, addition of examples, and usage of MK Docs don't talk about this issue. About the case of empty strings in arrays being set to undefined/null.

For those who are curious: The confusion arises from the fact that the code itself sets the values of the mentioned array to undefined. Yet, undefined is not a valid JSON value, thus they get set to null.

That’s how we saved time using Watermelon to send our first good first issue. Watermelon helped us figure out that the undefined vs null confusion in the documentation was because of lack of attention to the issue. Not because some is doing something on the code that parses values in a weird way.

If you want to try this with your own public or private repo, install Watermelon’s VS Code extension.