Fix typos in tutorials 9, 10 and 11

tutorials/08_webapp.md

@@ -84,7 +84,7 @@ main = withSocketsDo $ do
         C.putStrLn msg
 ```
 
-A you can see, most of the work happens in `do` of `IO` and it highly resembles classic imperative programming. Indeed, networking and also most of UI is inherently not a show room of beautiful Haskell code, but it gets the job done ;-).
+As you can see, most of the work happens in `do` of `IO` and it highly resembles classic imperative programming. Indeed, networking and also most of UI is inherently not a show room of beautiful Haskell code, but it gets the job done ;-).
 
 ### Specialized libraries
 

tutorials/09_elm-intro.md

@@ -18,7 +18,7 @@ According to the official website [elm-lang.org](https://elm-lang.org):
 
 It is a reactive pure functional programming language with syntax inspired by Haskell that compiles to JavaScript. It is designed for building reliable web applications with no runtime exceptions. Elm is one of the solutions for [the JavaScript problem](https://wiki.haskell.org/The_JavaScript_Problem). The [compiler](https://github.com/elm/compiler) is implemented in Haskell.
 
-Elm is language **and** a framework for building front-end web applications.
+Elm is a language **and** a framework for building front-end web applications.
 
 ### Advantages
 
@@ -70,7 +70,7 @@ Strings are enclosed in double quotation mark `"`. We use `++` operator to join
 
 ### Naming things
 
-If we want to give a name to expression, we use the `=` operator.
+If we want to give a name to an expression, we use the `=` operator.
 
 ```elm
 a =
@@ -232,7 +232,7 @@ It generates `elm.json` file that defines where the source files are and what ar
 
 ### Modules
 
-Now, when we have our project ready, we can create some modules. A module has a name which need to be the same as the file name - whole absolute path (e. g. `Lib.Math`, etc.). It has to state what expression from the module should be exposed explicitly.
+Now, when we have our project ready, we can create some modules. A module has a name which needs to be the same as the file name - whole absolute path (e. g. `Lib.Math`, etc.). It has to state what expression from the module should be exposed explicitly.
 
 ```elm
 -- src/Lib/Math.elm
@@ -323,8 +323,8 @@ numbers : List number
 numbers =
     [ 1, 3, 5, 7, 11 ]
 
-lenght : Int
-lenght =
+length : Int
+length =
     List.length numbers -- 5
 
 
@@ -384,7 +384,7 @@ getFrankie =
 
 ### Tuple
 
-A tuple is a collection of items of various type with the fixed size. There is a [Tuple](https://package.elm-lang.org/packages/elm/core/latest/Tuple) module for working with tuples. Tuples can be used when a function returns more than one value.
+A tuple is a collection of items of various types with the fixed size. There is a [Tuple](https://package.elm-lang.org/packages/elm/core/latest/Tuple) module for working with tuples. Tuples can be used when a function returns more than one value.
 
 ```elm
 person : ( String, number )
@@ -485,10 +485,10 @@ updatedVector4 =
     { vector4 | x = 20 } -- { w = 4, x = 20, y = 12, z = 3 }
 ```
 
-We can use pattern matching (desctructuring) for record keys:
+We can use pattern matching (destructuring) for record keys:
 
 ```elm
-lenght : { b | w : Float, x : Float, y : Float, z : a } -> Float
+length : { b | w : Float, x : Float, y : Float, z : a } -> Float
 length { w, x, y, z } = sqrt (w * w + x * x + y * y + w * w)
 
 lengthResult : Float
@@ -506,7 +506,7 @@ We can use extensible records for type inheritance. It has one limitation - we w
 type alias ExtensibleUser a =
     { a | id : String, name : String }
 
-nameView : ExtensibleUser a -> Html msg -- we access only to id and name, nothing else
+nameView : ExtensibleUser a -> Html msg -- we have access only to id and name, nothing else
 nameView { name } =
     ...
 ```
@@ -586,7 +586,7 @@ joe2 =
     Person "Joe" 21
 ```
 
-_Note_: Type aliases are resolved in compiled time. Therefore, they cannot be recursive. For recursion, we need to use custom types.
+_Note_: Type aliases are resolved in compile time. Therefore, they cannot be recursive. For recursion, we need to use custom types.
 
 ### Custom Types
 
@@ -943,7 +943,7 @@ There are also Subscribers and Commands. We will talk about them later.
 
 ### Example
 
-Example form [Elm guide](https://guide.elm-lang.org/#a-quick-sample):
+Example from the [Elm guide](https://guide.elm-lang.org/#a-quick-sample):
 
 ```elm
 import Browser
@@ -980,7 +980,7 @@ view model =
 
 ## Generate HTML + styling
 
-HTML is fully generated by elm - elm functions, syntax, etc. We can easily connect `Msg` to `onClick` for buttons and other events. With that HTML is always under ELM control and we have type guarantees when working with it.
+HTML is fully generated by elm - elm functions, syntax, etc. We can easily connect `Msg` to `onClick` for buttons and other events. With that, HTML is always under ELM control and we have type guarantees when working with it.
 
 ```elm
 import Html
@@ -1005,7 +1005,7 @@ First argument is list `Attribute`s - events, id, className, inline styles, etc.
 
 We have access to all HTML elements - `link`, `label`, `input`, `h1`, `h2`, etc.
 
-If you don't want to type you own `CSS`, you can use packages for layout and elements - for example [elm-ui](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/).
+If you don't want to type your own `CSS`, you can use packages for layout and elements - for example [elm-ui](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/).
 
 _Note_: Elm is using (same as React) Virtual DOM feature
 
@@ -1061,7 +1061,7 @@ PureScript is a strongly-typed functional programming language that compiles to
 
 Reason is a new syntax and toolchain based on OCaml programing language created by Facebook. The syntax is closer to JavaScript than OCaml. It is intended for development of front-end web applications and compiles to JavaScript. Using existing JavaScript and OCaml packages is possible.
 
-### Usefull links
+### Useful links
 
 - [An Introduction to Elm](https://guide.elm-lang.org)
 - [Elm Syntax](https://elm-lang.org/docs/syntax)

tutorials/10_elm-tea.md

@@ -6,7 +6,7 @@ It is very common to use JSON format when communicating with different APIs. In
 
 ### Decoders
 
-Elm use decoders for that. It is a declarative way how to define what should be in the JSON and how to convert it into Elm types. Functions for that are defined in [Json.Decode](https://package.elm-lang.org/packages/elm/json/latest/Json-Decode) module.
+Elm uses decoders for that. It is a declarative way how to define what should be in the JSON and how to convert it into Elm types. Functions for that are defined in [Json.Decode](https://package.elm-lang.org/packages/elm/json/latest/Json-Decode) module.
 
 For example, we have this JSON representing a TODO:
 
@@ -206,7 +206,7 @@ emailView2 =
     Html.text
 ```
 
-_Note_: From `Email` module, we expose only `Email` type without variant `EmailInternal`. The only way, how to access email value is in this module, no other module does not have access to `EmailInternal` and can use only access function `toString`.
+_Note_: From `Email` module, we expose only `Email` type without variant `EmailInternal`. The only way, how to access email value is in this module, no other module has access to `EmailInternal` and can use only access function `toString`.
 
 ## Materials
 
@@ -278,9 +278,9 @@ When we need more complex forms in our application, there are packages to handle
 
 ### Random
 
-There is a [Random](https://package.elm-lang.org/packages/elm/random/latest/Random) module in [elm/random](https://package.elm-lang.org/packages/elm/random/latest/) package for generating pseudo-random values in Elm. It defines a type called `Generator` which can be think of as a recipe for generating random values.
+There is a [Random](https://package.elm-lang.org/packages/elm/random/latest/Random) module in [elm/random](https://package.elm-lang.org/packages/elm/random/latest/) package for generating pseudo-random values in Elm. It defines a type called `Generator` which can be thought of as a recipe for generating random values.
 
-Here is a definition of genrator for random numbers between 1 and 4.
+Here is a definition of generator for random numbers between 1 and 4.
 
 ```elm
 import Random exposing (Generator)

tutorials/11_elm-building-web-apps.md

@@ -23,7 +23,7 @@ const app = program.Elm.Todos.init({
 });
 ```
 
-_Note_: We also need to create the element in our HTML structure. In case we would use [Browswer.document](https://package.elm-lang.org/packages/elm/browser/latest/Browser#document) or [Browser.application](https://package.elm-lang.org/packages/elm/browser/latest/Browser#application) instead, we don't need to specify the node since it will load into the whole document body.
+_Note_: We also need to create the element in our HTML structure. In case we would use [Browser.document](https://package.elm-lang.org/packages/elm/browser/latest/Browser#document) or [Browser.application](https://package.elm-lang.org/packages/elm/browser/latest/Browser#application) instead, we don't need to specify the node since it will load into the whole document body.
 
 ## JavaScript Interop
 
@@ -64,7 +64,7 @@ If we use anything else than `Json.Decode.Value` and provide an incorrect type,
 
 ### Ports
 
-While Flags are used for sending initial values to the Elm app, Ports are used for sending messages between JavaScript and Elm. The communication is not based on request/response like in HTTP though. We only have one-way messages send from Elm to JavaScript or vice versa.
+While Flags are used for sending initial values to the Elm app, Ports are used for sending messages between JavaScript and Elm. The communication is not based on request/response like in HTTP though. We only have one-way messages sent from Elm to JavaScript or vice versa.
 
 #### Outgoing Messages
 
@@ -104,7 +104,7 @@ import Ports
 update msg model =
     case msg of
         SaveUser user ->
-            (model, Ports.saveUser <| encdeUser user)
+            (model, Ports.saveUser <| encodeUser user)
 ```
 
 #### Incoming messages
@@ -155,9 +155,9 @@ app.ports.gotUser.send(userData);
 
 ## Subscriptions
 
-[Subscriptions](https://package.elm-lang.org/packages/elm/core/latest/Platform-Sub) are used to tell Elm that we want to be informed if something happend (e.g., web socket message or clock tick).
+[Subscriptions](https://package.elm-lang.org/packages/elm/core/latest/Platform-Sub) are used to tell Elm that we want to be informed if something happened (e.g., web socket message or clock tick).
 
-Here's an example of subscriptions defining that a message `Tick` with current time should be send to update function every 1000 milliseconds.
+Here's an example of subscriptions defining that a message `Tick` with current time should be sent to update function every 1000 milliseconds.
 
 ```elm
 import Time
@@ -246,7 +246,7 @@ update msg model =
             case urlRequest of
                 Browser.Internal url ->
                     ( model
-                    , Nav.pushUrl model.key <| Url.toString url
+                    , Navigation.pushUrl model.key <| Url.toString url
                     )
 
                 Browser.External href ->
@@ -288,7 +288,7 @@ viewLink path =
 
 In the previous example, we used Url as is. However, we can use [Url.Parser](https://package.elm-lang.org/packages/elm/url/latest/Url-Parser) module from [elm/url](https://package.elm-lang.org/packages/elm/url/latest/) package to parse the URL into useful Elm types.
 
-Here's an example form the documentation converting different routes with parameters into `Route` type.
+Here's an example from the documentation converting different routes with parameters into `Route` type.
 
 ```elm
 import Url.Parser exposing ((</>), Parser, int, s, string)
@@ -338,7 +338,7 @@ To be able to split page to more sub modules, we need to use `Html.map` [functio
 
 [Webpack](https://webpack.js.org) is a module bundler for JavaScript applications. It builds a dependency graph of source modules and creates static assets. It uses different loaders for different file types, e.g., to convert new EcmaScript syntax into the one supported by browsers or to convert Sass to CSS. It can also minify those assets.
 
-Besides other loaders, there is also [elm-webpack-laoder](https://github.com/elm-community/elm-webpack-loader). If we require an Elm module from JavaScript code, it will use `elm make` under the hood to build it.
+Besides other loaders, there is also [elm-webpack-loader](https://github.com/elm-community/elm-webpack-loader). If we require an Elm module from JavaScript code, it will use `elm make` under the hood to build it.
 
 Here's an example of configuration:
 
@@ -359,7 +359,7 @@ module.exports = {
 };
 ```
 
-### Usefull links
+### Useful links
 
 - [Elm Europe 2017 - Richard Feldman - Scaling Elm Apps](https://www.youtube.com/watch?v=DoA4Txr4GUs)
 - [Richard Feldman real world SPA](https://github.com/rtfeldman/elm-spa-example)