diff --git a/content/2-templating/5-dom-ref/alpine/index.html b/content/2-templating/5-dom-ref/alpine/index.html
index 8c7571fb..dbf86165 100644
--- a/content/2-templating/5-dom-ref/alpine/index.html
+++ b/content/2-templating/5-dom-ref/alpine/index.html
@@ -1 +1 @@
-<input x-init="$el.focus();" />
+<input type="checkbox" x-init="$el.indeterminate = true;" />
diff --git a/content/2-templating/5-dom-ref/angular/inputfocused.component.ts b/content/2-templating/5-dom-ref/angular/inputfocused.component.ts
deleted file mode 100644
index b7354db0..00000000
--- a/content/2-templating/5-dom-ref/angular/inputfocused.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component, ViewChild, ElementRef, OnInit } from "@angular/core";
-
-@Component({
-  selector: "app-inputfocused",
-  template: `<input type="text" #inputRef />`,
-})
-export class InputfocusedComponent implements OnInit {
-  @ViewChild("inputRef", { static: true })
-  inputRef!: ElementRef<HTMLInputElement>;
-
-  ngOnInit() {
-    this.inputRef.nativeElement.focus();
-  }
-}
diff --git a/content/2-templating/5-dom-ref/angular/inputindeterminate.component.ts b/content/2-templating/5-dom-ref/angular/inputindeterminate.component.ts
new file mode 100644
index 00000000..d0678db8
--- /dev/null
+++ b/content/2-templating/5-dom-ref/angular/inputindeterminate.component.ts
@@ -0,0 +1,14 @@
+import { Component, ViewChild, ElementRef, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-inputindeterminate",
+  template: `<input type="checkbox" #inputRef />`,
+})
+export class InputindeterminateComponent implements OnInit {
+  @ViewChild("inputRef", { static: true })
+  inputRef!: ElementRef<HTMLInputElement>;
+
+  ngOnInit() {
+    this.inputRef.nativeElement.indeterminate = true;
+  }
+}
diff --git a/content/2-templating/5-dom-ref/aurelia1/input-focused.html b/content/2-templating/5-dom-ref/aurelia1/input-focused.html
deleted file mode 100644
index 494a5831..00000000
--- a/content/2-templating/5-dom-ref/aurelia1/input-focused.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <input ref="inputElement" />
-</template>
diff --git a/content/2-templating/5-dom-ref/aurelia1/input-focused.ts b/content/2-templating/5-dom-ref/aurelia1/input-focused.ts
deleted file mode 100644
index 49589ac9..00000000
--- a/content/2-templating/5-dom-ref/aurelia1/input-focused.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export class InputFocused {
-  inputElement: HTMLInputElement;
-
-  attached() {
-    this.inputElement.focus();
-  }
-}
diff --git a/content/2-templating/5-dom-ref/aurelia1/input-indeterminate.html b/content/2-templating/5-dom-ref/aurelia1/input-indeterminate.html
new file mode 100644
index 00000000..a7576b22
--- /dev/null
+++ b/content/2-templating/5-dom-ref/aurelia1/input-indeterminate.html
@@ -0,0 +1,3 @@
+<template>
+  <input type="checkbox" ref="inputElement" />
+</template>
diff --git a/content/2-templating/5-dom-ref/aurelia1/input-indeterminate.ts b/content/2-templating/5-dom-ref/aurelia1/input-indeterminate.ts
new file mode 100644
index 00000000..e2c7e2c7
--- /dev/null
+++ b/content/2-templating/5-dom-ref/aurelia1/input-indeterminate.ts
@@ -0,0 +1,7 @@
+export class InputIndeterminate {
+  inputElement: HTMLInputElement;
+
+  attached() {
+    this.inputElement.indeterminate = true;
+  }
+}
diff --git a/content/2-templating/5-dom-ref/ember/input-focused.hbs b/content/2-templating/5-dom-ref/ember/input-focused.hbs
deleted file mode 100644
index c6d880fc..00000000
--- a/content/2-templating/5-dom-ref/ember/input-focused.hbs
+++ /dev/null
@@ -1 +0,0 @@
-<input {{this.autofocus}} />
\ No newline at end of file
diff --git a/content/2-templating/5-dom-ref/ember/input-indeterminate.hbs b/content/2-templating/5-dom-ref/ember/input-indeterminate.hbs
new file mode 100644
index 00000000..feef53a9
--- /dev/null
+++ b/content/2-templating/5-dom-ref/ember/input-indeterminate.hbs
@@ -0,0 +1 @@
+<input type="checkbox" {{this.autofocus}} />
diff --git a/content/2-templating/5-dom-ref/ember/input-focused.js b/content/2-templating/5-dom-ref/ember/input-indeterminate.js
similarity index 66%
rename from content/2-templating/5-dom-ref/ember/input-focused.js
rename to content/2-templating/5-dom-ref/ember/input-indeterminate.js
index f9013055..be22c31c 100644
--- a/content/2-templating/5-dom-ref/ember/input-focused.js
+++ b/content/2-templating/5-dom-ref/ember/input-indeterminate.js
@@ -1,8 +1,8 @@
 import Component from "@glimmer/component";
 import { modifier } from "ember-modifier";
 
-export default class InputFocused extends Component {
-  autofocus = modifier((element) => element.focus());
+export default class InputIndeterminate extends Component {
+  indeterminate = modifier((element) => element.indeterminate = true);
 }
 
 /**
@@ -13,6 +13,6 @@ export default class InputFocused extends Component {
  *    - ember-modifier becomes default part of blueprint
  *  - https://github.com/emberjs/rfcs/pull/757
  *    - dependencyless support for using
- *       `autofocus = element => element.focus()`
+ *       `indeterminate = element => element.indeterminate = true`
  *       instead
  */
diff --git a/content/2-templating/5-dom-ref/lit/input-focused.js b/content/2-templating/5-dom-ref/lit/input-focused.js
deleted file mode 100644
index 75bb7589..00000000
--- a/content/2-templating/5-dom-ref/lit/input-focused.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { LitElement, html } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { ref, createRef } from "lit/directives/ref.js";
-
-@customElement("input-focused")
-export class InputFocused extends LitElement {
-  inputRef = createRef();
-
-  firstUpdated() {
-    this.inputRef.value.focus();
-  }
-
-  render() {
-    return html`<input type="text" ${ref(this.inputRef)} />`;
-  }
-}
diff --git a/content/2-templating/5-dom-ref/lit/input-indeterminate.js b/content/2-templating/5-dom-ref/lit/input-indeterminate.js
new file mode 100644
index 00000000..8763d490
--- /dev/null
+++ b/content/2-templating/5-dom-ref/lit/input-indeterminate.js
@@ -0,0 +1,16 @@
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { ref, createRef } from "lit/directives/ref.js";
+
+@customElement("input-indeterminate")
+export class InputIndeterminate extends LitElement {
+  inputRef = createRef();
+
+  firstUpdated() {
+    this.inputRef.value.indeterminate = true;
+  }
+
+  render() {
+    return html`<input type="checkbox" ${ref(this.inputRef)} />`;
+  }
+}
diff --git a/content/2-templating/5-dom-ref/qwik/InputFocused.tsx b/content/2-templating/5-dom-ref/qwik/InputFocused.tsx
deleted file mode 100644
index aeecbfc6..00000000
--- a/content/2-templating/5-dom-ref/qwik/InputFocused.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { component$, useClientEffect$, useRef } from "@builder.io/qwik";
-
-export const InputFocused = component$(() => {
-  const inputElement = useRef(null);
-
-  useClientEffect$(() => inputElement.current.focus());
-
-  return <input type="text" ref={inputElement} />;
-});
diff --git a/content/2-templating/5-dom-ref/qwik/InputIndeterminate.tsx b/content/2-templating/5-dom-ref/qwik/InputIndeterminate.tsx
new file mode 100644
index 00000000..0d210f97
--- /dev/null
+++ b/content/2-templating/5-dom-ref/qwik/InputIndeterminate.tsx
@@ -0,0 +1,9 @@
+import { component$, useClientEffect$, useRef } from "@builder.io/qwik";
+
+export const InputIndeterminate = component$(() => {
+  const inputElement = useRef(null);
+
+  useClientEffect$(() => inputElement.current.indeterminate = true);
+
+  return <input type="checkbox" ref={inputElement} />;
+});
diff --git a/content/2-templating/5-dom-ref/react/InputFocused.jsx b/content/2-templating/5-dom-ref/react/InputFocused.jsx
deleted file mode 100644
index ca6d2d86..00000000
--- a/content/2-templating/5-dom-ref/react/InputFocused.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useEffect, useRef } from "react";
-
-export default function InputFocused() {
-  const inputElement = useRef(null);
-
-  useEffect(() => inputElement.current.focus(), []);
-
-  return <input type="text" ref={inputElement} />;
-}
diff --git a/content/2-templating/5-dom-ref/react/InputIndeterminate.jsx b/content/2-templating/5-dom-ref/react/InputIndeterminate.jsx
new file mode 100644
index 00000000..479aac39
--- /dev/null
+++ b/content/2-templating/5-dom-ref/react/InputIndeterminate.jsx
@@ -0,0 +1,9 @@
+import { useEffect, useRef } from "react";
+
+export default function InputIndeterminate() {
+  const inputElement = useRef(null);
+
+  useEffect(() => inputElement.current.indeterminate = true, []);
+
+  return <input type="checkbox" ref={inputElement} />;
+}
diff --git a/content/2-templating/5-dom-ref/solid/InputFocused.jsx b/content/2-templating/5-dom-ref/solid/InputFocused.jsx
deleted file mode 100644
index ae57c3b4..00000000
--- a/content/2-templating/5-dom-ref/solid/InputFocused.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { onMount } from "solid-js";
-
-export default function InputFocused() {
-  let inputElement;
-
-  onMount(() => inputElement.focus());
-
-  return <input ref={inputElement} type="text" />;
-}
diff --git a/content/2-templating/5-dom-ref/solid/InputIndeterminate.jsx b/content/2-templating/5-dom-ref/solid/InputIndeterminate.jsx
new file mode 100644
index 00000000..9d40f4b5
--- /dev/null
+++ b/content/2-templating/5-dom-ref/solid/InputIndeterminate.jsx
@@ -0,0 +1,9 @@
+import { onMount } from "solid-js";
+
+export default function InputIndeterminate() {
+  let inputElement;
+
+  onMount(() => inputElement.indeterminate = true);
+
+  return <input ref={inputElement} type="checkbox" />;
+}
diff --git a/content/2-templating/5-dom-ref/svelte/InputFocused.svelte b/content/2-templating/5-dom-ref/svelte/InputIndeterminate.svelte
similarity index 53%
rename from content/2-templating/5-dom-ref/svelte/InputFocused.svelte
rename to content/2-templating/5-dom-ref/svelte/InputIndeterminate.svelte
index db28c31c..237f0e55 100644
--- a/content/2-templating/5-dom-ref/svelte/InputFocused.svelte
+++ b/content/2-templating/5-dom-ref/svelte/InputIndeterminate.svelte
@@ -4,8 +4,8 @@
   let inputElement;
 
   onMount(() => {
-    inputElement.focus();
+    inputElement.indeterminate = true;
   });
 </script>
 
-<input bind:this={inputElement} />
+<input bind:this={inputElement} type="checkbox" />
diff --git a/content/2-templating/5-dom-ref/vue2/InputFocused.vue b/content/2-templating/5-dom-ref/vue2/InputFocused.vue
deleted file mode 100644
index 596e344b..00000000
--- a/content/2-templating/5-dom-ref/vue2/InputFocused.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-export default {
-  mounted() {
-    this.$refs.inputElement.focus();
-  },
-};
-</script>
-
-<template>
-  <input ref="inputElement">
-</template>
diff --git a/content/2-templating/5-dom-ref/vue2/InputIndeterminate.vue b/content/2-templating/5-dom-ref/vue2/InputIndeterminate.vue
new file mode 100644
index 00000000..ac7c30c1
--- /dev/null
+++ b/content/2-templating/5-dom-ref/vue2/InputIndeterminate.vue
@@ -0,0 +1,14 @@
+<script>
+export default {
+  mounted() {
+    this.$refs.inputElement.indeterminate = true;
+  },
+};
+</script>
+
+<template>
+  <input
+    ref="inputElement"
+    type="checkbox"
+  >
+</template>
diff --git a/content/2-templating/5-dom-ref/vue3/InputFocused.vue b/content/2-templating/5-dom-ref/vue3/InputIndeterminate.vue
similarity index 58%
rename from content/2-templating/5-dom-ref/vue3/InputFocused.vue
rename to content/2-templating/5-dom-ref/vue3/InputIndeterminate.vue
index fb07dbba..0ad36daa 100644
--- a/content/2-templating/5-dom-ref/vue3/InputFocused.vue
+++ b/content/2-templating/5-dom-ref/vue3/InputIndeterminate.vue
@@ -4,10 +4,13 @@ import { ref, onMounted } from "vue";
 const inputElement = ref();
 
 onMounted(() => {
-  inputElement.value.focus();
+  inputElement.value.indeterminate = true;
 });
 </script>
 
 <template>
-  <input ref="inputElement">
+  <input
+    ref="inputElement"
+    type="checkbox"
+  >
 </template>
diff --git a/content/2-templating/6-conditional/alpine/index.html b/content/2-templating/6-conditional/alpine/index.html
index fa9cf97e..59c20f7c 100644
--- a/content/2-templating/6-conditional/alpine/index.html
+++ b/content/2-templating/6-conditional/alpine/index.html
@@ -4,11 +4,7 @@
   lightIndex: 0,
   get light() { return this.TRAFFIC_LIGHTS[this.lightIndex] },
   nextLight() {
-    if (this.lightIndex + 1 > this.TRAFFIC_LIGHTS.length - 1) {
-      this.lightIndex = 0
-    } else {
-      this.lightIndex++
-    }
+    lightIndex = (lightIndex + 1) % TRAFFIC_LIGHTS.length
   }
 }"
 >
diff --git a/content/2-templating/6-conditional/angular/trafficlight.component.ts b/content/2-templating/6-conditional/angular/trafficlight.component.ts
index cfad9ef2..4235ad45 100644
--- a/content/2-templating/6-conditional/angular/trafficlight.component.ts
+++ b/content/2-templating/6-conditional/angular/trafficlight.component.ts
@@ -25,10 +25,6 @@ export class TrafficlightComponent {
   }
 
   nextLight() {
-    if (this.lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
-      this.lightIndex = 0;
-    } else {
-      this.lightIndex++;
-    }
+    this.lightIndex = (this.lightIndex + 1) % TRAFFIC_LIGHTS.length;
   }
 }
diff --git a/content/2-templating/6-conditional/aurelia1/traffic-light.ts b/content/2-templating/6-conditional/aurelia1/traffic-light.ts
index 04f73dec..7d940f6b 100644
--- a/content/2-templating/6-conditional/aurelia1/traffic-light.ts
+++ b/content/2-templating/6-conditional/aurelia1/traffic-light.ts
@@ -4,12 +4,7 @@ export class App {
   light: string = this.TRAFFIC_LIGHTS[this.lightIndex];
 
   nextLight() {
-    if (this.lightIndex + 1 > this.TRAFFIC_LIGHTS.length - 1) {
-      this.lightIndex = 0;
-    } else {
-      this.lightIndex++;
-    }
-
+    this.lightIndex = (this.lightIndex + 1) % this.TRAFFIC_LIGHTS.length;
     this.light = this.TRAFFIC_LIGHTS[this.lightIndex];
   }
 }
diff --git a/content/2-templating/6-conditional/ember/traffic-light.js b/content/2-templating/6-conditional/ember/traffic-light.js
index d1013eba..59c3b0d4 100644
--- a/content/2-templating/6-conditional/ember/traffic-light.js
+++ b/content/2-templating/6-conditional/ember/traffic-light.js
@@ -11,10 +11,6 @@ export default class TrafficLight extends Component {
   }
 
   nextLight = () => {
-    if (this.lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
-      this.lightIndex = 0;
-    } else {
-      this.lightIndex++;
-    }
+    this.lightIndex = (this.lightIndex + 1) % TRAFFIC_LIGHTS.length;
   };
 }
diff --git a/content/2-templating/6-conditional/lit/traffic-light.js b/content/2-templating/6-conditional/lit/traffic-light.js
index a22f093e..31d79aff 100644
--- a/content/2-templating/6-conditional/lit/traffic-light.js
+++ b/content/2-templating/6-conditional/lit/traffic-light.js
@@ -14,11 +14,7 @@ export class TrafficLight extends LitElement {
   }
 
   nextLight() {
-    if (this.lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
-      this.lightIndex = 0;
-    } else {
-      this.lightIndex = this.lightIndex + 1;
-    }
+    this.lightIndex = (this.lightIndex + 1) % TRAFFIC_LIGHTS.length;
   }
 
   render() {
diff --git a/content/2-templating/6-conditional/qwik/TrafficLight.tsx b/content/2-templating/6-conditional/qwik/TrafficLight.tsx
index 4e89855f..633b5d46 100644
--- a/content/2-templating/6-conditional/qwik/TrafficLight.tsx
+++ b/content/2-templating/6-conditional/qwik/TrafficLight.tsx
@@ -10,11 +10,7 @@ export const App = component$(() => {
   const light = TRAFFIC_LIGHTS[store.lightIndex];
 
   const nextLight = $(() => {
-    if (store.lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
-      store.lightIndex = 0;
-    } else {
-      store.lightIndex += 1;
-    }
+    store.lightIndex = (store.lightIndex + 1) % TRAFFIC_LIGHTS.length;
   });
 
   return (
diff --git a/content/2-templating/6-conditional/react/TrafficLight.jsx b/content/2-templating/6-conditional/react/TrafficLight.jsx
index 63a4fdc1..c8718c50 100644
--- a/content/2-templating/6-conditional/react/TrafficLight.jsx
+++ b/content/2-templating/6-conditional/react/TrafficLight.jsx
@@ -8,11 +8,7 @@ export default function TrafficLight() {
   const light = TRAFFIC_LIGHTS[lightIndex];
 
   function nextLight() {
-    if (lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
-      setLightIndex(0);
-    } else {
-      setLightIndex(lightIndex + 1);
-    }
+    setLightIndex((lightIndex + 1) % TRAFFIC_LIGHTS.length);
   }
 
   return (
diff --git a/content/2-templating/6-conditional/solid/TrafficLight.jsx b/content/2-templating/6-conditional/solid/TrafficLight.jsx
index 3bc3c0ba..28aa8b25 100644
--- a/content/2-templating/6-conditional/solid/TrafficLight.jsx
+++ b/content/2-templating/6-conditional/solid/TrafficLight.jsx
@@ -8,11 +8,7 @@ export default function TrafficLight() {
   const light = () => TRAFFIC_LIGHTS[lightIndex()];
 
   function nextLight() {
-    if (lightIndex() + 1 > TRAFFIC_LIGHTS.length - 1) {
-      setLightIndex(0);
-    } else {
-      setLightIndex(lightIndex() + 1);
-    }
+    setLightIndex((lightIndex() + 1) % TRAFFIC_LIGHTS.length);
   }
 
   return (
diff --git a/content/2-templating/6-conditional/svelte/TrafficLight.svelte b/content/2-templating/6-conditional/svelte/TrafficLight.svelte
index 8b447b5d..7eb982b4 100644
--- a/content/2-templating/6-conditional/svelte/TrafficLight.svelte
+++ b/content/2-templating/6-conditional/svelte/TrafficLight.svelte
@@ -5,11 +5,7 @@
   $: light = TRAFFIC_LIGHTS[lightIndex];
 
   function nextLight() {
-    if (lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
-      lightIndex = 0;
-    } else {
-      lightIndex++;
-    }
+    lightIndex = (lightIndex + 1) % TRAFFIC_LIGHTS.length;
   }
 </script>
 
diff --git a/content/2-templating/6-conditional/vue2/TrafficLight.vue b/content/2-templating/6-conditional/vue2/TrafficLight.vue
index 48d1feb6..f4d06327 100644
--- a/content/2-templating/6-conditional/vue2/TrafficLight.vue
+++ b/content/2-templating/6-conditional/vue2/TrafficLight.vue
@@ -13,11 +13,7 @@ export default {
   },
   methods: {
     nextLight() {
-      if (this.lightIndex + 1 > this.TRAFFIC_LIGHTS.length - 1) {
-        this.lightIndex = 0;
-      } else {
-        this.lightIndex++;
-      }
+      this.lightIndex = (this.lightIndex + 1) % this.TRAFFIC_LIGHTS.length;
     },
   },
 };
diff --git a/content/2-templating/6-conditional/vue3/TrafficLight.vue b/content/2-templating/6-conditional/vue3/TrafficLight.vue
index 0b1a68e8..e3f737ca 100644
--- a/content/2-templating/6-conditional/vue3/TrafficLight.vue
+++ b/content/2-templating/6-conditional/vue3/TrafficLight.vue
@@ -6,11 +6,7 @@ const lightIndex = ref(0);
 const light = computed(() => TRAFFIC_LIGHTS[lightIndex.value]);
 
 function nextLight() {
-  if (lightIndex.value + 1 > TRAFFIC_LIGHTS.length - 1) {
-    lightIndex.value = 0;
-  } else {
-    lightIndex.value++;
-  }
+  lightIndex.value = (lightIndex.value + 1) % TRAFFIC_LIGHTS.length;
 }
 </script>
 
diff --git a/content/3-lifecycle/1-on-mount/alpine/index.html b/content/3-lifecycle/1-on-mount/alpine/index.html
index c6766e7f..1acf0ae3 100644
--- a/content/3-lifecycle/1-on-mount/alpine/index.html
+++ b/content/3-lifecycle/1-on-mount/alpine/index.html
@@ -1,6 +1,6 @@
 <p
-  x-data="{ pageTitle: '' }"
-  x-init="$nextTick(() => { pageTitle = document.title })"
+  x-data="{ viewportSize: '' }"
+  x-init="$nextTick(() => { viewportSize = `${window.innerWidth} × ${window.innerHeight}` })"
 >
-  Page title: <span x-text="pageTitle"></span>
+  Viewport size: <span x-text="viewportSize"></span>
 </p>
diff --git a/content/3-lifecycle/1-on-mount/angular/pagetitle.component.ts b/content/3-lifecycle/1-on-mount/angular/pagetitle.component.ts
deleted file mode 100644
index 04c2b1eb..00000000
--- a/content/3-lifecycle/1-on-mount/angular/pagetitle.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component, OnInit } from "@angular/core";
-
-@Component({
-  selector: "app-pagetitle",
-  template: `<p>Page title: {{ pageTitle }}</p>`,
-})
-export class PagetitleComponent implements OnInit {
-  pageTitle = "";
-
-  ngOnInit() {
-    this.pageTitle = document.title;
-  }
-}
diff --git a/content/3-lifecycle/1-on-mount/angular/viewportsize.component.ts b/content/3-lifecycle/1-on-mount/angular/viewportsize.component.ts
new file mode 100644
index 00000000..3905b10a
--- /dev/null
+++ b/content/3-lifecycle/1-on-mount/angular/viewportsize.component.ts
@@ -0,0 +1,13 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-viewportsize",
+  template: `<p>Viewport size: {{ viewportSize }}</p>`,
+})
+export class ViewportsizeComponent implements OnInit {
+  viewportSize = "";
+
+  ngOnInit() {
+    this.viewportSize = `${window.innerWidth} × ${window.innerHeight}`;
+  }
+}
diff --git a/content/3-lifecycle/1-on-mount/aurelia1/page-title.html b/content/3-lifecycle/1-on-mount/aurelia1/page-title.html
deleted file mode 100644
index 32ab7edb..00000000
--- a/content/3-lifecycle/1-on-mount/aurelia1/page-title.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <p>Page title is: ${pageTitle}</p>
-</template>
diff --git a/content/3-lifecycle/1-on-mount/aurelia1/page-title.ts b/content/3-lifecycle/1-on-mount/aurelia1/page-title.ts
deleted file mode 100644
index 85f2cb1e..00000000
--- a/content/3-lifecycle/1-on-mount/aurelia1/page-title.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export class PageTitle {
-  pageTitle = "";
-
-  attached(): void {
-    this.pageTitle = document.title;
-  }
-}
diff --git a/content/3-lifecycle/1-on-mount/aurelia1/viewport-size.html b/content/3-lifecycle/1-on-mount/aurelia1/viewport-size.html
new file mode 100644
index 00000000..daa90cdc
--- /dev/null
+++ b/content/3-lifecycle/1-on-mount/aurelia1/viewport-size.html
@@ -0,0 +1,3 @@
+<template>
+  <p>Viewport size: ${viewportSize}</p>
+</template>
diff --git a/content/3-lifecycle/1-on-mount/aurelia1/viewport-size.ts b/content/3-lifecycle/1-on-mount/aurelia1/viewport-size.ts
new file mode 100644
index 00000000..0395615a
--- /dev/null
+++ b/content/3-lifecycle/1-on-mount/aurelia1/viewport-size.ts
@@ -0,0 +1,7 @@
+export class ViewportSize {
+  viewportSize = "";
+
+  attached(): void {
+    this.viewportSize = `${window.innerWidth} × ${window.innerHeight}`;
+  }
+}
diff --git a/content/3-lifecycle/1-on-mount/ember/page-title.hbs b/content/3-lifecycle/1-on-mount/ember/page-title.hbs
deleted file mode 100644
index 3683bbe4..00000000
--- a/content/3-lifecycle/1-on-mount/ember/page-title.hbs
+++ /dev/null
@@ -1 +0,0 @@
-<p>Page title is: {{(this.pageTitle)}}</p>
\ No newline at end of file
diff --git a/content/3-lifecycle/1-on-mount/ember/page-title.js b/content/3-lifecycle/1-on-mount/ember/page-title.js
deleted file mode 100644
index bd3b3f98..00000000
--- a/content/3-lifecycle/1-on-mount/ember/page-title.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import Component from "@glimmer/component";
-
-export default class PageTitle extends Component {
-  pageTitle = () => document.title;
-}
diff --git a/content/3-lifecycle/1-on-mount/ember/viewport-size.hbs b/content/3-lifecycle/1-on-mount/ember/viewport-size.hbs
new file mode 100644
index 00000000..f07bc543
--- /dev/null
+++ b/content/3-lifecycle/1-on-mount/ember/viewport-size.hbs
@@ -0,0 +1 @@
+<p>Viewport size: {{(this.viewportSize)}}</p>
diff --git a/content/3-lifecycle/1-on-mount/ember/viewport-size.js b/content/3-lifecycle/1-on-mount/ember/viewport-size.js
new file mode 100644
index 00000000..c9e997a1
--- /dev/null
+++ b/content/3-lifecycle/1-on-mount/ember/viewport-size.js
@@ -0,0 +1,5 @@
+import Component from "@glimmer/component";
+
+export default class ViewportSize extends Component {
+  ViewportSize = () => `${window.innerWidth} × ${window.innerHeight}`;
+}
diff --git a/content/3-lifecycle/1-on-mount/lit/page-title.js b/content/3-lifecycle/1-on-mount/lit/page-title.js
deleted file mode 100644
index b553cde9..00000000
--- a/content/3-lifecycle/1-on-mount/lit/page-title.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { LitElement, html } from "lit";
-import { customElement, state } from "lit/decorators.js";
-
-@customElement("page-title")
-export class PageTitle extends LitElement {
-  @state()
-  pageTitle = "";
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.pageTitle = document.title;
-  }
-
-  render() {
-    return html`<p>Page title: ${this.pageTitle}</p>`;
-  }
-}
diff --git a/content/3-lifecycle/1-on-mount/lit/viewport-size.js b/content/3-lifecycle/1-on-mount/lit/viewport-size.js
new file mode 100644
index 00000000..2aadad85
--- /dev/null
+++ b/content/3-lifecycle/1-on-mount/lit/viewport-size.js
@@ -0,0 +1,17 @@
+import { LitElement, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+@customElement("viewport-size")
+export class ViewportSize extends LitElement {
+  @state()
+  viewportSize = "";
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.viewportSize = `${window.innerWidth} × ${window.innerHeight}`;
+  }
+
+  render() {
+    return html`<p>Viewport size: ${this.viewportSize}</p>`;
+  }
+}
diff --git a/content/3-lifecycle/1-on-mount/qwik/PageTitle.tsx b/content/3-lifecycle/1-on-mount/qwik/ViewportSize.tsx
similarity index 55%
rename from content/3-lifecycle/1-on-mount/qwik/PageTitle.tsx
rename to content/3-lifecycle/1-on-mount/qwik/ViewportSize.tsx
index 86fd386d..029a7dac 100644
--- a/content/3-lifecycle/1-on-mount/qwik/PageTitle.tsx
+++ b/content/3-lifecycle/1-on-mount/qwik/ViewportSize.tsx
@@ -2,12 +2,12 @@ import { component$, useClientEffect$, useStore } from "@builder.io/qwik";
 
 export const App = component$(() => {
   const store = useStore({
-    pageTitle: "",
+    viewportSize: "",
   });
 
   useClientEffect$(() => {
-    store.pageTitle = document.title;
+    store.viewportSize = `${window.innerWidth} × ${window.innerHeight}`;
   });
 
-  return <p>Page title: {store.pageTitle}</p>;
+  return <p>Viewport size: {store.viewportSize}</p>;
 });
diff --git a/content/3-lifecycle/1-on-mount/react/PageTitle.jsx b/content/3-lifecycle/1-on-mount/react/PageTitle.jsx
deleted file mode 100644
index 618af024..00000000
--- a/content/3-lifecycle/1-on-mount/react/PageTitle.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { useState, useEffect } from "react";
-
-export default function PageTitle() {
-  const [pageTitle, setPageTitle] = useState("");
-
-  useEffect(() => {
-    setPageTitle(document.title);
-  }, []);
-
-  return <p>Page title: {pageTitle}</p>;
-}
diff --git a/content/3-lifecycle/1-on-mount/react/ViewportSize.jsx b/content/3-lifecycle/1-on-mount/react/ViewportSize.jsx
new file mode 100644
index 00000000..9133690f
--- /dev/null
+++ b/content/3-lifecycle/1-on-mount/react/ViewportSize.jsx
@@ -0,0 +1,11 @@
+import { useState, useEffect } from "react";
+
+export default function ViewportSize() {
+  const [viewportSize, setViewportSize] = useState("");
+
+  useEffect(() => {
+    setViewportSize(`${window.innerWidth} × ${window.innerHeight}`);
+  }, []);
+
+  return <p>Viewport size: {viewportSize}</p>;
+}
diff --git a/content/3-lifecycle/1-on-mount/solid/PageTitle.jsx b/content/3-lifecycle/1-on-mount/solid/PageTitle.jsx
deleted file mode 100644
index 60749e26..00000000
--- a/content/3-lifecycle/1-on-mount/solid/PageTitle.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { createSignal, onMount } from "solid-js";
-
-export default function PageTitle() {
-  const [pageTitle, setPageTitle] = createSignal("");
-
-  onMount(() => {
-    setPageTitle(document.title);
-  });
-
-  return <p>Page title: {pageTitle()}</p>;
-}
diff --git a/content/3-lifecycle/1-on-mount/solid/ViewportSize.jsx b/content/3-lifecycle/1-on-mount/solid/ViewportSize.jsx
new file mode 100644
index 00000000..b41bf600
--- /dev/null
+++ b/content/3-lifecycle/1-on-mount/solid/ViewportSize.jsx
@@ -0,0 +1,11 @@
+import { createSignal, onMount } from "solid-js";
+
+export default function ViewportSize() {
+  const [viewportSize, setViewportSize] = createSignal("");
+
+  onMount(() => {
+    setViewportSize(`${window.innerWidth} × ${window.innerHeight}`);
+  });
+
+  return <p>Viewport size: {viewportSize()}</p>;
+}
diff --git a/content/3-lifecycle/1-on-mount/svelte/PageTitle.svelte b/content/3-lifecycle/1-on-mount/svelte/PageTitle.svelte
deleted file mode 100644
index 5bcb1dc4..00000000
--- a/content/3-lifecycle/1-on-mount/svelte/PageTitle.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-  import { onMount } from "svelte";
-  let pageTitle = "";
-  onMount(() => {
-    pageTitle = document.title;
-  });
-</script>
-
-<p>Page title is: {pageTitle}</p>
diff --git a/content/3-lifecycle/1-on-mount/svelte/ViewportSize.svelte b/content/3-lifecycle/1-on-mount/svelte/ViewportSize.svelte
new file mode 100644
index 00000000..11c237d7
--- /dev/null
+++ b/content/3-lifecycle/1-on-mount/svelte/ViewportSize.svelte
@@ -0,0 +1,9 @@
+<script>
+  import { onMount } from "svelte";
+  let viewportSize = "";
+  onMount(() => {
+    viewportSize = `${window.innerWidth} × ${window.innerHeight}`;
+  });
+</script>
+
+<p>Viewport size: {viewportSize}</p>
diff --git a/content/3-lifecycle/1-on-mount/vue2/PageTitle.vue b/content/3-lifecycle/1-on-mount/vue2/PageTitle.vue
deleted file mode 100644
index bddf2f01..00000000
--- a/content/3-lifecycle/1-on-mount/vue2/PageTitle.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      pageTitle: "",
-    };
-  },
-  mounted() {
-    this.pageTitle = document.title;
-  },
-};
-</script>
-
-<template>
-  <p>Page title: {{ pageTitle }}</p>
-</template>
diff --git a/content/3-lifecycle/1-on-mount/vue2/ViewportSize.vue b/content/3-lifecycle/1-on-mount/vue2/ViewportSize.vue
new file mode 100644
index 00000000..ef69f9c3
--- /dev/null
+++ b/content/3-lifecycle/1-on-mount/vue2/ViewportSize.vue
@@ -0,0 +1,16 @@
+<script>
+export default {
+  data() {
+    return {
+      viewportSize: "",
+    };
+  },
+  mounted() {
+    this.viewportSize = `${window.innerWidth} × ${window.innerHeight}`;
+  },
+};
+</script>
+
+<template>
+  <p>Viewport size: {{ viewportSize }}</p>
+</template>
diff --git a/content/3-lifecycle/1-on-mount/vue3/PageTitle.vue b/content/3-lifecycle/1-on-mount/vue3/PageTitle.vue
deleted file mode 100644
index 6b145af1..00000000
--- a/content/3-lifecycle/1-on-mount/vue3/PageTitle.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup>
-import { ref, onMounted } from "vue";
-const pageTitle = ref("");
-onMounted(() => {
-  pageTitle.value = document.title;
-});
-</script>
-
-<template>
-  <p>Page title: {{ pageTitle }}</p>
-</template>
diff --git a/content/3-lifecycle/1-on-mount/vue3/ViewportSize.vue b/content/3-lifecycle/1-on-mount/vue3/ViewportSize.vue
new file mode 100644
index 00000000..1516fd1c
--- /dev/null
+++ b/content/3-lifecycle/1-on-mount/vue3/ViewportSize.vue
@@ -0,0 +1,11 @@
+<script setup>
+import { ref, onMounted } from "vue";
+const viewportSize = ref("");
+onMounted(() => {
+  viewportSize.value = `${window.innerWidth} × ${window.innerHeight}`;
+});
+</script>
+
+<template>
+  <p>Viewport size: {{ viewportSize }}</p>
+</template>
diff --git a/content/4-component-composition/2-emit-to-parent/vue2/App.vue b/content/4-component-composition/2-emit-to-parent/vue2/App.vue
index 461f7ff0..1d9e5aab 100644
--- a/content/4-component-composition/2-emit-to-parent/vue2/App.vue
+++ b/content/4-component-composition/2-emit-to-parent/vue2/App.vue
@@ -23,7 +23,10 @@ export default {
 <template>
   <div>
     <p>Are you happy?</p>
-    <AnswerButton @yes="onAnswerYes" @no="onAnswerNo" />
+    <AnswerButton
+      @yes="onAnswerYes"
+      @no="onAnswerNo"
+    />
     <p style="font-size: 50px">
       {{ canCome ? "😀" : "😥" }}
     </p>
diff --git a/content/4-component-composition/2-emit-to-parent/vue3/App.vue b/content/4-component-composition/2-emit-to-parent/vue3/App.vue
index f63e1da1..8fb7005b 100644
--- a/content/4-component-composition/2-emit-to-parent/vue3/App.vue
+++ b/content/4-component-composition/2-emit-to-parent/vue3/App.vue
@@ -15,7 +15,10 @@ function onAnswerYes() {
 
 <template>
   <p>Are you happy?</p>
-  <AnswerButton @yes="onAnswerYes" @no="onAnswerNo" />
+  <AnswerButton
+    @yes="onAnswerYes"
+    @no="onAnswerNo"
+  />
   <p style="font-size: 50px">
     {{ canCome ? "😀" : "😥" }}
   </p>
diff --git a/content/7-webapp-features/1-render-app/vue3/App.vue b/content/7-webapp-features/1-render-app/vue3/App.vue
index 85a44655..5fb8e4d2 100644
--- a/content/7-webapp-features/1-render-app/vue3/App.vue
+++ b/content/7-webapp-features/1-render-app/vue3/App.vue
@@ -1,3 +1,3 @@
 <template>
-    <h1>Hello world</h1>
+  <h1>Hello world</h1>
 </template>