-
-
Notifications
You must be signed in to change notification settings - Fork 517
Copy updates intro to part 2 recap #2178
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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, | ||
|
|
@@ -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. | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. considering we talk about accessibility in this paragraph maybe we shouldn't remove the "colourblind friendly" description here? we could say "highlighted in red with a minus sign in front of them" or something? |
||
|
|
||
| Let's replace all our old code with our new componentized version: | ||
|
|
||
|
|
@@ -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. | ||
|
|
@@ -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: | ||
|
|
||
|  | ||
|
|
||
| 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: | ||
|
|
||
|  | ||
|
|
||
| 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: | ||
|
|
||
|  | ||
|
|
||
| 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". | ||
|
|
||
|  | ||
|
|
||
| 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: | ||
|
|
||
|  | ||
|
|
||
| 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: | ||
|
|
||
|  | ||
|
|
||
| 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: | ||
|
|
||
|  | ||
|
|
||
| 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: | ||
|
|
||
|  | ||
|
|
||
| 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: | ||
|
|
||
|  | ||
|
|
||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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" } | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. so the changes to the tutorial shouldn't be in a PR to the guides, it needs to go to the tutorial generator repo: https://github.com/ember-learn/super-rentals-tutorial We're currently in the process of trying to get it working for the upcoming 6.10 release so if you want some help to get onboarded onto the tutorial generator let me know and I can help you land these 👍 |
||
| import { LinkTo } from '@ember/routing'; | ||
| import Jumbo from 'super-rentals/components/jumbo'; | ||
|
|
||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If we want to point to web.dev shouldn't we point to classes directly https://web.dev/learn/javascript/classes because we're talking about using classes
You would think that we don't need to give people a primer on classes in 2026 but because most other ecosystems don't use them it's probably still good to keep 🙈