prep for lab-brussels-1

0-study-lenses/1-what-are-lenses.js

@@ -0,0 +1,35 @@
+'use strict';
+
+/* What are Lenses?
+
+  at HYF you will learn to code by studying code
+  lenses help you study the same code in different ways
+    each lens is a new way to see the same code
+    each way of seeing helps you learn something new
+
+  try out some lenses on the program below to see how lenses work
+    you don't need to understand the code!
+    right now focus on using lenses, you'll cover the JS later on
+
+  type these words one at a time in the input field above:
+    highlight, variables, flowchart, pseudo
+
+  you can also combine lenses, try these combinations:
+    pseudo highlight, pseudo parsons
+
+*/
+
+let backwards = null;
+while (backwards === null) {
+  backwards = prompt("enter something backwards, we'll reverse it");
+  console.log(backwards);
+}
+
+let fixed = '';
+for (let character of backwards) {
+  fixed = character + fixed;
+}
+console.log(fixed);
+
+let processed = '"' + backwards + '" -> "' + fixed + '"';
+alert(processed);

0-study-lenses/2-dynamic-study.js

@@ -0,0 +1,37 @@
+'use strict';
+
+/* Dynamic Study
+
+  dynamic analysis is studying how a program behaves when you run it
+  this includes things like:
+    - using the program yourself
+    - checking the console for helpful information
+    - stepping through your code in a debugger or memory visualization tool
+    - manually tracing the code like the computer would
+  this helps you understand what happens in memory and the user's experience
+
+  open your browser's console and try these dynamic lenses:
+    run, trace
+    (you'll learn how to understand the console output later)
+
+  you'll explore dynamic study in depth later on
+    including more lenses to help you visualize program memory
+
+  for now just focus on the difference between STATIC and DYNAMIC
+
+*/
+
+let backwards = null;
+while (backwards === null) {
+  backwards = prompt("enter something backwards, we'll reverse it");
+  console.log(backwards);
+}
+
+let fixed = '';
+for (let character of backwards) {
+  fixed = character + fixed;
+}
+console.log(fixed);
+
+let processed = '"' + backwards + '" -> "' + fixed + '"';
+alert(processed);

0-study-lenses/3-static-study.js

@@ -0,0 +1,33 @@
+'use strict';
+
+/* Static Study
+
+  static analysis is when you study code WITHOUT running the program
+  this includes things like:
+    - reading the code (out loud)
+    - discussing the code in groups
+    - finding how the variables are used
+    - understanding comments and variable names
+    - studying the code's syntax
+    - making sure you know each language feature used
+
+  try out these different static-study lenses on this code:
+    highlight, variables, flowchart, parsons,
+    ask, blanks, pseudo highlight, pseudo parsons
+
+*/
+
+let backwards = null;
+while (backwards === null) {
+  backwards = prompt("enter something backwards, we'll reverse it");
+  console.log(backwards);
+}
+
+let fixed = '';
+for (let character of backwards) {
+  fixed = character + fixed;
+}
+console.log(fixed);
+
+let processed = '"' + backwards + '" -> "' + fixed + '"';
+alert(processed);

0-study-lenses/4-the-study-lens.js

@@ -0,0 +1,28 @@
+'use strict';
+
+/* The Study Lens
+
+  the study lens is your home base for most examples and exercises
+    it has an editor just like the one in VSCode (shortcuts, autocomplete, ...)
+
+  from here you can edit the code, save your changes, and use other lenses
+    try selecting a few lines of code and clicking a lens
+
+  see >> OPTIONS << up top? explore it a bit
+    this lets you configure the ?study environment
+*/
+
+let backwards = null;
+while (backwards === null) {
+  backwards = prompt("enter something backwards, we'll reverse it");
+  console.log(backwards);
+}
+
+let fixed = '';
+for (let character of backwards) {
+  fixed = character + fixed;
+}
+console.log(fixed);
+
+let processed = '"' + backwards + '" -> "' + fixed + '"';
+alert(processed);

0-study-lenses/5-local-configurations.js

@@ -0,0 +1,31 @@
+'use strict';
+
+/* Local Configurations
+
+  you may have noticed a lot of files named /study.json in this repository
+    this is how you set default study configurations for each folder of code
+
+  when you use the ?--defaults option, a file will open using the local configurations
+    you can think of this like the suggested way to study each file
+    but you can always change lenses if you want to
+    and you can edit the study.json files to set your own defaults!
+  most of the time exercises will open with ?--defaults
+
+  which lens is the default for this folder?
+
+*/
+
+let backwards = null;
+while (backwards === null) {
+  backwards = prompt("enter something backwards, we'll reverse it");
+  console.log(backwards);
+}
+
+let fixed = '';
+for (let character of backwards) {
+  fixed = character + fixed;
+}
+console.log(fixed);
+
+let processed = '"' + backwards + '" -> "' + fixed + '"';
+alert(processed);

0-study-lenses/6-url-parameters.js

@@ -0,0 +1,35 @@
+'use strict';
+
+/* URL Parameters
+
+  most of the time you will be studying exercises in a separate tab
+  to change lenses in a new tab you change the URL params and refresh
+
+  try it out:
+    find the URL bar at the top of this page
+    find where it says "?--defaults"
+    replace "?--defaults" with another lense like "?variables"
+    press enter
+
+  to combine lenses use "&":
+    "?--defaults" -> "?pseudo&highlight"
+
+  you can use your browser's navigation to go forwards and backwards
+    just like a normal web page
+
+*/
+
+let backwards = null;
+while (backwards === null) {
+  backwards = prompt("enter something backwards, we'll reverse it");
+  console.log(backwards);
+}
+
+let fixed = '';
+for (let character of backwards) {
+  fixed = character + fixed;
+}
+console.log(fixed);
+
+let processed = '"' + backwards + '" -> "' + fixed + '"';
+alert(processed);

0-study-lenses/README.md

@@ -0,0 +1,43 @@
+# Study Lenses
+
+> Study code, not explanations.
+
+This folder is a short guide to using Study Lenses. Study Lenses are designed
+for exploring code at your own pace, so once you get how lenses work move on to
+the next chapters and study some code!
+
+Psst. This guide is best if you [open the README](./README.md?slides)
+
+---
+
+<a class="study-lens" href="./1-what-are-lenses.js" target="_blank">1. What are
+Lenses?</a>
+
+---
+
+<a class="study-lens" href="./2-dynamic-study.js" target="_blank">3. Dynamic
+Study</a>
+
+---
+
+<a class="study-lens" href="./3-static-study.js" target="_blank">2. Static
+Study</a>
+
+---
+
+<a class="study-lens" href="./4-the-study-lens.js?study" target="_blank">4. The
+Study Lens</a>
+
+---
+
+<a class="study-lens" href="./5-local-configurations.js?--defaults" target="_blank">6.
+Local Configurations</a>
+
+---
+
+<a class='study-lens' href="./6-url-parameters.js?--defaults" target="_blank">5.
+URL Parameters</a>
+
+---
+
+<a class='study-lens' href="./?--defaults" target="_blank">Folders of Files</a>

0-study-lenses/study.json

@@ -0,0 +1,5 @@
+{
+  "--defaults": {
+    ".md": "slides"
+  }
+}

1-what-is-programming/00-javascript/README.md

@@ -148,4 +148,4 @@ secure and developer-friendly alternative to Node.js.
 
 JavaScript is the language used to write the Source Code in this diagram:
 
-[![program diagram](../.assets/a-program.svg)](https://excalidraw.com/#json=_cj6JYwuO38PPGKxXN_cQ,3910Z7e2jGLZu4vjueG-Bg)
+[![program diagram](../../assets/a-program.svg)](https://excalidraw.com/#json=_cj6JYwuO38PPGKxXN_cQ,3910Z7e2jGLZu4vjueG-Bg)

1-what-is-programming/01-data-in-data-out/README.md

@@ -2,7 +2,7 @@
 
 So what is a program? It's something like this:
 
-![program diagram](../.assets/a-program.svg)
+![program diagram](../../assets/a-program.svg)
 
 The basic job of a computer program is to process data. Even the most beautiful
 and interactive programs are just processing data behind the scenes. One of the
@@ -65,26 +65,56 @@ JavaScript by _strings_.
 
 ## Programs to Study
 
-A very important skill to learn as a programmer is not to be afraid of code you
+A very important skill to learn as a programmer is not being afraid of code you
 don't understand. There is always _something_ you can understand and there is
 always a way to understand the rest. You aren't expected understand all the
 syntax in this folder just yet.
 
 Instead focus on what you _can_ understand about each program at a higher level,
-like in the diagram at the top of this README. Practice explaining what is
-happening in each program using these terms:
+like in the diagram at the top of this README. For all of these examples and
+exercises try running the program many times inputting different data and seeing
+what comes out.
+
+Practice explaining what is happening in each program using these terms:
 
 - **Program Behavior**: You can answer these questions just by comparing inputs
   and outputs! You don't need to read a single line of code:
   - What does the program do?
   - What happens to the user data, how is it transformed or processed in the
     program?
-- **Data In**: What data does the user input into the program, be specific!
-- **Data Out**: What data is output to the user at the end of the program, be
-  specific!
+- **Data In**: What data does the program expect? Try to say this in a normal
+  human sentence.
+- **Data Out**: What data does the program expect? Try to say this in a normal
+  human sentence.
 - **Test Cases**: Specific examples of data that goes in and the data that comes
   out.
 
 In the `/examples` folder you will find a few programs with a comment describing
 the **behavior**, **data in** and **data out**. Your challenge in `/exericses`
 is to fill in the same information for new programs.
+
+Be _very careful_ about your formatting! Study the example comments closely and
+do your best to format yours _exactly_ the same:
+
+```js
+'use strict';
+
+/* Program Title
+
+  Description of program's behavior.
+
+  Data In:
+    Describe the data that goes in.
+
+  Data Out:
+    Describe the data that comes out.
+
+  Test Cases:
+    'an example input' -> 'the matching output'
+    'another input' -> 'the other output'
+    ...
+
+*/
+
+// ... the rest of the code
+```

1-what-is-programming/01-data-in-data-out/exercises/flip-five.js

@@ -2,8 +2,6 @@
 
 /* Flip Five
 
-
-
   Data In:
 
 
@@ -12,15 +10,14 @@
 
   Test Cases:
 
+
 */
 
 /* --- gather user input --- */
 
 let input = null;
 while (true) {
-  input = prompt(
-    'enter something longer than 5 characters and it will be reversed.',
-  );
+  input = prompt('enter something with 5 characters and it will be reversed.');
   console.log(input);
 
   /* --- check that the user input is 5 characters long --- */

1-what-is-programming/01-data-in-data-out/exercises/mirror.js

@@ -2,8 +2,6 @@
 
 /* Mirror
 
-
-
   Data In:
 
 
@@ -12,6 +10,7 @@
 
   Test Cases:
 
+
 */
 
 /* --- gather user input --- */

1-what-is-programming/01-data-in-data-out/exercises/remove-spaces.js

@@ -2,8 +2,6 @@
 
 /* Remove Spaces
 
-
-
   Data In:
 
 
@@ -12,6 +10,7 @@
 
   Test Cases:
 
+
 */
 
 /* --- gather user input --- */