jakeprem · April 16, 2018 18:20 · Apr 16, 2018 · Apr 16, 2018 · Apr 16, 2018 · Apr 16, 2018
diff --git a/_1_vue-basics.md b/_1_vue-basics.md
@@ -34,7 +34,7 @@ The `el` property specifices whate element on the page Vue should bind to. In th
 The `data` property holds the local state of this instance. Properties of this data can be referenced in the template (HTML generally) or in Javascript. For example, the `{{ message }}` in the HTML above will be replaced with the contents of `message`
 
 Data properties are reactive. That means if the message property is updated, the HTML rendered at `{{ message }}` will be updated as well.  
-[There are some limitations to this.](#change-detection-caveats)
+There are some limitations to how this works, and understanding those limits is an important part of using Vue.
 
 ## Computed Properties
 On a Vue object you might see something like
@@ -49,4 +49,6 @@ computed: {
 ```
 This is a computed property. Computed properties are implemented as functions that return a value.  
 They are accessed just like you would access a normal data property. Computed properties are only reevaluated when the underlying data changes (`this.name` in this case).  
-Computed properties should be used instead of methods wherever possible.
+Computed properties should be used instead of methods wherever possible.
+
+https://vuejs.org/v2/guide/computed.html
diff --git a/_1_vue-basics.md b/_1_vue-basics.md
@@ -1,4 +1,4 @@
-# Vue
+# Vue Basics
 Quick notes on Vue.js
 
   * [Basics](#basics)

diff --git a/_0_outline.md b/_0_outline.md
@@ -1,12 +1,12 @@
 # Learn Vue.js in Y Minutes
 A guide to give you a working mental model in areas of core importance to Vue.js. You won't become an expert but it should give you a foundation to build on.
 
-  * [Vue Basics](#file-_1_vue-basics.md)
-  * [Vue Medium](#file-_2_vue-medium.md)
+  * [Vue Basics](#vue-basics)
+  * [Vue Medium](#vue-medium)
   * The Vue instance
   * Components
     * Props
     * Slots
   * Lifecycle Methods
-  * [ES6 Syntax](#file-_3_es6-md)
-  * [References](#file-_99_references-md)
+  * [ES6 Syntax](#es6-syntax)
+  * [References](#references)
diff --git a/_1_vue-basics.md b/_1_vue-basics.md
@@ -34,8 +34,7 @@ The `el` property specifices whate element on the page Vue should bind to. In th
 The `data` property holds the local state of this instance. Properties of this data can be referenced in the template (HTML generally) or in Javascript. For example, the `{{ message }}` in the HTML above will be replaced with the contents of `message`
 
 Data properties are reactive. That means if the message property is updated, the HTML rendered at `{{ message }}` will be updated as well.  
-There are some limitations to how this works, and understanding those limits is an important part of using Vue.
-#### [Change Detection Caveats](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)
+[There are some limitations to this.](#change-detection-caveats)
 
 ## Computed Properties
 On a Vue object you might see something like

diff --git a/_0_outline.md b/_0_outline.md
@@ -1,11 +1,12 @@
 # Learn Vue.js in Y Minutes
 A guide to give you a working mental model in areas of core importance to Vue.js. You won't become an expert but it should give you a foundation to build on.
 
-  * Vue basics
+  * [Vue Basics](#file-_1_vue-basics.md)
+  * [Vue Medium](#file-_2_vue-medium.md)
   * The Vue instance
   * Components
     * Props
     * Slots
   * Lifecycle Methods
-  * [ES6 Syntax](#file-_1_es6-md)
-  * [References](#file-_9_references-md)
+  * [ES6 Syntax](#file-_3_es6-md)
+  * [References](#file-_99_references-md)
diff --git a/_1_vue-basics.md b/_1_vue-basics.md
@@ -0,0 +1,53 @@
+# Vue
+Quick notes on Vue.js
+
+  * [Basics](#basics)
+  * [Computed Properties](#computed-properties)
+
+## Basics
+
+### The simplest Vue app
+
+```html
+<div id="app">
+  {{ message}}
+</div>
+```
+```js
+var app = new Vue({
+  el: '#app',
+  data: {
+    message: 'Hello world!'
+  }
+})
+```
+Output
+```html
+<div id="app">
+  Hello World!
+</div>
+```
+A Vue instance is created by invoking `new Vue()` and passing in an object with certain properties defined.
+#### el
+The `el` property specifices whate element on the page Vue should bind to. In this simple example, Vue uses the existing HTML at this location as its template.
+#### data
+The `data` property holds the local state of this instance. Properties of this data can be referenced in the template (HTML generally) or in Javascript. For example, the `{{ message }}` in the HTML above will be replaced with the contents of `message`
+
+Data properties are reactive. That means if the message property is updated, the HTML rendered at `{{ message }}` will be updated as well.  
+There are some limitations to how this works, and understanding those limits is an important part of using Vue.
+#### [Change Detection Caveats](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)
+
+## Computed Properties
+On a Vue object you might see something like
+```js
+...,
+computed: {
+  message() {
+    return `Hello ${this.name}!`
+  }
+},
+...
+```
+This is a computed property. Computed properties are implemented as functions that return a value.  
+They are accessed just like you would access a normal data property. Computed properties are only reevaluated when the underlying data changes (`this.name` in this case).  
+Computed properties should be used instead of methods wherever possible.
diff --git a/_2_vue-medium.md b/_2_vue-medium.md
@@ -0,0 +1,37 @@
+# Vue Medium
+Some more complex things about Vue
+
+  * [Change Detection Caveats](#change-detection-caveats)
+
+## Change Detection Caveats
+Vue can't track property additions or deletions at runtime,
+nor does Vue allow you to dynamically add new root level properties (i.e. data.property).  
+If you must add a property to a nested object, you'll need to use `Vue.set` to make it reactive.  
+```js
+...
+data() {
+  return {
+    nestedObj: {
+      a: 'Apple',
+      b: 'Bannana'
+    }
+  }
+},
+methods: {
+  addOrange() {
+    Vue.set(this.nestedObj, 'o', 'Orange')
+  }
+}
+```
+https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
+
+## Async Update Queue
+Vue does some stuff with buffering changes. We can pass a callback function to be executed after the changes are written to the DOM like so:
+```js
+this.$nextTick(function() {})
+```
+
+We should avoid this wherever possible. But it might be necessary,
+particularly in the text editing component.
+
+https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue
diff --git a/_1_es6.md → _3_es6.md b/_1_es6.md → _3_es6.md
diff --git a/_9_references.md → _99_references.md b/_9_references.md → _99_references.md
diff --git a/_1_es6.md b/_1_es6.md
@@ -140,7 +140,7 @@ export default {
 
 // Since we used export default, you can call it whatever you want,
 // in this case I've chosen TheThing
-import TheThing from 'thing.js
+import TheThing from 'thing.js'
 
 TheThing.name
 TheThing.doTheThing()

diff --git a/_1_es6.md b/_1_es6.md
@@ -105,23 +105,69 @@ This is an example of what you might see in Vuex. When Vuex calls an action meth
 The context object has all of the vuex modules properties and commit (`commit`, `state`, `getters`, and `actions`)
 ```javascript
 const actions = {
-  doTheThing(context) {
-    context.commit('MY_MUTATION', payload)
-  },
-  doTheOtherThing({ commit }) {
+  doTheThing({ commit }) {
     // The commit function will be available here but not the rest of context
     commit('MY_MUTATION', payload)
+  },
+  // is equivalent to
+  doTheOtherThing(context) {
+    context.commit('MY_MUTATION', payload)
   }
 }
 ```
 This is probably the most complicated thing on this page. The way we use it in Vue is pretty straight forward though.
 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
 
 ## Export and Import
-### Export
-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
+Export makes code available to other files/modules  
+Import brings in code from other files/modules
+
+### export default
+```javascript
+// File: thing.js
+let thisIsAThing = param => param*2
+
+export default {
+  doTheThing() {
+    // Do something
+  },
+  name: 'The Thing',
+  thisIsAThing
+}
+```
+```javascript
+// File: client.js (or whatever)
+
+// Since we used export default, you can call it whatever you want,
+// in this case I've chosen TheThing
+import TheThing from 'thing.js
+
+TheThing.name
+TheThing.doTheThing()
+TheThing.thisIsAThing(5)
+```
+
+### export
+```javascript
+// File: things.js
+export const NAME = 'The Thing'
+export function doTheThing() {
+  // Do something
+}
+export let x = 5
+```
+```javascript
+// File: client.js (or whatever)
+import { NAME, doTheThing, x } from 'things'
+NAME
+// 'The Thing'
+doTheThing()
+// Executes function
+x
+// 5
+```
 
-### Import
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export  
 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
 
 ## Template Literals

diff --git a/_0_outline.md b/_0_outline.md
@@ -7,4 +7,5 @@ A guide to give you a working mental model in areas of core importance to Vue.js
     * Props
     * Slots
   * Lifecycle Methods
-  * [ES6 Syntax](#file-_1_es6-md)
+  * [ES6 Syntax](#file-_1_es6-md)
+  * [References](#file-_9_references-md)
diff --git a/_0_outline.md b/_0_outline.md
@@ -7,4 +7,4 @@ A guide to give you a working mental model in areas of core importance to Vue.js
     * Props
     * Slots
   * Lifecycle Methods
-  * ES6 Syntax
+  * [ES6 Syntax](#file-_1_es6-md)
diff --git a/_1_es6.md b/_1_es6.md
@@ -1,6 +1,14 @@
 # ES6 Syntax
 A collection of ES6 features that might be unusual if you've mostly worked with older Javascript
 
+  * [Spread Operator](#spread-operator)
+  * [Object Shorthand](#object-shorthands)
+  * [let and const](#let-and-const)
+  * [Arrow functions](#arrow-functions)
+  * [Object Destructuring](#object-destructuring)
+  * [Export and Import](#export-and-import)
+  * [Template Literals](#template-literals)
+
 ## Spread Operator
 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
 

diff --git a/_1_es6.md b/_1_es6.md
@@ -60,9 +60,52 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
 
 ## Arrow functions
+Similar to Python Lambdas and C# LINQ expressions.
+
+A shorthand for declaring Javascript functions. 
+```javascript
+// One line arrow functions have an implicit return, i.e. the result of the expression will be returned
+let doTheThing = (firstname, lastname) => firstname + lastname
+
+doTheThing = () => 'Whatever'
+doTheThing = _ => 'Whatever'
+doTheThing = param1 => param1.name
+doTheThing = aParam => {
+  let bReturn = aParam * 2
+  return bReturn
+}
+// Usage on object methods is not recommended in normal Javascript but okay in Vue/Vuex
+// Related to potential confusion with binding 'this'
+const getters = {
+  fullname: state => state.firstname + state.lastname
+}
+```
+Be mindful of your `{}` and `()` if you're doing a one liner with implicit return.
+```javascript
+// The brackets here get interpreted as block brackets not object brackets
+let doTheThing = (firstname, lastname) => { fullname: firstname + lastname }
+```
+
+Unlike other Javascript functions, arrow functions don't bind `this`. This is less relevant when dealing with functions on Vue objects, e.g. in the `methods` property since Vue binds this for us behind the scenes. If we end up using prototypes or other forms of `this` in our library code then it might be relevant.
+
 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
 
 ## Object Destructuring
+Pull properties out of objects.
+
+This is an example of what you might see in Vuex. When Vuex calls an action method, the first parameter is a context object (https://vuex.vuejs.org/en/actions.html).  
+The context object has all of the vuex modules properties and commit (`commit`, `state`, `getters`, and `actions`)
+```javascript
+const actions = {
+  doTheThing(context) {
+    context.commit('MY_MUTATION', payload)
+  },
+  doTheOtherThing({ commit }) {
+    // The commit function will be available here but not the rest of context
+    commit('MY_MUTATION', payload)
+  }
+}
+```
 This is probably the most complicated thing on this page. The way we use it in Vue is pretty straight forward though.
 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
 

diff --git a/_1_es6.md b/_1_es6.md
@@ -2,9 +2,9 @@
 A collection of ES6 features that might be unusual if you've mostly worked with older Javascript
 
 ## Spread Operator
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
 
 ## Object Shorthands
-
 ### Properties
 A shortcut for assigning variables to object properties when you're assigning variables to an object property with the same name.  
 ```javascript
@@ -53,13 +53,25 @@ obj.doTheThing()
 ```
 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015)
 
-## let, const, and var
+## let and const
+### let
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
+### const
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
 
 ## Arrow functions
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
 
 ## Object Destructuring
+This is probably the most complicated thing on this page. The way we use it in Vue is pretty straight forward though.
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
+
+## Export and Import
+### Export
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
 
-## Import and Export
+### Import
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
 
 ## Template Literals
 A way to do string interpolation.

diff --git a/_1_es6.md b/_1_es6.md
@@ -53,9 +53,13 @@ obj.doTheThing()
 ```
 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015)
 
+## let, const, and var
+
 ## Arrow functions
 
-## let vs var
+## Object Destructuring
+
+## Import and Export
 
 ## Template Literals
 A way to do string interpolation.

diff --git a/_1_es6.md b/_1_es6.md
@@ -1,6 +1,8 @@
 # ES6 Syntax
 A collection of ES6 features that might be unusual if you've mostly worked with older Javascript
 
+## Spread Operator
+
 ## Object Shorthands
 
 ### Properties
@@ -49,8 +51,12 @@ obj.TheThing
 obj.AlsoTheThing
 obj.doTheThing()
 ```
-
 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015)
+
+## Arrow functions
+
+## let vs var
+
 ## Template Literals
 A way to do string interpolation.
 

diff --git a/_1_es6.md b/_1_es6.md
@@ -41,9 +41,13 @@ var obj = {
   [propName]: 'The key for this property will be "TheThing"',
   ['Also' + propName]: 'The key for this property will be "AlsoTheThing"',
   ['do' + propName]() {
-    // This is the do the thing function
+    // This is the doTheThing function
   }
 }
+
+obj.TheThing
+obj.AlsoTheThing
+obj.doTheThing()
 ```
 
 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015)

diff --git a/_1_es6.md b/_1_es6.md
@@ -9,20 +9,20 @@ A shortcut for assigning variables to object properties when you're assigning va
 let name = 'Jake'
 let language = 'Javascript'
 
-let dataObj = {
+let obj = {
   name,
   language
 }
 // is equivalent to
-dataObj = {
+obj = {
   name: name,
   language: language
 }
 ```
 ### Method names
 A shorthand for defining methods on an object.
 ```javascript
-let dataObj = {
+let obj = {
   doTheThing() {
     // Method implmentation
   },
@@ -32,6 +32,19 @@ let dataObj = {
   }
 }
 ```
+### Computed property names
+Let's you set a property name that will be determined by a variable or expression at runtime.
+```javascript
+let propName = 'TheThing'
+
+var obj = {
+  [propName]: 'The key for this property will be "TheThing"',
+  ['Also' + propName]: 'The key for this property will be "AlsoTheThing"',
+  ['do' + propName]() {
+    // This is the do the thing function
+  }
+}
+```
 
 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015)
 ## Template Literals

diff --git a/_1_es6.md b/_1_es6.md
@@ -1,6 +1,39 @@
 # ES6 Syntax
 A collection of ES6 features that might be unusual if you've mostly worked with older Javascript
 
+## Object Shorthands
+
+### Properties
+A shortcut for assigning variables to object properties when you're assigning variables to an object property with the same name.  
+```javascript
+let name = 'Jake'
+let language = 'Javascript'
+
+let dataObj = {
+  name,
+  language
+}
+// is equivalent to
+dataObj = {
+  name: name,
+  language: language
+}
+```
+### Method names
+A shorthand for defining methods on an object.
+```javascript
+let dataObj = {
+  doTheThing() {
+    // Method implmentation
+  },
+  // is equivalent to
+  doTheOtherThing: function() {
+    // Method implementation
+  }
+}
+```
+
+(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015)
 ## Template Literals
 A way to do string interpolation.
 
@@ -19,4 +52,5 @@ var firstName = 'Jake'
 var jsVersion = 'ES5'
 
 var greeting = 'Hello ' + firstName + '! Welcome to ' + jsVersion + '!'
-```
+```
+(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
diff --git a/_1_es6.md b/_1_es6.md
@@ -4,9 +4,8 @@ A collection of ES6 features that might be unusual if you've mostly worked with
 ## Template Literals
 A way to do string interpolation.
 
-Uses `` ` `` (backticks) as quotes.
-
-Instances of `${...}` will be evaluated as an expression and inserted into the string (e.g. a variable will have its value inserted).
+Uses `` ` `` (backticks) as quotes.  
+Instances of `${...}` will be evaluated as an expression and inserted into the string (e.g. a variable will have its value inserted).  
 
 ```javascript
 let firstName = 'Jake'

diff --git a/_1_es6.md b/_1_es6.md
@@ -5,6 +5,7 @@ A collection of ES6 features that might be unusual if you've mostly worked with
 A way to do string interpolation.
 
 Uses `` ` `` (backticks) as quotes.
+
 Instances of `${...}` will be evaluated as an expression and inserted into the string (e.g. a variable will have its value inserted).
 
 ```javascript

diff --git a/_1_es6.md b/_1_es6.md
@@ -4,8 +4,8 @@ A collection of ES6 features that might be unusual if you've mostly worked with
 ## Template Literals
 A way to do string interpolation.
 
-Uses `` ` `` (backticks) as quotes
-Instances of `${...}` will be evaluated as an expression and inserted into the string (e.g. a variable will have its value inserted)
+Uses `` ` `` (backticks) as quotes.
+Instances of `${...}` will be evaluated as an expression and inserted into the string (e.g. a variable will have its value inserted).
 
 ```javascript
 let firstName = 'Jake'

diff --git a/_1_es6.md b/_1_es6.md
@@ -4,7 +4,7 @@ A collection of ES6 features that might be unusual if you've mostly worked with
 ## Template Literals
 A way to do string interpolation.
 
-Uses ````` (backticks) as quotes
+Uses `` ` `` (backticks) as quotes
 Instances of `${...}` will be evaluated as an expression and inserted into the string (e.g. a variable will have its value inserted)
 
 ```javascript

diff --git a/_1_es6.md b/_1_es6.md
@@ -4,7 +4,7 @@ A collection of ES6 features that might be unusual if you've mostly worked with
 ## Template Literals
 A way to do string interpolation.
 
-Uses `\`` (backticks) as quotes
+Uses ````` (backticks) as quotes
 Instances of `${...}` will be evaluated as an expression and inserted into the string (e.g. a variable will have its value inserted)
 
 ```javascript

diff --git a/_1_es6.md b/_1_es6.md
@@ -0,0 +1,22 @@
+# ES6 Syntax
+A collection of ES6 features that might be unusual if you've mostly worked with older Javascript
+
+## Template Literals
+A way to do string interpolation.
+
+Uses `\`` (backticks) as quotes
+Instances of `${...}` will be evaluated as an expression and inserted into the string (e.g. a variable will have its value inserted)
+
+```javascript
+let firstName = 'Jake'
+let jsVersion = 'ES6'
+
+let greeting = `Hello ${firstName}! Welcome to ${jsVersion}.`
+```
+Is equivalent to
+```
+var firstName = 'Jake'
+var jsVersion = 'ES5'
+
+var greeting = 'Hello ' + firstName + '! Welcome to ' + jsVersion + '!'
+```
diff --git a/_2_es6.md b/_2_es6.md
@@ -1,2 +0,0 @@
-# ES6 Syntax
-A collection of ES6 features that might be unusual if you've mostly worked with older Javascript

diff --git a/_1_references.md → _9_references.md b/_1_references.md → _9_references.md
diff --git a/outline.md → _0_outline.md b/outline.md → _0_outline.md
diff --git a/references.md → _1_references.md b/references.md → _1_references.md
diff --git a/es6.md → _2_es6.md b/es6.md → _2_es6.md
diff --git a/es6.md b/es6.md
@@ -0,0 +1,2 @@
+# ES6 Syntax
+A collection of ES6 features that might be unusual if you've mostly worked with older Javascript
diff --git a/outline.md b/outline.md
@@ -1,2 +1,10 @@
 # Learn Vue.js in Y Minutes
 A guide to give you a working mental model in areas of core importance to Vue.js. You won't become an expert but it should give you a foundation to build on.
+
+  * Vue basics
+  * The Vue instance
+  * Components
+    * Props
+    * Slots
+  * Lifecycle Methods
+  * ES6 Syntax
diff --git a/outline.md b/outline.md
@@ -1,14 +1,2 @@
 # Learn Vue.js in Y Minutes
 A guide to give you a working mental model in areas of core importance to Vue.js. You won't become an expert but it should give you a foundation to build on.
-
-## References
-  * Vue.js Guide (https://vuejs.org/v2/guide/)
-  * Vue.js Docs (https://vuejs.org/v2/api/)
-  * Vuex Docs (https://vuex.vuejs.org/en/)
-  * Vue Router Docs (https://router.vuejs.org/en/)
-  * Vue Style Guide (https://vuejs.org/v2/style-guide/)
-  ---
-  * Awesome Vue (https://github.com/vuejs/awesome-vue)
-  * Examples (https://vuejs.org/v2/examples/tree-view.html)
-  * Cookbook (https://vuejs.org/v2/cookbook/)
-  * Alligator.io (https://alligator.io/vuejs)
diff --git a/references.md b/references.md
@@ -0,0 +1,17 @@
+# References
+A collection of Vue resources to reference
+
+## Documentation
+  All of the Vue projects have very well written and useful documentation.
+  * Vue.js Docs (https://vuejs.org/v2/api/)
+  * Vuex Docs (https://vuex.vuejs.org/en/)
+  * Vue Router Docs (https://router.vuejs.org/en/)
+
+
+## Guides, Examples, Resources
+  * Vue Style Guide (https://vuejs.org/v2/style-guide/)
+  * Vue.js Guide (https://vuejs.org/v2/guide/)
+  * Awesome Vue (https://github.com/vuejs/awesome-vue)
+  * Examples (https://vuejs.org/v2/examples/tree-view.html)
+  * Cookbook (https://vuejs.org/v2/cookbook/)
+  * Alligator.io (https://alligator.io/vuejs)
diff --git a/outline.md b/outline.md
@@ -7,7 +7,7 @@ A guide to give you a working mental model in areas of core importance to Vue.js
   * Vuex Docs (https://vuex.vuejs.org/en/)
   * Vue Router Docs (https://router.vuejs.org/en/)
   * Vue Style Guide (https://vuejs.org/v2/style-guide/)
-
+  ---
   * Awesome Vue (https://github.com/vuejs/awesome-vue)
   * Examples (https://vuejs.org/v2/examples/tree-view.html)
   * Cookbook (https://vuejs.org/v2/cookbook/)

diff --git a/outline.md b/outline.md
@@ -6,4 +6,9 @@ A guide to give you a working mental model in areas of core importance to Vue.js
   * Vue.js Docs (https://vuejs.org/v2/api/)
   * Vuex Docs (https://vuex.vuejs.org/en/)
   * Vue Router Docs (https://router.vuejs.org/en/)
-  * Vue Style Guide (https://vuejs.org/v2/style-guide/)
+  * Vue Style Guide (https://vuejs.org/v2/style-guide/)
+
+  * Awesome Vue (https://github.com/vuejs/awesome-vue)
+  * Examples (https://vuejs.org/v2/examples/tree-view.html)
+  * Cookbook (https://vuejs.org/v2/cookbook/)
+  * Alligator.io (https://alligator.io/vuejs)
diff --git a/outline.md b/outline.md
@@ -1,2 +1,9 @@
 # Learn Vue.js in Y Minutes
-A guide to give you a working mental model in areas of core importance to Vue.js. You won't become an expert but it should give you a foundation to build on.
+A guide to give you a working mental model in areas of core importance to Vue.js. You won't become an expert but it should give you a foundation to build on.
+
+## References
+  * Vue.js Guide (https://vuejs.org/v2/guide/)
+  * Vue.js Docs (https://vuejs.org/v2/api/)
+  * Vuex Docs (https://vuex.vuejs.org/en/)
+  * Vue Router Docs (https://router.vuejs.org/en/)
+  * Vue Style Guide (https://vuejs.org/v2/style-guide/)
diff --git a/outline.md b/outline.md
@@ -0,0 +1,2 @@
+# Learn Vue.js in Y Minutes
+A guide to give you a working mental model in areas of core importance to Vue.js. You won't become an expert but it should give you a foundation to build on.
Original file line number	Diff line number	Diff line change
		@@ -1,2 +0,0 @@
		# ES6 Syntax
		A collection of ES6 features that might be unusual if you've mostly worked with older Javascript
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# ES6 Syntax
		A collection of ES6 features that might be unusual if you've mostly worked with older Javascript
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Learn Vue.js in Y Minutes
		A guide to give you a working mental model in areas of core importance to Vue.js. You won't become an expert but it should give you a foundation to build on.