processing / p5.js-web-editor

The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything.
https://editor.p5js.org
GNU Lesser General Public License v2.1
1.32k stars 1.27k forks source link

Library Management #4

Open shiffman opened 8 years ago

shiffman commented 8 years ago

While we ultimately will likely want "library manager" like features we should probably start with p5.dom and p5.sound included by default.

catarak commented 8 years ago

Just added this to master. I'm going to leave this issue open though, as this project still needs a system for managing libraries, stored different from the files that a user can edit. Any suggestions on this, from a ui/ux design perspective or technical perspective are welcome.

aparrish commented 7 years ago

Would it be possible to use Bower (or npm) behind the scenes? (E.g., the "Install Library" button in the interface would actually just call bower install <whatever> for the project behind the scenes, and the "Show Libraries" button would just call bower list, etc.) The integration part might be difficult (especially making it work with files on S3), but you'd get a lot of functionality for free and it seems weird to write a whole parallel system for installing and managing libraries when there are already two fully-featured dependency management infrastructures for Javascript. (Then again, Java Processing made their own library manager instead of just wrapping Maven, so maybe this is a Processing Foundation rite of passage)

catarak commented 7 years ago

For managing libraries, I'm thinking that mostly it would be done using CDNs, since I think a good portion of libraries that people would want to use are already up, with all of their versions. There would probably be some special cases for the p5.js libraries. I guess this issue is incorrectly framed--in my mind, this is more of a design issue.

But for anything that's not on CDN, using bower could be useful!

catarak commented 6 years ago

This is now covered in the new design. See more on Zeplin.

jywarren commented 6 years ago

I'm interested in this! I'm one of the developers of WebJack, for connecting to Arduinos over an audio interface (like a modem), and I think this could make for really nice driverless ~cars~ sensor readings into p5js (i mentioned this at the GSoC summit)

I couldn't find a way to just link to a CDN from the web interface, am I missing something or is this not yet created? What is Zeplin -- the link seems to not work?

I had a couple ideas for how this could work --

  1. first, I was curious how the require() in runkit works: https://npm.runkit.com/webjack
  2. second, and probably easier, splicing in a set of <script> tags based on an array of provided URIs could probably work too. You could have a 'one per line' field that people paste URIs into, which is split by newline and inserted. I'd be happy to give this a try although i'm not deep into React.

Any thoughts on this or was it perhaps already implemented? Thank you, this project is so exciting!

jywarren commented 6 years ago

OMG i just hit Publish and then i found the little > button that lets me edit the index.html. So this is solved!

jywarren commented 6 years ago

https://alpha.editor.p5js.org/jywarren/sketches/rkztwSt8M -- ok, thanks, this works fine for my purposes. Sorry to bother!

catarak commented 6 years ago

hi! glad you figured out how to edit the index.html. the design is definitely imperfect and we are working on something that makes this clearer. you can check out the latest design here: https://scene.zeplin.io/project/55f746c54a02e1e50e0632c3

catarak commented 6 years ago

just learned about Unpkg—could be useful to implement this feature!

tirtawr commented 4 years ago

CDNJS have a pretty extensive search API that could be useful. Plus it's already being used for the default p5 distributions in the index.html file

Searches on NPM can be quite difficult for users since it mostly consists of Node packages. Furthermore, they don't really have a search feature, based on this thread we'll either have to download a cached version of the registry and implement our own search, or we'll have to use something like npms or npm-registry-client. This would be fine, but the abundance of node packages in there could be misleading to some people especially beginners.

aldrinjenson commented 4 years ago

We'd also need to have some list of libraries related to p5 itself (like collision, sound etc).. so is there an API or any other url from where we could get this list as well in addition to npm libraries