opentechschool/js-beginners-day1

Outdated curriculum for the first day of JSFaB. Use https://github.com/OpenTechSchool/js-beginners-1

js-beginners-day1's Issues

Where X and Y axis' starting points are

Maybe we could even mark the starting point and move coordinates are interpreted as if 0,0 is the center of the screen to the top of the comments, as esp. with smaller screens one needs to scroll down to see what x and y mean.

Proposal: show the editor and rendered output at the same time.

I'd like to propose changes to the sandbox.js that show the code and result at the same time. Seeing the code and the result at the same time allows the student to connect input to result.

You can see what I mean in this preview:

http://www.screenr.com/zvc8

This would also eliminate the need for an Edit button entirely.

Add an exercise to the rainbow example

The description of how to build the rainbows on page 3 is pretty extensive but there's no task or exercise to do for the students. How about adding at least a little task that shows if people understand what's going on like so: OpenTechSchool/js-beginners-4h-workshop-1@fa54d95

Finished Example for Page 4

I was asked:

as many of the participants didn't actually get to or at least totally through the last page and we didn't continued with it the day after, they wanted to finish it at home. But as we don't provide a full-working example of the end result they were afraid they get stuck and would be without help. So I was asked if we could add that, so that they can look stuff up.

Getting the "loop in a loop"

The loop in a loop, to make a grid of points is very hard for a few of the students. The whole concepts of being allowed to put them into each other isn't some thing they come up with by themselves. (I actually heard "I'm allowed to do this?"). For some its easy, but some actually got stuck and couldn't continue without help.

Pages don't load properly

I got this when open link on any pages"

Confusion why there's "undefined" in the console.

What is this "undefined" as an answer to entering something in the console?

Maybe just explain that this is ok, as long as you don't expect anything else as an output.

Encourage use of `console.log`

There is an example of using console.log very early on, but it's never mentioned again as the exercises progress. Reading code and visualizing what it does is incredibly difficult for an absolute beginner, so reminding them a few times throughout the materials to use console.log('some message', variable, variable...) should not only make things easier to understand, but gives them a technique they can continue to use.

Console, editor and frames are confusing

Around these things there where multiple confusions. All the instructions are correct and precise but still... Don't know what to do about it but being there to help is easy here.

One thing I would do though: Tell people to close the console in the curriculum tab when they're supposed to start working in the sample page. That would prevent them from using the console in the wrong tab (which happened).

Proposal: show the editor and rendered output at the same time.

I'd like to propose changes to the sandbox.js that show the code and result at the same time. Seeing the code and the result at the same time allows the student to connect input to result.

You can see what I mean in this preview:

http://www.screenr.com/zvc8

This would also eliminate the need for an Edit button entirely.

People don't really get the smiley function

Non of the real beginners got the part with reusing code and calling the smiley function on their own. I think it needs more explanation. Also I think it's not clear why the "drawing" function is called and thus people don't get that they have to call the squadron function manually.

Most people came up with a squadron function that actually had almost the same code as the smiley function itself.

Infinite loops kill page and people loose what they wrote

We should think of some way of preserving what people worked on when they enter infinite loop

Use z axis to visualize order of drawing operation

The idea came up that it would be very helpful to be able to see in what order things were drawn. Also if dots are drawn multiple time at the same coordinate it's hard to find out.

Would be really great if we had a 3D canvas to explore and the drawing function would automatically increment the value for z. Students would only work in 2D still.

make clear what `console.log`is for

it's not 100% clear after reading that console.log is only a tool for the developer. i had the question why the real user should open that console thing to read stuff.

Use Numbers instead of points

Suggested by a group of participants: to understand the loop in a loop better, counting up a number and draw that instead of a point. It visualises better what it going on and where what happens (and overlapping is more obvious).

Translate the examples if they have longer texts in the comments

Some of the examples have descriptions in them (mostly as comments in the code). These paragraphs should also be translated. Single-line comments are probably fine in English.

Why is it working with and without semicolon?

Although there's an explanation when the semicolon is introduced, someone got confused, why things seem to work regardless of the existence of a semicolon. Maybe there should be mentioned that semicolons are (under some circumstances) optional but should be used for now.

Proposal: clarification & small tweaks

Perhaps in the cheat sheet could the including type comparision '===' be added to the operators.

Since it's not trivial, it could be irritating if people start to take a look at public code and see more than the mentioned options. Knowing about the difference could also prevent missunderstandings in the future.

For people who come from a different developer background, it would perhaps be good to know that you can use multi lines comments /* */ as well (e.g. for an explanation of a function instead of an inline hint for a variable).

And for convenience: the Chrome Dev Tools can be opened with just one key (F12) - same goes for Firebug/IE9+.

use bit.ly-link for the survey

"the link is too long" they say :)

The concept of assignment using an equals sign

On page 1, Line 155 this statement is made:

“The above program introduces two new concepts: the semicolons, and the use of var.”
https://github.com/OpenTechSchool/js-beginners-day1/blob/master/page1.html#L155

However, the program also introduces assignment using an equals sign. The concept is assumed to be understood in the paragraph that begins on Line 168:
https://github.com/OpenTechSchool/js-beginners-day1/blob/master/page1.html#L168

Can we add a step (or a remark in this step) about = being used to set a value?

Finish the German translation

Someone, please. We've only got three more days.