Hacker News new | ask | show | jobs
by ryanmarsh 3253 days ago
I just got home from teaching JavaScript to a room full of people who've never written a line of code in their life.

This book is missing something critical that most intros to JavaScript overlook:

How does the student set up the plumbing and run their code?

It's amazing how much of a hump this is for many trying to get started. It also amazes me how oblivious most of us programmers are to it.

"Just open Chrome Dev Tools" or "put this in a file and run Node" are really strange computer tasks to someone who has never typed and executed code.

11 comments

Very true. Or things like "download and install git".

Oh wait you're on a mac you need Brew. But you're on windows? You're gonna need X. You're using linux and still don't know? (e.g. Parent installs linux on a computer for their child to learn programming on (e.g. buys them a rpi) )

Lots of "setup" stuff needs to be explained or at least guided through for a from scratch approach, but also needs to be easy to skim and skip if the person learning already knows how to do it.

Sometimes I fantasize about a platform for tutorials on "how to do X using Y if you know Z" where prerequisites would be linked wiki-style, but disambiguated for the learner. If they are on Windows and use cmd.exe as their shell, command-line examples would be adapted to that, while someone using bash on Linux would get fitting examples as well. If they already know how to do a part, they get just a short summary instead of lengthy explanations.

Unfortunately, you'd need a lot of content before something like that would take off, and just specifying a few options while otherwise relying on the reader to figure out any differences is simply easier for a writer and still good enough for most learners.

A few times I've visualised this as a tech tree like you see in some RPGs and RTS games. I'm not an artist but I'd love to try sketching this out for a few "trees" at some point.
This is a cool idea. I hope you do this and I happen upon it one day.
I probably should just start an "as yet unimplemented ideas" section in my blog.
I came here to write this exactly. This looks like a nice resource, the tone is friendly and inviting and the topics are introduced at a nice pace. Then I thought about my cousin who I've been trying to teach to program a bit. She's interested and she's smart, she understands how things work at a conceptual level and she can design an algorithm. But if I just give her some JS and ask her to run it she'll stare blankly right back at me.

The introduction needs to talk about prerequisites, setting up for following along way before getting into the topics. Right now it's just a (broken) link to the appendix, which I don't think is good enough.

I like this overall though, it's good stuff. I'm going to try and find some time for a PR to change the introduction into something I think would be better for a newbie, and if translations are welcome I might just work on a Swedish version.

> But if I just give her some JS and ask her to run it she'll stare blankly right back at me.

Exactly. I know how to program, if programming means designing an algorithm to achieve a task and returning the result...but even though I'm most of the way through my CS program, I don't know how to do a lot of the stuff necessary to make that program useful in the real world. I know I'm missing that and I'm learning on my own, but I'm really bothered there hasn't been much emphasis so far on how to deploy the program in a real-world environment and integrate it with an ecosystem of programs, such that laypeople can use it. Algorithms and programming are only a small piece of the puzzle, and a lot of people won't have senior developers to guide them.

I see there's a section on Environment Setup[1] though personally I might be tempted to just link to other tutorials instead (which the author also does, I see).

1: https://github.com/bpesquet/thejsway/blob/master/manuscript/...

> though personally I might be tempted to just link to other tutorials instead

short term, perhaps, but longer term, keeping it in one voice, and making sure those links don't change/disappear is valuable.

Which method (Chrome Dev Tools, Node, etc.) did you teach to your students? Any other online resources you recommend?
Both. Node and chrome dev tools. Mostly VS Code plus some plugins plus node. Easiest way to give them a working, comprehendable and debuggae stack.
You could start with, "type 'javascript:alert(2+2);'" in your address bar
Works in Firefox, not in Chrome (at least on MacOS).
What about

  data:text/html,<script>alert(2+2)</script>

?
Works in both Chrome and Firefox.
Doesn't work in Chrome (edit: or Firefox for that matter) for Windows either... that's a shame. Abusing javascript: is a really useful trick for lots of little hacks.
It's also an attack vector for hacks. You can enable it on some browsers if you please, but having it off by default is sensible...
Works if you type it out. If you paste it, the "javascript:" part will be omitted.
Above works even if you paste it.
As a teacher myself I know this firsthand and I agree with you.

Unfortunately, text is not a good medium to describe actions. A text-based environment setup tutorial ("double-click on this icon", "create this file in that folder", and so on) is tedious and ultimately inefficient. A screencast is certainly a better solution there. I might create one later.

Coding online with tools like CodePen and Glitch is another quicker and simpler solution for a complete beginner. This option is described in the book appendix.

I agree. Recently started learning to code and I could see how tutorials aimed at beginners assumed I would not only know, but be familiar with stuff like terminal/console, repository, IDE, etc
Shouldn't the answer be obvious?

Every Python tutorial: type 'python' and enter commands into the REPL.

Every Ruby tutorial: type 'ruby' and enter commands into the REPL.

Every Exlixir tutorial: type 'iex' and enter commands into the REPL.

Every Perl tutorial: type 'perl' and enter commands into the REPL.

So for JavaScript: type 'node' and enter commands into the REPL.

Shouldn't the next question be obvious? - "What is a REPL?"
Also, doing things in a REPL usually pretty different.
> "Just open Chrome Dev Tools" or "put this in a file and run Node" are really strange computer tasks to someone who has never typed and executed code.

While not a perfect answer to the issue, I often tend to wonder whether or not we lost something in the transition from traditional microcomputers (Apple IIe, Commodore, TRS-80, etc) to the PC era...?

Actually, even in the early PC era, the PC booted to ROM BASIC; this was how personal microcomputers worked.

That said, in the very early history of personal computing, with machines like the Altair, IMSAI, and Sol - these machines "out of the box" (so to speak) didn't drop immediately into a ROM BASIC or "monitor"; they usually had to be "booted" off of some paper tape or other storage media hosting the boot process (I wasn't around during that period, but I wonder if that was only a part - if you then had to "bootstrap" your way up the stack to get to something useful? I know on the Altair, unless you had it set up in ROM to boot from, you had to hand-toggle some initial boot code in just to read the larger boot process from paper tape). All of this process was virtually identical to how commercial and larger systems were booted.

But the Apple changed this, and made the "personal microcomputer" accessible to the general public. Now, they could power it on, and get to a prompt of some sort. It still didn't do much, but it wasn't as arcane. All you had to do was type some stuff...and...you got something in return: A recipe filing system, a calendar, a poem, a maze, a game of some sort (Hunt the Wumpus!), etc.

This continued to be the case for (about) a couple of decades - the first real crack in this was the introduction of the Macintosh, but most people stuck with the other systems, with the Mac relegated to the desktop publishing realm mostly (at which it really excelled). Things started to really change in the late 1980s and early 90s - mainly because of the introduction of more usable versions of DOS and (later) Windows. Thus, the PC era was born.

People began to stop being creators (of software) and started to become consumers instead. Not that this was necessarily a bad thing - there were still creators of course, but this marked a split; there were now two distinct camps being formed.

With this, though, began the difficulty in teaching programming - if you didn't know how to get to the interpreter or compiler, you would have a difficult time learning.

So here we are today. Fortunately, the answer seems to be coming from the web: There are more than a few sites out there that let you examine, edit, and run code all from your browser, for more languages than you might have thought existed (and new ones are added constantly). It isn't the same as it was (from when I was a kid), but maybe in a way it is better: Help - whether from others or from some other resource, is just a few clicks away (no longer do you have to thumb thru magazines or books trying to formulate an answer)...

I disagree with the "People began to stop being [creators/hacker]" part - the existing people didn't change, the market OPENED UP to allow people who were not hackers and computer experts to be computer users. This is a good thing; otherwise computers would have remained a niche hobby like ham radio or woodcarving.

You're right that the average computer owner is not as savvy about the internals as before, but that's just because the pool of computer owners has expanded so much, on account of the simpler and consistent and more learnable interfaces.

Agreed. PCs scaled to billions of users. Programming knowledge scales to a much lower level, I believe there's only millions of programmers or at best tens of millions.
PC only booted into ROM BASIC if it couldn't find a floppy (or, later, hard drive) to boot from. Which was not usually the case, so most users wouldn't be familiar with ROM BASIC even when it was there.

The command prompt, I think, is still essentially programming - you issue commands, they take parameters and produce results. Batch files / shell scripts are outright programs, and any moderately advanced DOS user would have to deal with them.

NodeJS could do with offering a simple UI-based runtime, like a stripped version of Atom or VS Code, preconfigured to just run whatever's on screen.