From 990c21f7f32772f84a14ad36dbae07086883e10d Mon Sep 17 00:00:00 2001
From: Nayan Gautam <50981692+698969@users.noreply.github.com>
Date: Mon, 25 Oct 2021 15:11:12 +0545
Subject: [PATCH] [docs] Replace double tildes with Math.trunc in tutorials
 (#6880)

Using double tildes for truncating fractional numbers isn't readable for people who haven't encountered it before
---
 .../10-transitions/04-custom-css-transitions/app-b/App.svelte   | 2 +-
 .../tutorial/10-transitions/04-custom-css-transitions/text.md   | 2 +-
 .../10-transitions/05-custom-js-transitions/app-b/App.svelte    | 2 +-
 .../tutorial/10-transitions/05-custom-js-transitions/text.md    | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/content/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte b/site/content/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
index a98f38272a..4bb475157c 100644
--- a/site/content/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
+++ b/site/content/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
@@ -13,7 +13,7 @@
 				return `
 					transform: scale(${eased}) rotate(${eased * 1080}deg);
 					color: hsl(
-						${~~(t * 360)},
+						${Math.trunc(t * 360)},
 						${Math.min(100, 1000 - 1000 * t)}%,
 						${Math.min(50, 500 - 500 * t)}%
 					);`
diff --git a/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md b/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md
index 0745a5924d..b9b062302a 100644
--- a/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md
+++ b/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md
@@ -59,7 +59,7 @@ We can get a lot more creative though. Let's make something truly gratuitous:
 				return `
 					transform: scale(${eased}) rotate(${eased * 1080}deg);
 					color: hsl(
-						${~~(t * 360)},
+						${Math.trunc(t * 360)},
 						${Math.min(100, 1000 - 1000 * t)}%,
 						${Math.min(50, 500 - 500 * t)}%
 					);`
diff --git a/site/content/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte b/site/content/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
index 90701aeab4..563803387b 100644
--- a/site/content/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
+++ b/site/content/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
@@ -17,7 +17,7 @@
 		return {
 			duration,
 			tick: t => {
-				const i = ~~(text.length * t);
+				const i = Math.trunc(text.length * t);
 				node.textContent = text.slice(0, i);
 			}
 		};
diff --git a/site/content/tutorial/10-transitions/05-custom-js-transitions/text.md b/site/content/tutorial/10-transitions/05-custom-js-transitions/text.md
index 25b8d0bd52..38c716504e 100644
--- a/site/content/tutorial/10-transitions/05-custom-js-transitions/text.md
+++ b/site/content/tutorial/10-transitions/05-custom-js-transitions/text.md
@@ -21,7 +21,7 @@ function typewriter(node, { speed = 1 }) {
 	return {
 		duration,
 		tick: t => {
-			const i = ~~(text.length * t);
+			const i = Math.trunc(text.length * t);
 			node.textContent = text.slice(0, i);
 		}
 	};