Skip to content

Commit

Permalink
Merge pull request #11 from esciencecenter-digital-skills/fix-margins
Browse files Browse the repository at this point in the history 
Fix margins and text positioning in slides
  • Loading branch information
@lyashevska
lyashevska authored Oct 21, 2024
2 parents a9ef599 + c2e2d0d commit e8bd333
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 135 deletions.
2 changes: 1 addition & 1 deletion modules/good-practices-lesson/documentation-slides.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>

===

Expand Down
48 changes: 29 additions & 19 deletions modules/good-practices-lesson/modular-code-slides.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>

Expand All @@ -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.
Expand All @@ -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>
Expand All @@ -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" -->

===
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>

===

Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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" -->




167 changes: 52 additions & 115 deletions modules/good-practices-lesson/testing-slides.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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
Expand Down

0 comments on commit e8bd333

Please sign in to comment.