Ensiklopedia VibeKoding: An Introduction to Open-Source Collaboration.Ensiklopedia VibeKoding: An Introduction to Open-Source Collaboration.
Want to contribute to open source but don't know where to start? Open source is more than "using other people's code for free" โ it's a way of collaborating and a career accelerator. One high-quality open source contribution can be more convincing than ten personal projects on your resume. This chapter walks you through the complete open source collaboration process, from finding projects to submitting PRs, and helps you take your first step in open source contribution.Want to contribute to open source but don't know where to start? Open source is more than "using other people's code for free" โ it's a way of collaborating and a career accelerator. One high-quality open source contribution can be more convincing than ten personal projects on your resume. This chapter walks you through the complete open source collaboration process, from finding projects to submitting PRs, and helps you take your first step in open source contribution.
What will you learn in this article?What will you learn in this article?
| Chapter | Content | Core Concepts |
|---|---|---|
| Chapter 1 | Open source contribution process | The complete chain from Fork to PR |
| Chapter 2 | Open source licenses | Differences between licenses |
| Chapter 3 | Collaboration etiquette | How to be a welcomed contributor |
| Chapter 4 | Contributing from scratch | Finding beginner-friendly projects |
After reading this chapter, you will master the complete process and etiquette of open source collaboration, and have the confidence to submit contributions to any open source project.After reading this chapter, you will master the complete process and etiquette of open source collaboration, and have the confidence to submit contributions to any open source project.
------
Open source is more than code sharing โ it's a global collaboration model. Linux, React, Vue, Node.js โ these world-changing projects are all open source.Open source is more than code sharing โ it's a global collaboration model. Linux, React, Vue, Node.js โ these world-changing projects are all open source.
- Technical Growth: Read excellent code, receive expert reviews - Career Development: Open source contributions are the best technical calling card - Community Belonging: Become a member of the global developer community - Giving Back: The tools you use every day need people to maintain them- Technical Growth: Read excellent code, receive expert reviews - Career Development: Open source contributions are the best technical calling card - Community Belonging: Become a member of the global developer community - Giving Back: The tools you use every day need people to maintain them
------
Use the interactive component below to step through the complete process from Fork to Merge:Use the interactive component below to step through the complete process from Fork to Merge:
CODE Fork โ Clone โ Branch โ Commit โ Push โ PR โ Review โ Merge
Create a feature branch: Never develop directly on main.Create a feature branch: Never develop directly on main.
bash git checkout -b fix/typo-in-readme
Write clear commit messages: Follow the project's commit conventions.Write clear commit messages: Follow the project's commit conventions.
bash git commit -m "fix: correct typo in README install command"
Create a Pull Request: The PR description should include:Create a Pull Request: The PR description should include:
Fixes #123)Related issue number (e.g., Fixes #123)------
Use the interactive component below to compare common open source licenses:Use the interactive component below to compare common open source licenses:
| License | Characteristics | Notable Projects |
|---|---|---|
| MIT | Most permissive, almost no restrictions | React, Vue, jQuery |
| Apache 2.0 | Must retain copyright notice, includes patent grant | Android, Kubernetes |
| GPL | Derivative works must also be open source | Linux, WordPress |
| BSD | Similar to MIT, with slight differences | FreeBSD, Flask |
------
markdown <!-- Bad --> Title: It doesn't work Content: Your stuff has bugs <!-- Good --> Title: v2.1.0 login page shows white screen on Safari 17 Content: - Environment: macOS 14.2, Safari 17.2 - Steps to reproduce: 1. Open login page 2. Enter credentials 3. Click login - Expected behavior: Redirect to home page - Actual behavior: White screen, console error TypeError: xxx - Screenshot: [attached]
CONTRIBUTING.md first to understand the project's contribution guidelinesRead CONTRIBUTING.md first to understand the project's contribution guidelines------
| Type | Difficulty | Description |
|---|---|---|
| Fix documentation errors | Low | Typos, outdated links, unclear instructions |
| Translation | Low | Translate documentation into other languages |
| Add tests | Medium | Write tests for uncovered code |
Fix bugs tagged good first issue | Medium | Beginner-friendly issues marked by project maintainers |
| New features | High | Discuss the approach in an Issue first, get approval before starting |
good first issue labels on GitHubSearch for good first issue labels on GitHub------
LLMs can help you quickly understand unfamiliar codebases, write high-quality PR descriptions, and even assist with code reviews.LLMs can help you quickly understand unfamiliar codebases, write high-quality PR descriptions, and even assist with code reviews.
> Prompt:> Prompt:
> ```> ```
> I just cloned an open source project. Please analyze the following> I just cloned an open source project. Please analyze the following
> directory structure, explain the responsibility of each directory/file,> directory structure, explain the responsibility of each directory/file,
> and describe the overall architecture and data flow.> and describe the overall architecture and data flow.
> I want to fix a login-related bug โ where should I start looking?> I want to fix a login-related bug โ where should I start looking?
>>
> [Paste tree command output or directory structure]> [Paste tree command output or directory structure]
> ```> ```
> Prompt:> Prompt:
> ```> ```
> Based on the following git diff, write a Pull Request description including:> Based on the following git diff, write a Pull Request description including:
> - Title (concise, stating what changed)> - Title (concise, stating what changed)
> - Change description (why and what changed)> - Change description (why and what changed)
> - Testing method (how to verify the change is correct)> - Testing method (how to verify the change is correct)
> - Related issue (if any)> - Related issue (if any)
> Write in English with a professional and friendly tone.> Write in English with a professional and friendly tone.
>>
> [Paste git diff output]> [Paste git diff output]
> ```> ```
> Prompt:> Prompt:
> ```> ```
> Translate the following Chinese technical document into English, with these requirements:> Translate the following Chinese technical document into English, with these requirements:
> 1. Use industry-standard English expressions for technical terms> 1. Use industry-standard English expressions for technical terms
> 2. Do not translate code comments and variable names> 2. Do not translate code comments and variable names
> 3. Keep Markdown formatting unchanged> 3. Keep Markdown formatting unchanged
> 4. Natural and fluent tone, not machine-translated> 4. Natural and fluent tone, not machine-translated
>>
> [Paste Chinese document]> [Paste Chinese document]
> ```> ```
When using AI to write PR descriptions, make sure you understand every line of change. Reviewers may ask why you made a certain change โ if you can't answer, it means you haven't truly understood it yet.When using AI to write PR descriptions, make sure you understand every line of change. Reviewers may ask why you made a certain change โ if you can't answer, it means you haven't truly understood it yet.
------
good first issue labelsGetting Started: Start with documentation fixes and good first issue labelsThe essence of open source is collaboration. Technical skills are important, but communication skills and collaboration awareness are equally crucial. A friendly, well-described PR is more welcome than a perfectly coded but rudely communicated one. Your first PR doesn't need to be perfect โ it just needs to be your first step.The essence of open source is collaboration. Technical skills are important, but communication skills and collaboration awareness are equally crucial. A friendly, well-described PR is more welcome than a perfectly coded but rudely communicated one. Your first PR doesn't need to be perfect โ it just needs to be your first step.
------