Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions guides/release/getting-started/quick-start.md
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ export default class ScientistsRoute extends Route {
```

This code example uses a feature of JavaScript called classes.
Learn more with this [overview of the latest JavaScript features](https://ponyfoo.com/articles/es6).
Learn more with this [overview of the latest JavaScript features](https://web.dev/series/baseline-newly-available).

In a route's `model()` method, you return whatever data you want to make available to the template.
If you need to fetch data asynchronously,
Expand Down Expand Up @@ -266,7 +266,7 @@ We're going to tell our component:

We'll need to make some changes to the code we wrote before.

In the rest of the code examples in this tutorial, whenever we add or remove code, we will show a "diff." The lines you need to remove have a minus sign in front of them, and the lines you should add have a plus sign. If you are using a screen reader while you go through the Guides, we recommend using Firefox and NVDA or Safari and VoiceOver for the best experience.
In the rest of the code examples in this tutorial, whenever we add or remove code, we will show a "diff." The lines you need to remove will be highlighted in red, and the lines you should add will be highlighted in green. If you are using a screen reader while you go through the Guides, we recommend using Firefox and NVDA or Safari and VoiceOver for the best experience.

Let's replace all our old code with our new componentized version:

Expand Down Expand Up @@ -458,7 +458,7 @@ First you need to [sign up for a Netlify account](https://app.netlify.com/signup

**Configuring Netlify URL handling**

The next step is to let the web app server know how to handle URLs. There are 2 ways to do so.
The next step is to let the web app server know how to handle URLs. There are two ways to do so.

One, you can create a file in your `ember-quickstart/public` folder called
`_redirects`. Add `/* /index.html 200` to the first line and save the file.
Expand All @@ -474,53 +474,53 @@ Now you are ready to deploy your app to production on Netlify platform. There ar

**Deploying to Netlify using drag and drop**

You may need to re-create your `dist` directory to include changes made to `_redirects` file by running this command
You may need to re-create your `dist` directory to include changes made to `_redirects` file by running this command:

```bash
npm run build
```

Once you are logged-in to your Netlify account and in the "Sites" section, you should see the Netlify drag and drop area
Once you are logged-in to your Netlify account and in the "Sites" section, you should see the Netlify drag and drop area:

![Netlify Drag and Drop Area](/images/quick-guide/netlify/drag-and-drop/02.png)

Next, locate your `dist` folder on your local machine and drag and drop it into this area
Next, locate your `dist` folder on your local machine and drag and drop it into this area.

When your files have been successfully uploaded, you should see the status of your deployment in the "Getting started" section
When your files have been successfully uploaded, you should see the status of your deployment in the "Getting started" section:

![Getting Started using Drag and Drop on Netlify](/images/quick-guide/netlify/drag-and-drop/03.png)

Once you see "Your site is deployed" as shown above, your website is now live and you can click on the link provided above the "Getting started" section to view your site
Once you see "Your site is deployed" as shown above, your website is now live and you can click on the link provided above the "Getting started" section to view your site:

![View your site on Netlify](/images/quick-guide/netlify/drag-and-drop/04.png)

Congratulations! Your site is now live and in production!

**Deploying to Netlify using Git (specifically GitHub)**

Make sure you are logged-in to your Netlify account and in the "Sites" section
Make sure you are logged-in to your Netlify account and in the "Sites" section.

Click the button that says "New site from Git".

![Netlify Continuous Deployment Git](/images/quick-guide/netlify/github/new-site-from-git.png)

Click the "GitHub" button under "Continuous Deployment" to connect to your GitHub account. Please note you will be taken to a series of GitHub login screens and asked to select your GitHub preferences related to Netlify
Click the "GitHub" button under "Continuous Deployment" to connect to your GitHub account. Please note you will be taken to a series of GitHub login screens and asked to select your GitHub preferences related to Netlify:

![Netlify choose your GitHub repository to deploy](/images/quick-guide/netlify/github/connect-to-github.png)

Once you have successfully connected your GitHub account with Netlify, you should see a list of repositories to choose from. Select or search for your GitHub repository that you wish to deploy
Once you have successfully connected your GitHub account with Netlify, you should see a list of repositories to choose from. Select or search for your GitHub repository that you wish to deploy:

![Netlify Ember Default Deploy Settings](/images/quick-guide/netlify/github/select-github-repo.png)

If you have successfully selected your repo and it is an Ember application, Netlify will automatically generate the deploy settings as shown below. These instructions assume you do not want to change any of the default settings generated by Netlify. So if everything looks good to you, go ahead and click the "Deploy site" button
If you have successfully selected your repo and it is an Ember application, Netlify will automatically generate the deploy settings as shown below. These instructions assume you do not want to change any of the default settings generated by Netlify. So if everything looks good to you, go ahead and click the "Deploy site" button:

![Netlify GitHub Deploy Overview](/images/quick-guide/netlify/github/github-create-new-site.png)

Once you click the "Deploy site" button, you will be taken to your website "Overview" and you should see the status of your deployment
Once you click the "Deploy site" button, you will be taken to your website "Overview" and you should see the status of your deployment:

![Netlify GitHub Deploy Confirmation](/images/quick-guide/netlify/github/github-deploy-confirmation.png)

Once you see "Your site is deployed" as shown above, your website is now live and you can click on the link provided above the "Getting started" section to view your site
Once you see "Your site is deployed" as shown above, your website is now live and you can click on the link provided above the "Getting started" section to view your site:

![View your site on Netlify](/images/quick-guide/netlify/github/github-live.png)

Expand Down
3 changes: 1 addition & 2 deletions guides/release/tutorial/part-1/component-basics.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,7 @@ When invoking a component, Ember will replace the component tag with the content

Let's try it out by editing the index template:

```gjs { data-filename="app/templates/index.gjs" data-diff="-1,+2,+3,-6,-7,+8,-12,+13" }
import { LinkTo } from '@ember/routing';
```gjs { data-filename="app/templates/index.gjs" data-diff="+2,-5,-6,+7,-11,+12" }
import { LinkTo } from '@ember/routing';
import Jumbo from 'super-rentals/components/jumbo';

Expand Down
4 changes: 2 additions & 2 deletions guides/release/tutorial/part-1/orientation.md
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ Get started by typing:
Happy coding!
```

This should have created a new folder for us called `super-rentals`. We can navigate into it using the `cd` command.
This should have created a new folder for us called `super-rentals`. We can navigate into it using the `cd` command:

```shell
$ cd super-rentals
Expand Down Expand Up @@ -250,7 +250,7 @@ Again, if you still have your browser tab open, your tab will automatically re-r

## Working with HTML, CSS and Assets in an Ember App

Create a `app/templates/index.gjs` file and paste the following markup.
Create a `app/templates/index.gjs` file and paste the following markup:

```gjs { data-filename="app/templates/index.gjs" }
<template>
Expand Down
4 changes: 2 additions & 2 deletions guides/release/tutorial/part-1/reusable-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -404,7 +404,7 @@ From within our JavaScript class, we have access to our component's arguments us
</div>
</div>

```js { data-filename="app/components/map.gjs" data-diff="+4,+5,+7,+8,+9,+10,+11,+12,+13,+14,+15,+16,-26,+27" }
```gjs { data-filename="app/components/map.gjs" data-diff="+4,+5,+7,+8,+9,+10,+11,+12,+13,+14,+15,+16,-26,+27" }
import Component from '@glimmer/component';
import ENV from 'super-rentals/config/environment';

Expand Down Expand Up @@ -447,7 +447,7 @@ Note that we did not mark our getter as `@tracked`. Unlike instance variables, g

That being said, the values _produced_ by getters can certainly change. In our case, the value produced by our `src` getter depends on the values of `lat`, `lng`, `width`, `height` and `zoom` from `this.args`. Whenever these _dependencies_ get updated, we would expect `{{this.src}}` from our template to be updated accordingly.

Ember does this by automatically tracking any variables that were accessed while computing a getter's value. As long as the dependencies themselves are marked as `@tracked`, Ember knows exactly when to invalidate and re-render any templates that may potentially contain any "stale" and outdated getter values. This feature is also known as _[auto-track](../../../in-depth-topics/autotracking-in-depth/)_. All arguments that can be accessed from `this.args` (in other words, `this.args.*`) are implicitly marked as `@tracked` by the Glimmer component superclass. Since we inherited from that superclass, everything Just Works™.
Ember does this by automatically tracking any variables that were accessed while computing a getter's value. As long as the dependencies themselves are marked as `@tracked`, Ember knows exactly when to invalidate and re-render any templates that may potentially contain any "stale" and outdated getter values. This feature is also known as _[auto-track](../../../in-depth-topics/autotracking-in-depth/)_. All arguments that can be accessed from `this.args` (in other words, `this.args.*`) are implicitly marked as `@tracked` by the Glimmer component superclass. Since we inherited from that superclass, everything Just Works!

## Getting JavaScript Values into the Test Context

Expand Down
2 changes: 1 addition & 1 deletion guides/release/tutorial/part-2/provider-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -379,7 +379,7 @@ When we use this syntax, we are passing a block—the `...some content here...`

Inside of our block, we need to be able to access the current item _somehow_. The `{{#each}}` syntax provides the item to our block via the `as |item|` declaration, which creates a local variable `item`, also known as a _[block parameter](../../../components/looping-through-lists/)_. In other words, as we iterate through `@items`, we will have access to the current item that we're looping over through the block parameter (`item`) The block parameter is only accessible from within inside of the block. Ember will fill in the block parameter with the current item of the iteration, and it will do this each time that it renders our block.

The need to provide some data to a block is not unique to the `{{#each}}` syntax. In this case, our `<Rentals::Filter>` component wants to take the unfiltered list of rental properties and match them against the user's query. Once the component has matched the rentals against the query, it will need to provide a filtered list of rental properties to its caller (the `<Rentals>` component).
The need to provide some data to a block is not unique to the `{{#each}}` syntax. In this case, our `<RentalsFilter>` component wants to take the unfiltered list of rental properties and match them against the user's query. Once the component has matched the rentals against the query, it will need to provide a filtered list of rental properties to its caller (the `<Rentals>` component).

As it turns out, this ability to provide block params is not a superpower that only built-in syntaxes like `{{#each}}` can use. We can do this with our own components as well. In fact, Ember allows us to pass arbitrary data to blocks in the form of passing in additional arguments to the `{{yield}}` keyword. Indeed, this is exactly what we did with `{{yield this.results}}` in the `<RentalsFilter>` component.

Expand Down
2 changes: 1 addition & 1 deletion guides/release/tutorial/part-2/route-params.md
Original file line number Diff line number Diff line change
Expand Up @@ -403,7 +403,7 @@ We can use the `beforeEach` hook to share some boilerplate code, which allows us

Finally, let's add a `rental` template to actually _invoke_ our `<RentalDetailed>` component, as well as adding an acceptance test for this new behavior in our app.

```handlebars { data-filename="app/templates/rental.gjs" }
```gjs { data-filename="app/templates/rental.gjs" }
import RentalDetailed from 'super-rentals/components/rental/detailed';

<template>
Expand Down
Loading