Hello again, everyone! Thanks for the continued lively discussion, new questions, and supporting one another
Here’s some more clarifications that I hope can be useful to both the original askers, and others who are reading!
Question about Technical Roadblocks (Installation)
In the thread above, @Sushant_Bansal is describing having installation issues; thanks @takshittt for jumping in to support!
Installation can sometimes be challenging because each piece of software can require multiple other pieces of software with specific versions. Usually, if an installation guide specifies a version of anything, it is very important to follow that exactly. In this case, the “Manual Installation” p5.js-web-editor installation guide does include nvm use 16.14.2
in step 4. So if you are having problems, please try to follow the steps as precisely as possible; if you are still having problems anyway, then it could be a bug! When you file a bug (“New Issue” > “Found a Bug” under issues of the relevant repository) please make sure to include as much information as possible in your new issue / bug report: which step did you get to in the installation guide successfully? What error output do you see?
Having installation problems is really common, so I hope the above can be helpful more generally too: when in doubt, try to clean up your (digital) workspace, start from step 1 of the installation guide, and document what’s going on so it’s possible to ask for help!
Question about Choosing a Project
In the thread above, @takshittt is asking about: “which project [between the 2 below] best suits my skill set and how I can start making a meaningful contribution. Any guidance on first steps, such as relevant repositories, open issues, or discussions, would be greatly appreciated.” There was also a question about adding ES module support, so I’ll also address that below.
1) Friendly p5.js Reference Translation Tasks. You can check out open “Translation” issues to get a sense of how translation has to be managed currently. This project idea is one that we expect to be medium/hard in difficulty, and that the technical solution is something we are very open to. The current system first generates part of the website (the reference) from the core library code (documentation.js); then the .mdx files in English are built from that; then each language translation is manually added. Thus, updates to content require manual checking of what needs to be updated and where. Meanwhile, translation is typically one of the best ways for newcomers to get involved in open-source, so making any aspect of this much smoother would be really impactful in the community, and could even make it possible to expand language support! So if you’re interested in working with multiple repositories, an integrated workflow over multiple technologies (see the stack in the ideas list), and if you can feel yourself excitedly imagining multiple possible engineering solutions to try out, then this could be the right project for you to consider.
2) User-Friendly Features in the p5.js Editor. This is a project idea is one we expect to be around Medium difficulty, and also has (like all the projects on the list!) great community impact potential. If you’re more excited in crafting an end-user-facing feature, this may be the right project for you to consider.
@takshittt also asked about ES modules; this question/idea is definitely something that a proposal could explore. Let’s say you have a feature idea related to this project (in this example, the ES modules support in p5.js Editor). How to explore this idea?
- First, what’s the motivation? In this example, you already do this by stating that editor currently “limits users by forcing them to place all their code in a single ‘sketch.js’ file. This becomes problematic for larger projects, making it harder to maintain and organise code.” However, can you also find concrete use cases where p5.js projects get large enough to benefit from this? For example, are there community libraries that have examples that can demonstrate the issue that you’re describing? VSCode is already used for p5.js and offers more advanced code editing. The web editor is specifically offering a very simple environment that is easy to share and easy to get started with. Thus, a proposal of this feature could directly consider: is the motivation of this feature consistent with how the p5.js Editor is used by the community? (If there are other motivations you can think of, we are open to fresh perspectives!)
- So with the above in mind: what are the technical possibilities, how difficult would they be to implement, and how difficult would they be to maintain over time? The p5.js Editor is mostly volunteer-maintained, and so as you consider maintainability, it might be useful to look through the “Needs Discussion” issues. As I was writing this response, I actually noticed an open issue directly related to ES modules, so you’d be welcome to also look into what’s been done and discussed about this already!
If others reading this are also considering multiple possible projects, let me know which two you’d like to see compared in this way next!
Question about Feasibility: p5.js Editor Friendly Features
Continuing with the theme of possible features for the User-Friendly Features in the p5.js Editor, @dipamsen asked about feasibility of three specific features.
The way you’ve broken down the technical possibilities is already very informative, and it’s clear you’re thinking of the potential challenges/limitations/roadblocks. It’s possible the the “Needs Discussion” issues might be useful to check out too, just to see previous feasibility concerns in that repository.
For a proposal, you don’t actually need an answer yet, but rather diving deeper into the pros and cons of each approach. For example, running something directly in the browser can be very helpful for educational contexts which tend to have challenges with overuse of wifi by too many machines for too many tasks. So anything that needs really quick and smooth UX benefits from doing as much locally as possible.
Also, with any of these approaches, anyone writing a proposal about this project is welcome to think beyond autocompletion; consider what information would be most helpful. For possible ideas, you can check out the p5.js 2.0 updates thread where there is a lot of discussion about how best to support users of p5.js 1.x to become familiar with major new changes in p5.js 2.0. Is one of the technical solutions to autocomplete (local static analysis) that can help (such as noticing use of preload with 2.x)?
Finally, @dipamsen I’ve checked out GitHub - dipamsen/p5-editor: Online editor for creating p5.js sketches, powered by Monaco, thanks for sharing! To keep investigating, you could check if it is possible to use something like monaco with the current codebase of the p5.js editor with minimal changes, or if requires major modifications. For the GSoC projects, we are looking for projects that are also relatively standalone, and therefore can be a bit more experimental and ambitious, so if it’s not possible to use some tool without major changes in existing codebase, it may be better not as a GSoC project proposal, but as an “Need Discussion” issue in the repository.
Question about Feasibility: Friendly p5.js Sketch Embedder
Lastly, more feasibility questions, from @Mamatha1718 on the p5.js friendly sketch embedder!
Please note that while I’m happy to offer reflections in this public forum, the intent is to help all of you develop your proposal. You should not start working on the project until that part of the the program kicks off in May!
I encourage anyone thinking about this project to check out existing methods of embedding sketches:
- Editable editor with previews, like in the p5.js reference or the tutorials - keep in mind that sometimes people want to include code; sometimes not editable; sometimes not at all. Sometimes people might want multiple sketches on a page with different settings; if it’s a sketch that makes sound, for example, when should it autoplay or not?
- More details on instance vs global mode - based on this, try to create a local testing ground where you embed some sketches into a page!
Keep in mind that one of the most important uses of p5.js is to create interactive works that can be embedded in the browser with a <script>
tag. As you noticed the <iframe>
method is already supported by the p5.js Editor “share” option, so in proposals for this project we’re interested in what you can imagine as a more fully-featured approach, so more focus on what’s possible with <script>
would be exciting to see.
I hope this all helps! I’ll be back again in a couple of days to respond to new questions, and wish you all a nice start to your week.
Best,
Kit