Merge pull request #11 from esciencecenter-digital-skills/fix-margins

Fix margins and text positioning in slides

Author: lyashevska

modules/good-practices-lesson/documentation-slides.md

@@ -14,7 +14,7 @@ description: Day 3 Code Refinery
 
 <!-- .slide: data-state="standard"  -->
 
-<img style="height: 550px;" src="./files/paint.png"/>
+<img style="height: 550px;" src="./media/documentation/paint.png"/>
 
 ===
 

modules/good-practices-lesson/modular-code-slides.md

@@ -47,8 +47,8 @@ Simple components combined to produce complex behavior.
 
 ## What are these blocks/elements?
 
-<div style="display: flex; justify-content: center; align-items: flex-start; margin-top: 20px;">
-    <img src="./media/modular-code/building_blocks.png" alt="building blocks" height="200" style="margin-right: 20px;">
+<div style="display: flex; justify-content: center; align-items: flex-start; margin-top: 20px; max-width: 100%;">
+    <img src="./media/modular-code/building_blocks.png" alt="building blocks" style="max-width: 40%; height: auto; margin-right: 20px;">
     <div>
         <ul>
             <li class="fragment" data-fragment-index="1">functions</li>
@@ -109,13 +109,16 @@ To allow reusability:
 
 To facilitate scalability:
 
-<img height="300" alt="scalability" src="./media/modular-code/scalability.png">
-
+<div style="display: flex; align-items: center;">
 
-<div>
+  <img alt="scalability" src="./media/modular-code/scalability.png" style="max-width: 40%; height: auto; margin-right: 20px;">
 
-- Complexity remains low by design.
-- This creates space for scaling up.
+  <div>
+    <ul>
+      <li>Complexity remains low by design.</li>
+      <li>This creates space for scaling up.</li>
+    </ul>
+  </div>
 
 </div>
 
@@ -127,7 +130,7 @@ To facilitate scalability:
 
 To create opportunities for innovation:
 
-<img height="300" alt="tetris shows innovation" src="./media/modular-code/tetris_innovation.png">
+<img alt="tetris shows innovation" src="./media/modular-code/tetris_innovation.png" style="max-width: 50%; height: auto;">
 
 - Modules increase the capabilities and power of a project.
 - Rearrange old modules for new applications.
@@ -148,7 +151,7 @@ To save time:
 ## A good module...
 
 <div style="display: flex; justify-content: center; align-items: flex-start; margin-top: 20px;">
-    <img src="./media/modular-code/units.png" alt="units" width="200" style="margin-right: 20px;">
+    <img src="./media/modular-code/units.png" alt="units" width="300" style="margin-right: 20px;">
     <div>
         <ul>
             <li class="fragment" data-fragment-index="1">performs limited and clearly defined tasks</li>
@@ -168,7 +171,9 @@ To save time:
 - follow language specific conventions
 - avoid abbreviations
 
-<img height="450" alt="naming" src="./media/modular-code/naming_stuff.jpg">
+<div style="text-align: center; margin-top: 20px;">
+    <img alt="naming" src="./media/modular-code/naming_stuff.jpg" style="max-width: 100%; height: auto; max-height: 300px;">
+</div>
 <!-- .element: class="fragment" data-fragment-index="2" -->
 
 ===
@@ -178,7 +183,7 @@ To save time:
 ## A good module...
 
 <div style="display: flex; justify-content: center; align-items: flex-start; margin-top: 20px;">
-    <img src="./media/modular-code/units.png" alt="units" width="200" style="margin-right: 20px;">
+    <img src="./media/modular-code/units.png" alt="units" width="300" style="margin-right: 20px;">
     <div>
         <ul>
             <li>performs limited and clearly defined tasks</li>
@@ -219,7 +224,7 @@ indexAAG = getIndex(myList,'AAG')
 ## A good module...
 
 <div style="display: flex; justify-content: center; align-items: flex-start; margin-top: 20px;">
-    <img src="./media/modular-code/units.png" alt="units" width="200" style="margin-right: 20px;">
+    <img src="./media/modular-code/units.png" alt="units" width="300" style="margin-right: 20px;">
     <div>
         <ul>
             <li>performs limited and clearly defined tasks</li>
@@ -286,7 +291,7 @@ def fahrenheit_to_celsius(temp_list, converted_temps=None):
 ## A good module...
 
 <div style="display: flex; justify-content: center; align-items: flex-start; margin-top: 20px;">
-    <img src="./media/modular-code/units.png" alt="units" width="200" style="margin-right: 20px;">
+    <img src="./media/modular-code/units.png" alt="units" width="300" style="margin-right: 20px;">
     <div>
         <ul>
             <li>performs limited and clearly defined tasks</li>
@@ -304,7 +309,7 @@ def fahrenheit_to_celsius(temp_list, converted_temps=None):
 ## Identifying opportunities for modularization
 
 <div style="display: flex; justify-content: center; align-items: flex-start; margin-top: 20px;">
-    <img src="./media/modular-code/testing_module.png" alt="testing a single module" width="200" style="margin-right: 20px;">
+    <img src="./media/modular-code/testing_module.png" alt="testing a single module" width="300" style="margin-right: 20px;">
     <div>
         <ul>
             <li class="fragment" data-fragment-index="2">poor readability</li>
@@ -340,7 +345,7 @@ Modular code becomes more readable
 ## Identifying opportunities for modularization
 
 <div style="display: flex; justify-content: center; align-items: flex-start; margin-top: 20px;">
-    <img src="./media/modular-code/testing_module.png" alt="testing a single module" width="200" style="margin-right: 20px;">
+    <img src="./media/modular-code/testing_module.png" alt="testing a single module" width="300" style="margin-right: 20px;">
     <div>
         <ul>
             <li>poor readability</li>
@@ -359,7 +364,9 @@ Modular code becomes more readable
 - Identify functions units by their _action_
   - (e.g. "plot", "transform", "extract", "save")
 
-<img height="350" alt="DRY" src="./media/modular-code/dry-vs-wet-code.jpg">
+<div style="text-align: center; margin-top: 20px;">
+    <img alt="DRY" src="./media/modular-code/dry-vs-wet-code.jpg" style="max-width: 100%; height: auto; max-height: 300px;">
+</div>
 
 ===
 
@@ -368,7 +375,7 @@ Modular code becomes more readable
 ## Identifying opportunities for modularization
 
 <div style="display: flex; justify-content: center; align-items: flex-start; margin-top: 20px;">
-    <img src="./media/modular-code/testing_module.png" alt="testing a single module" width="200" style="margin-right: 20px;">
+    <img src="./media/modular-code/testing_module.png" alt="testing a single module" width="300" style="margin-right: 20px;">
     <div>
         <ul>
             <li>poor readability</li>
@@ -432,7 +439,7 @@ sum_even_numbers (2,14)  # 42
 ## Identifying opportunities for modularization
 
 <div style="display: flex; justify-content: center; align-items: flex-start; margin-top: 20px;">
-    <img src="./media/modular-code/testing_module.png" alt="testing a single module" width="200" style="margin-right: 20px;">
+    <img src="./media/modular-code/testing_module.png" alt="testing a single module" width="300" style="margin-right: 20px;">
     <div>
         <ul>
             <li>poor readability</li>
@@ -455,4 +462,7 @@ sum_even_numbers (2,14)  # 42
     - Is the input/output clear?
 <!-- .element: class="fragment" data-fragment-index="3" -->
     - What can you not yet test? Extract it into a new module.
-<!-- .element: class="fragment" data-fragment-index="3" -->
+
+ 
+
+

modules/good-practices-lesson/testing-slides.md

@@ -117,7 +117,7 @@ Most modern programming languages have good options to streamline testing
 
 ## Testing metrics
 
-#### Targets are arbitrary and indicative of but do not guarantee strong testing.
+#### Targets are arbitrary and indicative
 
 <div style="display: flex; justify-content: center; align-items: center">
   <div>
@@ -141,178 +141,115 @@ Most modern programming languages have good options to streamline testing
   <img src="./media/testing/metrics.jpg" width="300" style="margin-left: 60px">
 </div>
 
-  
-
-===
-
-<!-- .slide: data-state="standard" -->
-
-## Misleading metrics
-
-Consider this function...
-```python
-def fahrenheit_to_celsius(temp_list, converted_temps=[]):
-    for temp in temp_list:
-        temp_c = (temp - 32.0) * (5.0/9.0)
-        converted_temps.append(temp_c)
-    return converted_temps
-```
-
-...and these tests with 100% coverage:
-<!-- .element: class="fragment" data-fragment-index="2" -->
-```python
-assert fahrenheit_to_celsius([32.0, 77.0]) == [0.0, 25.0]
-assert (fahrenheit_to_celsius([100], converted_temps = [0.0, 25.0])
-        == [0.0, 25.0, 37.77777777777778])
-```
-<!-- .element: class="fragment" data-fragment-index="2" -->
-
-Q: Can you think of a problem that will not be caught?
-<!-- .element: class="fragment" data-fragment-index="3" -->
-
 ===
 
 <!-- .slide: data-state="standard" -->
 
+## Write Code
 
-## Writing a test file
-
-Create a file called test_example.py ...
 <pre><code class="bash" style="overflow: hidden;" data-trim class="bash" data-line-numbers>
 $ mkdir pytest-example
 $ cd pytest-example
-$ nano test_example.py
 </code></pre>
 
 <div class="fragment">
-... and add the function and tests from before:
+Creating a file <code>example.py</code> containing
 <pre><code class="python" style="overflow: hidden;" data-trim class="bash" data-line-numbers>
-def fahrenheit_to_celsius(temp_list, converted_temps=[]):
-    for temp in temp_list:
-        temp_c = (temp - 32.0) * (5.0/9.0)
-        converted_temps.append(temp_c)
-    return converted_temps
+def add(a, b):
+    return a + b
 &nbsp;
 &nbsp;
-def test_convert():  # Special name!
-    assert fahrenheit_to_celsius([32.0, 77.0]) == [0.0, 25.0]
-    assert (fahrenheit_to_celsius([100], converted_temps = [0.0, 25.0])
-            == [0.0, 25.0, 37.77777777777778])
+def test_add():  # Special name!
+    assert add(2, 3) == 5  # What's `assert`? 🤔
+    assert add('space', 'ship') == 'spaceship'
 </code></pre>
 </div>
 
-===
+<div class="fragment">
+Chat with the python shell about <code>assert</code> ...
+</div>
+<div class="fragment">
+<pre><code class="python" style="overflow: hidden;" data-trim class="bash" data-line-numbers>
+>>> assert 1==1  # passes
+>>> assert 1==2  # throws error
+Traceback (most recent call last):
+  File "&lt;stdin&gt;", line 1, in &lt;module&gt;
+AssertionError
+</code></pre>
 
-<!-- .slide: data-state="standard" -->
+</div>
 
-## Running Pytest
+===
 
-The `pytest` command will run all functions starting with "test_" from all files starting with "test_".
+<!-- .slide: data-state="standard" -->
 
+## Test!
 
-<pre class="fragment"><code style="overflow: hidden;" data-trim class="bash" data-line-numbers="1|1-9">
-$ pytest
+<pre><code style="overflow: hidden;" data-trim class="bash" data-line-numbers="1|1-9">
+$ pytest example.py
 ======================== test session starts ========================
 platform linux -- Python 3.6.9, pytest-7.0.1, pluggy-1.0.0
 rootdir: /home/ole/Desktop/pytest-texample
 collected 1 item
 
-test_example.py .                                                  [100%]
+example.py .                                                  [100%]
 
 ========================= 1 passed in 0.00s =========================
 </code></pre>
 
-
 ===
 
 <!-- .slide: data-state="standard" -->
 
-## Pytest Exercise
-
-1. Add a test to catch "problematic" behavior of the function.
-    - don't fix the function (yet)
-2. Run pytest to see what the response looks like. 
-    - what information can you gather from the response?
-3. Fix the function and rerun the test
+## Breaking Things
 
-<div>
 <pre><code class="python" style="overflow: hidden;" data-trim class="bash" data-line-numbers>
-def fahrenheit_to_celsius(temp_list, converted_temps=[]):
-    for temp in temp_list:
-        temp_c = (temp - 32.0) * (5.0/9.0)
-        converted_temps.append(temp_c)
-    return converted_temps
-&nbsp;
-&nbsp;
-def test_convert():
-    assert fahrenheit_to_celsius([32.0, 77.0]) == [0.0, 25.0]
-    assert (fahrenheit_to_celsius([100], converted_temps = [0.0, 25.0])
-            == [0.0, 25.0, 37.77777777777778])
-</code></pre>
-</div>
-
-===
-
-<!-- .slide: data-state="standard" -->
+def add(a, b):
+    return a - b  # Uh oh, mistake! 😱
 
-## Breaking the test 
 
-1. Add a test to catch problematic behavior of the function.
-
-<div class="fragment">
-<pre><code class="python" style="overflow: hidden;" data-trim class="bash" data-line-numbers="1-11|12">
-def fahrenheit_to_celsius(temp_list, converted_temps=[]):
-    for temp in temp_list:
-        temp_c = (temp - 32.0) * (5.0/9.0)
-        converted_temps.append(temp_c)
-    return converted_temps
-&nbsp;
-&nbsp;
-def test_convert():
-    assert fahrenheit_to_celsius([32.0, 77.0]) == [0.0, 25.0]
-    assert (fahrenheit_to_celsius([100], converted_temps = [0.0, 25.0])
-            == [0.0, 25.0, 37.77777777777778])
-    assert fahrenheit_to_celsius([32.0, 77.0]) == [0.0, 25.0]
+def test_add():
+    assert add(2, 3) == 5
+    assert add('space', 'ship') == 'spaceship'
 </code></pre>
-</div>
 
 ===
 
 <!-- .slide: data-state="standard" -->
 
-## Failing tests
+## Testing Again
 
-<pre style="width: 100%; max-width: 1200px; overflow: auto;"><code style="overflow: hidden;" data-trim class="bash" data-line-numbers="1|2-8|9-22|23-26">
+<pre><code style="overflow: hidden;" data-trim class="bash" data-line-numbers="1|2-8|9-17|18-20">
 $ pytest example.py
 ======================== test session starts =========================
 platform linux -- Python 3.6.9, pytest-7.0.1, pluggy-1.0.0
 rootdir: /home/ole/Desktop/pytest-texample
 collected 1 item
 
-test_example.py F                                                   [100%]
+example.py F                                                   [100%]
 
 ============================== FAILURES ==============================
-______________________________ test_convert ______________________________
-
-    def test_convert():  # Special name!
-        assert fahrenheit_to_celsius([32.0, 77.0]) == [0.0, 25.0]
-        assert (fahrenheit_to_celsius([100], converted_temps = [0.0, 25.0])
-                == [0.0, 25.0, 37.77777777777778])
->       assert fahrenheit_to_celsius([32.0, 77.0]) == [0.0, 25.0]
-E       assert [0.0, 25.0, 0.0, 25.0] == [0.0, 25.0]
-E         
-E         Left contains 2 more items, first extra item: 0.0
-E         Use -v to get more diff
-
-test_example.py:11: AssertionError
-============================= short test summary info =============================
-FAILED test_example.py::test_convert - assert [0.0, 25.0, 0.0, 25.0] == [0.0, 25.0]
-================================ 1 failed in 0.67s ================================
-&nbsp;
+______________________________ test_add ______________________________
+
+    def test_add():
+>       assert add(2, 3) == 5
+E       assert -1 == 5
+E        +  where -1 = add(2, 3)
+
+example.py:6: AssertionError
+====================== short test summary info =======================
+FAILED example.py::test_add - assert -1 == 5
+========================= 1 failed in 0.05s ==========================
 </code></pre>
 
+<ul>
+  <li class="fragment">🚀❓<span class="fragment">Functions fail on first error</span></li>
+  <li class="fragment">But all test functions are executed</li>
+</ul>
+
 ===
 
+
 <!-- .slide: data-state="standard" -->
 
 ## Pytest wrap up