Hacker News Reader

Comment by ryanianian | Hacker News Reader

This is really cool and would be a great way to introduce programming concepts in an educational setting. Instant-feedback, inline documentation in a narrative style, and running on a browser really lowers the barrier for entry.

I would have loved something like this when I was learning programming in middle-school decades ago.

Since it comes from the guys behind D3 it's not surprising that much of the visuals come from D3. This is really evocative, but it may limit some of the audience for this tool. I would encourage the developers to take some cues from Apple's swift playgrounds and add visuals and sliders for even some of the simpler language constructs like loops and add some "simple" wrapper functions for drawing elementary shapes. This would definitely be a shift from the intended purpose as I see it right now, but it would have the side-benefit of increasing debugability as well.

Great work - look forward to having the occasion to using it.

View on HN

I would have loved something like this while learning to program as well. I mean ... the Ruby REPL was fun, but this sort of thing is just so much more tactile and visual.

We haven't had time to produce as many demo notebooks as we might have liked, but these notebooks really aren't D3-specific in the slightest. They're a reactive flavor of JavaScript, and anything that produces a value or can be rendered to the DOM will work.

For example, here are a whole mess of Plotly charts: https://beta.observablehq.com/@jashkenas/plotly-js

Here are some (wild) WebGL, Three.js and regl sketches: https://beta.observablehq.com/collection/webgl

And here are some simple native inputs you can use to control your sketches: https://beta.observablehq.com/@jashkenas/inputs

Remember — a "slider" here isn't anything special. It's just a chunk of DOM that produces a number as a value. It can be replaced with anything else you can imagine that produces a number as a value. There's no API there ;)

Oh that's cool I thought there were special hooks with D3. The native inputs demo seems really compelling especially in a learning environment. I'll definitely play with this and bring it into my next mentoring group meeting. (They'll be so glad to get away from scratch!)

One cool thing that Swift playgrounds let you do is advance program state through loops and other flow-control line-by-line using a slider. I think they have to have cooperation with the compiler/runtime to make this happen. (I'm also not sure how truly useful it is after a few days of learning the basics.)

I suppose you could do something similar with the native inputs but not using native syntax. What I'm thinking would be a massive undertaking I realize - it's cool that this offering generates so many "ooh and what else" ideas.

Yes, it's absolutely worth exploring further — and we definitely have notions for ways to further expose and make interactive the running state of the notebook.

But for starters: You can do something similar to expose the internal state of loops and flow-control constructs by just using JavaScript's generators.

Here's an extremely simple example that slowly yields the value of a loop's `i` variable:

https://beta.observablehq.com/@jashkenas/flow-control-demo-w...

If you remove the delay, it'll instead yield `i` at 60fps.

The sliders on https://beta.observablehq.com/@mbostock/clifford-attractor-i... don't work for me, the sliders don't move. If I double-click a cell and edit the value, I get an updated graphic, but the sliders won't move.

Chrome 63.0.3239.132, OS X 10.13.3

I had the same problem and it turned out to be because I had the experimental Strict Site Isolation flag set in Chrome. Try turning that off.

Reply on news.ycombinator.com