After yesterday’s post, I heard from Jan Lehnardt. Jan, Tiffany Conroy, and Marijn Haverbeke are piloting a workshop named JSFAB (JS for Absolute Beginners) that, well, does what it says on the tin. The initial curriculum (source code) was written by Conroy and Haverbeke, who not coincidentally wrote the highly recommended Eloquent JavaScript.

JSFAB has a clever take on this problem: they’re using an in-browser sandbox and editor, and within that environment, they’ve made available some high level drawing functions. This means that students just learn programming principles and JS syntax by jumping in and drawing shapes and graphs right away. This approach neatly sidesteps many of the problems I mentioned in the last post, and seems perfect for “absolute beginners” who don’t know HTML or CSS. Later on, of course, you can go back and teach them how to rip apart and remake web pages; the key thing is that they’re on their way.

On a personal note, I believe that courses like JSFAB have great potential. We are starting to live in a world that is soaking in ambient computing power. Knowing how to program (even a little) means eliminating drudge work. It means taking more control over your world. So with that in mind, I’m really pleased to hear that the JSFAB crew have already had great success with their first workshop in Europe, and are iterating further. If you have feedback for them, I know for a fact they’d be happy to hear from you!

Scattered Notes on Writing a JS Tutorial for Non-programmers

As you might or might not know, I’ve expressed my frustration with the sad state of JavaScript tutorials in the past. Since the universe has not seen fit to fix this problem on its own, I’m finally at the point where I’m working up an actual TOC.

Attention conservation notice: over 900 words collecting some thoughts about a JavaScript book / tutorial for non-programmers.

  • There are a tremendous number of people who know at least some HTML and CSS, but who don’t know any programming languages per se.
  • Included in that count are people who know at some HTML and CSS, and a smattering of jQuery. This is not a knock on jQuery — quite the contrary, I actually think it’s very impressive that jQuery enables non-programmers to sprinkle in UI effects, etc.
  • Still, those who know a smattering of jQuery would also be well-served if they understood JavaScript-the-language.
  • Oddly, although JavaScript seems like it would be a natural next language for people who know HTML and CSS, there isn’t a single JavaScript tutorial out there for non-programmers.
  • Or at least, there isn’t one that’s any good. As previously discussed, searching for JavaScript tutorials brings up a wasteland of confusing, outdated, incorrect crap.
  • It’s actually worse than the situation for HTML, where if you look hard enough, you can find something possibly worth reading.
  • Thus, the actual path people follow is: learn HTML and CSS, learn Ruby, PHP, or Python, and then go back and learn JavaScript.
  • For experienced programmers, good JavaScript resources exist, if you know where to find them.
  • But a lot of what people throw out as introductory resources (MDN, Eloquent JavaScript, The Good Parts) are really introductory resources for programmers.
  • Eloquent JavaScript is the closest thing I know of that kinda sorta works for non-programmers. It’s very well written and covers lots of critical topics. I really, really like it.
  • The wrinkle is that it’s still too complicated. Chapters 1 and 2 work for non-programmers, but after that the book quickly veers off into functional programming geekery and other advanced topics. I feel safe recommending Eloquent JavaScript to programmers, and possibly science or engineering majors with little or no programming experience, but I just don’t think it works as an introduction to programming itself.
  • Writing a guide that teaches non-programmers how to program is tricky, but not impossible. Some people do it brilliantly.
  • What the world probably needs is a Learn JavaScript the Hard Way. But Zed Shaw hasn’t written that book yet, and I’m not sure if he cares to.
  • In any case, a hypothetical Learn JavaScript the Hard Way couldn’t be a straight port of Learn Python the Hard Way, for reasons mentioned below…
  • Problem 1: Printing. Unlike just about every language you can think of, JavaScript in the browser does not have a dead-simple way to write text to the screen. And without a dead-simple way to write text to the screen, it’s awfully hard to get started.
  • There’s alert() — um, no.
  • There’s document.write() — also, um, no. Any guide that trains newbies to use alert() or document.write() should be set on fire.
  • There’s console.log() — better, but I’m not keen on explaining to people that they have to open some inspector or console to see what’s happening. And people who know HTML and CSS really want to be manipulating the page.
  • Or, you could ask people to install Node.js. Node.js is great for backend programmers who want to learn JavaScript — particularly because it decouples JavaScript from the DOM. But it’s nice to not have to ask people to install software to get going. More importantly than that, I think people who know HTML and CSS want to be mucking around with the DOM. That’s the touchpoint between programming and what they already know.
  • Eloquent JavaScript cleverly works around this whole “print” mess by, well, providing a damn print function.
  • In any case, I think there is a way to bootstrap around this. It means we won’t be starting with “Hello World.” Or even, “HELLOSKI.”
  • Problem 2: The most interesting early concept to teach is event listeners. That’s a huge part of why client side JavaScript exists, and it has everything to do with why an HTML/CSS jockey would want to branch out into JavaScript.
  • But this is not simple. You need to know what a function is — this is a mind blowing concept for non-programmers. You need to know what a callback is!
  • Most JavaScript tutorials teach event listeners using the onclick attribute. Partly this is because most JavaScript tutorials were written in 1997 and are total dogshit. But partly this is because using onclick short-circuits the problem of having to grab the element and then attach the listener: complexity is reduced.
  • In a Python or Ruby tutorial, you have the luxury of discussing fundamentals like primitive types, etc. before eventually working their way up to callbacks.
  • I don’t think this traditional approach cuts it when it comes to client-side JavaScript. I think the reader wants to learn how to click a button and have some interesting stuff happen, ASAP. Then you can start sneaking in numbers, string manipulation, booleans, loops, and so on.
  • I think there is a straight line from zero to event listeners that cuts out most of the fat. But I’ll need to try it on some real readers to see if it works.