Howto

Step 1:

⮚ Type all the code.

We will be focusing mostly on the .js file, but we'll reference the .html and .css files as well.

Why type if I can just copy/paste?

Because typing will:

1. give you muscle memory; you get a feel for what it's like to write JavaScript code, feel the rhythm, get used typing the punctuation, linebreaks, etc;
2. help you see, understand and process the script as a whole, and begin seeing what goes where, what connects to what;
3. get familiar with the syntax, built-in functions, keywords, structure, etc.

The first few examples will be relatively simple: one html file, one css, one js. As the project progresses, the examples will surely get more complicated; in the future I might instead find a good opensource project to use as example and clone that instead of writing our own example projects.

Side note: everybody tells you "don't memorize, understand", but how are you going to understand if you don't memorize? You don't need to memorize EVERYTHING, of course, but some things, I'd say a lot of things, as much as you can. Memorizing is like putting scripts and data in the cache so you are able access them immediately; but not only that, the most important part is that memorizing is what allows you to see the whole and understand how everything works together. You see a keyword or a particular syntactic structure and if it's not readily available from memory you'll spend time and (mental) energy finding out what it is instead of what it's doing in the context. It's like if you are reading a book and you have to interrupt the reading every few lines to look up a word in a dictionary, or every few words, or even every single fkn word because the author is a pretentious prick... Fuck James Joyce and his Finnegan's Wake... but I digress... Anyway, that would be like me trying to program in binary.

Step 2:

⮚ Does it work?

Spend a little time trying out all the functionality make sure everything works correctly, every input, every action; look at the layout and design too, is there any button with the wrong color, something in the layout doesn't fit, etc? Find each bug and fix it, some will be much more straight-forward than others; you learn a lot in the process of de-bugging and trust me, there are ALLWAYS bugs.

Step 3:

⮚ Analyze and experiment, connect the dots.

Read the code, scan it, skim it up and down. See if you can understand what each section does. Find all the keywords (tip, they are usually highlighted on most code editors). Find the variables and constants, arrays, functions, classes, etc., or if there are structures you are not familiar with yet, just start by looking at the code and try to understand the patterns, as we move on we will be going deeper and deeper. And as you analyze also experiment.

The "Passes" you'll find under each project basically my notes, observations and experiments around the code. They don't go line-by-line from start to finish, or even follow a strict thematic progression concept by concept; instead they are differnt reviews of the whole code where I focus (more or less) on one or two aspects, very loosely thematic, one thing leads to another. That's part of the top-down and general to particular approach. I hope my notes are usefull to you but I also invite you to just take them as an example to experiment and make your own observations.