Some more vue~>Vue, also javascript~>JavaScript

Author: pascalwengerter

docs/api/100-components/cable.md

@@ -20,7 +20,7 @@ consumer.subscriptions.create("MatestackUiCoreChannel", {
 ## `cable(*args, &block)`
 ----
 
-Returns a vue.js driven cable component initially containing content specified by a block.
+Returns a Vue.js driven cable component initially containing content specified by a block.
 
 Imagine something like this:
 

docs/guides/000-installation/README.md

@@ -18,7 +18,7 @@ $ bundle install
 
 ### JavaScript Setup
 
-Matestack uses JavaScript and, in particular, [vuejs](http://vuejs.org). To include these into your existing rails app, matestack supports both, [webpack](https://webpack.js.org/)([er](https://github.com/rails/webpacker/)) and the [asset pipeline](https://guides.rubyonrails.org/asset_pipeline.html).
+Matestack uses JavaScript and, in particular, [Vue.js](http://vuejs.org). To include these into your existing rails app, matestack supports both, [webpack](https://webpack.js.org/)([er](https://github.com/rails/webpacker/)) and the [asset pipeline](https://guides.rubyonrails.org/asset_pipeline.html).
 
 Rails 6+ apps use webpacker by default. Rails 5 and below apps use the asset pipeline by default.
 
@@ -31,7 +31,7 @@ $ yarn add https://github.com/matestack/matestack-ui-core#v1.1.0
 $ yarn install
 ```
 
-This adds the npm package that provides the javascript corresponding to the matestack-ui-core ruby gem. Make sure that the npm package version matches the gem version. To find out what gem version you are using, you may use `bundle info matestack-ui-core`.
+This adds the npm package that provides the JavaScript corresponding to the matestack-ui-core ruby gem. Make sure that the npm package version matches the gem version. To find out what gem version you are using, you may use `bundle info matestack-ui-core`.
 
 Next, import 'matestack-ui-core' in your `app/javascript/packs/application.js`
 
@@ -49,7 +49,7 @@ When you update the matestack-ui-core gem, make sure to update the npm package a
 
 #### Asset Pipeline
 
-If you are using the asset pipeline, you don't need to install the separate npm package. All required javascript libraries are provided by the matestack-ui-core gem.
+If you are using the asset pipeline, you don't need to install the separate npm package. All required JavaScript libraries are provided by the matestack-ui-core gem.
 
 Require 'matestack-ui-core' in your `app/assets/javascript/application.js`
 

docs/guides/100-tutorial/00_introduction.md

@@ -10,7 +10,7 @@ This guide is designed for Ruby on Rails beginners, advanced and experienced dev
 
 ## What is Matestack?
 
-Matestack deeply integrates a Vue.js based UI into Ruby on Rails, offering prebuilt components. Use these prebuild components to write dynamic Web-UIs mostly in pure Ruby and with minimum effort. Matestack enables you to develop rich SPA like interfaces in no time and without touching javascript. And if you need to go deeper you can always create your own custom components to do so. 
+Matestack deeply integrates a Vue.js based UI into Ruby on Rails, offering prebuilt components. Use these prebuild components to write dynamic Web-UIs mostly in pure Ruby and with minimum effort. Matestack enables you to develop rich SPA like interfaces in no time and without touching JavaScript. And if you need to go deeper you can always create your own custom components to do so. 
 
 ## Concept
 
@@ -38,11 +38,11 @@ For nearly all existing HTML5 Tags there is a component in order to create a ui
 
 #### `Matestack::Ui::VueJsComponent`'s
 
-VueJsComponents are more complex components. These always have a Vue.js counterpart and enable easy development of dynamic ui elements which would usually require you to write javascript code. VueJsComponents provide an abstraction so you don't have to write javascript code and instead create rich interfaces in Ruby. Visit the [components API documentation](/docs/api/100-components/) for more information about `Matestack::Ui::VueJsComponent`'s.
+VueJsComponents are more complex components. These always have a Vue.js counterpart and enable easy development of dynamic ui elements which would usually require you to write JavaScript code. VueJsComponents provide an abstraction so you don't have to write JavaScript code and instead create rich interfaces in Ruby. Visit the [components API documentation](/docs/api/100-components/) for more information about `Matestack::Ui::VueJsComponent`'s.
 
 ## Recap & outlook
 
 We introduced you to the apps, pages and components concepts of matestack. In order to unterstand better how matestack works, we create an application from the ground up using matestack and enhancing it step by step while leveraging more and more features of matestack.
 Read the following guides to get started with matestack and get a better understanding about how apps, pages, components work.
 
-Let's setup a rails app with matestack by following the [next guide](/docs/guides/100-tutorial/01_setup.md)
+Let's setup a rails app with matestack by following the [next guide](/docs/guides/100-tutorial/01_setup.md)

docs/guides/100-tutorial/06_async_component.md

@@ -65,7 +65,7 @@ But how can we easily update the list, when the delete action was successful? Re
 
 ## Rerender list when person is deleted
 
-When a person is deleted an event is emitted, but nothing more happens, but we want to update the list of persons, so we no longer see the deleted person in the list. In order to achieve this we could write some javascript which would manipulate the dom or we can use matestacks `async` component and get the result we want in no time and without touching any javascript. Okay, so let's update our index page like this:
+When a person is deleted an event is emitted, but nothing more happens, but we want to update the list of persons, so we no longer see the deleted person in the list. In order to achieve this we could write some JavaScript which would manipulate the dom or we can use matestacks `async` component and get the result we want in no time and without touching any JavaScript. Okay, so let's update our index page like this:
 
 ```ruby
 class Demo::Pages::Persons::Index
@@ -125,6 +125,6 @@ git add . && git commit -m "add delete button to person list and update it dynam
 
 ## Recap & outlook
 
-We added a delete button to our person list on the index page. When a person is deleted our list gets automatically updated without even reloading the page, just by updating the part that is needed. And all of that with a few lines of code and without writing any javascript.
+We added a delete button to our person list on the index page. When a person is deleted our list gets automatically updated without even reloading the page, just by updating the part that is needed. And all of that with a few lines of code and without writing any JavaScript.
 
 Take a well deserved rest and make sure to come back to the next part of this series, introducing [partials and custom components](/docs/guides/100-tutorial/07_partials_and_custom_components.md).

docs/guides/100-tutorial/08_collection_async.md

@@ -208,7 +208,7 @@ Run `rails s` and head over to [localhost:3000](http://localhost:3000/) to and c
 
 ## Deep dive into the `collection` component
 
-So we have come quite a way from simply displaying all the `person` records in a plain list, right? By making use of the `collection` component and adding the necessary configuration, the person index page content is now searchable, orderable and paginated! This would have required us to write a lot of javascript and a complex controller action, but with matestack `collection` component we could do it all just with a few lines of ruby.
+So we have come quite a way from simply displaying all the `person` records in a plain list, right? By making use of the `collection` component and adding the necessary configuration, the person index page content is now searchable, orderable and paginated! This would have required us to write a lot of JavaScript and a complex controller action, but with matestack `collection` component we could do it all just with a few lines of ruby.
 
 The `collection` component was created with exactly this use case in mind - you got a collection of data (e.g. from ActiveRecord) that needs to be displayed in a filterable, ordered and paginated fashion (list, table, cards) without forcing you to write a lot of (repetitive, yet complex) logic.
 
@@ -250,4 +250,4 @@ We learned how to use matestacks `collection` component to generate a filterable
 
 So what's left? In the upcoming guides, you will create your own Vue.js components and learn about other topics like styling, notifications and authorization that are part of modern web applications
 
-So stay tuned and, once ready, head over to the next part, covering [vue.js components](/docs/guides/100-tutorial/09_dynamic_components.md) for powerful custom components.
+So stay tuned and, once ready, head over to the next part, covering [Vue.js components](/docs/guides/100-tutorial/09_dynamic_components.md) for powerful custom components.

docs/guides/100-tutorial/09_custom_vue_js_components.md

@@ -20,7 +20,7 @@ We expect you to have successfully finished the [previous guide](/docs/guides/10
 
 We want to display an option for what you could do with the person at its show page. Therefore we want to fetch a json api and display content of the responses on the page.
 
-We can achieve this by creating a custom Vue.js component. A custom Vue.js component is different from a custom component in the way that it needs a corresponding javascript file, which implements the frontend counterpart of our custom Vue.js component.
+We can achieve this by creating a custom Vue.js component. A custom Vue.js component is different from a custom component in the way that it needs a corresponding JavaScript file, which implements the frontend counterpart of our custom Vue.js component.
 
 Okay, let's create our custom Vue.js component. First we create a component in `app/matestack/components/persons/activity.rb`.
 
@@ -46,10 +46,10 @@ class Components::Persons::Activity < Matestack::Ui::VueJsComponent
 end
 ```
 
-Our Vue.js component renders a div containing a paragraph and a list. The paragraph contains some text and a button. We set a `v-on:click` event handler like you would normally do in Vue.js with its shorter version `@click`. This means the button will call the `addActivity` method from its corresponding Vue.js component. In the list below we assume that our javascript Vue.js component has an `activities` array. We loop over it, again using Vue.js directives and display each activity with a button labelled 'Remove' which calls `deleteActivity(index)` if clicked.
+Our Vue.js component renders a div containing a paragraph and a list. The paragraph contains some text and a button. We set a `v-on:click` event handler like you would normally do in Vue.js with its shorter version `@click`. This means the button will call the `addActivity` method from its corresponding Vue.js component. In the list below we assume that our JavaScript Vue.js component has an `activities` array. We loop over it, again using Vue.js directives and display each activity with a button labelled 'Remove' which calls `deleteActivity(index)` if clicked.
 
-Like stated above, a `Matestack::Ui::VueJsComponent` requires a javascript counterpart.
-Inside we define a Vue.js component and give it a name. The name needs to equal the name we defined in our ruby component at the top with `vue_js_component_name`. This settings is necessary in order to connect the javascript component with our ruby component.
+Like stated above, a `Matestack::Ui::VueJsComponent` requires a JavaScript counterpart.
+Inside we define a Vue.js component and give it a name. The name needs to equal the name we defined in our ruby component at the top with `vue_js_component_name`. This settings is necessary in order to connect the JavaScript component with our ruby component.
 Let's create it aside our ruby component in `app/matestack/components/persons/activity.js`
 
 ```javascript

docs/guides/100-tutorial/10_styling_notifications.md

@@ -7,7 +7,7 @@ Welcome to the tenth part of our tutorial about building a web application with
 
 ## Introduction
 
-After introducing vue.js components in the [previous guide](/docs/guides/100-tutorial/09_custom_vue_js_components.md), it's time to work on the appearance and user experience of the application.
+After introducing Vue.js components in the [previous guide](/docs/guides/100-tutorial/09_custom_vue_js_components.md), it's time to work on the appearance and user experience of the application.
 
 In this guide, we will
 - install and set up the popular UI toolkit [Bootstrap](https://getbootstrap.com/)
@@ -42,7 +42,7 @@ import 'css/custom-bootstrap'
 
 Bootstrap requires jQuery and popper.js, so now is a good time to add those dependencies. Install it by runnning `yarn add jquery popper.js`.
 
-Afterwards import all javascript dependencies of bootstrap and bootstraps own javascript in the `app/javascript/packs/application.js` by adding the following lines to it.
+Afterwards import all JavaScript dependencies of bootstrap and bootstraps own JavaScript in the `app/javascript/packs/application.js` by adding the following lines to it.
 
 ```js
 import 'jquery'

docs/guides/100-tutorial/13_wrap_up.md

@@ -9,7 +9,7 @@ Welcome to the thirteenth part of our tutorial about building a web application
 
 What have we got so far? After following the previous guides, there's now a `RubyOnRails` application running on `Heroku` with a public and admin area allowing for basic CRUD operations.
 
-We have achieved this by setting up two matestack apps each with some matestack pages and by orchestrating matestacks components and vue.js components.
+We have achieved this by setting up two matestack apps each with some matestack pages and by orchestrating matestacks components and Vue.js components.
 
 One of the matestack apps is only available after an admin has logged in and protected by the `Devise` gem. The application pleases the eye and offers a great user experience since we have set up and customized `Bootstrap`. Assets are being served by `Webpacker`.
 

docs/guides/1000-action_cable/README.md

@@ -64,7 +64,7 @@ If you do not want to use the rails generator just create the `matestack_ui_core
 
 ## Usage
 
-After setting up the client side javascript for our action cable we now take a look at how to create server side events to trigger for example rerenderings of `async`/isolated components or show/hide content with the `toggle` component. We will introduce two different types of creating server side events. First broadcasting events to all subscribed clients and secondly sending events to a user by authenticating a connection through a devise user.
+After setting up the client side JavaScript for our action cable we now take a look at how to create server side events to trigger for example rerenderings of `async`/isolated components or show/hide content with the `toggle` component. We will introduce two different types of creating server side events. First broadcasting events to all subscribed clients and secondly sending events to a user by authenticating a connection through a devise user.
 
 ### Broadcast
 
@@ -244,4 +244,4 @@ PrivateChannel.broadcast_to(user, {
 
 ## Conclusion
 
-Creating channels and connections can be done like you want. To learn more about all the possibilities read Rails Guide about [ActionCable](https://guides.rubyonrails.org/action_cable_overview.html). Important for the use with matestack is to emit events in the javascript `received(data)` callback and have a clear structure to determine what the name of the event is which should be emitted. Like shown above we recommend using an `:event` key in your websocket broadcast, which represents the event name that gets emitted through the event hub. You optionally can pass all the received data as payload to that event or also use a specific key. As this is optional you don't need to pass any data to the event emit.
+Creating channels and connections can be done like you want. To learn more about all the possibilities read Rails Guide about [ActionCable](https://guides.rubyonrails.org/action_cable_overview.html). Important for the use with matestack is to emit events in the JavaScript `received(data)` callback and have a clear structure to determine what the name of the event is which should be emitted. Like shown above we recommend using an `:event` key in your websocket broadcast, which represents the event name that gets emitted through the event hub. You optionally can pass all the received data as payload to that event or also use a specific key. As this is optional you don't need to pass any data to the event emit.

docs/guides/1500-contribute/README.md

@@ -51,7 +51,7 @@ Visit `localhost:3000/sandbox/hello` in order to visit the sandbox page. It live
 Visit `localhost:3000/my_app/my_first_page` in order to visit some example use cases. The pages live in `spec/dummy/app/matestack/pages/my_app`.
 
 ### Run the Webpack Watcher
-The builder app located in `builder/` uses webpacker in order build matestacks Javascript based on the source code found in `app/`. During development it can be used to compile the javascript when any relevant source code is changed. Run it like seen below:
+The builder app located in `builder/` uses webpacker in order build matestacks Javascript based on the source code found in `app/`. During development it can be used to compile the JavaScript when any relevant source code is changed. Run it like seen below:
 
 ```shell
 docker-compose up webpack-watcher