Add a basic console

[toolness]

As @indefinit metioned in https://github.com/processing/p5.js-website/issues/198#issuecomment-207504978, it'd be nice to have some kind of console in the widget. Right now we show the last error that occurred in the "status bar" at the bottom of the widget, but that's it.

We talked a bit about web consoles in a recent p5 working group meeting, and noted a few things about the various web-based tools out there that have consoles:

• Code that "spams" the console can significantly slow down web-based consoles in ways that they may not slow down built-in browser tools. For example, codepen.io's console just stops working after a lot of stuff has been logged to it. So figuring out workarounds for this might be nice, e.g.:
  • Only keep the latest n console messages, throwing away the older ones, so that the page's DOM doesn't explode in size.
  • If multiple identical console messages are logged consecutively, do what most built-in browser tools do: add a "badge" next to the original console message indicating the number of times it's repeated, rather than adding a whole new row. This is both nicely usable and keeps the DOM footprint nice and small.
• One of the best things about browser consoles is the ability to log a JS object and interactively explore it in the console. It'd be nice to have this kind of functionality, but it's also rather complicated. One idea I mentioned in the meeting was actually developing a separate console widget that could be reused in multiple projects, including this one.

[toolness]

Er, on the other hand, I should also note that the conversation we had at the p5 working group was about the console for the web-based IDE, which is actually quite a different use case for this snippet editor. The consoles of most web-based tools do work okay for very simple programs, and it's likely this widget will only really be used for tiny sketches, so we can probably get away with providing something fairly simple that doesn't scale.

[indefinit]

Ah ok this all makes sense. I tried messing around with my fork of your widget but I'm not sure if I'm good enough at React/Typescript to understand how one would even evaluate console log messages. One very hacky workaround I could think of would be to redefine the println function so that instead of aliasing console.log it just passes the value along to the innerHTML of a dom element, however I don't think that's a very futureproof solution.

[toolness]

I tried messing around with my fork of your widget but I'm not sure if I'm good enough at React/Typescript to understand how one would even evaluate console log messages

Oy, sorry about that. :disappointed: I should have considered the higher barrier to entry using React and TypeScript would incur before starting this project... At the same time, they are making development a lot less painful for me, so maybe I could write a mini-guide on getting up-to-speed with these technologies. Would that be helpful?

[shiffman]

I'd certainly be curious for that guide!

[toolness]

@shiffman I took a stab at the beginning of a tutorial here, would love your thoughts!

https://github.com/toolness/p5.js-widget/wiki/A-React-Tutorial-for-p5-Programmers

[shiffman]

This is great! One thing I might be curious for is some context. What role does react play in p5.js-widget and why did you choose to use react?

The other piece of advice I have (and I'm not 100% sure about this) is that for beginners it's sometimes helpful to see elegantly written compressed code broken out in more long-winded ways, i.e. instead of something like:

var Sketch = React.createClass({ . . . . . . });

You could write:

var component = { . . . . . . };  // What should this variable be called?
var Sketch = React.createClass(component);

And then perhaps condense it in a later state.

The reason I'm not sure about this is b/c these longer-winded ways of writing things don't seem to be typical JS style (and I'm not a JS native), but I find that when teaching starting without anonymous functions (for example) and then moving into them often helps students understand the pieces of a program.

[toolness]

Awesome, thanks for the advice!!

I added a section here providing some context, does it help?

https://github.com/toolness/p5.js-widget/wiki/A-React-Tutorial-for-p5-Programmers#why-react

[toolness]

Just added a What is React? section too!