Step 4 Contribution On P5.js Website — My Third Translation Task

Identifying Untranslated Pages and Creating an Issue for Contribution:

My goal has always been to contribute to an open-source project that supports open education and creative coding, ensuring that more people, especially those facing educational barriers or language limitations, can easily access programming knowledge and learning materials. By translating technical documentation and educational resources, I hope to make open-source projects more accessible to everyone. This vision led me to join the P5.js community as one of the projects I wanted to contribute to. As a free and open-source tool designed for learners, designers, artists, and educators, P5.js aligns perfectly with my values of inclusivity and accessibility.

However, as a first-time open-source contributor in the p5.js community, I felt uncertain about where to begin or how to make a meaningful contribution. I spent time exploring the p5.js website and its GitHub repository, attempting to grasp its structure and identify areas in need of contributions. During this process, I observed that many pages on the p5.js website had yet to be translated into Chinese, which could pose a barrier for non-English speakers, particularly artists and designers eager to learn about creative coding.

As I was uncertain whom to contact directly within the community, I decided to create an issue on the repository’s issue tracker to inquire whether I could contribute to translating one of the website’s pages (Fig 2). After a waiting period, I finally received a response from the lead maintainers of P5.js, who acknowledged my request and assigned me to translate one of the website’s documentation pages into Chinese (Fig 3).

Setting Up My Workflow and Starting the Translation Process

Having gained experience from my previous contributions to FreeCodeCamp, I am now much more familiar with efficiently setting up my workflow. With this knowledge, I can quickly establish my translation workspace and start working on my third open-source contribution in p5.js translation.

I began my translation work by adhering to the existing file structure of the P5.js documentation. To ensure consistency with the original English format of Donate.mdx (Fig 4), I first copied and pasted the original English file into the zh(Han) folder (Fig 5), which is designated for the Chinese translations document. This approach allowed me to maintain the correct formatting while systematically translating each section.

During the translation process, I frequently cross-referenced the P5.js website to ensure that I accurately translated all sections and did not overlook any content (Fig 6). Additionally, while translating, I carefully reviewed P5.js’s View Alt Text functionality on the official website, ensuring that I didn’t miss any image descriptions and that they were accurately translated into Chinese (Fig 7). This step was essential to preserve accessibility for users who rely on alt text for understanding visual content. By thoroughly checking the documentation format and comparing it with the live website, I was able to ensure a comprehensive and precise translation of the Donate.mdx file.

Submitting My Third Translation Contribution

Following the P5.js contribution guidelines, I proceeded with the submission process for my translation. First, I created a new branch named add-donate-page-zh to ensure that my changes were properly isolated. After finalising my translation, I pushed the updated file to my origin repository before moving on to the final step. Once the translation was successfully uploaded, I initiated a Compare and Pull Request to merge my changes into the upstream processing:main repository. To ensure my submission adhered to the community’s standards, I also created a checklist within my Pull Request, confirming where I had made additions. Additionally, I referenced the related issue by adding “It addresses issue #712” in my Pull Request description, linking my contribution to the original discussion (Fig 8). With this, my third Pull Request was successfully submitted and is now awaiting the maintainer’s review (Fig 9).

Encountering a Permission Issue & Maintainer’s Response

After successfully meeting all the checklist requirements and finalising my Pull Request, I attempted to push my changes to the upstream repository. However, I encountered an unexpected issue: a permission error indicating that I was not authorised to push to the branch. Initially, I was concerned that I had not adhered to the P5.js contribution guidelines correctly and that I might have overlooked a step in the process. To clarify, I reached out to the maintainers for guidance (Fig 10). They promptly responded, reassuring me that this was entirely normal. Unlike personal repositories, contributors do not possess direct push access to the main repository (Fig 11). Instead, submitting a Pull Request (PR) for review is the proper procedure. Once a maintainer or another contributor reviews the submission, they can approve and merge it into the main branch. With this confirmation, I realised that I had successfully followed the right steps and that my contribution was now awaiting review. This experience enhanced my understanding of the collaborative workflow in open-source contributions, where community review and maintainer approval ensure quality control before merging updates into the main project (Fig 12).

My Pull Request Link:

https://github.com/processing/p5.js-website/pull/715

Reflection on My Third Contribution – Understanding Different Open-Source Collaboration Models

This contribution experience varied greatly from my previous work with FreeCodeCamp, especially. regarding communication and workflow structure. At FreeCodeCamp, I had direct communication with the project manager via WeChat, which offered ading of the community structure, the approval process, and who was responsible for reviewing contributions. This direct interaction facilitated tracking my work’s progress and receiving immediate feedback.

However, contributing to P5.js offered a different experience. Unlike FreeCodeCamp’s structured managerial communication, the P5.js community functions in a more decentralised manner, relying on issue tracking, discussions, and maintainer reviews to manage contributions. As I was unfamiliar with the community’s internal structure, I initially struggled to determine whom to contact for guidance. This led me to create an issue in the repository’s issue tracker and wait for a response from the maintainers, which took longer than the immediate feedback I was accustomed to receiving in FreeCodeCamp.

Through this process, I gained a deeper understanding of how various open-source projects possess distinct contribution models, shaped by their governance structures and levels of community engagement. FreeCodeCamp’s workflow offered a more structured and responsive process, while P5.js adopted a collaborative and distributed approach, wherein contributions are reviewed as maintainers become available.

This experience reinforced the importance of adaptability in open-source collaboration, and understanding the communication norms of different communities is crucial for effectively navigating and contributing to projects. It also highlighted the varied governance structures across open-source projects, shaping how contributors interact with maintainers and how contributions are integrated into the broader ecosystem.