Open Source Contribution: A Detailed Guide

• When you contribute to others’ projects, you gain confidence as a developer. For eg.: If you contributed to a JavaScript project, you become confident with JavaScript as your skill.
• Open source is not only about code, it’s for everyone, be it developers or students, or even graphic & UI/ UX designers. Open source is about collaboration.
• Open source helps you expand your network which may be helpful for job opportunities as well because some companies directly hire open source contributors.
• You can also showcase your Open source contributions in the form of a GitHub URL on your resume so that your resume can outstand others.
• GitHub rewards contributors in the form of achievement badges.
• By participating in Open source events such as Hacktoberfest, you can also win swags & goodies. Moreover, some companies also give away swags to their contributors.

Open Source == Collaboration

Open Source == Open Opportunities

How to make your first Open Source Contribution ? (for beginners)

How to contribute to open source

Here we discuss the various ways any one can contribute to an open source project

• Upload your own code/project from your system to GitHub & optimize your GitHub profile.
• Contribute To Other Open Source Projects2.1. Handle open Issues2.2. Find Bugs In Code Or Fix Typos, And Grammatical Errors In Documentation2.3. Request a New Feature2.4. Code Improvement2.5. Documentation Improvement2.6. Create a New Issue2.7. Join an Organization
• Contribution by students or non-developers: By uploading notes & cheat sheets or improving documentation.
• Contribution by UI/UX Designers: Run the app/project on your local machine to check how its UI or design can be improved & create a new issue.

Note: You need to have a GitHub account to make a contribution. If you don’t have one, follow the below steps to Create a GitHub account:

• Go to https://github.com - Sign up

  Github signup page

• Enter your email with which you want your GitHub account to link Create a strong password - Enter a username (it’s a name for your GitHub account), you can give any name as you wish - Type ‘y’ to receive product updates - Verify your account by solving the puzzle - Create account

  Create an account

  You will get a code on your mail that you signed up with, enter that code. After that, you will get a page (Welcome to GitHub) - skip personalization.
• Congratulations, you have created your account on GitHub, now you can proceed with making your first contribution.

  Welcome to Github

• Ways To Make Your First Open Source Contribution

  • By Creating/Optimizing Your GitHub Profile

    • Sign in to your GitHub account
    • Go to ‘Your profile’

      Navigate to your account

    • Here you can see your default profile. Also notice that your profile shows ‘1 contribution in the last year’, so just by joining GitHub, you have made your first Open source contribution.

      Edit your profile

    • Now you need to customize your GitHub profile. For that, just go to ‘Edit profile’ or simply go to the default Profile picture.
    • After clicking on your default profile picture, you get something similar as in the screenshot.

      Update your profile info

    • Change your profile picture and update your personal details such as Name, Public email, Bio, URL of your website, Twitter username, etc. & click on ‘Update Profile’. After updating, your profile looks similar to this.

      Sample profile image

    • If you want to add much more information about you like your Tech stack/ skills & your contact information, you can create a file that will show up on your Profile page. For that, just create a new repository (repo) by clicking on ‘New repository’.

      Click New Repository

    • The name of your repository should be the same as your GitHub username. For Eg: My username is aparnademo, so I should use the same name for my repository also. Username/Username (in our case, aparnademo/aparnademo) is a special repository that is used to add a Readme file to your profile where you can customize your profile.

      Create new repository

    • Always make sure that the repository is Public because remember: Only the public repositories are Open source, not private ones. Click on the checkbox for ‘Add a README file’. The Readme file is the file where you will be writing a description of your repository (as in this case, you are writing a description of your profile). Now click on the ‘Create repository’ button.
    

    Edit Readme file

    • Click on the ‘Edit README’ button to edit the Readme file of your repository.
    • Now you get a default Readme file made by GitHub itself, make changes to this file accordingly.
    

    Updated Readme file

    • After updating the Readme file, your profile looks similar to the one depicted in the screenshot.
    

    Open source contribution

    • Now you can notice some more contributions must have been added to your profile. Congratulations !! you made your Open source contribution.

  • By Uploading Your Own Project To GitHub

    • Go to New repository, give a name to your repository, make it public & add a README file (this is optional but it is always recommended to have a good Readme file that includes the description of your project).
    

    Go to new repository

    

    Create new repository

    • Click on ‘Create repository’ which creates an empty repository on your account. Now you need to add your code/ project files to your newly created repository. Click on the pencil icon on the README file so as to edit the README file.
    

    Add code or projects to repository

    • Now add your code files by clicking on ‘Add file’ - ‘Upload files’. If you want to upload a complete folder, just drag & drop the folder.
    

    Upload files to repository

    • Now it’s time to save the changes you made to your repository (all the code files are now saved to your GitHub repository). Just click “Commit changes” to save your changes, where ‘commit’ means save.
    

    Commit changes

    • Now you can notice that your number of contributions increases on your profile. Congratulations again!

• Contribute To Other Open Source Projects

  • Handle Open Issues:

    • First, select the project to which you want to contribute. For this, search for a skill you want to practice in the ‘Explore’ tab on GitHub.
    

    Explore Github

    • Now you will get many projects related to a particular skill, you need to choose a project that has a good community. You have to first explore its existing closed Pull requests so as to get an idea of whether the company’s community is interactive or not & whether they are helpful to first-time contributors.
    • After you selected your project, now go & search for Open issues. There are basically two types of issues: Open & Closed. Open issues are the problems that the project is currently facing, whereas the closed issues are those that have already been resolved. I am taking Testsigma’s repository as an example for this blog.
    • Here you can notice, that we have 12 Open & 4 closed issues.
    

    Open or close issues

    • Now as a first-timer/ beginner you cannot just jump on any issue. You can only solve those issues that are beginner-friendly/ easy. So, go & search for good first issues (as highlighted in the screenshot). Click on “We’ve collected some good first issues for you”. Good first issues are the issues that have specifically been made for first-timers.
    

    Good first issues

    • We got 2 search results for ‘good first issues’. Here you can also notice that besides the issues, ‘bug’ & ‘good first issue’ are mentioned. These are simply labels that define which type of issue is this.
    

    Labels of the issue

    • You can find the different types of issues from ‘Labels’ (as highlighted in the below screenshot).

      Identifying the issues via Labels

    • These are the different labels we got for Testsigma’s repository.

      Testsigma’s Repository Labels

      Note: If you are not good at coding, you can just pick up issues with ‘documentation’ labels. Therefore, Open source is not only about code.
    • Before contributing to any project, make sure you thoroughly read their “Contributing.md” & “Code of Conduct” files. These files contain rules & guidelines for contribution.
    • After choosing the issue, you need to fix the issue by making some required changes. For that, you also require the repository’s code(Testsigma in this case) on your system. Follow the below-mentioned steps:

    Steps to create a Pull Request

    Step-1: Fork the Testsigma repository:
    • Forking means creating a copy of Testsigma’s code/repository into your own GitHub account, which means when you click on ‘Fork’(as highlighted in the screenshot), it will copy the Testsigma’s code into your GitHub account.

      Fork testsigma repository

    • It now shows a page similar to the one shown in the below screenshot. Click on ‘Create Fork’.

      Create Fork

    • After you click on ‘Create fork’, you can notice a repository named ‘testsigma’ is created on your GitHub account.

      Testsigma repository created

    Step-2: Clone the project
    • Cloning means the whole code of ‘testsigma’ will be copied to your local machine (laptop or PC).
    • Click on ‘Code’ - HTTPS - copy the URL.
    

    Cloning

    • Create a new folder on your local machine (laptop or PC) where you want testsigma’s code to be saved. Then open Git Bash/ Command Prompt & run the below command to clone the project:
      git clone <url_that_u_copied_from_HTTPS/>
      git clone https:https://github.com/aparna2071/testsigma.git
      

      Run command to clone the project

    • After cloning is complete, you should find a folder called ‘testsigma’ inside your newly created folder. The folder ‘testsigma’ contains the code of testsigma’s repository, which means now you have testsigma’s code on your local machine.

      Testsigma’s code in your local machine

    • Now that you have the code on your local machine, it’s time to make changes to the code in order to resolve your chosen issue.
    Step-3: Prepare the development environment
    • Thoroughly read the README.md file to check whether anything needs to be installed on your system so as to run testsigma’s code.
    Step-4: Create a new branch
    • Go to the folder where testsigma’s code is cloned on your system using the following command:
      cd testsigma
    • Now create a new branch before making any changes to testsigma’s code. It is always advisable to create a new branch because if we directly make changes to the main/master branch (default branch), it can even destroy the existing code. Create a new branch using the below command:
      git checkout -b branchname
      

      create a new branch

    Step-5: Make changes
    • Open the folder that contains the cloned code in VS Code or any other editor & make changes, so as to resolve your selected issue.
    Step-6: Take the changes to the staging area
    • Staging means adding the changes that are ready to be committed(saved).
    • Staging is done before committing.
    • Use the following command to stage the made changes:
      git add

      OR

      git add changed_filename
    • Suppose I made a change in README file & replaced ‘Eliminate’ on line 30 to ‘Eliminates’ & saved my file, then I will run the below command to stage my changes:

      Command to stage the changes

    • You can check the status using :
      git status
      This command will tell you the status of git, such as on which branch are you currently on or what changes you have done so far, are these changes committed or not yet etc.

      Status command

    Step-7: Commit changes
    • Commit the changes using the below command:
      git commit -m “some message here”
      Replace “some message here” with a suitable message clearly stating what changes have you made.

      Commit command

    Step-8: Push the changes from your local machine to your GitHub repository
    • Use this command:
      git push origin branchname
      This branch name is the same as the new branch that you created in Step 4.

      Push the changes from local machine to your Github repository

    Step-9: Go to the testsigma’s repository on your GitHub account & Create a Pull Request
    • Here you can notice that you are getting something similar to this screenshot:

      Compare and pull request

    • This shows ‘aparna2071 had recent pushes 2 minutes ago’ which means the changes that you did on testsigma’s code on your local machine have been pushed onto your GitHub repository.
    • Click on ‘Compare & pull request’, which will then direct you to ‘Open a pull request’.
    

    Open and create a pull request

    • Mention some details about the changes you are requesting in this Pull Request. Eg: “I replaced the ‘Eliminate’ in line no. 30 with ‘Eliminates’ in README.md file”. Then click on ‘Create pull request’.
    • After you click on ‘Create pull request’, it will ask you to sign a Contributor License Agreement(CLA). This step is not mandatory for all Open source projects, but in the case of testsigma, you first need to sign CLA, then only your PR will be accepted.
    • After that, the Pull Request(PR) is reviewed by the maintainers/owners of the project (testsigma in this case). If the changes(PR) are good enough (resolves the selected issue, is well structured & as per the norms of the project), then they are approved by the maintainers, otherwise, you need to make some changes to your PR.
    A huge congratulations !! You just learnt how to create your first Pull Request.

  • Find Bugs In Code Or Fix Typos, And Grammatical Errors In Documentation

    • Just read the code of the project’s repository & if you find any bug, check if any issue already exists, if not, create a new issue to report that bug.
    • To create a new issue, go to ‘New issue’ under ‘Issues’.

      Create new issue

    • On clicking ‘New issue’, you get multiple options to select which type of issue you want to create. If you have found a bug in the code, select “Bug report” & click on ‘Get started’.

      Click on the issue and get started

    • Similarly, if you found some errors in documentation like some typos(spelling mistakes), grammatical errors or you just want to add something more to the documentation, you can select ‘Docs & Tutorials Improvement’. If you want to suggest a new feature, you can go for ‘Feature request’.

      Submit new issue

    • Fill out the necessary fields & click on ‘Submit new issue’.
    • If you also know how to fix this bug, you can also submit a PR stating the necessary changes (refer to 2.1 for steps to create PR).

  • Request a New Feature

    • You can suggest a new feature by creating an issue(as discussed in 2.2).
    • If you know the code for your suggested feature, you can even create a PR.

  Code Improvement

  • Read the code of the project & suggest any changes in the form of issues or PR so as to improve the project.

  Documentation Improvement

  • Read the documentation of the project & suggest any changes in the form of issues or PR so as to improve the project.

  Create a New Issue

  • This has been discussed in 2.2.

  Join an Organisation

  • You can even join an organisation/community as a Member just by creating an issue with the title ‘Please invite me to this community’ or in some communities, the invitation issue will be mentioned in the project’s README.md file itself (as highlighted in the below screenshot).

    Join an organisation

  • After you click on ‘invite me’ or issue, you get something similar to the below screenshot, fill in the necessary details & ‘Submit new issue’, after which the organization’s maintainers will send you an invite, you will just have to accept it.

    Invitation to the Github Community Organisation

  • After you accept their invite, you have joined their organization as a Member.

Contribution By Students & Non-Developers: How To Upload Your College Notes/Cheat Sheets To GitHub ?

• Open up your GitHub account, create a new repository(without a README file) & make it public if you want to make it Open source.
• Then create a new file & then add your notes here - Commit changes.

  Create file, add notes, commit changes

• Otherwise, if you added a Readme.md file also & if you have your notes already available in the form of doc/pdf/image, you can follow the below steps:

  Creating public repository in your personal account

• After you click on ‘Create repository’, you get a Readme file where you can add the description of your notes & upload your doc/pdf/image by clicking on the highlighted portion (as in the screenshot).


Attach files and commit changes

• Now commit your changes

Contribution by UI/UX Designers:

• Run the app/project on your local to check how its UI or design can be improved & create a new issue to suggest any changes.