Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DOM examples not executed in the reference #4645

Open
lm-n opened this issue Jun 18, 2020 · 14 comments · May be fixed by #4819
Open

DOM examples not executed in the reference #4645

lm-n opened this issue Jun 18, 2020 · 14 comments · May be fixed by #4819

Comments

@lm-n
Copy link
Member

@lm-n lm-n commented Jun 18, 2020

Most appropriate sub-area of p5.js?

  • Color
  • Core/Environment/Rendering
  • Data
  • Dom
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • WebGL
  • Other (specify if possible)

Feature enhancement details:

Currently, several DOM examples are not executed in the reference. It is always helpful to have the example code executed so that novice programmers can get a clear idea of how the code works. For some examples, making them work and look good might require small changes to the code, especially when canvas size is greater than 100x100 and when DOM functions add HTML elements that take a lot of space (i.e.: go beyond 100x100 px).

Here's a list of the examples that could be executed:

@processing processing deleted a comment from welcome bot Jun 18, 2020
@1lias
Copy link

@1lias 1lias commented Jun 20, 2020

Hi 👋 For this issue I would need to edit the code here - p5.js-website - correct?

@lm-n
Copy link
Member Author

@lm-n lm-n commented Jun 20, 2020

Hi @1lias! I hope you and your loved ones are safe and healthy! The reference is generated in the p5.js repo you can learn more in the inline documentation section of the contributor docs. The code for all the DOM examples in the reference mentioned above is in p5.js/src/dom/dom.js.
Hope this helps!

@limzykenneth
Copy link
Member

@limzykenneth limzykenneth commented Jun 20, 2020

The reference examples for dom (or any reference example) won't render if in the <div> tag that contains the example code has the class norender. To get them to run, just remove that class.

@lm-n
Copy link
Member Author

@lm-n lm-n commented Jun 20, 2020

I think it will also require re-thinking some of the examples so that they look good once rendered on the site.

@1lias
Copy link

@1lias 1lias commented Jun 20, 2020

Hi @1lias! I hope you and your loved ones are safe and healthy! The reference is generated in the p5.js repo you can learn more in the inline documentation section of the contributor docs. The code for all the DOM examples in the reference mentioned above is in p5.js/src/dom/dom.js.
Hope this helps!

Thankfully we are all safe and sound @lm-n 🙏 I hope you find yourself in a similar position. I understand a bit better now what needs to be done. In my understanding some parts of the documentation have examples and some do not have. I should try to create some examples for the ones without them. Is there any way I can see the results on my local machine?

@limzykenneth
Copy link
Member

@limzykenneth limzykenneth commented Jun 21, 2020

To view the reference you can run grunt yui:dev which will spin up a server that serves a pared down version of the final reference. It isn't very usable at the moment though. I have a PR filed yesterday that fixes it #4649, you can use that or wait for it to be merged.

@pedrotpo
Copy link

@pedrotpo pedrotpo commented Aug 19, 2020

Hello! Wanted to see if I could tackle some of the examples (except for the ones @1lias might be currently working on, of course). Are there any examples up for grabs?

@limzykenneth
Copy link
Member

@limzykenneth limzykenneth commented Aug 19, 2020

@pedrotpo As far as I know, there isn't any of them that are being worked on. If you like, leave a comment here with a shortlist of examples you are working on then we can track who is working on what. Thanks!

@Aloneduckling
Copy link

@Aloneduckling Aloneduckling commented Sep 19, 2020

Hello! I am working on this issue.
I have already worked on the code (removed norender class from the required divs). The examples are now executing. But when I preview the website locally there seems to be some problem with the CSS. I have not changed any code exept the one mentioned.
dispProblem

Is this Ok?

@limzykenneth
Copy link
Member

@limzykenneth limzykenneth commented Sep 19, 2020

I'm doing some work on the CSS at the moment as things are not looking right on the website. Maybe you will need to wait until that is done, I'm estimating a couple days to finish.

@Aloneduckling
Copy link

@Aloneduckling Aloneduckling commented Sep 19, 2020

Ok! I will wait then.

@limzykenneth
Copy link
Member

@limzykenneth limzykenneth commented Sep 28, 2020

@Aloneduckling The changes are merged now so you can start with this if you like.

@Aloneduckling
Copy link

@Aloneduckling Aloneduckling commented Sep 29, 2020

Ok thanks!

@Aloneduckling Aloneduckling linked a pull request that will close this issue Oct 1, 2020
2 of 3 tasks complete
@Aloneduckling
Copy link

@Aloneduckling Aloneduckling commented Oct 1, 2020

hello! I have created a pull request. Please check it.
Thanks,
Aloneduckling

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

5 participants
You can’t perform that action at this time.