Fixed numerous typos and grammatical errors

docs/ch03-qtcreator/debugging.md

@@ -1,6 +1,6 @@
 # Debugging
 
-Qt Creator is an easy to use and well designed IDE to code your Qt C++ and Q<: projects. It has world class `CMake` support and is pre-configured for Qt C++ development. Due to it's excellent C++ support it can also be used for any other vanilla C++ projects.
+Qt Creator is an easy to use and well designed IDE to code your Qt C++ and Q<: projects. It has world class `CMake` support and is pre-configured for Qt C++ development. Due to its excellent C++ support it can also be used for any other vanilla C++ projects.
 
 ::: tip
 Hmm, I just realized I have not used debugging a lot. I hope this is a good sign. Need to ask someone to help me out here. In the meantime have a look at the [Qt Creator documentation](http://http://doc.qt.io/qtcreator/index.html).

docs/ch04-qmlstart/components.md

@@ -35,7 +35,7 @@ To use our new `Button` element we can simply declare it in our file. So the ear
 
 <<< @/docs/ch04-qmlstart/src/components/ReusableComponentExample.qml#reusability
 
-Now you can use as many buttons as you like in your UI by just using `Button { ... }`. A real button could be more complex, e.g providing feedback when clicked or showing a nicer decoration.
+Now you can use as many buttons as you like in your UI by just using `Button { ... }`. A real button could be more complex, e.g. providing feedback when clicked or showing a nicer decoration.
 
 ::: tip
 If you want to, you could even go a step further and use an `Item` as a root element. This prevents users from changing the color of the button we designed, and provides us with more control over the exported API. The target should be to export a minimal API. Practically, this means we would need to replace the root `Rectangle` with an `Item` and make the rectangle a nested element in the root item.

docs/ch04-qmlstart/qml-syntax.md

@@ -1,6 +1,6 @@
 # QML Syntax
 
-QML is a declarative language used to describe how objects relate to each other. QtQuick is a framework built on QML for buidling the user interface of your application. It breaks down the user interface into smaller elements, which can be combined into components. QtQuick describes the look and the behavior of these user interface elements. This user interface description can be enriched with JavaScript code to provide simple but also more complex logic. In this perspective, it follows the HTML-JavaScript pattern but QML and QtQuick are designed from the ground up to describe user interfaces, not text-documents.
+QML is a declarative language used to describe how objects relate to each other. QtQuick is a framework built on QML for building the user interface of your application. It breaks down the user interface into smaller elements, which can be combined into components. QtQuick describes the look and the behavior of these user interface elements. This user interface description can be enriched with JavaScript code to provide simple but also more complex logic. In this perspective, it follows the HTML-JavaScript pattern but QML and QtQuick are designed from the ground up to describe user interfaces, not text-documents.
 
 In its simplest form, QtQuick lets you create a hierarchy of elements. Child elements inherit the coordinate system from the parent. An `x,y` coordinate is always relative to the parent.
 

docs/ch05-fluid/states-transitions.md

@@ -69,7 +69,7 @@ We could have achieved the same effect with only a `"go"` state and no explicit
 
 <<< @/docs/ch05-fluid/src/animation/StatesExample.qml#states
 
-Using `PropertyChanges { target: light2; color: "black" }` is not really required in this examples as the initial color of `light2` is already black. In a state, it’s only necessary to describe how the properties shall change from their default state (and not from the previous state).
+Using `PropertyChanges { target: light2; color: "black" }` is not really required in these examples as the initial color of `light2` is already black. In a state, it’s only necessary to describe how the properties shall change from their default state (and not from the previous state).
 
 A state change is triggered using a mouse area which covers the whole traffic light and toggles between the go- and stop-state when clicked.
 

docs/ch06-controls/common-patterns.md

@@ -50,9 +50,9 @@ The home page, `Home.qml` consists of a `Page`, which is n control element that
 
 <<< @/docs/ch06-controls/src/interface-stack/Home.qml
 
-Returning back to `main.qml`, we now look at the drawer part. This is where the navigation to the pages begin. The active parts of the user interface are the `ÌtemDelegate` items. In the `onClicked` handler, the next page is pushed onto the `stackView`.
+Returning to `main.qml`, we now look at the drawer part. This is where the navigation to the pages begin. The active parts of the user interface are the `ÌtemDelegate` items. In the `onClicked` handler, the next page is pushed onto the `stackView`.
 
-As shown in the code below, it possible to push either a `Component` or a reference to a specific QML file. Either way results in a new instance being created and pushed onto the stack.
+As shown in the code below, it is possible to push either a `Component` or a reference to a specific QML file. Either way results in a new instance being created and pushed onto the stack.
 
 ```qml
 ApplicationWindow {
@@ -300,7 +300,7 @@ Page {
 
 ## Document Windows
 
-This example shows how to implement a desktop-oriented, document-centric user interface. The idea is to have one window per document. When opening a new document, a new window is opened. To the user, each window is a self contained world with a single document.
+This example shows how to implement a desktop-oriented, document-centric user interface. The idea is to have one window per document. When opening a new document, a new window is opened. To the user, each window is a self-contained world with a single document.
 
 ![Two document windows and the close warning dialog.](assets/interface-document-window.png)
 
@@ -367,7 +367,7 @@ In the example at the beginning of this chapter, each `MenuItem` calls a corresp
 
 The function, in turn, relies on the `createNewDocument` function, which dynamically creates a new element instance from the `DocumentWindow.qml` file, i.e. a new `DocumentWindow` instance. The reason for breaking out this part of the new function is that we use it when opening documents as well.
 
-Notice that we do not provide a parent element when creating the new instance using `createObject`. This way, we create new top level elements. If we would have provided the current document as parent to the next, the destruction of the parent window would lead to the destruction of the child windows.
+Notice that we do not provide a parent element when creating the new instance using `createObject`. This way, we create new top level elements. If we had provided the current document as parent to the next, the destruction of the parent window would lead to the destruction of the child windows.
 
 ```qml
 ApplicationWindow {
@@ -533,7 +533,7 @@ This looks complicated compared to implementing this using `Qt Widgets` and C++.
 
 ![](./assets/dialog-state-machine.png)
 
-The final piece of the puzzle is the window title. It is composed from the `fileName` and `isDirty` properties.
+The final piece of the puzzle is the window title. It is composed of the `fileName` and `isDirty` properties.
 
 ```qml
 ApplicationWindow {

docs/ch06-controls/controls2.md

@@ -2,5 +2,5 @@
 
 This chapter shows how to use the Qt Quick Controls module. Qt Quick Controls are used to create advanced user interfaces built from standard components such as buttons, labels, sliders and so on. 
 
-Qt Quick Controls can be arranged using the layout module and are easy to style. Also we will look into the various styles for the different plaforms before diving into custom styling.
+Qt Quick Controls can be arranged using the layout module and are easy to style. Also we will look into the various styles for the different platforms before diving into custom styling.
 

docs/ch06-controls/image-viewer.md

@@ -62,7 +62,7 @@ ApplicationWindow {
 
 We then continue by adding the `ToolBar`. This is done using the `toolBar` property of the window. Inside the tool bar we add a `Flow` element which will let the contents fill the width of the control before overflowing to a new row. Inside the flow we place a `ToolButton`.
 
-The `ToolButton` has a couple of interesting properties. The `text` is straight forward. However, the `icon.name` is taken from the [freedesktop.org Icon Naming Specification](https://specifications.freedesktop.org/icon-naming-spec/icon-naming-spec-latest.html). In that document, a list of standard icons are listed by name. By refering to such a name, Qt will pick out the correct icon from the current desktop theme.
+The `ToolButton` has a couple of interesting properties. The `text` is straight forward. However, the `icon.name` is taken from the [freedesktop.org Icon Naming Specification](https://specifications.freedesktop.org/icon-naming-spec/icon-naming-spec-latest.html). In that document, a list of standard icons are listed by name. By referring to such a name, Qt will pick out the correct icon from the current desktop theme.
 
 In the `onClicked` signal handler of the `ToolButton` is the final piece of code. It calls the `open` method on the `fileOpenDialog` element.
 
@@ -89,7 +89,7 @@ ApplicationWindow {
 
 The `fileOpenDialog` element is a `FileDialog` control from the `Qt.labs.platform` module. The file dialog can be used to open or save files.
 
-In the code we start by assigning a `title`. Then we set the starting folder using the `StandardsPaths` class. The `StandardsPaths` classholds links to common folders such as the user’s home, documents, and so on. After that we set a name filter that controls which files the user can see and pick using the dialog.
+In the code we start by assigning a `title`. Then we set the starting folder using the `StandardsPaths` class. The `StandardsPaths` class holds links to common folders such as the user’s home, documents, and so on. After that we set a name filter that controls which files the user can see and pick using the dialog.
 
 Finally, we reach the `onAccepted` signal handler where the `Image` element that holds the window contents is set to show the selected file. There is an `onRejected` signal as well, but we do not need to handle it in the image viewer application.
 
@@ -452,14 +452,14 @@ The two `main.qml` files are placed in the file system as shown below. This lets
 
 ![](./assets/android-selector.png)
 
-Until now the style has been set in in `main.cpp`. We could continue doing this and use `#ifdef` expressions to set different styles for different platforms. Instead we will use the file selector mechanism again and set the style using a configuration file. Below, you can see the file for the *Material* style, but the *Fusion* file is equally simple.
+Until now the style has been set in `main.cpp`. We could continue doing this and use `#ifdef` expressions to set different styles for different platforms. Instead we will use the file selector mechanism again and set the style using a configuration file. Below, you can see the file for the *Material* style, but the *Fusion* file is equally simple.
 
 ```ini
 [Controls]
 Style=Material
 ```
 
-These changes has given us a joined codebase where all the document code is shared and only the differences in user interaction patterns differ. There are different ways to do this, e.g. keeping the document in a specific component that is included in the platform specific interfaces, or as in this example, by creating a common base that is extended by each platform. The best approach is best determined when you know how your specific code base looks and can decide how to separate the common from the unique.
+These changes have given us a joined codebase where all the document code is shared and only the differences in user interaction patterns differ. There are different ways to do this, e.g. keeping the document in a specific component that is included in the platform specific interfaces, or as in this example, by creating a common base that is extended by each platform. The best approach is best determined when you know how your specific code base looks and can decide how to separate the common from the unique.
 
 ## Native Dialogs
 

docs/ch07-modelview/advanced.md

@@ -34,7 +34,7 @@ When transforming images or other complex elements on in `PathView`, a performan
 Given the dynamic nature of `PathAttribute`, the qml tooling (in this case: `qmllint`) is not aware of `itemZ`, `itemAngle` nor `itemScale`.
 :::
 
-When using the `PathView` and changing the `currentIndex` programatically you might want to control the direction that the path moves in. You can do this using the `movementDirection` property. It can be set to `PathView.Shortest`, which is the default value. This means that the movement can be either direction, depending on which way is the closest way to move to the target value. The direction can instead be restricted by setting `movementDirection` to `PathView.Negative` or `PathView.Positive`.
+When using the `PathView` and changing the `currentIndex` programmatically you might want to control the direction that the path moves in. You can do this using the `movementDirection` property. It can be set to `PathView.Shortest`, which is the default value. This means that the movement can be either direction, depending on which way is the closest way to move to the target value. The direction can instead be restricted by setting `movementDirection` to `PathView.Negative` or `PathView.Positive`.
 
 ## Table Models
 

docs/ch07-modelview/basic-models.md

@@ -6,7 +6,7 @@ The most basic way to visualize data from a model is to use the `Repeater` eleme
 
 In its simplest form, the repeater can be used to instantiate a specified number of items. Each item will have access to an attached property, the variable `index`, that can be used to tell the items apart. 
 
-In the example below, a repeater is used to create 10 instances of an item. The number of items is controlled using the `model` property and their visual representation is controlled using the `delegate` property. For each item in the model, a delegate is instantiated (here, the delegate is a `BlueBox`, which is a customized `Rectangle` containing a `Text` element. As you can tell, the `text` property is set to the `index` value, thus the items are numbered from zero to nine.
+In the example below, a repeater is used to create 10 instances of an item. The number of items is controlled using the `model` property and their visual representation is controlled using the `delegate` property. For each item in the model, a delegate is instantiated (here, the delegate is a `BlueBox`, which is a customized `Rectangle` containing a `Text` element). As you can tell, the `text` property is set to the `index` value, thus the items are numbered from zero to nine.
 
 <<< @/docs/ch07-modelview/src/repeater/number.qml#global
 
@@ -32,6 +32,6 @@ The properties bound inside each element are attached to each instantiated item
 
 ## Using a delegate as default property
 
-The `delegate` property of the `Repeater` is its default property. This means that it's also possible to write the code of example Example 01 as follows:
+The `delegate` property of the `Repeater` is its default property. This means that it's also possible to write the code of Example 01 as follows:
 
 <<< @/docs/ch07-modelview/src/repeater/delegate.qml#global

docs/ch09-shapes/paths.md

@@ -33,4 +33,4 @@ Finally, the ``PathCurve`` creates a curve passing through a list of provided co
 There is one more useful path element, the ``PathSvg``. This element lets you stroke and fill an SVG path.
 
 :::tip
-The ``PathSvg`` element cannot always be combined with other path elements. This depends on the painting backend used, so make sure to use the ``PathSvg`` element or the other elements for a single path. If you mix ``PathSvg`` with other path elements, your milage will vary.
+The ``PathSvg`` element cannot always be combined with other path elements. This depends on the painting backend used, so make sure to use the ``PathSvg`` element or the other elements for a single path. If you mix ``PathSvg`` with other path elements, your mileage will vary.

docs/ch09-shapes/summary.md

@@ -1,3 +1,3 @@
 # Summary
 
-In this chapter we're had a look at what the Qt Quick Shapes module has to offer. Using it we can create arbitrary shapes directly in QML, and leverage the property binding system of QML to create dynamic shapes. We've also had a look at the various path segments that can be used to build shapes from elements such as lines, arcs, and various curves. Finally, we've explored the filling options, where gradients can be used to create exciting visual effects from a path.
+In this chapter we've a look at what the Qt Quick Shapes module has to offer. Using it we can create arbitrary shapes directly in QML, and leverage the property binding system of QML to create dynamic shapes. We've also had a look at the various path segments that can be used to build shapes from elements such as lines, arcs, and various curves. Finally, we've explored the filling options, where gradients can be used to create exciting visual effects from a path.

docs/ch10-effects/curtain-effect.md

@@ -6,19 +6,19 @@ In the last example for custom shader effects, I would like to bring you the cur
 
 At that time I really loved these effects and the curtain effect was my favorite out of them. I just love how the curtain opens and hide the background object.
 
-For this chapter, the effect has been adapted for Qt 6. It has also been slghtly simplifed to make it a better showcase.
+For this chapter, the effect has been adapted for Qt 6. It has also been slightly simplified to make it a better showcase.
 
 The curtain image is called `fabric.png`. The effect then uses a vertex shader to swing the curtain forth and back and a fragment shader to apply shadows to show how the fabric folds.
 
-The diagram below shows how the shader works. The waves are computed through a sin curve with 7 periods (7\*PI=21.99…). The other part is the swinging. The `topWidht` of the curtain is animated when the curtain is opened or closed. The `bottomWidth` follows the `topWidth` using a `SpringAnimation`. This creates the effect of the bottom part of the curtain swinging freely. The calulated `swing` component is the strengh of the swing based on the y-component of the vertexes.
+The diagram below shows how the shader works. The waves are computed through a sin curve with 7 periods (7\*PI=21.99…). The other part is the swinging. The `topWidht` of the curtain is animated when the curtain is opened or closed. The `bottomWidth` follows the `topWidth` using a `SpringAnimation`. This creates the effect of the bottom part of the curtain swinging freely. The calculated `swing` component is the strength of the swing based on the y-component of the vertexes.
 
 ![image](./assets/curtain_diagram.png)
 
-The curtain effect is implemed in the `CurtainEffect.qml` file where the fabric image act as the texture source. In the QML code, the `mesh` property is adjusted to make sure that the number of vertixes is increased to give a smoother result.
+The curtain effect is implemented in the `CurtainEffect.qml` file where the fabric image act as the texture source. In the QML code, the `mesh` property is adjusted to make sure that the number of vertices is increased to give a smoother result.
 
 <<< @/docs/ch10-effects/src/effects/curtain/CurtainEffect.qml#M1
 
-The vertex shader, shown below, reshapes the curtain based on the `topWidth` and `bottomWidth` properies, extrapolating the shift based on the y-coordinate. It also calculates the `shade` value, which is used in the fragment shader. The `shade` property is passed through an additional output in `location` 1.
+The vertex shader, shown below, reshapes the curtain based on the `topWidth` and `bottomWidth` properties, extrapolating the shift based on the y-coordinate. It also calculates the `shade` value, which is used in the fragment shader. The `shade` property is passed through an additional output in `location` 1.
 
 <<< @/docs/ch10-effects/src/effects/curtain/curtain.vert#M1