opentechschool / js-beginners-day1 Goto Github PK
View Code? Open in Web Editor NEWOutdated curriculum for the first day of JSFaB. Use https://github.com/OpenTechSchool/js-beginners-1
Outdated curriculum for the first day of JSFaB. Use https://github.com/OpenTechSchool/js-beginners-1
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.
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.
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.
We should think of some way of preserving what people worked on when they enter infinite loop
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:
This would also eliminate the need for an Edit button entirely.
"the link is too long" they say :)
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.
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).
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.
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?
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.
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.
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.
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.
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.
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+.
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).
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:
This would also eliminate the need for an Edit button entirely.
Someone, please. We've only got three more days.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.