{"action":"created","issue":{"url":"https://api.github.com/repos/processing/p5.js-website/issues/198","labels_url":"https://api.github.com/repos/processing/p5.js-website/issues/198/labels{/name}","comments_url":"https://api.github.com/repos/processing/p5.js-website/issues/198/comments","events_url":"https://api.github.com/repos/processing/p5.js-website/issues/198/events","html_url":"https://github.com/processing/p5.js-website/issues/198","id":117806219,"number":198,"title":"Turn snippet renderer into a standalone widget","user":{"login":"toolness","id":124687,"avatar_url":"https://avatars.githubusercontent.com/u/124687?v=3","gravatar_id":"","url":"https://api.github.com/users/toolness","html_url":"https://github.com/toolness","followers_url":"https://api.github.com/users/toolness/followers","following_url":"https://api.github.com/users/toolness/following{/other_user}","gists_url":"https://api.github.com/users/toolness/gists{/gist_id}","starred_url":"https://api.github.com/users/toolness/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/toolness/subscriptions","organizations_url":"https://api.github.com/users/toolness/orgs","repos_url":"https://api.github.com/users/toolness/repos","events_url":"https://api.github.com/users/toolness/events{/privacy}","received_events_url":"https://api.github.com/users/toolness/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-11-19T12:43:57Z","updated_at":"2015-11-20T11:37:39Z","closed_at":null,"body":"Hey, this is an idea I've been throwing around in my head for a little while... it's a bit vague but I'm curious if there's any interest in it.\r\n\r\nBasically, as evidenced from issues like https://github.com/processing/p5.js/issues/1111, https://github.com/processing/p5.js-website/issues/186, https://github.com/processing/p5.js-website/issues/196, https://github.com/processing/p5.js-website/issues/188 and others, [`render.js`](https://github.com/processing/p5.js-website/blob/9e1d104214b785eccc8c2e74fbc4c736288d72bc/js/render.js#L169-L171) frequently has regressions. In fact, there's even a [comment](https://github.com/processing/p5.js-website/blob/9e1d104214b785eccc8c2e74fbc4c736288d72bc/js/render.js#L169-L171) in there describing it as a \"hacky script\"!\r\n\r\nBecause this functionality is such an important part of learning p5, and because tinkering with examples is fun, I thought it might be useful to actually factor out the example runner into its own reusable widget that could be embedded not only in the reference documentation, but also in other websites (e.g. blog posts). Some things that could be improved upon include:\r\n\r\n* Using an iframe for rendering the sketch. I believe this would significantly reduce the frequency of regressions, and also make the tinkering experience more like actually using p5.\r\n* Using a [CodeMirror](http://codemirror.net/) widget for the editor to provide syntax highlighting.\r\n* When not in \"edit\" mode, hyperlinking p5 methods/properties to their reference documentation.\r\n* Providing friendly, highly visible errors when things go wrong.\r\n* Adding a test suite to ensure that things don't break.\r\n\r\nObviously the scope shouldn't bloat so much as to suddenly become [p5.js-editor](https://github.com/processing/p5.js-editor) or anything, but there's lots of room for affordances that can enhance learning.\r\n\r\nThoughts?"},"comment":{"url":"https://api.github.com/repos/processing/p5.js-website/issues/comments/158369683","html_url":"https://github.com/processing/p5.js-website/issues/198#issuecomment-158369683","issue_url":"https://api.github.com/repos/processing/p5.js-website/issues/198","id":158369683,"user":{"login":"toolness","id":124687,"avatar_url":"https://avatars.githubusercontent.com/u/124687?v=3","gravatar_id":"","url":"https://api.github.com/users/toolness","html_url":"https://github.com/toolness","followers_url":"https://api.github.com/users/toolness/followers","following_url":"https://api.github.com/users/toolness/following{/other_user}","gists_url":"https://api.github.com/users/toolness/gists{/gist_id}","starred_url":"https://api.github.com/users/toolness/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/toolness/subscriptions","organizations_url":"https://api.github.com/users/toolness/orgs","repos_url":"https://api.github.com/users/toolness/repos","events_url":"https://api.github.com/users/toolness/events{/privacy}","received_events_url":"https://api.github.com/users/toolness/received_events","type":"User","site_admin":false},"created_at":"2015-11-20T11:37:39Z","updated_at":"2015-11-20T11:37:39Z","body":"Ok, sounds good! Thanks for clarifying the requirements--I actually wasn't aware of the one about code snippets.\r\n\r\nThat makes sense about the standalone widget. When you say \"all the work still to be done on the editors\", are you referring to p5.js-editor or something else?\r\n"}}