From fa7caf0cdd405f2e13b21085043ca0b246ec8c19 Mon Sep 17 00:00:00 2001
From: Taylor Hunt <tayhunt@ebay.com>
Date: Mon, 23 Jan 2023 16:23:05 -0500
Subject: [PATCH 1/4] Fix existing lint warnings

---
 .../4-component-composition/2-emit-to-parent/vue2/App.vue    | 5 ++++-
 .../4-component-composition/2-emit-to-parent/vue3/App.vue    | 5 ++++-
 content/7-webapp-features/1-render-app/vue3/App.vue          | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

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>

From 3bae07b3659be53c76dcbd998dc3580bc917d4bc Mon Sep 17 00:00:00 2001
From: Taylor Hunt <tayhunt@ebay.com>
Date: Mon, 23 Jan 2023 16:26:43 -0500
Subject: [PATCH 2/4] Use mixed checkbox instead of `.focus()` for DOM refs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When opening the existing `elementRef.focus()` examples in their frameworks’ playgrounds,
the call to `.focus()` would be ignored because of `<iframe>` reasons or something. This
change no longer seems like it’s broken when attempting to view it, and as a bonus it
gets rid of the ambiguity between which frameworks used `type="text"` and which omitted
it (Was it because the framework needs explicit attributes with default values, or
because some example authors preferred to leave it off?)
---
 content/2-templating/5-dom-ref/alpine/index.html |  2 +-
 .../5-dom-ref/angular/inputfocused.component.ts  | 14 --------------
 .../angular/inputindeterminate.component.ts      | 14 ++++++++++++++
 .../5-dom-ref/aurelia1/input-focused.html        |  3 ---
 .../5-dom-ref/aurelia1/input-focused.ts          |  7 -------
 .../5-dom-ref/aurelia1/input-indeterminate.html  |  3 +++
 .../5-dom-ref/aurelia1/input-indeterminate.ts    |  7 +++++++
 .../5-dom-ref/ember/input-focused.hbs            |  1 -
 .../5-dom-ref/ember/input-indeterminate.hbs      |  1 +
 .../{input-focused.js => input-indeterminate.js} |  6 +++---
 .../2-templating/5-dom-ref/lit/input-focused.js  | 16 ----------------
 .../5-dom-ref/lit/input-indeterminate.js         | 16 ++++++++++++++++
 .../2-templating/5-dom-ref/qwik/InputFocused.tsx |  9 ---------
 .../5-dom-ref/qwik/InputIndeterminate.tsx        |  9 +++++++++
 .../5-dom-ref/react/InputFocused.jsx             |  9 ---------
 .../5-dom-ref/react/InputIndeterminate.jsx       |  9 +++++++++
 .../5-dom-ref/solid/InputFocused.jsx             |  9 ---------
 .../5-dom-ref/solid/InputIndeterminate.jsx       |  9 +++++++++
 ...tFocused.svelte => InputIndeterminate.svelte} |  4 ++--
 .../2-templating/5-dom-ref/vue2/InputFocused.vue | 11 -----------
 .../5-dom-ref/vue2/InputIndeterminate.vue        | 14 ++++++++++++++
 .../{InputFocused.vue => InputIndeterminate.vue} |  7 +++++--
 22 files changed, 93 insertions(+), 87 deletions(-)
 delete mode 100644 content/2-templating/5-dom-ref/angular/inputfocused.component.ts
 create mode 100644 content/2-templating/5-dom-ref/angular/inputindeterminate.component.ts
 delete mode 100644 content/2-templating/5-dom-ref/aurelia1/input-focused.html
 delete mode 100644 content/2-templating/5-dom-ref/aurelia1/input-focused.ts
 create mode 100644 content/2-templating/5-dom-ref/aurelia1/input-indeterminate.html
 create mode 100644 content/2-templating/5-dom-ref/aurelia1/input-indeterminate.ts
 delete mode 100644 content/2-templating/5-dom-ref/ember/input-focused.hbs
 create mode 100644 content/2-templating/5-dom-ref/ember/input-indeterminate.hbs
 rename content/2-templating/5-dom-ref/ember/{input-focused.js => input-indeterminate.js} (66%)
 delete mode 100644 content/2-templating/5-dom-ref/lit/input-focused.js
 create mode 100644 content/2-templating/5-dom-ref/lit/input-indeterminate.js
 delete mode 100644 content/2-templating/5-dom-ref/qwik/InputFocused.tsx
 create mode 100644 content/2-templating/5-dom-ref/qwik/InputIndeterminate.tsx
 delete mode 100644 content/2-templating/5-dom-ref/react/InputFocused.jsx
 create mode 100644 content/2-templating/5-dom-ref/react/InputIndeterminate.jsx
 delete mode 100644 content/2-templating/5-dom-ref/solid/InputFocused.jsx
 create mode 100644 content/2-templating/5-dom-ref/solid/InputIndeterminate.jsx
 rename content/2-templating/5-dom-ref/svelte/{InputFocused.svelte => InputIndeterminate.svelte} (53%)
 delete mode 100644 content/2-templating/5-dom-ref/vue2/InputFocused.vue
 create mode 100644 content/2-templating/5-dom-ref/vue2/InputIndeterminate.vue
 rename content/2-templating/5-dom-ref/vue3/{InputFocused.vue => InputIndeterminate.vue} (58%)

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>

From 88021ae314f091f59d91bfc561175cbf1cbfa2b6 Mon Sep 17 00:00:00 2001
From: Taylor Hunt <tayhunt@ebay.com>
Date: Mon, 23 Jan 2023 16:30:37 -0500
Subject: [PATCH 3/4] Simplify traffic light logic

The `lightIndex` selection logic can be simplified, which seems like a net win for the
goal of this site; less attention on the non-framework-specific parts means more
attention on the differences between components.
---
 content/2-templating/6-conditional/alpine/index.html       | 6 +-----
 .../6-conditional/angular/trafficlight.component.ts        | 6 +-----
 .../2-templating/6-conditional/aurelia1/traffic-light.ts   | 7 +------
 content/2-templating/6-conditional/ember/traffic-light.js  | 6 +-----
 content/2-templating/6-conditional/lit/traffic-light.js    | 6 +-----
 content/2-templating/6-conditional/qwik/TrafficLight.tsx   | 6 +-----
 content/2-templating/6-conditional/react/TrafficLight.jsx  | 6 +-----
 content/2-templating/6-conditional/solid/TrafficLight.jsx  | 6 +-----
 .../2-templating/6-conditional/svelte/TrafficLight.svelte  | 6 +-----
 content/2-templating/6-conditional/vue2/TrafficLight.vue   | 6 +-----
 content/2-templating/6-conditional/vue3/TrafficLight.vue   | 6 +-----
 11 files changed, 11 insertions(+), 56 deletions(-)

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>
 

From 6c3246eea4786c4b2d8fd4c1a555d7e682557747 Mon Sep 17 00:00:00 2001
From: Taylor Hunt <tayhunt@ebay.com>
Date: Mon, 23 Jan 2023 16:41:42 -0500
Subject: [PATCH 4/4] Use viewport dimensions instead of document title, for
 playgrounds
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Since most framework playgrounds output into an `<iframe>`, their
`document.title` properties end up being the empty string unless
set by the component code. This made the samples look broken when
loaded into playgrounds, so instead this uses runtime properties
that every `<iframe>` can’t help but have.
---
 .../3-lifecycle/1-on-mount/alpine/index.html    |  6 +++---
 .../1-on-mount/angular/pagetitle.component.ts   | 13 -------------
 .../angular/viewportsize.component.ts           | 13 +++++++++++++
 .../1-on-mount/aurelia1/page-title.html         |  3 ---
 .../1-on-mount/aurelia1/page-title.ts           |  7 -------
 .../1-on-mount/aurelia1/viewport-size.html      |  3 +++
 .../1-on-mount/aurelia1/viewport-size.ts        |  7 +++++++
 .../3-lifecycle/1-on-mount/ember/page-title.hbs |  1 -
 .../3-lifecycle/1-on-mount/ember/page-title.js  |  5 -----
 .../1-on-mount/ember/viewport-size.hbs          |  1 +
 .../1-on-mount/ember/viewport-size.js           |  5 +++++
 .../3-lifecycle/1-on-mount/lit/page-title.js    | 17 -----------------
 .../3-lifecycle/1-on-mount/lit/viewport-size.js | 17 +++++++++++++++++
 .../qwik/{PageTitle.tsx => ViewportSize.tsx}    |  6 +++---
 .../3-lifecycle/1-on-mount/react/PageTitle.jsx  | 11 -----------
 .../1-on-mount/react/ViewportSize.jsx           | 11 +++++++++++
 .../3-lifecycle/1-on-mount/solid/PageTitle.jsx  | 11 -----------
 .../1-on-mount/solid/ViewportSize.jsx           | 11 +++++++++++
 .../1-on-mount/svelte/PageTitle.svelte          |  9 ---------
 .../1-on-mount/svelte/ViewportSize.svelte       |  9 +++++++++
 .../3-lifecycle/1-on-mount/vue2/PageTitle.vue   | 16 ----------------
 .../1-on-mount/vue2/ViewportSize.vue            | 16 ++++++++++++++++
 .../3-lifecycle/1-on-mount/vue3/PageTitle.vue   | 11 -----------
 .../1-on-mount/vue3/ViewportSize.vue            | 11 +++++++++++
 24 files changed, 110 insertions(+), 110 deletions(-)
 delete mode 100644 content/3-lifecycle/1-on-mount/angular/pagetitle.component.ts
 create mode 100644 content/3-lifecycle/1-on-mount/angular/viewportsize.component.ts
 delete mode 100644 content/3-lifecycle/1-on-mount/aurelia1/page-title.html
 delete mode 100644 content/3-lifecycle/1-on-mount/aurelia1/page-title.ts
 create mode 100644 content/3-lifecycle/1-on-mount/aurelia1/viewport-size.html
 create mode 100644 content/3-lifecycle/1-on-mount/aurelia1/viewport-size.ts
 delete mode 100644 content/3-lifecycle/1-on-mount/ember/page-title.hbs
 delete mode 100644 content/3-lifecycle/1-on-mount/ember/page-title.js
 create mode 100644 content/3-lifecycle/1-on-mount/ember/viewport-size.hbs
 create mode 100644 content/3-lifecycle/1-on-mount/ember/viewport-size.js
 delete mode 100644 content/3-lifecycle/1-on-mount/lit/page-title.js
 create mode 100644 content/3-lifecycle/1-on-mount/lit/viewport-size.js
 rename content/3-lifecycle/1-on-mount/qwik/{PageTitle.tsx => ViewportSize.tsx} (55%)
 delete mode 100644 content/3-lifecycle/1-on-mount/react/PageTitle.jsx
 create mode 100644 content/3-lifecycle/1-on-mount/react/ViewportSize.jsx
 delete mode 100644 content/3-lifecycle/1-on-mount/solid/PageTitle.jsx
 create mode 100644 content/3-lifecycle/1-on-mount/solid/ViewportSize.jsx
 delete mode 100644 content/3-lifecycle/1-on-mount/svelte/PageTitle.svelte
 create mode 100644 content/3-lifecycle/1-on-mount/svelte/ViewportSize.svelte
 delete mode 100644 content/3-lifecycle/1-on-mount/vue2/PageTitle.vue
 create mode 100644 content/3-lifecycle/1-on-mount/vue2/ViewportSize.vue
 delete mode 100644 content/3-lifecycle/1-on-mount/vue3/PageTitle.vue
 create mode 100644 content/3-lifecycle/1-on-mount/vue3/ViewportSize.vue

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>