<div dir="ltr"><div><div><div>tl; dr: linting, dark theme, 2 space indent. snippet here:<br><br>    <a href="https://gist.github.com/bollwyvl/10440652">https://gist.github.com/bollwyvl/10440652</a><br></div><div><br>or hot-load it:<br>
<br>    %%javascript<br>    require(["<a href="http://goo.gl/5OdkGb">http://goo.gl/5OdkGb</a>"], Object);<br></div><div><br>i love the new notebook features! great job on 2.0, everyone! one observation is that the notebook really is the best place, from a workflow point of view, to prototype widgets FOR the notebook, so i end up writing a lot of javascript there.<br>
<br>however,  the environment is pretty unforgiving. the "syntax error someplace, go look at the 
log" error is not great, especially when it gets swallowed by the comms layer.<br><br></div><div>also, as anticipated in the ipep, it is somewhat confusing to be context-switching back and forth between python and javascript.<br>
<br></div><div>finally, given that you *start* at pretty deep callback nesting (`require`, `extend(`, `update`), and libraries like d3 make nesting even more inevitable, I wanted less whitespace.<br></div><div><br>here is a little script I have been dinking around with to get a more supportive javascript editing environment for hacking on widgets:<br>
<br><a href="https://gist.github.com/bollwyvl/10440652">https://gist.github.com/bollwyvl/10440652</a><br></div><div><br>feedback welcome!<br><br></div><div>features<br></div><div>- per-keystroke linting (async and throttled, though, so it doesn't seem to cause any issues)<br>
</div></div><div>- different theme<br></div><div>- indent (2 spaces)<br><br>limitations: <br>- it isn't smart enough to switch 
the options back if you change out of javascript mode, but switching to,
 say, markdown mode and back to code takes care of it.<br>- it 
"leaves no trace" which means it can't tell if it has already been 
installed.. so running it multiple times is probably bad (but codemirror
 is pretty good about it)<br><br>next steps<br></div><div>gui: <br>- a toggle button to enable this mode<br></div><div>- switches for jshint options: semicolons, strict mode, etc.<br></div><div>- theme switch<br></div><div>
<br>autocomplete:<br>looking through the codemirror demos, the `tern` stuff is also interesting:<br>  <a href="http://codemirror.net/demo/tern.html">http://codemirror.net/demo/tern.html</a><br></div><div>but i didn't want to wade into more keyboard mapping issues just yet. however, maybe even the baseline javascript hinter that looks at the running environment would be pretty great.<br>
<br>hinting:<br>`jshint` is great for the basics: broken syntax, missing semicolons, strict enforcement, etc, but it kind of does what it does. `eslint` looks very nice: perhaps the "widget best practices" could be codified into some design rules like<br>
  "warn on change of `this.model` in `update`"<br>i don't know if it's 1:1 compatible with codemirror's jshint plugin, though, so it make take some rework.<br><br></div><div>cheers,<br>nick<br></div>
</div></div>