Size and style of slides in v2

[mgeisler]

Large Slides

Many slides are now bigger because they include more details.

Before	After

What is the strange red rectangle? It's the "aspect ratio helper" which you can enable in book.toml. From a bit of experimentation in a meeting room, this rectangle shows roughly how much content we can fit on a screen.

The existing slides don't always fit! They have gained weight over time, as more and more facts and details have been added. That's very relatable and a comes from a good place: people want to cram in as much great information as possible :slightly_smiling_face:

An example from the new course is the pages on structs. It used to have 21 lines of code and it now has 30 lines. It didn't fit super well before, and now it's really too large:

Before	After

My impression is that less than 10 lines of code is best. 15 lines can work, but then you only have room for 1-2 lines of output!

Combined Slides

Some slides in the new course combine content what was shown on separate slides before. Compare

Before	After

Funny enough, this style was actually how I wrote the very first version of the course :smile: I thought I could have ~10 long-form pages, each covering a bigger theme. I was then going to scroll down on the page during class.

However, the feedback from the initial review was that this would be hard to follow in class. Later, I've seen people struggle to follow along on the current slides that are too big. Scrolling up and down on a large screen in projected in front of 20 people is bad experience.

The effect of scrolling is likely not visible when teaching a remote class to participants far away — many of whom have their camera turned off. But I've seen it throw people off in a live in-person class.

Existing Style

The style I tend to follow in all my presentations is this:

• Slide title (one line)
• Body text (one line)
• Either
  • a 10-15 line code block
  • a few bullet points (mostly one level deep)

I find that this gives a nice consistent look. I like that there is a single line of regular text to kick the slide off and give a tiny bit of context. It also feels less jarring than jumping from a heading to a list/images/codeblock (you would never start a section in a paper with a list, you always have a paragraph of body text before jumping into something else).

We should use very short sentences in any body text or lists.

I haven't followed this perfectly, but those are the underlying thoughts.

[djmitche]

This was related to an issue where the playground text gets reset when you navigate away from a slide.

[mgeisler]

This was related to an issue where the playground text gets reset when you navigate away from a slide.

Oh, great point! I created #1476 about this.

[mgeisler]

The big red rectangle is from the aspect-ratio-helper, enable it in book.toml:

[preprocessor.aspect-ratio-helper]
command = "./aspect-ratio-helper.py"

[djmitche]

@mani-chand do you want to start with a PR for the "Control-Flow Basics" segment?

The sub-slides should be embedded under the first slide:

diff --git src/SUMMARY.md src/SUMMARY.md
index 43adb7b0..a1644cf7 100644
--- src/SUMMARY.md
+++ src/SUMMARY.md
@@ -27,16 +27,18 @@
   - [Arithmetic](types-and-values/arithmetic.md)
   - [Strings](types-and-values/strings.md)
   - [Type Inference](types-and-values/inference.md)
   - [Exercise: Fibonacci](types-and-values/exercise.md)
     - [Solution](types-and-values/solution.md)
 - [Control Flow Basics](control-flow-basics.md)
   - [Conditionals](control-flow-basics/conditionals.md)
   - [Loops](control-flow-basics/loops.md)
+    - [`for`](control-flow-basics/loops/for.md)
+    - [`loop`](control-flow-basics/loops/loop.md)
   - [`break` and `continue`](control-flow-basics/break-continue.md)
   - [Blocks and Scopes](control-flow-basics/blocks-and-scopes.md)
   - [Functions](control-flow-basics/functions.md)
   - [Macros](control-flow-basics/macros.md)
   - [Exercise: Collatz Sequence](control-flow-basics/exercise.md)
     - [Solution](control-flow-basics/solution.md)
 
 # Day 1: Afternoon

and the content broken up into files in a subdirectory, without the minutes field at the top:

diff --git src/control-flow-basics/loops.md src/control-flow-basics/loops.md
index 352c08af..2085146b 100644
--- src/control-flow-basics/loops.md
+++ src/control-flow-basics/loops.md
@@ -18,46 +18,15 @@ fn main() {
     let mut x = 200;
     while x >= 10 {
         x = x / 2;
     }
     println!("Final x: {x}");
 }
 ```
 
-## `for`
-
-The [`for` loop](https://doc.rust-lang.org/std/keyword.for.html) iterates over
-ranges of values:
-
-```rust,editable
-fn main() {
-    for x in 1..5 {
-        println!("x: {x}");
-    }
-}
-```
-
-## `loop`
-
-The [`loop` statement](https://doc.rust-lang.org/std/keyword.loop.html) just
-loops forever, until a `break`.
-
-```rust,editable
-fn main() {
-    let mut i = 0;
-    loop {
-        i += 1;
-        println!("{i}");
-        if i > 100 {
-            break;
-        }
-    }
-}
-```
-
 <details>
 
 - We will discuss iteration later; for now, just stick to range expressions.
 - Note that the `for` loop only iterates to `4`. Show the `1..=5` syntax for an
   inclusive range.
 
 </details>
diff --git src/control-flow-basics/loops/for.md src/control-flow-basics/loops/for.md
new file mode 100644
index 00000000..c9e46b89
--- /dev/null
+++ src/control-flow-basics/loops/for.md
@@ -0,0 +1,12 @@
+# `for`
+
+The [`for` loop](https://doc.rust-lang.org/std/keyword.for.html) iterates over
+ranges of values:
+
+```rust,editable
+fn main() {
+    for x in 1..5 {
+        println!("x: {x}");
+    }
+}
+```
diff --git src/control-flow-basics/loops/loop.md src/control-flow-basics/loops/loop.md
new file mode 100644
index 00000000..544897ea
--- /dev/null
+++ src/control-flow-basics/loops/loop.md
@@ -0,0 +1,17 @@
+# `loop`
+
+The [`loop` statement](https://doc.rust-lang.org/std/keyword.loop.html) just
+loops forever, until a `break`.
+
+```rust,editable
+fn main() {
+    let mut i = 0;
+    loop {
+        i += 1;
+        println!("{i}");
+        if i > 100 {
+            break;
+        }
+    }
+}
+```

[djmitche]

(Use your judgement to break the speaker notes up; I didn't do so in the example above, where the note about "for" loops should be on the "for.md" sub-slide)

[mani-chand]

@mani-chand do you want to start with a PR for the "Control-Flow Basics" segment?

The sub-slides should be embedded under the first slide:

diff --git src/SUMMARY.md src/SUMMARY.md
index 43adb7b0..a1644cf7 100644
--- src/SUMMARY.md
+++ src/SUMMARY.md
@@ -27,16 +27,18 @@
   - [Arithmetic](types-and-values/arithmetic.md)
   - [Strings](types-and-values/strings.md)
   - [Type Inference](types-and-values/inference.md)
   - [Exercise: Fibonacci](types-and-values/exercise.md)
     - [Solution](types-and-values/solution.md)
 - [Control Flow Basics](control-flow-basics.md)
   - [Conditionals](control-flow-basics/conditionals.md)
   - [Loops](control-flow-basics/loops.md)
+    - [`for`](control-flow-basics/loops/for.md)
+    - [`loop`](control-flow-basics/loops/loop.md)
   - [`break` and `continue`](control-flow-basics/break-continue.md)
   - [Blocks and Scopes](control-flow-basics/blocks-and-scopes.md)
   - [Functions](control-flow-basics/functions.md)
   - [Macros](control-flow-basics/macros.md)
   - [Exercise: Collatz Sequence](control-flow-basics/exercise.md)
     - [Solution](control-flow-basics/solution.md)
 
 # Day 1: Afternoon

and the content broken up into files in a subdirectory, without the minutes field at the top:

diff --git src/control-flow-basics/loops.md src/control-flow-basics/loops.md
index 352c08af..2085146b 100644
--- src/control-flow-basics/loops.md
+++ src/control-flow-basics/loops.md
@@ -18,46 +18,15 @@ fn main() {
     let mut x = 200;
     while x >= 10 {
         x = x / 2;
     }
     println!("Final x: {x}");
 }

-## for

-The for loop iterates over -ranges of values:

-```rust,editable -fn main() {

• for x in 1..5 {

•    println!("x: {x}");
  

• } -} -```

-## loop

-The loop statement just -loops forever, until a break.

-```rust,editable -fn main() {

• let mut i = 0;
• loop {

•    i += 1;
  

•    println!("{i}");
  

•    if i > 100 {
  

•        break;
  

•    }
  

• } -} -```

• We will discuss iteration later; for now, just stick to range expressions.
• Note that the for loop only iterates to 4. Show the 1..=5 syntax for an inclusive range.

diff --git src/control-flow-basics/loops/for.md src/control-flow-basics/loops/for.md new file mode 100644 index 00000000..c9e46b89 --- /dev/null +++ src/control-flow-basics/loops/for.md @@ -0,0 +1,12 @@ +# `for` + +The [`for` loop](https://doc.rust-lang.org/std/keyword.for.html) iterates over +ranges of values: + +```rust,editable +fn main() { + for x in 1..5 { + println!("x: {x}"); + } +} +``` diff --git src/control-flow-basics/loops/loop.md src/control-flow-basics/loops/loop.md new file mode 100644 index 00000000..544897ea --- /dev/null +++ src/control-flow-basics/loops/loop.md @@ -0,0 +1,17 @@ +# `loop` + +The [`loop` statement](https://doc.rust-lang.org/std/keyword.loop.html) just +loops forever, until a `break`. + +```rust,editable +fn main() { + let mut i = 0; + loop { + i += 1; + println!("{i}"); + if i > 100 { + break; + } + } +} +``` ```

At first , I will be starting from Control-Flow Basics - Loops(Slides) . I will combine all three segments by writing 3 loops(with same example) in one main function . What do you say. The description will be added as comments before its respective loop.

[djmitche]

I don't think that achieves the goal of creating more, smaller slides.

[mani-chand]

I don't think that achieves the goal of creating more, smaller slides.

If we write 3 loops in same function. we can add more content to it because we will save a lot of space in slide trust me.

Give me your suggestion too in making them into 1 segment.

[mani-chand]

Do you want me to write 3 functions in 1 segment.

[djmitche]

Do you want me to write 3 functions in 1 segment.

No

For this and other slides that do not fit within the red square, the slides should be split into multiple slides, each covering a different part of the content from the first slide.

[mani-chand]

Do you want me to write 3 functions in 1 segment.

No

For this and other slides that do not fit within the red square, the slides should be split into multiple slides, each covering a different part of the content from the first slide.

You want me to make slide for each type of loop respectively.

i.e : for loop one slide, while loop one slide and loop one silde. and same applies for other slides.

am I right?

[djmitche]

Yes, and I gave an example of how to do that above.

[mani-chand]

Yes, and I gave an example of how to do that above.

Yes, I got it now. I will be starting in 30mins.

[mani-chand]

Hello @djmitche , Please check #1789 and let me know the feedback and , I am sorry , I couldn't able to format the code properly.

[michael-kerscher]

@mgeisler What do you think about creating automated analysis and / or scoring of each page to have a good understanding on the statistics of the slide size, find violations for a (yet to be defined) policy (using the observations from your first comment in this issue)?

This could improve the course material a lot according to your observations in live in-person classes

[michael-kerscher]

To document how I would imagine such an automation, one could use selenium via webdriver with the crate fantoccini that offers methods like Element.rectangle().

Of course there might be other solutions and languages but overall this could be one approach.

[mgeisler]

To document how I would imagine such an automation, one could use selenium via webdriver with the crate fantoccini that offers methods like Element.rectangle().

Yes, I would love such a system and I think it would be a very fun task to implement :smile:

It should not be a hard check in CI at first... I imagine a command which people can run locally to quickly tell find the tallest slides. That would be a great help here. We can then target those first with a refactoring effort.