opentechschool / js-beginners-1 Goto Github PK

In #17 the description for named properties has been changes to be more accessible and a bit more verbose. Needs to be translated.

Historically this has been part 1 of a two-day workshop with the second part being a slide show with DOM. The "second" part is quite outdated (e.g. JS animations) and this should just stand on it's own so some text needs to be changed.

On http://opentechschool.github.io/js-beginners-1/ we have a link to the German version but not the other way round.

In the data chapter it says: "Exercise: Figure out a JavaScript representation for a chess game board. There are multiple good solutions." This is confusing as it is a hard task, no correct solution, no feedback possible. I guess the idea is to inspire people to think of all the possibilities of data structures.

Should we remove it, move it to the end of the chapter or just rephrase to something like "optional brain exercise"?

The changes we made compared to day1 repo are not translated yet.

Would love to use this to introduce JavaScript programming. However the tutorial only mentions Chrome but not Firefox Devtools.

Thanks @xMartin for pointing me to this resource.

The task with the smileySquadron asks learners to use x and y as parameters. I think this is confusing, at least I don't get why. As I understand it the function will contain the loop and change internal variables only. Maybe it's about defining a starting point but that could be just left out for simplicity.

maybe we should insert an explanation of the drawing function somewhere on page 2
cause often people wondering why their code isn't doing anything, or they get errors because of the fact that they've deleted the drawing function from the sandbox

The introduction to the function setInterval says: setInterval(func, n) is a way to run a function every n milliseconds yet during implementation n has to be computed like so:

// Draw twenty frames per second (20 * 50 = 1000 milliseconds)
setInterval(frame, 50);

This is confusing. For consistency we could have the function take in millisecond units or have an explanation for the conversion.

This issue is especially evident on page 3. There shouldn't be sentences like "Evaluate myObject.name and myObject.score." – at least not without further explanation.

It's probably a good idea to have a look at @maxogden's jsforcats.com (see also issue #3).

A grid to show the coordinates and visualize the distances between elements could be helpful, as people explore functions and create their own. It could be a simple background pattern displayed on the screen.

"Select the other option" is really vage and people dont even find the thing to look for. Maybe a screenshoot would help?

A question from the feedback form:

the functions we used to draw are built in ? Is there a built in library ? Do every javascript enviroinment offer the same set of basic functions ?

We should explain a little bit.

A step missing in the Function exercise from js-beginners -> page 2 .

Where the function smileySquadron() has to be declared inside the function drawing()
Otherwise the render does not render it.

https://github.com/OpenTechSchool/js-beginners-4h-workshop-1/blob/gh-pages/page3.html#L98-104

function rainbow(x, y) {
  var colors = ["red", "orange", "yellow", "green", "cyan", "purple", "white"];
  for (var count = 0; count < colors.length; count = count + 1) {
    color(colors[count]);
    circle(x, y, 150 - 5 * count);
  }
}

can be rewritten as

function rainbow(x, y) {
  var colors = ["red", "orange", "yellow", "green", "cyan", "purple",
  colors.forEach(function(color) {
    color(color)
    circle(x, y, 150 - 5 * colors.indexOf(color))
  })
}

since for loops are rather confusing for absolute beginners

Hey everyone,

so I thought after the last workshop in Berlin, we would remove those two repos: day1 and day2 (or mark them as outdated or something).

Can someone do that and maybe rename this repo to just js-beginners-workshop?

Best,
Finn

PS: Okay renaming would maybe be a bad idea, since it would break links to the materials for GitHub pages. I am also still not sure where all the materials are located. But you know what I mean...

Here is a list of the current blue headlines:

- Open the console
- Enter your first code
- Understand expressions
- Variables
- A web page
- Open the picture playground
- The loop
- Conditional execution
- Functions
- Free-form
- Collections
- Named properties
- We've got data
- Play a game!
- Extend it

The instructions how to open the console in Google Chrome seem to be outdated, not matching the current user interface of the browser any more.

Having a link to the Github page would give people the chance to create issues and contribute. Could even use the badge.

The exercises should receive an image/link to the visual results - which will prevent confusion and helps to understand the challenges.

In addition - the description of the smileySquadron on Page 2 task could be simplified.

On the second day are some snippets which uses the short version i++ for incremental, as well as for ! for negotiation. As these are quite common - they should be added to the initial explanation on the first day.

For example: on this page there is the word "Semikolon". To support the understanding of the word, for german-language-starter it would be helpful to add the simbol of a semicolon after the german word.

Maybe it is also helpful elsewhere.

Suggestion about explaining the for loop in the loop. As, the while loop does not yield in a 20x20 grid in my case.

Only using the for loop worked out.

I wrote a very similar introduction to JS that has been very well received, it would be worth a read!

http://jsforcats.com

the outline is:

• What is a programming language/JS?
• Don't be a scaredy cat
• Install chrome, open chrome console
• Create a string
• Variables
• Using functions
• How to learn more (MDN)
• Using js you found elsewhere
• Writing new functions
• Loops
• Arrays
• Recommended reading

what I have yet to implement:

• More looping examples
• Objects and JSON
• Grabbing stuff from other pages on the internet and displaying it
• How to use Github to find and share code