Merge pull request #88 from lightning-js/fix/docs-typos

fixes some typos in the docs

docs/built-in/directives.md

@@ -2,13 +2,13 @@
 
 ## Directives
 
-Blits comes with a few built-in attributes that tap into specific behaviour provided by the framework - also kn ows as _directives_. Most of them can be used in the template on both Elements and Components.
+Blits comes with a few built-in attributes that tap into specific behaviour provided by the framework - also known as _directives_. Most of them can be used in the template on both Elements and Components.
 
 ### Show-directive
 
-The `show`-attribute allows you to conditionally show and hide Components and Elements.
+The `show` attribute allows you to conditionally show and hide Components and Elements.
 
-When passed a _truthy_ value, such as `true` or `1`, the element will be made visible. And when passed a _falsy_ value (`false` or `0`) it will not be visible.
+When passed a _truthy_ value, such as `true` or `1`, the element will be made visible. And when passed a _falsey_ value (`false` or `0`) it will not be visible.
 
 ```xml
 <Element>

docs/components/component_state.md

@@ -47,8 +47,7 @@ For nested objects, you can use _dot notation_ (e.g., `$style.dimensions.w`).
 In your component's code, you can reference state variables directly within the `this`-scope. For instance, a state variable named `color` can be accessed (and modified) by referencing `this.color`.
 
 It's important to note that unlike in the template, you should _not_ use the dollar sign when accessing state variables within the component's code.
-
-Also remember that there is no need to explicitely reference the `state`-key. Blits automatically maps all state variables directly on the `this`-scope, for easy access.
+Also, remember that there is no need to explicitly reference the `state`-key. Blits automatically maps all state variables directly on the `this`-scope, for easy access.
 
 The example below gives a full example of defining and using a component's state:
 

docs/components/computed_properties.md

@@ -4,9 +4,8 @@
 
 So far we've learned how to utilize a Component's [internal state](./component_state.md) and [props](./props.md) passed by a parent into a child component.
 
-We've also seen how we can perform simple operations like `Math.max()` or `str.toUpperCase()` directly within an argument of a template on the Component's internal state or passed props .
-
-However as these operations become more complex it's more clear and more maintainable to abstract these operations into what we call _computed properties_.
+We've also seen how we can perform simple operations like `Math.max()` or `str.toUpperCase()` directly within an argument of a template on the Component's internal state or passed props.
+However, as these operations become more complex it's more clear and more maintainable to abstract these operations into what we call _computed properties_.
 
 Computed properties are a powerful tool for enhancing the readability of your component code. By abstracting complex or frequently used calculations from your template into computed properties, you can make your code more concise and easier to understand.
 
@@ -17,7 +16,7 @@ Within the `computed`-key of the Component configuration object, you can specify
 
 A computed property function should always _return_ a value.
 
-In your template, you can reference these computed properties exactly the same as you would with _state_ variable and _props_, by prefixing them with a dollar sign (e.g., `$offset`).
+In your template, you can reference these computed properties exactly the same as you would with _state_ variables and _props_, by prefixing them with a dollar sign (e.g., `$offset`).
 
 In the rest of your app's code, you can access these computed properties (but not modify them!) using `this.offset`. Note that similar to Component state and props, you do not need to prefix with `computed` to access the computed property.
 

docs/components/methods.md

@@ -2,17 +2,17 @@
 
 ## Methods
 
-Within a Blits component you have quite some freedom where to put specific logic.
+Within a Blits component, you have quite some freedom where to put specific logic.
 
-Template related logic can be either be placed directly in a _reactive / interpolated_ attribute or you can move it out to a _computed property_ if the logic is more complex.
+Template related logic can be either placed directly in a _reactive / interpolated_ attribute or you can move it out to a _computed property_ if the logic is more complex.
 
 Business logic for your App can be placed directly in a _watcher_, a _lifecycle hook_ or an _input handling_ function.
 
 If you notice that you're duplicating logic in these different places, or if you just like to keep all your business logic nicely grouped together, you can move these business logic functions under the `methods` key of the _Component configuration object_.
 
 You can reference your Component's methods in the template by using a `$`-sign (for example in the `@loaded`-attribute when your element has a `src` attribute).
 
-In the javascript code of a Component you can reference methods directly on the `this`-scope (i.e. `this.getData()`). Similar as with `internal` state and `props`, there is no need to prefix with `methods`, for easy access.
+In the javascript code of a Component, you can reference methods directly on the `this`-scope (i.e. `this.getData()`). Similar to `internal` state and `props`, there is no need to prefix with `methods`, for easy access.
 
 ```js
 export default Blits('Carousel', {

docs/components/props.md

@@ -22,7 +22,7 @@ The simplest way to define props is to just list their names within the `props`
 
 Once specified, you can refer to these props inside the template of your component using the `$` sign, similar to how you would reference variables defined within the component's [internal state](./component_state.md) (i.e. `<Element color="$color" />`).
 
-You can als access a prop inside a component's code using `this.color` (without a dollar sign!). And similar to component `state` variables,
+You can also access a prop inside a component's code using `this.color` (without a dollar sign!). And similar to component `state` variables,
 there is no need to specifically reference the `props`-key. Blits automatically maps all props directly on the `this`-scope, for easy access.
 
 Since props are used to pass information from a parent to a child, it's important not to attempt to _modify_ props inside your child component. If changes based on the prop from the parent are needed, you should probably use the prop in a so called [computed property](./computed_properties.md).

docs/components/user_input.md

@@ -11,7 +11,7 @@ Blits offers an intuitive and straightforward interface to handle key input in C
 
 Before diving into the specifics of key handling, it is important to understand the basic concept of _focus_.
 
-In a Blits app, there is always _one_ Component that has the focus. By default this will be the root Application component.
+In a Blits app, there is always _one_ Component that has the focus. By default, this will be the root Application component.
 
 The component that has focus, is the one that is responsible for handling the user input at that moment.
 
@@ -81,7 +81,7 @@ Blits comes with a default keycode mapping. This mapping is a sensible default t
 
 But it's possible that the keycodes and mapping of your target device are slightly or even completely different.
 
-In Blits you can easily configure the key mapping to match your needs. In the `src/index.js` file where we instaniate the App via the `Blits.Launch` function, we can add an extra key, called `keys`, to the _settings object_.
+In Blits, you can easily configure the key mapping to match your needs. In the `src/index.js` file where we instantiate the App via the `Blits.Launch` function, we can add an extra key, called `keys`, to the _settings object_.
 
 The `keys` item should be an object literal, where you map a `key` or `keyCode` (from the `KeyboardEvent`) to an event name that you can use in your Components.
 

docs/components/watchers.md

@@ -4,7 +4,7 @@
 
 In some cases, you may want to execute specific actions whenever the value of a state variable, a prop, or a computed property changes. These actions could involve dispatching an event or updating another state variable.
 
-You might be tempted to handle this functionality inside a computed property, but this is not recommended. Computed properties should not have side effects, to prevent the risk of falling into and endless loop.
+You might be tempted to handle this functionality inside a computed property, but this is not recommended. Computed properties should not have side effects, to prevent the risk of falling into an endless loop.
 
 Instead, Blits allows you to specify **watchers** to trigger functionality when certain variables change.
 

docs/essentials/application_root.md

@@ -6,7 +6,7 @@ Every Blits App starts with a base Application component.
 
 Ultimately this Application is a component like any regular Blits component. But it is augmented with some extra functionality. `Blits.Application` is responsible for setting up the listeners for keyhandling for example.
 
-You can only have 1 Application component per App. By default this file is named `App.js` and it is placed in the root of the `src`-folder.
+You can only have 1 Application component per App. By default, this file is named `App.js` and it is placed in the root of the `src`-folder.
 
 `src/App.js` will look something like this:
 

docs/essentials/components.md

@@ -20,11 +20,11 @@ Let's see how to create a new component and explore the basic anatomy of a compo
 
 A new component is created using the `Blits.Component()` function that is exported from the `@lightningjs/blits` package. This function accepts two arguments:
 
-- The first argument is the _name_ of the component. This name will be used in debug log messages, so make sure to choose a unique and descriptive name for your component, such as `Homepage`, `Loader` or `SidebarMenuItem`.
+- The first argument is the _name_ of the component. This name will be used in debug log messages, so make sure to choose a unique and descriptive name for your component, such as `Homepage`, `Loader`, or `SidebarMenuItem`.
 
-- The second argument is a _Component configuration object_, represented as an `object literal`. This Component configuration object can contain a predefined set of key-value pairs, that defines how your Component looks and behaves.
+- The second argument is a _Component configuration object_, represented as an `object literal`. This Component configuration object can contain a predefined set of key-value pairs, that define how your Component looks and behaves.
 
-Some of the common used Component configuration options include:
+Some of the commonly used Component configuration options include:
 
    - `template`: to define the template for the component.
    - `state`: to specify the component instance's internal state.

docs/essentials/displaying_images.md

@@ -25,7 +25,7 @@ For the best performance, it's important to keep your source images as small as
 
 You also have the option to _colorize_ an image on the fly. Just add a `color` attribute to the Element with a `src` attribute. You can use a single color, or apply a gradient.
 
-By default all Elements with a `src` attribute get the a solid white background, with the result that the actual colors of the image will be shown.
+By default, all Elements with a `src` attribute get a solid white background, with the result that the actual colors of the image will be shown.
 
 ```xml
 <Element
@@ -66,4 +66,4 @@ Considering the template above you would do something like the following in the
 }
 ```
 
-The `loaded` event receives the images dimensions as it's argument and the `error` event receives an error message explaining the failure.
+The `loaded` event receives image dimensions as its argument and the `error` event receives an error message explaining the failure.

docs/essentials/displaying_text.md

@@ -19,43 +19,43 @@ You can use the Text-tag anywhere in your template, without the need to explicit
 
 ### Available attributes on the Text tag
 
-The Text-tag accepts the following of attributes:
+The Text-tag accepts the following attributes:
 
-- `content` - the text to be displayed. Can be a hardcoded text, a dynamic value or a reactive value
+- `content` - the text to be displayed. Can be a hardcoded text, a dynamic value, or a reactive value
 - `font` - the font family, defaults to `lato`, or the default font specified in the launch settings
 - `size`  - the font size, defaults to `32`
-- `color` - the color to display for the text, defaults to `white` and can be any of the supported Blits color formats (html, hexedecimal or rgb(a))
+- `color` - the color to display for the text, defaults to `white` and can be any of the supported Blits color formats (HTML, hexadecimal or rgb(a))
 - `letterspacing` - letterspacing in pixels, defaults to `0`
-- `align` - the alignment of the text, can be `left`, `right` or `center`, defaults to `left`. Centering text and aligning text to the right requires the `wordwrap` attribute to be set as well.
-- `wordwrap` - the max length of a line of text in pixels, words surpassing this length will be broken and wrapped onto the next line. This atribute is required when aligning center or right
+- `align` - the alignment of the text, can be `left`, `right`, or `center`, defaults to `left`. Centering text and aligning text to the right requires the `wordwrap` attribute to be set as well.
+- `wordwrap` - the max length of a line of text in pixels, words surpassing this length will be broken and wrapped onto the next line. This attribute is required when aligning center or right
 - `maxlines` - maximum number of lines that will be displayed
 - `maxheight` - maximum height of a text block, lines that don't fit within this height will not be displayed
 - `lineheight` - the spacing between lines in pixels
-- `contain` - the strategy for containing text within the bounds, can be `none` (default), `width` or `both`. In most cases the value of this attribute will automatically be set by Blits based on the other specified attribites
+- `contain` - the strategy for containing text within the bounds, can be `none` (default), `width`, or `both`. In most cases, the value of this attribute will automatically be set by Blits, based on the other specified attributes
 - `textoverflow` - the suffix to be added when text is cropped due to bounds limits, defaults to `...`
 
 
 ### SDF and Canvas2d
 
 Compared to Lightning 2, texts have improved a lot in Lightning 3, thanks to the SDF (Signed Distance Field) Text renderer.
 
-With the SDF text renderer, texts appear a lot _sharper_ on screen. The SDF technique also allows for better scaling of texts, without them becoming blurry - a well known painpoint in Lightning 2 Apps.
+With the SDF text renderer, texts appear a lot _sharper_ on screen. The SDF technique also allows for better scaling of texts, without them becoming blurry - a well-known painpoint in Lightning 2 Apps.
 
- In general it's recommended to use the SDF text renderer, but Lightning 3 still has a Canvas2d text renderer as a backup, and you can use both text renderers within the same App.
+ In general, it's recommended to use the SDF text renderer, but Lightning 3 still has a Canvas2d text renderer as a backup, and you can use both text renderers within the same App.
 
 ### Using custom fonts
 
-The `font`-attribute on the `<Text>`-tag is used define which font family should be used for a certain piece of text.
+The `font`-attribute on the `<Text>`-tag is used to define which font family should be used for a certain piece of text.
 
 When you create a new Blits app using the available [getting started boilerplate](../getting_started/getting_started.md) you'll be able to use the `lato` (Lato regular) and `raleway` (Raleway ExtraBold) fonts out of the box.
 
-But of course you can also use any custom font that you want, to give your App the unique look and feel that fits with the design.
+But of course, you can also use any custom font that you want, to give your App the unique look and feel that fits with the design.
 
-Adding is custom font to a Blits App is quite straightforward. First you'll need to place a `.ttf` version of your font in the `public` folder (i.e. `public/fonts/comic-sans.ttf`).
+Adding is custom font to a Blits App is quite straightforward. First, you'll need to place a `.ttf` version of your font in the `public` folder (i.e. `public/fonts/comic-sans.ttf`).
 
 Then you'll need to register the custom font in the Launch settings of your app (in `src/index.js`). The `fonts`-key in the settings is an `Array` that specifies all available fonts in your App.
 
-Just add a new font object with the necesarry details:
+Just add a new font object with the necessary details:
 
 ```js
   fonts: [