Merge branch 'master' into patch-1

Author: jenweber

.eslintrc.js

@@ -52,7 +52,7 @@ module.exports = {
         mocha: true
       },
       parserOptions: {
-        ecmaVersion: 6
+        ecmaVersion: 2018
       },
       rules: {
         "func-names": 0,

.github/workflows/tutorial-ingestion.yml

@@ -16,11 +16,11 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           PULL_REQUEST_BRANCH: master
-          PULL_REQUEST_TITLE: Octane Tutorial Updates
+          PULL_REQUEST_TITLE: Tutorial Updates
           PULL_REQUEST_BODY: >
             This is an *[automated](https://github.com/ember-learn/guides-source/blob/super-rentals-tutorial/.github/workflows/tutorial-ingestion.yml)*
             pull request to let you know there are new content available for
-            the revamped Octane tutorial!
+            the tutorial!
 
 
             If these changes look good to you, it is recommended that you merge

.local.dic

@@ -145,6 +145,7 @@ runnable
 runtime
 sandboxed
 scp
+screencasting
 selectable
 serverless
 singularize

.percy.yml

@@ -0,0 +1,6 @@
+version: 1
+agent:
+  asset-discovery:
+    network-idle-timeout: 250 # ms
+    page-pool-size-min: 8 # pages
+    page-pool-size-max: 15 # pages

.travis.yml

@@ -26,4 +26,10 @@ script:
   - npm run lint:hbs
   - npm run lint:js
   - npm run lint:md
+  # if there's a forked PR with the `branch` set to `master`, we want to unset that for Percy
+  # to avoid resetting the Percy projects baseline
+  - |
+    if [ "$TRAVIS_PULL_REQUEST_SLUG" != "ember-learn/guides-source" ] && [ "$TRAVIS_PULL_REQUEST_BRANCH" == "master" ]; then
+     PERCY_BRANCH="fork-${TRAVIS_BUILD_NUMBER}"
+    fi  
   - npm test

README.md

@@ -66,3 +66,12 @@ npm test
 ### Linting and spellchecking
 
 The guides are spellchecked and linted for Markdown consistency. You can test your contributions by running `npm run lint:md`. Linting and spellchecking must pass or they will fail in Travis-CI.  See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on linting and spellchecking.
+
+
+### Internal and external links
+
+Testing of internal and external links can be performed using three commands:
+
+1. `npm run test:node`.  Checks all relative links for all versions of the guides and runs all ither test scripts in the `node-tests` directory, except for those located in the `node-tests/local` sub-directory;
+1. `npm run test:node-local`. Checks all external links in the `guides/release` folder; and
+1. `npm run test:node-local-exclude-api-urls`.  Checks all external links except for links to the [API docs](https://api.emberjs.com).

guides/release/accessibility/page-template-considerations.md

@@ -15,14 +15,76 @@ Consider this format:
 
 Note that the unique page title is first. This is because it is the most important piece of information from a contextual perspective. Since a user with a screen reader can interrupt the screen reader as they wish, it introduces less fatigue when the unique page title is first, but provides the additional guidance if it is desired. 
 
-Until Ember provides this functionality by default, there are a few different Ember addons that will help:
+One simple way to add page titles is to create a `title` helper:
+
+```javascript {data-filename=app/helpers/title.js}
+import Helper from '@ember/component/helper';
+
+export default class Title extends Helper {
+  original = document.title;
+
+  compute([title]) {
+    document.title = title;
+  }
+
+  willDestroy() {
+    document.title = this.original;
+  }
+}
+```
+
+We can use this helper to set the page title at any point in any template.
+
+For example, if we have a “posts” route, we can set the page title for it like so:
+
+
+```handlebars {data-filename=app/routes/posts.hbs}
+{{title "Posts - Site Title"}}
+
+{{outlet}}
+```
+
+Extending the example, if we have a “post” route that lives within the “posts” route, we could set its page title like so:
+
+```handlebars {data-filename=app/routes/posts/post.hbs}
+{{title (concat @model.title " - Site Title")}}
+
+<h1>{{@model.title}}</h1>
+```
+
+This title will take effect when we enter the “post” route, and the line of code in our `willDestroy` hook will take care of restoring the former title when we return to the “posts” route.
+
+This technique is a reasonable first step, but has limitations:
+
+- It doesn't work when the page is rendered server-side with FastBoot.
+- It doesn't provide any conventions for constructing nested page titles.
+- It doesn't automatically apply the site title (though you can imagine how to add that).
+- It may not be absolutely robust if data in your app changes *a lot* (imagine a real time app).
+
+When your needs become more complex, the following addons facilitate page titles in a more dynamic and maintainable way (including FastBoot support):
 
 - [ember-page-title](https://github.com/adopted-ember-addons/ember-page-title)
 - [ember-cli-head](https://github.com/ronco/ember-cli-head)
 - [ember-cli-document-title](https://github.com/kimroen/ember-cli-document-title)
 
 To evaluate more addons to add/manage content in the `<head>` of a page, view this category on [Ember Observer](https://emberobserver.com/categories/header-content).
 
+You can test that page titles are generated correctly by asserting on the value of `document.title` in your tests:
+
+```javascript {data-filename=tests/acceptance/posts-test.js}
+import { module, test } from 'qunit';
+import { visit, currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from 'ember-qunit';
+
+module('Acceptance | posts', function(hooks) {
+  setupApplicationTest(hooks);
+
+  test('visiting /posts', async function(assert) {
+    await visit('/posts');
+    assert.equal(document.title, 'Posts - Site Title');
+  });
+});
+```
 
 ## Skip Navigation Links
 
@@ -35,7 +97,7 @@ To read more about skip links, visit the [MDN docs](https://developer.mozilla.or
 
 ## Focus Management
 
-No single-page application framework provides the appropriate route-level focus for assistive technology in a default manner. This is primarily due to the way `pushState` works, and the lack of an event hook for JavaScript frameworks to tell assistive technology that the page content has changed. This _also_ means that the focus is unchanged on route navigation, which in some cases means that it would be lost entirely (if the element that previously had focus is now gone). 
+No single-page application framework provides the appropriate route-level focus for assistive technology in a default manner. This is primarily due to the way `pushState` works, and the lack of an event hook for JavaScript frameworks to tell assistive technology that the page content has changed. This *also* means that the focus is unchanged on route navigation, which in some cases means that it would be lost entirely (if the element that previously had focus is now gone). 
 
 Most frameworks have some mechanism for adding the missing functionality to an application. In Ember, there is an attempt to address these two specific shortcomings with [RFC 433](https://github.com/emberjs/rfcs/pull/433); in the meantime there are a few addons that exist to help provide page or view-level focus for your application. All options should be evaluated to determine which is the appropriate use case for your application:
 

guides/release/addons-and-dependencies/index.md

@@ -8,14 +8,14 @@ datepicker that aren't specific to Ember apps.
 
 ## Addons
 
-Addons are JavaScript packages that integrate with Ember. For example, [`ember-cli-sass`](https://github.com/aexmachina/ember-cli-sass)
+Addons are JavaScript packages that integrate with Ember. For example, [`ember-cli-sass`](https://github.com/adopted-ember-addons/ember-cli-sass)
 is an addon that allows you to use SASS/SCSS in your applications. You can install it using the Ember CLI with the following command:
 
 ```bash
 ember install ember-cli-sass
 ```
 
-This will modify your `package.json` (and `package-lock.json`), typically bringing in other dependencies. Some addons will also add
+This will modify your `package.json` (and `package-lock.json` or `yarn.lock`), typically bringing in other dependencies. Some addons will also add
 additional files to your projects when relevant.
 
 There are many addons that cover all kinds of use cases. For more detail, as well as examples of what addons can do,
@@ -29,8 +29,8 @@ categories, and rated according to objective metrics. If you are looking for an
 
 While dependencies can be managed in several ways,
 it's worth noting that the process can be greatly simplified for new developers by using ember-auto-import,
-which offers zero config imports from npm packages.
-It's easily installed using `ember install ember-auto-import`.
+which offers zero config imports from npm packages. 
+It's built into new Ember apps by default and can be installed in older apps by using `ember install ember-auto-import`.
 For further usage instructions, please follow the [project README](https://github.com/ef4/ember-auto-import).
 
 ## Other assets
@@ -138,9 +138,9 @@ All assets located in the `public/` folder will be copied as is to the final out
 
 For example, a `favicon` located at `public/images/favicon.ico` will be copied to `dist/images/favicon.ico`.
 
-All third-party assets, included either manually in `vendor/` or via a package manager like npm, must be added via `import()`.
+All third-party assets, included either manually in `vendor/` or via a package manager like npm, must be added via `app.import()`.
 
-Third-party assets that are not added via `import()` will not be present in the final build.
+Third-party assets that are not added via `app.import()` will not be present in the final build.
 
 By default, `import`ed assets will be copied to `dist/` as they are, with the existing directory structure maintained.
 

guides/release/applications/run-loop.md

@@ -168,29 +168,27 @@ which will make you a better Ember developer.
 You should begin a run loop when the callback fires.
 
 The `Ember.run` method can be used to create a run loop.
-In this example, jQuery and `Ember.run` are used to handle a click event and run some Ember code.
-
-This example uses the `=>` function syntax, which is a [new syntax for callback functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
-that provides a lexical `this`.
-If this syntax is new,
-think of it as a function that has the same `this` as the context it is defined in.
+In this example, `Ember.run` is used to handle an online 
+event (browser gains internet access) and run some Ember code.
 
 ```javascript
-$('a').click(() => {
+window.addEventListener('online', () => {
   Ember.run(() => {  // begin loop
     // Code that results in jobs being scheduled goes here
   }); // end loop, jobs are flushed and executed
 });
 ```
 
+
+
 ## What happens if I forget to start a run loop in an async handler?
 
 As mentioned above, you should wrap any non-Ember async callbacks in `Ember.run`.
 If you don't, Ember will try to approximate a beginning and end for you.
 Consider the following callback:
 
 ```javascript
-$('a').click(() => {
+window.addEventListener('online', () => {
   console.log('Doing things...');
 
   Ember.run.schedule('actions', () => {
@@ -207,7 +205,7 @@ These automatically created run loops we call _autoruns_.
 Here is some pseudocode to describe what happens using the example above:
 
 ```javascript
-$('a').click(() => {
+window.addEventListener('online', () => {
   // 1. autoruns do not change the execution of arbitrary code in a callback.
   //    This code is still run when this callback is executed and will not be
   //    scheduled on an autorun.

guides/release/components/component-arguments-and-html-attributes.md

@@ -39,7 +39,7 @@ the parts of the HTML that are different.
 
 ```handlebars {data-filename="app/components/avatar.hbs"}
 <aside>
-  <div class="avatar" title="{{@title}}">{{@initial}}</div>
+  <div class="avatar" title={{@title}}>{{@initial}}</div>
 </aside>
 ```
 
@@ -109,7 +109,7 @@ specified on the tag.
 
 ```handlebars {data-filename="app/components/avatar.hbs"}
 <aside ...attributes>
-  <div class="avatar" title="{{@title}}">{{@initial}}</div>
+  <div class="avatar" title={{@title}}>{{@initial}}</div>
 </aside>
 ```
 

guides/release/components/component-state-and-actions.md

@@ -20,8 +20,8 @@ To make this work, we will need to stop hard coding the number, and we will need
 to wire up the buttons.
 
 ```js {data-filename="app/components/counter.js"}
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 
 export default class CounterComponent extends Component {
   @tracked count = 0;
@@ -69,9 +69,9 @@ the component JavaScript. An action is a JavaScript method that can be used from
 a template.
 
 ```js {data-filename="app/components/counter.js" data-diff="+3,+8,+9,+10,+11,+13,+14,+15,+16"}
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
 export default class CounterComponent extends Component {
   @tracked count = 0;
@@ -101,9 +101,9 @@ First, let's turn our `increment` and `decrement` methods into a single `change`
 method that takes the amount as a parameter.
 
 ```js {data-filename="app/components/counter.js" data-diff="+8,+9,+10,+11,-12,-13,-14,-15,-17,-18,-19,-20"}
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
 export default class CounterComponent extends Component {
   @tracked count = 0;
@@ -171,9 +171,9 @@ Let's start with what we know already. We'll add the `multiple` tracked property
 and an action called `double` that doubles the `multiple`.
 
 ```js {data-filename="app/components/counter.js" data-diff="+7,+9,+10,+11,+12"}
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
 export default class CounterComponent extends Component {
   @tracked count = 0;
@@ -208,9 +208,9 @@ To get the multiplied number into the template, we'll use a
 [JavaScript getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get).
 
 ```js {data-filename="app/components/counter.js" data-diff="+9,+10,+11"}
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
 export default class CounterComponent extends Component {
   @tracked count = 0;
@@ -291,9 +291,9 @@ let's allow it to be passed in.
 ```
 
 ```js {data-filename="app/components/double-it.js"}
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
 export default class DoubleItComponent extends Component {
   @tracked multiple = 1;
@@ -328,9 +328,9 @@ We refer to a component's argument from JavaScript by prefixing them with
 In JavaScript, we refer to it as `this.args.multiple`.
 
 ```js {data-filename="app/components/counter.js" data-diff="-7,-10,+11"}
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
 export default class CounterComponent extends Component {
   @tracked count = 0;
@@ -372,9 +372,9 @@ previously, we could using an action passed down via arguments.
 ```
 
 ```js {data-filename="app/components/counter.js" data-diff="+9,+17,+18,+19,+20"}
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
 export default class CounterComponent extends Component {
   @tracked count = 0;
@@ -404,9 +404,9 @@ the multiple.
 ```
 
 ```js {data-filename="app/components/double-it.js"}
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
 export default class DoubleItComponent extends Component {
   @tracked multiple = 1;

guides/release/components/conditional-content.md

@@ -4,11 +4,11 @@ There are two styles of `if`, block and inline:
 
 ```handlebars
 {{#if this.thingIsTrue}}
-   Content for the block form of "if"
+  Content for the block form of "if"
 {{/if}}
 
 <div class={{if this.thingIsTrue "value-if-true" "value-if-false"}}>
-    This div used the inline "if" to calculate the class to use.
+  This div used the inline "if" to calculate the class to use.
 </div>
 ```
 
@@ -105,7 +105,7 @@ is passed in and is truthy.
 <aside ...attributes>
   <div
     class="avatar {{if @isActive "is-active"}}"
-    title="{{@title}}"
+    title={{@title}}
   >
     {{@initial}}
   </div>