GSoC’21:
Internationalization(i18n) and Deployment of p5.js Final Report

6 min readAug 19, 2021

GSoC 2021 is coming to an end, I’m very glad to have spent the last 3 months with the Processing Foundation. With the help of this blog, I would like to summarise my work on this project. My code work is around the i18n internationalization of p5.js and the deployment of a new Hindi website to production. P5.js is a really famous animation library for Javascript. The p5.js website has all the features but it lacks Translation features. In this project, I have added the Hindi translation feature to the P5.js website.

My mentor was Aditya Rana. One of the best person I have ever meet. Taught me many new things, reviewed all my work properly and gave me constructive suggestions regarding the project. My mentor frequently contacted me for details regarding my project timeline so that if anything gets wrong we have time to fix that as well.

Community Bonding Period

The Community Bonding Period started after the results were announced. We got to introduce ourselves through a video call and later we also got the opportunity to interact through email. We all get to know each other in the first week and second week of community bonding.

In the first week, my first meeting with a mentor was arranged, we discussed the project roadmap and I was asked to create a design doc for my work and a Trello board to track the project progress.

In the next couple of weeks I went through the codebase thoroughly and fixed some basic error which were mentioned in my project proposal. Some changes were made on the project to keep the crucial things first and then to implement other features.

Coding begins

Once my project roadmap was finalized I started working on my project from the first day itself. The first task was to take the get-started page of the p5.js website and to translate that page into the desired language using Node Js, Grunt and YAML.

Task 1: First Page Test

The first task was to get one page(get started page) up and running for the Hindi language. This took a little bit more time than expected as there were many build failure errors. The next hurdle was to update the Get Started page as per the new format. To convert one page an entire structure has to be created.

I have to define an abbreviation for the Hindi language following the ISO 639–1 standard.
Add an entry with the new language abbreviation at package.json to the languages category -located under the repository root directory.
Creating a new hi.yml file -stored under src/data. This file stores all the key values of pairs of this language.
Creating a new hi.json which will store all the references.
Creating a new menu entry in the src/templates/partials/i18n.hbs and creating a new button to toggle between different languages.

Task 2: Migrating the entire website to p5.js current version

Due to internationalization (i18n), the p5.js website is built from templates that retrieve the text content from data files. The entire site is built with Node JS, Handlebars, and Grunt. There were many PR’s which were merged into the English format of the p5.js website but the Hindi version was outdated and obsolete. To fix these problems I have to commit all the changes to the Hindi website. After this, I have to make a separate new branch so that it up to date with the current English version.

Task 3: Translating all the References and Examples

There are three kinds of pages and each works differently: References, examples, and other web pages. References Pages are built-in English and swapped to other languages using JS on the front-end. Translation content is stored in a JSON object. For every new page, we need to create a key-value pair in the hi.yml file. A single JS template is also needed.

Examples pages are built from templates with handlebars, while examples are stored in JS files. To implement i18n, new templates were created specifically for the Hindi language, so that Examples were rendered properly. Other pages are built from templates in which Handlebars point to the content in the actual language when rendered. P5.js website has over 100+ examples and 200+ References each individual has their own website with code examples and documentation. Each of them was translated to Hindi using handlebars and YAML file formats.

P5.js website has nearly 880 active pages, which are present in different languages. To ensure smooth functioning of all the web pages. I have used Interpolation generated function, Select expression generated function, and Plural expression generated function in JavaScript which reduces load time by 10–20%.

Task 4: Adding new web pages

Many web pages were missing from the Hindi version of p5.js. New handlebars were also added along with a new layout. Along with all the new features, the entire code will be pushed into production and in a few days, the entire website will be online for the Hindi version.

New Branch

I have created this new Hindi branch, as the other Hindi branch was outdated. The Hindi branch was not updated for a long time, many changes were missing from the Hindi branch. Many web pages were missing too. This new main-Hindi branch is forked from the latest main branch of p5.js-website. The main language was cloned first and then the Hindi language was added as per the documentation. Then a new branch called main-Hindi was created to compose all the changes in one place. It has all new changes for all the languages. I have added Hindi translation to this branch so that it can be easily merged into the main branch. I have accumulated all the new changes to this PR so that it is easier to track any new error or to make any new changes to the main-Hindi branch.

p5.js website in action

video link — https://www.youtube.com/watch?v=dcRnZSXqKGQ

What I learned

First of all, I learned the implementation of Node js which is a javascript runtime environment. Node js is primarily used for non-blocking, event-driven servers, due to its single-threaded nature. It was a perfect fit for the i18n of the p5.js website. I learned the importance of event modules and path modules too. Had to fix a lot of bugs upon every build failure which made me prone to reading documentation and using debugging methods in Node js.

Secondly, I get to know the importance of planning and organizing tasks before executing them. When working on a big project, It becomes crucial that every task is properly segregated and planned before the actual work begins. The efficiency of work increases when you have a proper work structure. I created a Trello board for this project where I used to plan my ideas for further work.

link to all the PR’s

Update 20 August 2021 — My final PR is merged and now all the code is in production. Check out the live website https://p5js.org/hi/

THANK YOU ❤️

GSoC’21: Internationalization(i18n) and Deployment of p5.js Final Report