6 ms·

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 th

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.

hugs 9y ago
Which method (Chrome Dev Tools, Node, etc.) did you teach to your students? Any other online resources you recommend?
- ryanmarsh 9y ago
  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.
0xCMP 9y ago
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.
- yorwba 9y ago
  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.
  - voltagex_ 9y ago
    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.
    - somebehemoth 9y ago
      This is a cool idea. I hope you do this and I happen upon it one day.
      - voltagex_ 9y ago
        I probably should just start an "as yet unimplemented ideas" section in my blog.
soneca 9y ago
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
blacksmith_tb 9y ago
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/appendix01.md https://github.com/bpesquet/thejsway/blob/master/manuscript/...
- mgkimsal 9y ago
  > 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.
mstade 9y ago
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.
- spyhi 9y ago
  > 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.
cr0sh 9y ago
> "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)...
tomc1985 9y ago
You could start with, "type 'javascript:alert(2+2);'" in your address bar
- jdnier 9y ago
  Works in Firefox, not in Chrome (at least on MacOS).
  - tomc1985 9y ago
    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.
    - striking 9y ago
      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...
  - johnhenry 9y ago
    Works if you type it out. If you paste it, the "javascript:" part will be omitted.
    - abhinickz 9y ago
      Above works even if you paste it.
  - yorwba 9y ago
    What about data:text/html,<script>alert(2+2)</script> ?
    - ConfucianNardin 9y ago
      Works in both Chrome and Firefox.
Cthulhu_ 9y ago
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.
nailer 9y ago
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.
- michalskop 9y ago
  Shouldn't the next question be obvious? - "What is a REPL?"
  - canes123456 9y ago
    Also, doing things in a REPL usually pretty different.
bpesquet 9y ago
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.
greenmana 9y ago
https://dev.to/marcuscreo/the-4-letter-word-word-that-makes-my-blood-boil https://dev.to/marcuscreo/the-4-letter-word-word-that-makes-...

hugs 9y ago

Which method (Chrome Dev Tools, Node, etc.) did you teach to your students? Any other online resources you recommend?

ryanmarsh 9y ago
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.

0xCMP 9y ago

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.

yorwba 9y ago
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.
- voltagex_ 9y ago
  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.
  - somebehemoth 9y ago
    This is a cool idea. I hope you do this and I happen upon it one day.
    - voltagex_ 9y ago
      I probably should just start an "as yet unimplemented ideas" section in my blog.

soneca 9y ago

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

blacksmith_tb 9y ago

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/appendix01.md https://github.com/bpesquet/thejsway/blob/master/manuscript/...

mgkimsal 9y ago
> 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.

mstade 9y ago

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.

spyhi 9y ago
> 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.

cr0sh 9y ago

> "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)...

tomc1985 9y ago

You could start with, "type 'javascript:alert(2+2);'" in your address bar

jdnier 9y ago
Works in Firefox, not in Chrome (at least on MacOS).
- tomc1985 9y ago
  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.
  - striking 9y ago
    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...
- johnhenry 9y ago
  Works if you type it out. If you paste it, the "javascript:" part will be omitted.
  - abhinickz 9y ago
    Above works even if you paste it.
- yorwba 9y ago
  What about data:text/html,<script>alert(2+2)</script> ?
  - ConfucianNardin 9y ago
    Works in both Chrome and Firefox.

Cthulhu_ 9y ago

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.

nailer 9y ago

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.

michalskop 9y ago
Shouldn't the next question be obvious? - "What is a REPL?"
- canes123456 9y ago
  Also, doing things in a REPL usually pretty different.

bpesquet 9y ago

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.

greenmana 9y ago

https://dev.to/marcuscreo/the-4-letter-word-word-that-makes-my-blood-boil https://dev.to/marcuscreo/the-4-letter-word-word-that-makes-...