swap order of logic and props, add keyed each blocks chapter

site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte

@@ -10,6 +10,8 @@
 
 <ul>
 	<!-- open each block -->
-		<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">{cat.name}</a></li>
+		<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
+			{cat.name}
+		</a></li>
 	<!-- close each block -->
 </ul>

site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte

@@ -9,7 +9,9 @@
 <h1>The Famous Cats of YouTube</h1>
 
 <ul>
-	{#each cats as { id, name }}
-		<li><a target="_blank" href="https://www.youtube.com/watch?v={id}">{name}</a></li>
+	{#each cats as { id, name }, i}
+		<li><a target="_blank" href="https://www.youtube.com/watch?v={id}">
+			{i + 1}: {name}
+		</a></li>
 	{/each}
 </ul>

site/content/tutorial/04-logic/04-each-blocks/text.md

@@ -7,13 +7,23 @@ If you need to loop over lists of data, use an `each` block:
 ```html
 <ul>
 	{#each cats as cat}
-		<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">{cat.name}</a></li>
+		<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
+			{cat.name}
+		</a></li>
 	{/each}
 </ul>
 ```
 
 > The expression (`cats`, in this case) can be any array or array-like object (i.e. it has a `length` property). You can loop over generic iterables with `each [...iterable]`.
 
-If you prefer, you can use destructuring — `each cats as { id, name }` — and replace `cat.id` and `cat.name` with `id` and `name`.
+You can get the current *index* as a second argument, like so:
 
-> In some cases, you will need to use *keyed each blocks*. We'll learn about those [later](tutorial/keyed-each-blocks).
+```html
+{#each cats as cat, i}
+	<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
+		{i + 1}: {cat.name}
+	</a></li>
+{/each}
+```
+
+If you prefer, you can use destructuring — `each cats as { id, name }` — and replace `cat.id` and `cat.name` with `id` and `name`.

site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte

@@ -0,0 +1,23 @@
+<script>
+	import Thing from './Thing.svelte';
+
+	let things = [
+		{ id: 1, value: 'a' },
+		{ id: 2, value: 'b' },
+		{ id: 3, value: 'c' },
+		{ id: 4, value: 'd' },
+		{ id: 5, value: 'e' }
+	];
+
+	function handleClick() {
+		things = things.slice(1);
+	}
+</script>
+
+<button on:click={handleClick}>
+	Remove first thing
+</button>
+
+{#each things as thing}
+	<Thing value={thing.value}/>
+{/each}

site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte

@@ -0,0 +1,9 @@
+<script>
+	// `value` is updated whenever the prop value changes...
+	export let value;
+
+	// ...but `valueAtStart` is fixed upon initialisation
+	const valueAtStart = value;
+</script>
+
+<p>{valueAtStart} / {value}</p>

site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte

@@ -0,0 +1,23 @@
+<script>
+	import Thing from './Thing.svelte';
+
+	let things = [
+		{ id: 1, value: 'a' },
+		{ id: 2, value: 'b' },
+		{ id: 3, value: 'c' },
+		{ id: 4, value: 'd' },
+		{ id: 5, value: 'e' }
+	];
+
+	function handleClick() {
+		things = things.slice(1);
+	}
+</script>
+
+<button on:click={handleClick}>
+	Remove first thing
+</button>
+
+{#each things as thing (thing.id)}
+	<Thing value={thing.value}/>
+{/each}

site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte

@@ -0,0 +1,9 @@
+<script>
+	// `value` is updated whenever the prop value changes...
+	export let value;
+
+	// ...but `valueAtStart` is fixed upon initialisation
+	const valueAtStart = value;
+</script>
+
+<p>{valueAtStart} / {value}</p>

site/content/tutorial/04-logic/05-keyed-each-blocks/text.md

@@ -0,0 +1,17 @@
+---
+title: Keyed each blocks
+---
+
+By default, when you modify the value of an `each` block, it will add and remove items at the *end* of the block, and update any values that have changed. That might not be what you want.
+
+It's easier to show why than to explain. Click the 'Remove first item' button a few times, and notice that it's removing `<Thing>` components from the end and updating the `value` for those that remain. Instead, we'd like to remove the first `<Thing>` component and leave the rest unaffected.
+
+To do that, we specify a unique identifier for the `each` block:
+
+```html
+{#each things as thing (thing.id)}
+	<Thing value={thing.value}/>
+{/each}
+```
+
+The `(thing.id)` tells Svelte how to figure out what changed.

site/content/tutorial/05-events/01-dom-events/text.md

@@ -2,7 +2,7 @@
 title: DOM events
 ---
 
-As we briefly saw in an [earlier chapter](tutorial/reactive-assignments), you can listen to any event on an element with the `on:` directive:
+As we've briefly seen already, you can listen to any event on an element with the `on:` directive:
 
 ```html
 <div on:mousemove={handleMousemove}>

site/content/tutorial/99-todo/99-todo/text.md

@@ -42,12 +42,10 @@ Another one should cover how to set up an editor for syntax highlighting.
 * [x] If blocks
 * [x] Else/elseif blocks
 * [x] Each blocks
+* [x] Keyed each blocks
 * [ ] Await blocks
 
 
-* [ ] Keyed each blocks (maybe? kind of need to cover transitions before we can make this obvious)
-
-
 ## Props
 
 * [x] `export let foo`
@@ -153,7 +151,6 @@ Maybe lifecycle should go first, since we're using `onMount` in the `this` demo?
 
 ## Miscellaneous
 
-* [ ] Keyed each blocks
 * [ ] Debug tags
 * [ ] `context="module"`
 * [ ] `tick`