Skip to content

Commit acb5d94

Browse files
committed
*updates intro to part 2 recap
1 parent 3c51476 commit acb5d94

File tree

7 files changed

+41
-42
lines changed

7 files changed

+41
-42
lines changed

guides/release/getting-started/quick-start.md

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ export default class ScientistsRoute extends Route {
172172
```
173173

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

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

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

269-
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.
269+
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.
270270

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

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

459459
**Configuring Netlify URL handling**
460460

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

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

475475
**Deploying to Netlify using drag and drop**
476476

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

479479
```bash
480480
npm run build
481481
```
482482

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

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

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

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

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

493-
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
493+
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:
494494

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

497497
Congratulations! Your site is now live and in production!
498498

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

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

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

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

507-
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
507+
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:
508508

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

511-
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
511+
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:
512512

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

515-
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
515+
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:
516516

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

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

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

523-
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
523+
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:
524524

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

guides/release/tutorial/part-1/component-basics.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,7 @@ When invoking a component, Ember will replace the component tag with the content
4848

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

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

guides/release/tutorial/part-1/orientation.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ Get started by typing:
9696
Happy coding!
9797
```
9898

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

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

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

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

255255
```gjs { data-filename="app/templates/index.gjs" }
256256
<template>

guides/release/tutorial/part-1/reusable-components.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -404,7 +404,7 @@ From within our JavaScript class, we have access to our component's arguments us
404404
</div>
405405
</div>
406406

407-
```js { data-filename="app/components/map.gjs" data-diff="+4,+5,+7,+8,+9,+10,+11,+12,+13,+14,+15,+16,-26,+27" }
407+
```gjs { data-filename="app/components/map.gjs" data-diff="+4,+5,+7,+8,+9,+10,+11,+12,+13,+14,+15,+16,-26,+27" }
408408
import Component from '@glimmer/component';
409409
import ENV from 'super-rentals/config/environment';
410410
@@ -447,7 +447,7 @@ Note that we did not mark our getter as `@tracked`. Unlike instance variables, g
447447

448448
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.
449449

450-
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™.
450+
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!
451451

452452
## Getting JavaScript Values into the Test Context
453453

guides/release/tutorial/part-2/provider-components.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -379,7 +379,7 @@ When we use this syntax, we are passing a block—the `...some content here...`
379379

380380
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.
381381

382-
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).
382+
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).
383383

384384
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.
385385

guides/release/tutorial/part-2/route-params.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -403,7 +403,7 @@ We can use the `beforeEach` hook to share some boilerplate code, which allows us
403403

404404
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.
405405

406-
```handlebars { data-filename="app/templates/rental.gjs" }
406+
```gjs { data-filename="app/templates/rental.gjs" }
407407
import RentalDetailed from 'super-rentals/components/rental/detailed';
408408
409409
<template>

0 commit comments

Comments
 (0)