Small consistency fixes and typos across quickstarts (#4813)

docs/tutorial/cpp/src/conclusion.md

@@ -7,8 +7,8 @@ game. There is much more to Slint, such as layouts, widgets, or styling.
 
 We recommend the following links to continue:
 
--   [Examples](https://github.com/slint-ui/slint/tree/master/examples): In the Slint repository we have collected several demos and examples. These are a great starting point to learn how to use many Slint features.
+-   [Examples](https://github.com/slint-ui/slint/tree/master/examples): The Slint repository has several demos and examples. These are a great starting point to learn how to use many Slint features.
     -   [Todo Example](https://github.com/slint-ui/slint/tree/master/examples/todo): This is one of the examples that implements a classic use-case.
     -   [Memory Puzzle](https://github.com/slint-ui/slint/tree/master/examples/memory): This is a slightly more polished version of the code in this example and you can <a href="https://slint.dev/demos/memory/" target="_blank">play the wasm version</a> in your browser.
 -   [Slint API Docs](https://slint.dev/docs/rust/slint/): The reference documentation for the main Rust crate.
--   [Slint Interpreter API Docs](https://slint.dev/docs/rust/slint_interpreter/): The reference documentation for Rust crate that allows you to dynamically load Slint files.
+-   [Slint Interpreter API Docs](https://slint.dev/docs/rust/slint_interpreter/): The reference documentation for the Rust crate that allows you to dynamically load Slint files.

docs/tutorial/cpp/src/from_one_to_multiple_tiles.md

@@ -15,7 +15,7 @@ After modeling a single tile, this step creates a grid of them. For the grid to
 With Slint you declare an array of structures based on a model using square brackets. Use a <span class="hljs-keyword">for</span> loop
 to create multiple instances of the same element.
 
-With Slint the <span class="hljs-keyword">for</span> loop is declarative and automatically updates when
+The <span class="hljs-keyword">for</span> loop is declarative and automatically updates when
 the model changes. The loop instantiates all the <span class="hljs-title">MemoryTile</span> elements and places them on a grid based on their
 index with spacing between the tiles.
 

docs/tutorial/cpp/src/game_logic_in_cpp.md

@@ -2,7 +2,7 @@
 
 # Game Logic In C++
 
-This step implements the rules of the game in C++ as well.
+This step implements the rules of the game in C++.
 
 Slint's general philosophy is that you implement the user interface in Slint and the business logic in your favorite programming
 language.
@@ -18,7 +18,7 @@ Add the following code inside the <span class="hljs-title">MainWindow</span> com
 ```
 
 This change adds a way for the <span class="hljs-title">MainWindow</span> to call to the C++ code that it should
-check if a player has solved a pair of tiles. The C++ code needs an additional property to toggle to disable further
+check if a player has solved a pair of tiles. The Rust code needs an additional property to toggle to disable further
 tile interaction, to prevent the player from opening more tiles than allowed. No cheating allowed!
 
 The last change to the code is to act when the <span class="hljs-title">MemoryTile</span> signals that a player clicked it.

docs/tutorial/cpp/src/getting_started.md

@@ -5,6 +5,8 @@
 This tutorial uses C++ as the host programming language. Slint also supports other programming languages like
 [Rust](https://slint.dev/docs/rust/slint/) or [JavaScript](https://slint.dev/docs/node/).
 
+We recommend using [our editor integrations for Slint](https://github.com/slint-ui/slint/tree/master/editors) for following this tutorial.
+
 Slint has an application template you can use to create a project with dependencies already set up that follows recommended best practices.
 
 Before using the template, you need a C++ compiler that supports C++ 20 and to install [CMake](https://cmake.org/download/) 3.21 or newer.
@@ -40,6 +42,10 @@ Configure with CMake:
 cmake -B build
 ```
 
+_Note_: When configuring with CMake, the FetchContent module fetches the source code of Slint via git.
+This may take some time when building for the first time, as the process needs to build
+the Slint runtime and compiler.
+
 Build with CMake:
 
 ```sh
@@ -67,7 +73,3 @@ my_application
 ```
 
 ![Screenshot of initial tutorial app showing Hello World](https://slint.dev/blog/memory-game-tutorial/getting-started.png "Hello World")
-
-_Note_: When configuring with CMake, the FetchContent module fetches the source code of Slint via git.
-This may take some time when building for the first time, as the process needs to build
-the Slint runtime and compiler.

docs/tutorial/cpp/src/introduction.md

@@ -2,7 +2,7 @@
 
 # Introduction
 
-This tutorial introduces you to the Slint UI framework in a playful way by implementing a memory game. It combines the `.slint` language for the graphics with the game rules implemented in Rust.
+This tutorial introduces you to the Slint UI framework in a playful way by implementing a memory game. It combines the Slint language for the graphics with the game rules implemented in C++.
 
 The game consists of a grid of 16 rectangular tiles. Clicking on a tile uncovers an icon underneath.
 There are 8 different icons in total, so each tile has a sibling somewhere in the grid with the

docs/tutorial/cpp/src/memory_tile.md

@@ -5,10 +5,10 @@
 With the skeleton code in place, this step looks at the first element of the game, the memory tile. It's the
 visual building block that consists of an underlying filled rectangle background, the icon image. Later steps add a covering rectangle that acts as a curtain.
 
-Declare the background rectangle as 64 logical pixels wide and tall
+You declare the background rectangle as 64 logical pixels wide and tall
 filled with a soothing tone of blue.
 
-Note how lengths in Slint have a unit, here, the `px` suffix.
+Lengths in Slint have a unit, here, the `px` suffix.
 This makes the code easier to read and the compiler can detect when you accidentally
 mix values with different units attached to them.
 
@@ -18,14 +18,15 @@ Copy the following code into `ui/appwindow.slint` file, replacing the current co
 {{#include memory_tile.slint:main_window}}
 ```
 
-The code exports the <span class="hljs-title">MainWindow</span> component. This is necessary so that the C++ code can access it later for business logic.
+The code exports the <span class="hljs-title">MainWindow</span> component so that the C++ code can access it later.
 
 Inside the <span class="hljs-built_in">Rectangle</span> place an <span class="hljs-built_in">Image</span> element that
 loads an icon with the <span class="hljs-built_in">@image-url()</span> macro. The path is relative to the location of `ui/appwindow.slint`.
 
 You need to install this icon and others you use later first. You can download a pre-prepared
-[Zip archive](https://slint.dev/blog/memory-game-tutorial/icons.zip) to the `ui` folder and extract it with the
-following commands:
+[Zip archive](https://slint.dev/blog/memory-game-tutorial/icons.zip) to the `ui` folder,
+
+If you are on Linux or macOS, download and extract it with the following commands:
 
 ```sh
 cd ui
@@ -37,13 +38,14 @@ cd ..
 If you are on Windows, use the following commands:
 
 ```sh
+cd ui
 powershell curl -Uri https://slint.dev/blog/memory-game-tutorial/icons.zip -Outfile icons.zip
 powershell Expand-Archive -Path icons.zip -DestinationPath .
+cd ..
 ```
 
 This unpacks an `icons` directory containing several icons.
 
-Compile the program with `cmake --build build` and running with the `./build/my_application` gives us a
-window on the screen that shows the icon of a bus on a blue background.
+Compiling the program with `cmake --build build` and running with the `./build/my_application` opens a window that shows the icon of a bus on a blue background.
 
 ![Screenshot of the first tile](https://slint.dev/blog/memory-game-tutorial/memory-tile.png "Memory Tile Screenshot")

docs/tutorial/node/src/conclusion.md

@@ -2,13 +2,13 @@
 
 # Conclusion
 
-This tutorial showed you how to combine built-in Slint elements with Rust code to build a
+This tutorial showed you how to combine built-in Slint elements with JavaScript code to build a
 game. There is much more to Slint, such as layouts, widgets, or styling.
 
 We recommend the following links to continue:
 
--   [Examples](https://github.com/slint-ui/slint/tree/master/examples): In the Slint repository we have collected several demos and examples. These are a great starting point to learn how to use many Slint features.
+-   [Examples](https://github.com/slint-ui/slint/tree/master/examples): The Slint repository has several demos and examples. These are a great starting point to learn how to use many Slint features.
     -   [Todo Example](https://github.com/slint-ui/slint/tree/master/examples/todo): This is one of the examples that implements a classic use-case.
     -   [Memory Puzzle](https://github.com/slint-ui/slint/tree/master/examples/memory): This is a slightly more polished version of the code in this example and you can <a href="https://slint.dev/demos/memory/" target="_blank">play the wasm version</a> in your browser.
 -   [Slint API Docs](https://slint.dev/docs/rust/slint/): The reference documentation for the main Rust crate.
--   [Slint Interpreter API Docs](https://slint.dev/docs/rust/slint_interpreter/): The reference documentation for Rust crate that allows you to dynamically load Slint files.
+-   [Slint Interpreter API Docs](https://slint.dev/docs/rust/slint_interpreter/): The reference documentation for the Rust crate that allows you to dynamically load Slint files.

docs/tutorial/node/src/creating_the_tiles_from_js.md

@@ -4,19 +4,19 @@
 
 This step places the game tiles randomly.
 
-The code takes the list of tiles, duplicates it, and shuffles it, accessing the `memory_tiles` property through the JavaScript code.
-
-As `memory_tiles` is an array, it's represented as a JavaScript [`Array`](https://slint.dev/docs/node/).
-You can't change the model generated by Slint, but you can extract the tiles from it, and put them
-in a [`slint.ArrayModel`](https://slint.dev/docs/node/classes/arraymodel.html) which implements the [`Model`](https://slint.dev/docs/node/interfaces/model.html) interface.
-`ArrayModel` allows you to make changes and you can use it to replace the static generated model.
-
 Change `main.js` to the following:
 
 ```js
 {{#include main_tiles_from_js.js:main}}
 ```
 
+The code takes the list of tiles, duplicates it, and shuffles it, accessing the `memory_tiles` property through the JavaScript code.
+
+As `memory_tiles` is an array, it's represented as a JavaScript [`Array`](https://slint.dev/docs/node/).
+You can't change the model generated by Slint, but you can extract the tiles from it and put them
+in a [`slint.ArrayModel`](https://slint.dev/docs/node/classes/arraymodel.html) which implements the [`Model`](https://slint.dev/docs/node/interfaces/model.html) interface.
+`ArrayModel` allows you to make changes and you can use it to replace the static generated model.
+
 Running this code opens a window that now shows a 4 by 4 grid of rectangles, which show or hide
 the icons when a player clicks on them.
 

docs/tutorial/node/src/from_one_to_multiple_tiles.md

@@ -4,7 +4,7 @@
 
 After modeling a single tile, this step creates a grid of them. For the grid to be a game board, you need two features:
 
-1. **A data model**: An array created as a Rust model, where each element describes the tile data structure, such as:
+1. **A data model**: An array created as a JavaScript model, where each element describes the tile data structure, such as:
 
     - URL of the image
     - Whether the image is visible
@@ -15,7 +15,7 @@ After modeling a single tile, this step creates a grid of them. For the grid to
 With Slint you declare an array of structures based on a model using square brackets. Use a <span class="hljs-keyword">for</span> loop
 to create multiple instances of the same element.
 
-With Slint the for loop is declarative and automatically updates when
+The <span class="hljs-keyword">for</span> loop is declarative and automatically updates when
 the model changes. The loop instantiates all the <span class="hljs-title">MemoryTile</span> elements and places them on a grid based on their
 index with spacing between the tiles.
 

docs/tutorial/node/src/game_logic_in_js.md

@@ -2,7 +2,7 @@
 
 # Game Logic In JavaScript
 
-This step implements the rules of the game in Rust as well.
+This step implements the rules of the game in JavaScript.
 
 Slint's general philosophy is that you implement the user interface in Slint and the business logic in your favorite programming
 language.
@@ -23,7 +23,7 @@ tile interaction, to prevent the player from opening more tiles than allowed. No
 
 The last change to the code is to act when the <span class="hljs-title">MemoryTile</span> signals that a player clicked it.
 
-Add the following handler in <span class="hljs-title">MainWindow</span>:
+Add the following handler in the <span class="hljs-title">MainWindow</span> `for` loop `clicked` handler:
 
 ```slint
 {{#include ../../rust/src/main_game_logic_in_rust.rs:tile_click_logic}}

docs/tutorial/node/src/getting_started.md

@@ -5,8 +5,9 @@
 This tutorial uses JavaScript as the host programming language. Slint also supports other programming languages like
 [Rust](https://slint.dev/docs/rust/slint/) or [C++](https://slint.dev/docs/cpp/).
 
-Slint has an application template you can use to create a project with dependencies already set up that follows recommended best practices.
+We recommend using [our editor integrations for Slint](https://github.com/slint-ui/slint/tree/master/editors) for following this tutorial.
 
+Slint has an application template you can use to create a project with dependencies already set up that follows recommended best practices.
 
 Clone the template with the following command:
 
@@ -29,7 +30,7 @@ Replace the contents of `src/main.js` with the following:
 {{#include main_initial.js:main}}
 ```
 
-Note that `slint.loadFile` resolves files from the process's current working directory, so from the `package.json` file's location.
+The `slint.loadFile` method resolves files from the process's current working directory, so from the `package.json` file's location.
 
 Replace the contents of `ui/appwindow.slint` with the following:
 

docs/tutorial/node/src/introduction.md

@@ -2,7 +2,7 @@
 
 # Introduction
 
-This tutorial introduces you to the Slint UI framework in a playful way by implementing a memory game. It combines the `.slint` language for the graphics with the game rules implemented in Rust.
+This tutorial introduces you to the Slint UI framework in a playful way by implementing a memory game. It combines the Slint language for the graphics with the game rules implemented in JavaScript.
 
 The game consists of a grid of 16 rectangular tiles. Clicking on a tile uncovers an icon underneath.
 There are 8 different icons in total, so each tile has a sibling somewhere in the grid with the

docs/tutorial/node/src/memory_tile.md

@@ -2,33 +2,31 @@
 
 # Memory Tile
 
-With the skeleton in place, this step looks at the first element of the game, the memory tile. It's the
-visual building block that consists of an underlying filled rectangle background, the icon image. Later you'll add a
-covering rectangle that acts as a curtain.
+With the skeleton code in place, this step looks at the first element of the game, the memory tile. It's the
+visual building block that consists of an underlying filled rectangle background, the icon image. Later steps add a covering rectangle that acts as a curtain.
 
 You declare the background rectangle as 64 logical pixels wide and tall
-and it's filled with a soothing tone of blue.
+filled with a soothing tone of blue.
 
-Note how lengths in the `.slint` language have a unit, here
-the `px` suffix. That makes the code easier to read and the compiler can detect when you accidentally
+Lengths in Slint have a unit, here, the `px` suffix.
+This makes the code easier to read and the compiler can detect when you accidentally
 mix values with different units attached to them.
 
-Copy the following into the `ui/appwindow.slint` file:
+Copy the following code into `ui/appwindow.slint` file, replacing the current content:
 
 ```slint
 {{#include memory_tile.slint:main_window}}
 ```
 
-The code exports the <span class="hljs-title">MainWindow</span> component so that the business logic can access it later.
+The code exports the <span class="hljs-title">MainWindow</span> component so that the JavaScript code can access it later.
 
 Inside the <span class="hljs-built_in">Rectangle</span> place an <span class="hljs-built_in">Image</span> element that
-loads an icon with the <span class="hljs-built_in">@image-url()</span> macro.
+loads an icon with the <span class="hljs-built_in">@image-url()</span> macro. The path is relative to the location of `ui/appwindow.slint`.
 
-The path is relative to the folder that contains `ui/appwindow.slint`. You need to install this icon and others you use later first. You can download a pre-prepared
-[Zip archive](https://slint.dev/blog/memory-game-tutorial/icons.zip) and extract it with the
-following two commands:
+You need to install this icon and others you use later first. You can download a pre-prepared
+[Zip archive](https://slint.dev/blog/memory-game-tutorial/icons.zip) to the `ui` folder,
 
-If you are on Linux or macOS, download and extract it with the following two commands:
+If you are on Linux or macOS, download and extract it with the following commands:
 
 ```sh
 cd ui
@@ -48,7 +46,7 @@ cd ..
 
 This unpacks an `icons` directory containing several icons.
 
-Running the program with `npm start` now opens a window that shows the icon of a bus on a
+Running the program with `npm start` opens a window that shows the icon of a bus on a
 blue background.
 
 ![Screenshot of the first tile](https://slint.dev/blog/memory-game-tutorial/memory-tile.png "Memory Tile Screenshot")

docs/tutorial/rust/src/conclusion.md

@@ -7,8 +7,8 @@ game. There is much more to Slint, such as layouts, widgets, or styling.
 
 We recommend the following links to continue:
 
--   [Examples](https://github.com/slint-ui/slint/tree/master/examples): In the Slint repository we have collected several demos and examples. These are a great starting point to learn how to use many Slint features.
+-   [Examples](https://github.com/slint-ui/slint/tree/master/examples): The Slint repository has several demos and examples. These are a great starting point to learn how to use many Slint features.
     -   [Todo Example](https://github.com/slint-ui/slint/tree/master/examples/todo): This is one of the examples that implements a classic use-case.
     -   [Memory Puzzle](https://github.com/slint-ui/slint/tree/master/examples/memory): This is a slightly more polished version of the code in this example and you can <a href="https://slint.dev/demos/memory/" target="_blank">play the wasm version</a> in your browser.
 -   [Slint API Docs](https://slint.dev/docs/rust/slint/): The reference documentation for the main Rust crate.
--   [Slint Interpreter API Docs](https://slint.dev/docs/rust/slint_interpreter/): The reference documentation for Rust crate that allows you to dynamically load Slint files.
+-   [Slint Interpreter API Docs](https://slint.dev/docs/rust/slint_interpreter/): The reference documentation for the Rust crate that allows you to dynamically load Slint files.

docs/tutorial/rust/src/creating_the_tiles_from_rust.md

@@ -18,13 +18,13 @@ The code takes the list of tiles, duplicates it, and shuffles it, accessing the
 
 For each top-level property,
 Slint generates a getter and a setter function. In this case `get_memory_tiles` and `set_memory_tiles`.
-Since `memory_tiles` is a Slint array, it's represented as a [`Rc<dyn slint::Model>`](https://slint.dev/docs/rust/slint/trait.Model).
+Since `memory_tiles` is a Slint array represented as a [`Rc<dyn slint::Model>`](https://slint.dev/docs/rust/slint/trait.Model).
 
 You can't change the model generated by Slint, but you can extract the tiles from it and put them
 in a [`VecModel`](https://slint.dev/docs/rust/slint/struct.VecModel) which implements the `Model` trait.
 `VecModel` lets you make changes and you can use it to replace the static generated model.
 
-Note that you clone the `tiles_model` because you'll use it later to update the game logic.
+The code clones the `tiles_model` because you use it later to update the game logic.
 
 Running this code opens a window that now shows a 4 by 4 grid of rectangles, which show or hide
 the icons when a player clicks on them.

docs/tutorial/rust/src/from_one_to_multiple_tiles.md

@@ -14,7 +14,7 @@ After modeling a single tile, this step creates a grid of them. For the grid to
 With Slint you declare an array of structures based on a model using square brackets. Use a <span class="hljs-keyword">for</span> loop
 to create multiple instances of the same element.
 
-With Slint the for loop is declarative and automatically updates when
+The <span class="hljs-keyword">for</span> loop is declarative and automatically updates when
 the model changes. The loop instantiates all the <span class="hljs-title">MemoryTile</span> elements and places them on a grid based on their
 index with spacing between the tiles.
 

docs/tutorial/rust/src/game_logic_in_rust.md

@@ -2,7 +2,7 @@
 
 # Game Logic In Rust
 
-This step implements the rules of the game in Rust as well.
+This step implements the rules of the game in Rust.
 
 Slint's general philosophy is that you implement the user interface in Slint and the business logic in your favorite programming
 language.
@@ -23,7 +23,7 @@ tile interaction, to prevent the player from opening more tiles than allowed. No
 
 The last change to the code is to act when the <span class="hljs-title">MemoryTile</span> signals that a player clicked it.
 
-Add the following handler in <span class="hljs-title">MainWindow</span>:
+Add the following handler in the <span class="hljs-title">MainWindow</span> `for` loop `clicked` handler:
 
 ```slint
 {{#include main_game_logic_in_rust.rs:tile_click_logic}}

docs/tutorial/rust/src/getting_started.md

@@ -2,7 +2,10 @@
 
 # Getting Started
 
-This tutorial assumes that you are somewhat familiar with Rust. We recommend using [rust-analyzer](https://rust-analyzer.github.io) and [our editor integrations for `.slint` files](https://github.com/slint-ui/slint/tree/master/editors) for following this tutorial.
+This tutorial uses Rust as the host programming language. Slint also supports other programming languages like
+[C++](https://slint.dev/docs/cpp/) or [JavaScript](https://slint.dev/docs/node/).
+
+We recommend using [rust-analyzer](https://rust-analyzer.github.io) and [our editor integrations for Slint](https://github.com/slint-ui/slint/tree/master/editors) for following this tutorial.
 
 Slint has an application template you can use to create a project with dependencies already set up that follows recommended best practices.
 
@@ -14,13 +17,12 @@ cargo install cargo-generate
 
 Use the template to create a new project with the following command:
 
-
 ```sh
 cargo generate --git https://github.com/slint-ui/slint-rust-template --name memory
 cd memory
 ```
 
-Replace the contents of `src/main.rs` with the hello world program from the [Slint documentation](https://slint.dev/docs/rust/slint/):
+Replace the contents of `src/main.rs` with the following:
 
 ```rust,noplayground
 {{#include main_initial.rs:main}}

docs/tutorial/rust/src/introduction.md

@@ -1,7 +1,7 @@
 <!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
 # Introduction
 
-This tutorial introduces you to the Slint UI framework in a playful way by implementing a memory game. It combines the `.slint` language for the graphics with the game rules implemented in Rust.
+This tutorial introduces you to the Slint UI framework in a playful way by implementing a memory game. It combines the Slint language for the graphics with the game rules implemented in Rust.
 
 The game consists of a grid of 16 rectangular tiles. Clicking on a tile uncovers an icon underneath.
 There are 8 different icons in total, so each tile has a sibling somewhere in the grid with the

docs/tutorial/rust/src/memory_tile.md

@@ -2,13 +2,13 @@
 
 # Memory Tile
 
-With the skeleton in place, this step looks at the first element of the game, the memory tile. It's the
+With the skeleton code in place, this step looks at the first element of the game, the memory tile. It's the
 visual building block that consists of an underlying filled rectangle background, the icon image. Later steps add a covering rectangle that acts as a curtain.
 
-Declare the background rectangle as 64 logical pixels wide and tall
+You declare the background rectangle as 64 logical pixels wide and tall
 filled with a soothing tone of blue.
 
-Note how lengths in the `.slint` language have a unit, here the `px` suffix.
+Lengths in Slint have a unit, here, the `px` suffix.
 This makes the code easier to read and the compiler can detect when you accidentally
 mix values with different units attached to them.
 
@@ -22,11 +22,11 @@ Inside the <span class="hljs-built_in">Rectangle</span> place an <span class="hl
 loads an icon with the <span class="hljs-built_in">@image-url()</span> macro.
 
 When using the `slint!` macro, the path is relative to the folder that contains the `Cargo.toml` file.
-When using `.slint` files, it's relative to the folder of the `.slint` file containing it.
+When using Slint files, it's relative to the folder of the Slint file containing it.
 
 You need to install this icon and others you use later first. You can download a pre-prepared
 [Zip archive](https://slint.dev/blog/memory-game-tutorial/icons.zip) and extract it with the
-following two commands:
+following commands:
 
 ```sh
 curl -O https://slint.dev/blog/memory-game-tutorial/icons.zip
@@ -35,7 +35,7 @@ unzip icons.zip
 
 This unpacks an `icons` directory containing several icons.
 
-Running the program with `cargo run` now opens a window  that shows the icon of a bus on a
+Running the program with `cargo run` opens a window that shows the icon of a bus on a
 blue background.
 
 ![Screenshot of the first tile](https://slint.dev/blog/memory-game-tutorial/memory-tile.png "Memory Tile Screenshot")