Learn How to Contribute to Open Source in < 7 Minutes.
Tags: opensource, hacktoberfest, tutorial, beginners
Published: 2020-10-11 14:50:25

I’ve always heard that contributing to open source looks really good for developers, but I never really understood *why* it’s so important. After immersing myself in the tech world, I’ve come to learn that if we were to keep all our beautiful developments to ourselves, then we’d be stifling the growth & advancement of the industry as a whole.

## What is open source?

Wait a minute… I’m not quite sure that I know exactly what open source is… But that’s why the internet is so great! One search lead me to [https://opensource.com/](https://opensource.com/), which has a great [article](https://opensource.com/resources/what-open-source) with a nice, short explanation.
> “Open source software is software with source code that anyone can inspect, modify, and enhance.”

## DRY - Don’t Repeat Yourself

When we embarked on our journeys to become more experienced developers, we learned what it means to write clean, reusable code. open source is to the dev *community* as DRY code is to the *individual* developer. Without it, as a whole, we’d each be wasting time trying to come up with methods that someone else has *already* created, and implemented in some of their designs.

## Help Me Help You

Open source isn’t just great for **us**, open source is great for ***you***, too!! Let me write you a story. *Bare with me, here*.

![Photo by [Charles 🇵🇭](https://unsplash.com/@charlesdeluvio?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/search/photos/dog?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)](https://cdn-images-1.medium.com/max/6048/1*jJnMFu_IUjPz7LwTTjNg7Q.jpeg)*Photo by [Charles 🇵🇭](https://unsplash.com/@charlesdeluvio?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/search/photos/dog?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)*

This is Max. You’ve created an application that tells you when Max is sad. It’s super great! However, you’re not sure how to transform this app so that you can make Max happy. Kim👩🏽‍💻 loves your app! She forks that repository and adds a feature that lists all the reasons *why* Max is unhappy, then makes a pull request. After you review and merge her changes, you are able to implement a feature that takes all the reasons *why* Max is unhappy, and generate a list of things that *will* make Max happy! You’ve done it! You, a rockstar, was able to get help from another rockstar who saw your public repository. Tim 👨🏻‍💻 is then able to add a feature so that he can make his kitten, pearl😸, happy. Now that this application works for dogs and cats, your friend Jim🙋🏿‍♂️ can make sure that his cat Mr. Motto🦁 is happy, too!
> How can I contribute to Open Source?

Golly gee Willikers, that’s a great question! To some, just the *idea* of touching someone else’s code can be a bit daunting. I, too, fall into that category, since I’m quite new to this myself. But that’s great! We can walk through the process together.

First, lets find an open source repository…
[**danthareja/contribute-to-open-source**
*Learn the GitHub workflow by contributing code in a fun simulation project - danthareja/contribute-to-open-source*github.com](https://github.com/danthareja/contribute-to-open-source)

Great! Dan made this repository specifically to help us get familiar with the open source workflow. We can check out the Readme, and see what the project’s about.

![](https://cdn-images-1.medium.com/max/3956/1*NA7nyqlmm-Kv6QhUGLIU5g.png)

Perfect! Now, let’s take a look at that issue — *Issues give us a good understanding of the problem that needs to be fixed*.

![](https://cdn-images-1.medium.com/max/2820/1*pg8ll16PzZZ-T3w_nu1GEw.png)

In this case, the issue tells us that some sections in our codebase may not be as [DRY (*Don’t Repeat Yourself*)](https://thevaluable.dev/dry-principle-explained/) as they could be. We’ll fix that soon enough!

We’re also provided with some cool tips to be considerate and efficient open source contributors.

Time to see what’s in the **contributing guidelines**. Each environment is different, and it’s important that we know what rules to follow before we dive into the codebase. The contributing guidelines (*normally found in a CONTRIBUTING.md file*) tell us how we can be the most efficient while trying to make a contribution. We can read through ’em right [here](https://github.com/danthareja/contribute-to-open-source/blob/master/CONTRIBUTING.md), and we can walk through the whole process, together.

## Let’s begin

Now that we’ve read the contributing guidelines, we can get this project on our local machine.

Step 1. Fork the repository from Dan’s GitHub

![](https://cdn-images-1.medium.com/max/5388/1*1u4t9gMqQiA9P7hjmz1MMQ.png)

This can be done by clicking the “fork” button at the top of the page.

Then you should be redirected to your fork of his repository. It would look a little something like this:

![](https://cdn-images-1.medium.com/max/3992/1*FbC7LkcZ09uULg6L-L-mwQ.png)

Hit the “Clone or download”, and you’ll be presented with a few options to get this project on your local machine. To keep things simple, we’ll make sure that we’re using SSH.

![Make sure it says “Clone with SSH” at the top.](https://cdn-images-1.medium.com/max/4008/1*V-EW-VB9OQeaUVkjbepqLA.png)*Make sure it says “Clone with SSH” at the top.*

Then we’ll copy that link. In our terminal, we’ll type git clone <ssh key we copied> , then cd into the repository.

![](https://cdn-images-1.medium.com/max/3104/1*5XcOJ5HrGwI-QtlAP0K1xA.png)

If your terminal doesn’t tell you what branch you’re on, you can always type git branch and it will tell you what branch you’re on! Let’s make a new branch. Normally, we’d name a branch after a specific feature we’re trying to implement or fix. Since we’re cleaning up some repetitive code, I think cleanup is an appropriate name, however, feel free to use whatever you see fit!

Now it’s time to install the project dependencies by typing the command npm install. Dan also suggests that we check the code’s style against the style guide with npm run lint.

![](https://cdn-images-1.medium.com/max/3452/1*bAlE3mp3abJvPPv7ykcLpQ.png)

Let’s go to line 4 in ./src/calculator.test.js and change describe.skip to describe.only.

![](https://cdn-images-1.medium.com/max/3580/1*cvgXoHbXzAgbM3qEuYISGQ.png)

Then we’re ready to start running tests with npm test.

![](https://cdn-images-1.medium.com/max/3472/1*eu_XSsBCoaiWb-qjCDq8vw.png)

So far so great!

Here’s the result of our test! We’ve got no passing tests, but that’ll change, soon!

The errors tell us that our _check method should throw a TypeError, and our other methods should call the _check method.

This will make more sense once we’ve seen the code.

![](https://cdn-images-1.medium.com/max/3592/1*cW7lzbeCGYkNHgxTogqTkw.png)

Ah… So each of our operational methods are checking if the arguments being passed are numbers before operating on them. But they’re all doing this in the same exact way. Let’s *not* repeat ourselves!

![](https://cdn-images-1.medium.com/max/3080/1*Ji6CTcs_cAZdnRSqzkiCDA.png)

That looks a *tad* cleaner.

![](https://cdn-images-1.medium.com/max/2000/1*fkWWRYbNUtfgDbBYe8vU4Q.png)

Now, let’s revisit line 4 in ./src/calculator.test.js and change describe.only to describe.

Now let’s run npm test.

![Success!](https://cdn-images-1.medium.com/max/3916/1*qqMPT5LwR4gLY0BCnDYc3w.png)*Success!*

All our tests are passing, awesome!! Now that we’ve implemented our fix, and we used Dan’s tests to make sure we didn’t break any of the code, we should commit our changes and push our cleanup branch to GitHub.

![](https://cdn-images-1.medium.com/max/3912/1*UnoUIEUTCMNcYvBh0bNseg.png)

Now let’s go to our forked repository on GitHub, and make a pull request.

![](https://cdn-images-1.medium.com/max/3964/1*RWuWkPeIecJ4h9tkSWSPtw.png)

![](https://cdn-images-1.medium.com/max/3984/1*oba6IOzFPizrEKnYjBTbag.png)

After you’ve written your message (*which would usually be a bit more descriptive than mine*), hit the green Create pull request button.

![](https://cdn-images-1.medium.com/max/4028/1*PLvbuCpX3poICJNpKDSSEQ.png)

We did it! Dan also explains the process quite well. Your code will be reviewed, then a few things could happen:

* **You might not get a response.**

* **Your pull request might get rejected.**

* **You may be asked to make a few more changes to your code.**

* **Your pull request will be accepted & merged!**

Special thanks to [Dan Thareja](https://github.com/danthareja)!

<span>Header photo creds to <a href="https://unsplash.com/@joshgordon?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Josh Gordon</a> on <a href="https://unsplash.com/images/nature/outer-space?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>


I hope you’ve got a better understanding of open source now, I know I sure do! Try to look for more open source projects you can contribute to, it’ll help you build a stronger foundation. You can also find some open source tools you can incorporate in *your* projects.

I love feedback and constructive criticism, so feel free to leave a comment. If you’d like to see what I’ll do next, follow me here, or on [GitHub](https://github.com/Lexscher).