Open Source Contribution Lecture Notes

Overview

• Focus on contributing to open source (OS) organizations in Google Summer of Code (GSoC).
• Series includes:
  1. Review existing and future GSoC projects of an organization.
  2. Set up the organization's code locally.
  3. Make an open source contribution.
  4. Provide tips on solving issues and useful links.
• Emphasis on politeness and taking time (6-8 months) to understand the codebase.

Featured Organization: Processing

• Processing organization has been active in GSoC for around 12 years.
• Example personal experience: Contributed to Processing when Mozilla was the primary org, but processing was the backup.
• Focus on specific project: p5.js, a visualization library for creating games, animations, etc.
  • Runs on web, Android, Python, and originally Java.

p5.js Projects Overview

• Examples from previous years' GSoC ideas list:
  • Improving p5.js library.
  • Friendly error systems and documentation.
  • Mobile and responsive design implementation.
  • p5.js web editor.
  • Migration of VR libraries, adding images and markers to AR.
• p5.js.org site documentation and accessibility improvements.
• High priority projects like expanding accessible outputs.

Hands-On Contribution: p5.js Web Editor

Step 1: Setting Up Locally

1. Clone the repository to local machine.
2. Set up the project locally using Docker to avoid dependency issues.
3. Docker setup steps:

• Ensure Docker and Docker Compose are installed.
• Use Docker Compose to bring up necessary services (e.g., MongoDB and the application).
• Docker containers encapsulate dependencies, ensuring clean setup and removal.

4. Create a Docker container for MongoDB and the main application using predefined Docker files.
5. Execute docker-compose -f docker-compose.development.yaml up to start the containers.
6. Ensure environment variables are set correctly (.env file).

Step 2: Running Locally

• Verify that the p5.js web editor runs locally by visiting the local server address.
• Example of usage: Writing and previewing p5.js sketches.
• Adjust canvas dimensions and see real-time changes.

Step 3: Making a Contribution

• Explore and understand the existing issues on the GitHub repository.
• Example issue: Convert class-based React components to functional components.
  • Explanation of class-based vs. functional components.
  • Step-by-step conversion example using the SearchBar component.
  • Utilize AI tools (e.g., ChatGPT) for straightforward conversions, but ensure thorough review and understanding.

Step 4: Testing and Committing Changes

• Validate changes by running the application locally and ensuring all tests pass.
• Create a new branch, commit changes, and push to GitHub.
• Create a pull request (PR) for the maintainers to review.
• Follow best practices for PRs:
  • Unique branch names.
  • Descriptive PR titles and messages.
  • Ensure lint and test scripts pass.

Final Notes

• GSoC is an excellent opportunity for impactful contributions.
• Consider more complex issues like adding TypeScript support for broader impact.
• Ensure understanding and testing of all changes before submission.
• Future sessions will explore other organizations and projects upon request.