P5.js: easier code contributions + reviews via the online one click setup

[nisarhassan12]

Hi. I work for https://gitpod.io (An online IDE which is free for Open Source) and we're currently on a mission to simplify contributors onboarding for popular Open Source projects via fully automating the development setup.

In case of this project as specified in #4859 Anyone would be able to start a workspace in one-click where Gitpod will automatically:

• clone the p5.js repo.
• install all the dependencies i.e via running npm ci.
• run npm run grunt and npm run dev in separate terminals.

All of this can be helpful for newcomers/beginners i.e the can start in just a single click without having to set anything up.

You can give it a try on my fork of the repo via the following link:

https://gitpod.io/#https://github.com/nisarhassan12/p5.js

This is how it looks:

A lot of projects out there are already using Gitpod to simplify contributors/maintainers onboarding experience some of them are:

• https://github.com/freeCodeCamp/freeCodeCamp
• https://github.com/facebook/docusaurus
• https://github.com/mozilla/pdf.js/
• https://github.com/gatsbyjs/gatsby/
• https://github.com/mobxjs/mobx/

a subset of them can be found at https://contribute.dev

How would this new feature help increase access to p5.js?

Anyone interested in contributing to or playing around with the p5.js codebase can start with a single click i.e they don't have to: clone the repo and then make sure that they have correct version of Node installed and then install the dependencies and then finally start coding in the editor, with Gitpod everything is automated with a single click.

This can be quite helpful for those contributors who are on slow internet connections or low-end devices i.e Gitpod only takes up as much memory or computing power as a single browser tab(process) would which is a lot more efficient than running a Code Editor, Some Node tasks in a terminal and in some cases a web browser all at the same time.

For maintainers, it allows them to review changes online without the need of switching contexts and so on i.e to review and test the changes you don't have to pull the code from the PR branch and then re-install the dependencies if the dependencies in the Prs were changed or updated.

With the Gitpod app installed you can enable comments like the following in the PRs:

see https://github.com/freeCodeCamp/freeCodeCamp/pull/40071 for instance.

Most appropriate sub-area of p5.js?

• [ ] Accessibility (Web Accessibility)
• [ ] Build tools and processes
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [ ] Events
• [ ] Friendly error system
• [ ] Image
• [ ] IO (Input/Output)
• [ ] Localization
• [ ] Math
• [ ] Unit Testing
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Other (specify if possible)

New feature details:

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[limzykenneth]

I personally am hesitant to include additional configs that are not directly required in the development of the project in the repo. Things like .eslintrc directly helps with the build; .editorconfig works across any editors that supports it creating a more seamless development experience; .github contains automated CI that ensures code contributions pass tests etc. I'm not too fond of .vscode being a vscode only config but that's just my personal opinion. That's the similar case here with gitpod needing to add two configuration files that is specific only to anyone who uses gitpod.

This is probably too much work but I wonder couldn't the configurations be saved on gitpod itself and whenever someone works on a project the same config can be retrieved from gitpod's server instead of saving these configs in the repo of the projects themselves? Then there's also no need to file this as a new feature with its associated procedure that we require. Ultimately, if hypothetically another similar service comes to us that wants to add additional service specific configs into the repo, it adds too much noise to anyone who isn't developing on these platforms.

[limzykenneth]

@nisarhassan12 I just found out about definitely-gp and couldn't the configurations all live in this repo instead? I can see it is inspired by definitely-typed which is a great project which while p5.js doesn't maintain its own typescript definition in this repo, it is still available from definitely-typed and users of typescript gets to use it for type checking with p5.js. I think this idea would gain more support from open source projects like ours where developer time is limited rather than adding more config files that we need to maintain ourselves.

I'm leaving this open for any further comments for another day.

[nisarhassan12]

I just found out about definitely-gp and couldn't the configurations all live in this repo instead?

Thanks, @limzykenneth The point is to keep the configuration versioned alongside your project (same as with a CI file).

I will make the PR for moving the config files to definitely-gp.

[nisarhassan12]

@limzykenneth I have made a Pr to add this repo to definitely-gp https://github.com/gitpod-io/definitely-gp/pull/60 and in order for the test suite to work in Gitpod, this change has to be merged https://github.com/processing/p5.js/pull/4859/files#r519135412.

[lmccart]

thanks for raising this @nisarhassan12 and nice find @limzykenneth. this single change that needs merging looks good to me, but I'll let @limzykenneth test first on linux.