Skip to content

Commit 3460029

Browse files
authored
Restored italics (#169)
Co-authored-by: ijlee2 <[email protected]>
1 parent 764a1ae commit 3460029

File tree

3 files changed

+13
-13
lines changed

3 files changed

+13
-13
lines changed

src/markdown/tutorial/part-1/01-orientation.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!--lint disable no-undefined-references-->
22

3-
In this chapter, you will install [Ember CLI](https://cli.emberjs.com/release/), use it to generate a new Ember project, and add some basic templates and styles to your new app. By the end of this chapter, you should have a landing page with Professor Tomster's cute little face featured on it:
3+
In this chapter, you will install *[Ember CLI](https://cli.emberjs.com/release/)*, use it to generate a new Ember project, and add some basic templates and styles to your new app. By the end of this chapter, you should have a landing page with Professor Tomster's cute little face featured on it:
44

55
![The Super Rentals app by the end of the chapter](/images/tutorial/part-1/orientation/[email protected])
66

@@ -254,7 +254,7 @@ visit http://localhost:4200/?deterministic
254254
255255
> Zoey says...
256256
>
257-
> The `localhost` address in the URL means that you can only access the development server from your local machine. If you would like to share your work with the world, you will have to [deploy](https://cli.emberjs.com/release/basic-use/deploying/) your app to the public Internet. We'll cover how to do that in Part 2 of the tutorial.
257+
> The `localhost` address in the URL means that you can only access the development server from your local machine. If you would like to share your work with the world, you will have to *[deploy](https://cli.emberjs.com/release/basic-use/deploying/)* your app to the public Internet. We'll cover how to do that in Part 2 of the tutorial.
258258
259259
You can exit out of the development server at any time by typing `Ctrl + C` into the terminal window where `ember server` is running. That is, typing the "C" key on your keyboard *while* holding down the "Ctrl" key at the same time. Once it has stopped, you can start it back up again with the same `ember server` command. We recommend having two terminal windows open: one to run the server in background, another to type other Ember CLI commands.
260260

src/markdown/tutorial/part-1/02-building-pages.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ The place to manage what pages are available is the *[router][TODO: link to rout
3535
});
3636
```
3737

38-
This adds a [route](../../../routing/defining-your-routes/) named "about", which is served at the `/about` URL by default.
38+
This adds a *[route](../../../routing/defining-your-routes/)* named "about", which is served at the `/about` URL by default.
3939

4040
```run:command hidden=true cwd=super-rentals
4141
git add app/router.js
@@ -124,7 +124,7 @@ git add app/templates/contact.hbs
124124

125125
## Linking Pages with the `<LinkTo>` Component
126126

127-
We just put so much effort into making these pages, we need to make sure people can find them! The way we do that on the web is by using [hyperlinks](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks), or *links* for short.
127+
We just put so much effort into making these pages, we need to make sure people can find them! The way we do that on the web is by using *[hyperlinks](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)*, or *links* for short.
128128

129129
Since Ember offers great support for URLs out-of-the-box, we *could* just link our pages together using the `<a>` tag with the appropriate `href`. However, clicking on those links would require the browser to make a *[full-page refresh][TODO: link to full page refresh]*, which means that it would have to make a trip back to the server to fetch the page, and then load everything from scratch again.
130130

@@ -153,15 +153,15 @@ With Ember, we can do better than that! Instead of the plain-old `<a>` tag, Embe
153153

154154
There is quite a bit going on here, so let's break it down.
155155

156-
`<LinkTo>` is an example of a [component](../../../components/introducing-components/) in Ember&mdash;you can tell them apart from regular HTML tags because they start with an uppercase letter. Along with regular HTML tags, components are a key building block that we can use to build up an app's user interface.
156+
`<LinkTo>` is an example of a *[component](../../../components/introducing-components/)* in Ember&mdash;you can tell them apart from regular HTML tags because they start with an uppercase letter. Along with regular HTML tags, components are a key building block that we can use to build up an app's user interface.
157157

158158
We have a lot more to say about components later, but for now, you can think of them as a way to provide *[custom tags][TODO: link to custom tags]* to supplement the built-in ones that came with the browser.
159159

160-
The `@route=...` part is how we pass [arguments](../../../components/component-arguments-and-html-attributes/) into the component. Here, we use this argument to specify *which* route we want to link to. (Note that this should be the *name* of the route, not the path, which is why we specified `"about"` instead of `"/about"`, and `"contact"` instead of `"/getting-in-touch"`.)
160+
The `@route=...` part is how we pass *[arguments](../../../components/component-arguments-and-html-attributes/)* into the component. Here, we use this argument to specify *which* route we want to link to. (Note that this should be the *name* of the route, not the path, which is why we specified `"about"` instead of `"/about"`, and `"contact"` instead of `"/getting-in-touch"`.)
161161

162162
In addition to arguments, components can also take the usual HTML attributes as well. In our example, we added a `"button"` class for styling purposes, but we could also specify other attributes as we see fit, such as the [ARIA](https://webaim.org/techniques/aria/) [`role` attribute](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles). These are passed without the `@` symbol (`class=...` as opposed to `@class=...`), so that Ember will know they are just regular HTML attributes.
163163

164-
Under the hood, the `<LinkTo>` component generates a regular `<a>` tag for us with the appropriate `href` for the specific route. This `<a>` tag works just fine with [screen readers](https://webaim.org/projects/screenreadersurvey/), as well as allowing our users to bookmark the link or open it in a new tab.
164+
Under the hood, the `<LinkTo>` component generates a regular `<a>` tag for us with the appropriate `href` for the specific route. This `<a>` tag works just fine with *[screen readers](https://webaim.org/projects/screenreadersurvey/)*, as well as allowing our users to bookmark the link or open it in a new tab.
165165

166166
However, when clicking on one of these special links, Ember will intercept the click, render the content for the new page, and update the URL&mdash;all performed locally without having to wait for the server, thus avoiding a full page refresh.
167167

src/markdown/tutorial/part-1/03-automated-testing.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ After all, most of us have experienced (or heard horror stories about) making a
2727

2828
Maybe we can write a checklist somewhere of all the things to check after making changes to our site. But surely, this will get out of hand as we add more features to our app. It is also going to get old really quickly&mdash;repetitive tasks like that are best left to robots.
2929

30-
Hmm, robots. That's an idea. What if we can write this checklist and just get the computer to check everything for us? I think we just invented the idea of [automated testing](../../../testing/)! Okay, maybe we were not the first to come up with the concept, but we independently discovered it so we still deserve some credit.
30+
Hmm, robots. That's an idea. What if we can write this checklist and just get the computer to check everything for us? I think we just invented the idea of *[automated testing](../../../testing/)*! Okay, maybe we were not the first to come up with the concept, but we independently discovered it so we still deserve some credit.
3131

3232
## Adding Acceptance Tests with Generators
3333

@@ -37,9 +37,9 @@ Once we are done patting ourselves on the back, go ahead and run the following c
3737
ember generate acceptance-test super-rentals
3838
```
3939

40-
This is called a [generator](https://cli.emberjs.com/release/basic-use/cli-commands/#generatemorefiles) command in Ember CLI. Generators automatically create files for us based on Ember's conventions and populate them with the appropriate boilerplate content, similar to how `ember new` initially created a skeleton app for us. It typically follows the pattern `ember generate <type> <name>`, where `<type>` is the kind of thing we are generating, and `<name>` is what we want to call it.
40+
This is called a *[generator](https://cli.emberjs.com/release/basic-use/cli-commands/#generatemorefiles)* command in Ember CLI. Generators automatically create files for us based on Ember's conventions and populate them with the appropriate boilerplate content, similar to how `ember new` initially created a skeleton app for us. It typically follows the pattern `ember generate <type> <name>`, where `<type>` is the kind of thing we are generating, and `<name>` is what we want to call it.
4141

42-
In this case, we generated an [acceptance test](../../../testing/test-types/#toc_application-tests) located at `tests/acceptance/super-rentals-test.js`.
42+
In this case, we generated an *[acceptance test](../../../testing/test-types/#toc_application-tests)* located at `tests/acceptance/super-rentals-test.js`.
4343

4444
```run:command hidden=true cwd=super-rentals
4545
git add tests/acceptance/super-rentals-test.js
@@ -84,15 +84,15 @@ Let's open the generated test file and replace the boilerplate test with our own
8484
8585
First, we instruct the test robot to navigate to the `/` URL of our app by using the `visit` *test helper* provided by Ember. This is akin to us typing `http://localhost:4200/` in the browser's address bar and hitting the `enter` key.
8686

87-
Because the page is going to take some time to load, this is known as an [async](https://developer.mozilla.org/docs/Learn/JavaScript/Asynchronous/Concepts) (short for *asynchronous*) step, so we will need to tell the test robot to wait by using JavaScript's `await` keyword. That way, it will wait until the page completely finishes loading before moving on to the next step.
87+
Because the page is going to take some time to load, this is known as an *[async](https://developer.mozilla.org/docs/Learn/JavaScript/Asynchronous/Concepts)* (short for *asynchronous*) step, so we will need to tell the test robot to wait by using JavaScript's `await` keyword. That way, it will wait until the page completely finishes loading before moving on to the next step.
8888

8989
This is almost always the behavior we want, so we will almost always use `await` and `visit` as a pair. This applies to other kinds of simulated interaction too, such as clicking on a button or a link, as they all take time to complete. Even though sometimes these actions may seem imperceptibly fast to us, we have to remember that our test robot has really, really fast hands, as we will see in a moment.
9090

91-
After navigating to the `/` URL and waiting for things to settle, we check that the current URL matches the URL that we expect (`/`). We can use the `currentURL` test helper here, as well as `equal` [assertion](https://github.com/emberjs/ember-test-helpers/blob/master/API.md). This is how we encode our "checklist" into code&mdash;by specifying, or asserting how things *should* behave, we will be alerted if our app does *not* behave in the way that we expect.
91+
After navigating to the `/` URL and waiting for things to settle, we check that the current URL matches the URL that we expect (`/`). We can use the `currentURL` test helper here, as well as `equal` *[assertion](https://github.com/emberjs/ember-test-helpers/blob/master/API.md)*. This is how we encode our "checklist" into code&mdash;by specifying, or asserting how things *should* behave, we will be alerted if our app does *not* behave in the way that we expect.
9292

9393
Next, we confirmed that the page has an `<h2>` tag that contains the text "Welcome to Super Rentals!". Knowing this is true means that we can be quite certain that the correct template has been rendered, without errors.
9494

95-
Then, we looked for a link with the text `About Us`, located using the [CSS selector](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors) `.jumbo a.button`. This is the same syntax we used in our stylesheet, which means "look inside the tag with the `jumbo` class for an `<a>` tag with the `button` class." This matches up with the HTML structure in our template.
95+
Then, we looked for a link with the text `About Us`, located using the *[CSS selector](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors)* `.jumbo a.button`. This is the same syntax we used in our stylesheet, which means "look inside the tag with the `jumbo` class for an `<a>` tag with the `button` class." This matches up with the HTML structure in our template.
9696

9797
Once the existence of this element on the page was confirmed, we told the test robot to click on this link. As mentioned above, this is a user interaction, so it needs to be `await`-ed.
9898

0 commit comments

Comments
 (0)