Merge pull request #851 from nature-of-code/notion-update-docs

[Notion] Update docs

content/00_randomness.html

@@ -90,12 +90,17 @@
 <p>Earlier I stated that you could flip two coins. In p5.js, however, when you want to randomly choose from a list of options, you can simply generate a random number with the <code>random()</code> function. It picks a random floating-point (decimal) value within any range you want. Here, I use 4 to indicate a range of 0 to 4:</p>
 <pre class="codesplit" data-code-language="javascript">let choice = floor(random(4));</pre>
 <p>I declare a variable <code>choice</code> and assign it a random integer (whole number) by using <code>floor()</code> to remove the decimal places from the random floating-point number. Technically speaking, the number generated by <code>random(4)</code> lies within the range of 0 (inclusive) to 4 (exclusive), meaning it can never actually be 4.0. The highest possible number it could generate is just below 4—3.999999999 (with as many 9s as JavaScript will allow), which <code>floor()</code> then truncates down to 3, removing the decimal part. Therefore, I’ve effectively assigned <code>choice</code> a value of 0, 1, 2, or 3.</p>
+<div data-type="note">
+  <h3 id="coding-conventions">Coding Conventions</h3>
+  <p>In JavaScript, variables can be declared using either <code>let</code> or <code>const</code>. A typical approach is to declare all variables with <code>const</code> and change to <code>let</code> when needed. In this first example, <code>const</code> would be appropriate for declaring <code>choice</code> as it’s never reassigned a new value over the course of its life inside each call to <code>step()</code>. While this differentiation is important, I’m choosing to follow the p5.js example convention and declare all variables with <code>let</code>.</p>
+  <p>I recognize that JavaScript has both <code>const</code> and <code>let</code> for important reasons. However, the distinction can be a distraction and confusing for beginners. I encourage you to explore the topic further and make your own decisions about how to best declare variables in your own sketches. For more, you can read <a href="https://github.com/processing/p5.js/issues/3877">the discussion surrounding issue #3877 in the p5.js GitHub repository</a>.</p>
+  <p>I’m also choosing to use JavaScript’s strict equality (<code>===</code>) operator (and its inequality counterpart, <code>!==</code>). This Boolean operator tests both value and type equality. For example, <code>3 === '3'</code> will evaluate to <code>false</code> because the types are different (number versus string), even though they look similar. On the other hand, using the loose equality (<code>==</code>) operator in <code>3 == '3'</code> would result in <code>true</code> because the two different types are converted to be comparable. Although the loose comparison often works fine, it can sometimes lead to unexpected results, so <code>===</code> is probably the safer choice.</p>
+</div>
 <p>Next, the walker takes the appropriate step (left, right, up, or down), depending on which random number was picked. Here’s the full <code>step()</code> method closing out the <code>Walker</code> class:</p>
 <div class="snip-above">
   <pre class="codesplit" data-code-language="javascript">  step() {
-    // 0, 1, 2, or 3
+    // 0, 1, 2, or 3. The random choice determines the step.
     let choice = floor(random(4));
-    // The random choice determines the step.
     if (choice === 0) {
       this.x++;
     } else if (choice === 1) {
@@ -108,16 +113,6 @@
   }
 }</pre>
 </div>
-<div class="allow-break">
-  <div data-type="note">
-    <h3 id="coding-conventions">Coding Conventions</h3>
-    <p>In JavaScript, variables can be declared using either <code>let</code> or <code>const</code>. A typical approach is to declare all variables with <code>const</code> and change to <code>let</code> when needed. In this first example, <code>const</code> would be appropriate for declaring <code>choice</code> as it’s never reassigned a new value over the course of its life inside each call to <code>step()</code>. While this differentiation is important, I’m choosing to follow the p5.js example convention and declare all variables with <code>let</code>.</p>
-    <p>I recognize that JavaScript has both <code>const</code> and <code>let</code> for important reasons. However, the distinction can be a distraction and confusing for beginners. I encourage you to explore the topic further and make your own decisions about how to best declare variables in your own sketches. For more, you can read <a href="https://github.com/processing/p5.js/issues/3877">the discussion surrounding issue #3877 in the p5.js GitHub repository</a>.</p>
-    <div class="avoid-break">
-      <p>I’m also choosing to use JavaScript’s strict equality (<code>===</code>) operator (and its inequality counterpart, <code>!==</code>). This Boolean operator tests both value and type equality. For example, <code>3 === '3'</code> will evaluate to <code>false</code> because the types are different (number versus string), even though they look similar. On the other hand, using the loose equality (<code>==</code>) operator in <code>3 == '3'</code> would result in <code>true</code> because the two different types are converted to be comparable. Although the loose comparison often works fine, it can sometimes lead to unexpected results, so <code>===</code> is probably the safer choice.</p>
-    </div>
-  </div>
-</div>
 <p>Now that I’ve written the class, it’s time to make an actual <code>Walker</code> object in the sketch itself. Assuming you’re looking to model a single random walk, start with a single global variable:</p>
 <pre class="codesplit" data-code-language="javascript">// A <code>Walker</code> object
 let walker;</pre>