Newbie Syntax Blindness

For the very first step of the very first challenge that learners do in our programming curriculum, they are given one instruction: type a piece of code exactly as it's displayed.

The displayed code is pretty simple, a single command:

rect(80, 70, 60, 240);

...well, it's simple to those of us who know programming. But for somebody who's never programmed before, it's not necessarily that simple. It's a mix of letters and symbols combined in a way that's completely new to them, and even when the goal is just to copy the line exactly, it's easy to get confused. A newbie does not realize what's important about the syntax of a programming language - they don't realize that capitalization matters, they don't know that a misplaced comma can be a fatal error, they don't distinguish between different types of brackets. That's probably because they're coming from human languages, where much of that doesn't matter, and they haven't re-trained their brain to realize what matters in a programming language.

To give you a concrete idea of what I'm talking about, here are specific examples of syntax errors that new programmers make with that single line of code:

(10, 70, 60, 240)           // Not starting with function name
rect{80, 70, 60, 240};      // Using {} instead of ()
rect[80, 70, 60, 240];      // Using [] instead of ()
rect( 80 , 70 , 60 , 240 ), // Using comma instead of semi-colon
rect(140, 170,120, 140, )   // Extra comma
rect()70,60,240);           // Extra close paren
rect;(140, 170, 260, 484);  // Mis-placed semi-colon

Now, we send all user code through JSHint, so they will see an error message pop up when they make a mistake like this. But for many users making these sort of errors, that error message wasn't enough to help them figure out the error, and they clicked our "Help" button to report their confusion. For each of these mistakes, I put them in the editor myself, saw the error that popped up from JSHint, and thought to myself, "Is that what *I* would tell a learner if I saw them make that mistake in person?" For many of them, the answer was no. I would give them a much more specific, helpful message.

That's not because JSHint is bad - it's fantastic - but because I know exactly what their end goal is, I can offer a more informed message than JSHint. JSHint has to offer messages for all possible JS that someone could write, and can't assume it knows anything about their intentions. There are many ambiguous errors that one can make in JS, and the JSHint messages have to equal the ambiguity of those errors.

We can't be emailing every learner that encounters one of these syntax errors with our hand-curated custom messages, as we now have thousands of students going through these challenges every day — that just wouldn't scale! So we've added another set of messages that override JSHint syntax messages, are specific to a challenge, and are served based on matching a RegEx of the code. These messages provide more meaningful, newbie-friendly syntax help, and will hopefully help learners get over the beginner syntax hump.

Here's a before/after of our messages:

Their code	Old message	New message
(10, 70, 60, 240)	I thought you were going to type an assignment or function call but you typed an expression instead.	Make sure you specify the command name, rect, before the parenthesis.
rect{80, 70, 60, 240};	I thought you were going to type an assignment or function call but you typed an expression instead.	Make sure you use parenthesis around the numbers, *not* curly brackets.
rect[80, 70, 60, 240];	I thought you were going to type ] to match [ from line 2 but you typed ,	Make sure you use parenthesis around the numbers, *not* square brackets.
rect( 80 , 70 , 60 , 240 ),	Unexpected early end of program.	Make sure you end your statement with a *semi-colon*, not a comma.
rect(140, 170,120, 140, )	I think you either have an extra comma or a missing argument?	You have an extra comma after your last parameter.
rect()70,60,240);	It looks like you have an extra )	There's an extra parenthesis before the first parameter of the rect() command.
rect;(140, 170, 260, 484);	I thought you were going to type an assignment or function call but you typed an expression instead.	You have an unnecessary semi-colon after the command name.

We won't be able to hand-curate every syntax error they encounter, but we hope that helping them through the first challenge will give them the confidence to approach and interpret the more ambiguous errors they'll encounter late in their programming life.

A big take-away for us, as teachers: never assume anything is obvious. Just because it's obvious to us what the difference is between the written code and the displayed code, does in no way mean it will be obvious to new programmers.