Docs corrections (#72)

* proofread Views page

* proofread Stores page

* proofread Routing page

* Proofread Forms page

* proofread Networking page

* proofread Server Rendering page

* proofread State Machines page

Author: achou11

content/docs/forms/index.md

@@ -5,7 +5,7 @@ view: doc
 excerpt:
 
 Websites generally consist of 3 main elements: paragraph text, lists and forms.
-While paragraph text is generally straight forward to place on a page, lists &
+While paragraph text is generally straightforward to place on a page, lists and
 forms require some more work. This section explains everything you need to know
 to work with forms in Choo.
 ----
@@ -33,7 +33,7 @@ Forms are declared using the `<form>` tag. By themselves they don't do much, but
 they have a few important attributes that are good to know about.
 
 The first attribute is `method=""`. This tells the form which HTTP method to
-use. By default it's set to `POST`, so often it's not needed to define this.
+use. By default it's set to `POST`, so it's often not necessary to define this.
 
 The second attribute is `action=""`. This attribute tells the form where to
 redirect the page to when the submission was successful.
@@ -103,18 +103,18 @@ that looks like:
 
 ## Handling Form Submissions As Multipart
 So far we've seen how to create basic HTML forms with validation. This is a
-great starting point, but often we'll want to control submissions using
+great starting point, but we'll often want to control submissions using
 JavaScript.
 
-Perhaps we can pre-populate some input fields. Perhaps there's input fields that
+Perhaps we can pre-populate some input fields. Perhaps there are input fields that
 rely on the values of other input fields. Starting off with JS from the start
 allows us to change the behavior without needing to change the architecture.
 
 Creating forms with Choo is almost identical to basic HTML. The main difference
 is that we create a `'submit'` event handler, and we control sending the data
 using `window.fetch()`.
 
-Let's create a form that sends data down as `'multipart/form-data`. We'll talk
+Let's create a form that sends data down as `multipart/form-data`. We'll talk
 about how to submit it as JSON in the next section.
 
 ```js
@@ -166,7 +166,7 @@ function main () {                                                    // 1.
 
 1. We create a basic Choo app, and a single view that renders a `<form>`
    element. Inside it we listen for the `'submit'` event by setting the
-   `onsubmit=` attribute.
+   `onsubmit` attribute.
 2. We create a handler for the `'submit'` event. This will fire whenever a user
    clicks the `type="submit"` button (or an equivalent action).
 3. Before we can handle the form's `'submit'` event, we need to disable the

content/docs/networking/index.md

@@ -13,13 +13,13 @@ that includes high-level APIs to do networking, sandboxed code execution and
 disk access. It runs on almost every platform, behaves similarly everywhere, and
 is always kept backwards compatible.
 
-An important part of this machinery is networking. In the browser, there's 8 (or
+An important part of this machinery is networking. In the browser, there are 8 (or
 so) different ways to access the network:
 
 - By navigating to a new page
-- Through `<script>`, `<link>`, & other tags.
+- Through `<script>`, `<link>`, and other tags.
 - Using `preload` headers.
-- Using `new XMLHTTPRequest()`, `window.fetch()`, & `navigator.sendBeacon()`.
+- Using `new XMLHTTPRequest()`, `window.fetch()`, and `navigator.sendBeacon()`.
 - Using (dynamic) `import()`.
 - Using the Server Sent Events API.
 - Using the WebSocket API.
@@ -45,31 +45,31 @@ The browser has several ways of performing HTTP requests.
 - __Navigating to a new page:__ performs an HTTP request whenever you type in a
   url in your browser. The server then replies with some `index.html` file which
   contains more links to assets and other pages.
-- __Through `<script>`, `<link>` & other tags:__ When an `index.html` page is
+- __Through `<script>`, `<link>` and other tags:__ When an `index.html` page is
   loaded, the browser will read out all `<link>` and `<script>` tags in the
   document's head. This will trigger requests for more resources, which in turn
   can request even more resources. There's also the `<a>` and `<img>` tags,
   which act similarly.
 - __Using `preload` headers.__ When a browser page is loaded, the server can
   set headers for additional resources that should be loaded. The browser then
   proceeds to request those.
-- __Using `new XMLHTTPRequest()` & `window.fetch()`:__ In order to make dynamic
+- __Using `new XMLHTTPRequest()` and `window.fetch()`:__ In order to make dynamic
   requests to say, a JSON API, you can use these APIs. `XMLHTTPRequest` is the
   classic way of performing requests, but these days there's the more modern
   `window.fetch()` API. Regardless of which API you use, they produce similar
   results.
 - __Using `navigator.sendBeacon()`:__ Sometimes you want to perform an HTTP
-  Request, but want to allow more important requests to be prioritized first.
-  For example with analytics data. The `sendBeacon()`  API, allows for exactly
+  Request, but want to allow more important requests to be prioritized first,
+  such as with analytics data. The `sendBeacon()` API allows for exactly
   this: it allows you to create an HTTP POST request, but schedules it to occur
-  in the background. Even if the page is closed before the request had a chance
+  in the background, even if the page is closed before the request had a chance
   to complete.
 - __Using (dynamic) `import`:__ Scripts can request other scripts, by using the
   `import` syntax. This can either be dynamic or static - but in both cases it
   makes an HTTP request to require JavaScript.
 
 ### Fetch
-There's many ways of creating an HTTP request, but the most common one these
+There are many ways to create an HTTP request, but the most common one these
 days is using `fetch()`. In Choo you might want to trigger a request based on
 some other event coming through the EventEmitter. Let's look at a brief example
 of how to trigger a request based on a Choo event:
@@ -103,10 +103,10 @@ app.store((state, emitter) => {
    endpoint. The url is dynamically created based on the username that's passed.
 3. We know the response will be JSON, so we try and convert the binary blob to
    a valid JavaScript Object.
-5. Now that we have an object, we add the new tweets to our existing list of
+4. Now that we have an object, we add the new tweets to our existing list of
    tweets. Once the new data is set, we emit the `'render'` event to trigger a
    DOM update.
-6. If any of the steps above failed for any reason, we emit the `'error'` event.
+5. If any of the steps above failed for any reason, we emit the `'error'` event.
    If this was a real-world project, this is where we'd also make sure we had a
    good user-facing error, and would report the error to our analytics server.
    Good error handling is a very imporant aspect of production applications.
@@ -194,7 +194,7 @@ app.store((state, emitter) => {
 6. If for some reason a parsing error occurs, we should emit an `'sse:error'`
    event.
 7. If everything has gone well, we can expose the event to the rest of our app
-   using the `sse:message` event.
+   using the `'sse:message'` event.
 8. Connection errors can occur. The connection can be closed from the server,
    it can be reconnecting or some other unknown error might have occured.
 9. If the connection was closed cleanly, we emit the `'sse:closed'` connection,
@@ -277,7 +277,7 @@ app.store((state, emitter) => {
    `'ws:open'`.
 6. We can now tell the system that our websocket is ready to be used, so we
    update our state before that.
-7. Now that we're reading to start listening for events, we can emit `'ws:open`.
+7. Now that we're reading to start listening for events, we can emit `'ws:open'`.
 8. Whenever we receive a `'message'` event, we emit the `'ws:message'` event.
 9. Whenever the connection closes, we set `state.websocket.open` to `false` and
    we emit the `'ws:close'` event.
@@ -287,5 +287,5 @@ app.store((state, emitter) => {
 And that's it! We hope you've now read enough to get started with network
 protocols in the browser! There's much more to explore, and as the web evolves
 so will the protocols. But we're confident that interfacing Choo with the
-browser's networking protocols will always remain straight forward and
+browser's networking protocols will always remain straightforward and
 convenient. Happy (network) hacking!

content/docs/routing/index.md

@@ -50,7 +50,7 @@ function view () {                 // 4.
 
 1. We need an instance of Choo to add our routes to, so let's create that
    first.
-2. We're going to add a view on the `'/` route. This means that if people
+2. We're going to add a view on the `/` route. This means that if people
    navigate to `oursite.com`, this will be the route that is enabled.
 3. Now that we have our view, we can start rendering our application.
 4. We declare our view at the bottom of the page. Thanks to [scope
@@ -167,8 +167,8 @@ So `?foo=bar&bin=baz` would be exposed as `state.query.foo` and
 `state.query.bin`.
 
 ## Dynamic routing
-Sometimes there will be pages that have the same layout, but different data.
-For example user pages, or blog entries. This requires _dynamic routing_. In
+Sometimes there will be pages that have the same layout but different data,
+such as user pages or blog entries. This requires _dynamic routing_. In
 Choo we have two types of syntax for dynamic routing.
 
 ### Params
@@ -259,7 +259,7 @@ html`
 ```
 
 ## Programmatic Navigation
-Often it's needed to change routes after some event happens. For example,
+It's often necessary to change routes after some event happens. For example,
 someone logs in, and we need to redirect them to the logged in page. We need
 programmatic navigation.
 

content/docs/server-rendering/index.md

@@ -9,8 +9,8 @@ This section shows how to effectively render Choo apps in Node.
 text:
 Building fast applications is a tricky challenge. Usually you want to optimize
 the [time to first
-render](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/).
-And then make sure the page becomes interactive quickly. And once that's done,
+render](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/)
+and then make sure the page becomes interactive quickly. And once that's done,
 you want it to all keep feeling snappy. And then some.
 
 Server rendering is a technique to improve time to first render in applications

content/docs/state-machines/index.md

@@ -8,11 +8,11 @@ In this section we'll learn how to use and implement state machines.
 ----
 text:
 If you work in software long enough, you'll have to deal with legacy codebases.
-but you'll also have had the chance to start projects from scratch. And
+But you'll also have had the chance to start projects from scratch. And
 eventually you'll see your project become a legacy codebase itself.
 
 A big challenge in software engineering is: "how do we keep applications
-maintainable?" Because if software isn't maintainable, it can be hard to change,
+maintainable?" Because if software isn't maintainable, it can be hard to change
 and get other people involved. This is not great for many reasons, but most
 importantly: it makes working with the code less fun!
 
@@ -62,9 +62,9 @@ transitions, expanding the graph.
 ## State machines in JavaScript
 Let's implement the traffic light example in JavaScript. In order for this to
 work, we'll need to implement:
-- Saving the states & transitions in an Object
-- The core state machine algorithm
-- Creating a small, stateful class to hold the state
+- Saving the states and transitions in an Object.
+- The core state machine algorithm.
+- Creating a small, stateful class to hold the state.
 - Combining all of these to form the complete state machine.
 
 Let's dig in!
@@ -137,8 +137,8 @@ The value of `.state` is the current state we're in. If an invalid transtion
 occurs, the state machine throws an error explaining which transition was
 invalid.
 
-### Combining Data & State
-Now that we have all our individual bits, let's combine it all together:
+### Combining Data and State
+Now that we have all of our individual bits, let's combine it all together:
 
 ```js
 var machine = new StateMachine('green', {

content/docs/stores/index.md

@@ -63,10 +63,10 @@ app.use((state, emitter) => {
 ```
 
 #### Notes on DOM loading
-- If you're loading stores dynamically, the `'DOMContentLoaded` event will have
+- If you're loading stores dynamically, the `'DOMContentLoaded'` event will have
   fired by the time you start listening for it. Instead use the
   [document-ready](https://github.com/bendrucker/document-ready) package. It's
-  what Choo uses internally to provide the `DOMContentLoaded` event, so there
+  what Choo uses internally to provide the `'DOMContentLoaded'` event, so there
   is no size cost in using it.
 
 ## Updating state and rendering

content/docs/views/index.md

@@ -111,7 +111,7 @@ application's flow is easy to reason about, views cannot attach listeners on
 the event bus themselves. This is where "data down, events up" becomes
 visible in the code: the view only has access to `emit()`, while anything that is
 declared through `app.use()`, such as a store, has access to the whole event bus
-throught `emitter`. This can both send events with `emitter.emit()`, as well as
+through `emitter`. This can both send events with `emitter.emit()`, as well as
 receive them with `emitter.on()`.
 
 There are many events available on DOM elements, and most are available as