From b525a96f9e85e1d0feb1fbbc7e553005df1c3c97 Mon Sep 17 00:00:00 2001 From: Emmanouil Zoumpoulakis Date: Sat, 7 May 2022 11:40:16 +0200 Subject: [PATCH 1/2] Fix typos in documentation (it's -> its) --- docs/guides/data-writes.md | 6 +++--- docs/pages/faq.md | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/guides/data-writes.md b/docs/guides/data-writes.md index fa7d3056ea6..637039d4a99 100644 --- a/docs/guides/data-writes.md +++ b/docs/guides/data-writes.md @@ -29,11 +29,11 @@ Since Remix `
` works identically to `` (with a couple extra goodies ### HTML Form HTTP Verbs -Native forms support two HTTP verbs: `GET` and `POST`. Remix uses these verbs to understand your intent. If it's a get, Remix will figure out what parts of the page are changing and only fetch the data for the changing layouts, and use the cached data for the layouts that don't change. When it's a POST, Remix will reload all data to ensure it captures the update from the server. Let's take a look at both. +Native forms support two HTTP verbs: `GET` and `POST`. Remix uses these verbs to understand your intent. If it's a GET, Remix will figure out what parts of the page are changing and only fetch the data for the changing layouts, and use the cached data for the layouts that don't change. When it's a POST, Remix will reload all data to ensure it captures the update from the server. Let's take a look at both. ### HTML Form GET -A `GET` is just a normal navigation where the form data is passed in the URL search params. You use it for normal navigation, just like `` except the user gets to provide the data in the search params through the form. Aside from search pages, it's use with `` is pretty rare. +A `GET` is just a normal navigation where the form data is passed in the URL search params. You use it for normal navigation, just like `` except the user gets to provide the data in the search params through the form. Aside from search pages, its use with `` is pretty rare. Consider this form: @@ -114,7 +114,7 @@ export async function action({ request }) { } ``` -The browser started at `/projects/new`, then posted to `/projects` with the form data in the request, then the server redirected the browser to `/projects/123`. While this is all happening, the browser goes into it's normal "loading" state: the address progress bar fills up, the favicon turns into a spinner, etc. It's actually a decent user experience. +The browser started at `/projects/new`, then posted to `/projects` with the form data in the request, then the server redirected the browser to `/projects/123`. While this is all happening, the browser goes into its normal "loading" state: the address progress bar fills up, the favicon turns into a spinner, etc. It's actually a decent user experience. If you're newer to web development, you may not have ever used a form this way. Lots of folks have always done: diff --git a/docs/pages/faq.md b/docs/pages/faq.md index 4bbe8614d5b..7d2b1e02f64 100644 --- a/docs/pages/faq.md +++ b/docs/pages/faq.md @@ -7,7 +7,7 @@ description: Frequently Asked Questions about Remix ## How can I have a parent route loader validate the user and protect all child routes? -You can't 😅. During a client side transition, to make your app as speedy as possible, Remix will call all of your loaders _in parallel_, in separate fetch requests. Each one of them needs to have it's own authentication check. +You can't 😅. During a client side transition, to make your app as speedy as possible, Remix will call all of your loaders _in parallel_, in separate fetch requests. Each one of them needs to have its own authentication check. This is probably not different than what you were doing before Remix, it might just be more obvious now. Outside of Remix, when you make multiple fetches to your "API Routes", each of those endpoints needs to validate the user session. In other words, Remix route loaders are their own "API Route" and must be treated as such. From b6ebc95a3cf7f85fd66701fa38595f6c3c0421f3 Mon Sep 17 00:00:00 2001 From: Emmanouil Zoumpoulakis Date: Sat, 7 May 2022 12:33:22 +0200 Subject: [PATCH 2/2] A few more typos found --- docs/guides/api-routes.md | 2 +- docs/guides/data-loading.md | 2 +- docs/pages/contributing.md | 2 +- docs/tutorials/blog.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/guides/api-routes.md b/docs/guides/api-routes.md index de9219065ff..4d5d8f94bf6 100644 --- a/docs/guides/api-routes.md +++ b/docs/guides/api-routes.md @@ -28,7 +28,7 @@ Whenever the user clicks a link to ``, Remix in the browser There are times, however, that you want to get the data from a loader but not because the user is visiting the route, but the current page needs that route's data for some reason. A very clear example is a `` component that queries the database for records and suggests them to the user. -You can `useFetcher` for cases like this. And once again, since Remix in the browser knows about Remix on the server, you don't have to do much to get the data. Remix's error handling kicks in, and race conditions, interruptions, and fetch cancelations are handled for you, too. +You can `useFetcher` for cases like this. And once again, since Remix in the browser knows about Remix on the server, you don't have to do much to get the data. Remix's error handling kicks in, and race conditions, interruptions, and fetch cancellations are handled for you, too. For example, you could have a route to handle the search: diff --git a/docs/guides/data-loading.md b/docs/guides/data-loading.md index 5f0410be949..f1f43b50438 100644 --- a/docs/guides/data-loading.md +++ b/docs/guides/data-loading.md @@ -183,7 +183,7 @@ export default function ProductCategory() { } ``` -If you are using TypeScript, you can use type inference to use Prisma Client generated types on when calling `useLoaderData`. This allowes better type safety and intellisense when writing your code that uses the loaded data. +If you are using TypeScript, you can use type inference to use Prisma Client generated types on when calling `useLoaderData`. This allows better type safety and intellisense when writing your code that uses the loaded data. ```tsx filename=tsx filename=app/routes/products/$productId.tsx import { json } from "@remix-run/node"; // or "@remix-run/cloudflare" diff --git a/docs/pages/contributing.md b/docs/pages/contributing.md index 9c9b628b93e..9f25eca1345 100644 --- a/docs/pages/contributing.md +++ b/docs/pages/contributing.md @@ -112,7 +112,7 @@ To generate a new playground, simply run: yarn playground:new ``` -Where the name of the playground is optional and defaults to `playground-${Date.now()}`. Then you can `cd` into the directory that's generated for you and run `npm run dev`. In another teminal window have `yarn watch` running and you're ready to work on whatever Remix features you like with live reload magic 🧙‍♂️ +Where the name of the playground is optional and defaults to `playground-${Date.now()}`. Then you can `cd` into the directory that's generated for you and run `npm run dev`. In another terminal window have `yarn watch` running and you're ready to work on whatever Remix features you like with live reload magic 🧙‍♂️ The playground generated from `yarn playground:new` is based on a template in `scripts/playground/template`. If you'd like to change anything about the template, you can create a custom one in `scripts/playground/template.local` which is `.gitignored` so you can customize it to your heart's content. diff --git a/docs/tutorials/blog.md b/docs/tutorials/blog.md index d9c2a8e7883..5e5016cbc92 100644 --- a/docs/tutorials/blog.md +++ b/docs/tutorials/blog.md @@ -1075,7 +1075,7 @@ export const action: ActionFunction = async ({ ## Progressive Enhancement -For some real fun, [disable JavaScript](https://developer.chrome.com/docs/devtools/javascript/disable/) in your dev tools and try it out. Because Remix is built on the fundamentals of HTTP and HTML, this whole thing works without JavaScript in the browser 🤯 But that's not the point. What's cool about it is that this means our UI is resiliant to network issues. But we really _like_ having JavaScript in the browser and there are a lot of cool things we can do when we've got it, so make sure to re-enable JavaScript before continuing, because we're going to need it to _progressively enhance_ the user experience next. +For some real fun, [disable JavaScript](https://developer.chrome.com/docs/devtools/javascript/disable/) in your dev tools and try it out. Because Remix is built on the fundamentals of HTTP and HTML, this whole thing works without JavaScript in the browser 🤯 But that's not the point. What's cool about it is that this means our UI is resilient to network issues. But we really _like_ having JavaScript in the browser and there are a lot of cool things we can do when we've got it, so make sure to re-enable JavaScript before continuing, because we're going to need it to _progressively enhance_ the user experience next. Let's slow this down and add some "pending UI" to our form.