Learn how to access parent route data in order to enhance the notes index and note ID pages. 

How to leverage TypeScript's type checking to generate metadata for routes dynamically, ensuring type safety and flexibility in your app.

Implementing Dynamic Meta Data for Routes in a TypeScript Application

[00:00] Let's start with the note ID route, so note ID. And we'll come down here, and we've got a meta function that Kelly, our co-worker, built for us. And we also are using this matches thing. So let's go ahead and console.log matches and see what that thing is at all. So look at our console.

[00:19] Here we have that log, and there are three parts of this matches array. So there are three routes that are currently matching on the page. We have the route that's the root route that has our data for our username down at the bottom and the environment variables, all that stuff. We have our meta export from that.

[00:38] We have the params. We have the path name. And we have this very important ID, which we're definitely going to be using. Then we also have this next route. This is our parent route. And in fact, our parent route has the data that we need. So here we're trying to display the display name of the user that we're looking at,

[00:58] the owner of the note. And so we need to get that from data.owner. And that owner has a name right there. So that's what we're trying to access here. And then, of course, we do have one last match here. And that's the route that we're currently on. That has the note data and everything. But we've already got access to that

[01:18] thanks to our type of loader and our data right here. So the match we want is the index 1, or the second match here. But we're going to find it using its ID. And part of the reason that we're doing that is, one, I think it's more clear.

[01:35] And then, two, TypeScript actually can we can inform TypeScript a little bit better by doing things this way. So the first thing that I'm going to do is we're going to add another parameter to this meta function

[01:50] generic, which is to say it's an object that is the data value or the data types from our matches. So the key is the ID. And then the value is the type of the loader for that particular match.

[02:09] This type of loader is almost there. This is the type of our own loader. We actually need the type of our parent loader. So I'm going to import the type loader as note loader. And we're doing that as note loader so we don't conflict with our own loader

[02:27] from the notes TSX file. So this is our parent route. We're importing the type of the note loader from our parent route. And then we can come down here and say the data that is available from this route with this ID has this type. That's what is going on.

[02:44] Or its loader is this type. And so from that, then, we can follow Marty the Moneybag's suggestion of finding the route there. So we can find that as our note match. And right here, if we console log that, we can take a look at that log right there. There it is.

[03:07] There's our data. And on top of that, because we've informed TypeScript of our convention here and provided that to the generic, it is able to tell us what the type is. And so this is actually really cool. And we'll explore that here in just a second. But let's finish this feature. And then we can talk about that.

[03:24] So for getting the display name, we can say note match.data. And you'll notice VS Code added the Elvis operator there. And that's because it's possible that note match is not defined. Possibly, we have the ID wrong. TypeScript will kind of help us make sure we don't.

[03:44] But it is possible that could happen. And then secondly, it's possible that the loader failed to run. But our meta will still run. And so we're going to cover ourselves for that. So if the note match exists, we'll access its data property. We'll go to owner and then name. And we'll say, if that doesn't exist,

[04:04] then we'll fall back to the params name. So now with that, I can come over here. And we get Cody with a capital K. So that's Cody's actual name. So everything is working. But I want to talk a little bit about why it's so awesome that we can provide this type and why I feel comfortable doing this.

[04:23] If we were writing this just in JavaScript, I would be a little bit uneasy doing this because there's a pretty severe level of indirection here. I mean, we are importing the loader and stuff. But the loader, and actually, that's all TypeScript. So we wouldn't be importing the loader if it was just JavaScript.

[04:41] So this is severe level of indirection going on here that if I'm working in the notes route right here, and I'm making changes to this, and I say, you know what? The owner doesn't need to have all this stuff. Let's have the owner have a name. And that'll be our owner.name.

[05:00] And an owner or the username, owner.username. And that's great. So what if we decided, you know what? In this meta, we're going to say, we're going to put their email instead. That probably wouldn't be a good idea from a product decision standpoint. But yeah, definitely could be a thing you could do.

[05:20] So before, that works just fine. No problem, because we've got all that data. But then if I'm in here and I'm like, you know what? We don't need all that extra stuff. Let's just filter down to the stuff that we're actually using. Now, because we have all this type stuff put together, I get a type warning right here. Without JavaScript, that would not be possible.

[05:39] Or without TypeScript, that would not be possible. If we were just using JavaScript, I would feel way uneasy about doing this. So TypeScript, it's great. I highly recommend it. OK, so with that, let's go ahead and go to the index route. And we'll do the same thing here. It'll be a little bit different.

[05:58] So let's go Notes, Index. And remember, we don't have a loader. So our meta function isn't even using the generic, because we're not going to access the data, because there is no data. But we want to have some data so that we can have the display name include the user's actual name.

[06:17] And also, we need to determine the number of notes that they've got. So right now, we're just saying Cody's zero notes. But Cody clearly has many more notes. So the same thing applies here. The difference is, because we don't have a loader, we're just going to pass null as the first argument to this generic. The second thing we're going to do

[06:35] is similar to what we did before, type of note loader. And I'm going to go grab that import and stick it right here. So we get that note loader here as well. Now, of course, that's not type of note loader. It's actually an object that has the key being the ID of the route, and then the type being the value. OK, great.

[06:55] So now, we can follow Marty the Moneybag's suggestion again, get our notes match. And now, that's all going to be nice and type safe and everything else that I had talked about before. And so we can use that to determine the user's name. So we can say notes match.data, again,

[07:14] with the Elvis operator here so that we don't have to worry about the notes match not being defined. Then we'd say owner.name. Otherwise, fall back to the username. And then same thing here. It will be notes match.data.notes.length,

[07:33] or fall back to 0. And that takes care of that. So now, it's Cody's Notes with a capital K. And check out Cody's 12 notes on Epic Notes. So just a quick review, the primary learning outcome here is that the second argument of the generic meta function

[07:52] here is the data types or the type of the loaders of all of the matches that are relevant to what you are doing. And so you provide the ID of the match, and then its loader type. And then your matches is all of the routes that are matched, whether or not those are included in here.

[08:11] At runtime, this is just going to be all the matches. You can find things or filter them by their ID. And then all of this will be type safe, which is pretty stellar, I must say. So with that established, we have accomplished the goal. And now our users will have a much better metadata experience.

[08:30] And they'll be more likely to share their stuff on social media, which is good for our app. So I hope that was interesting and fun for you. And yeah, well done.

Optimizing Metadata for User Info 

[00:00] All right, so Kelly, the coworker, did a little bit of nice work for us. And that is she added a little bit of metadata to our notes index page, as well as our notes specific note ID page. On the notes index page, the best that she could do

[00:17] was add the username from the params, because that note index page doesn't even have a loader. So there's no way to get that data to know which user it is. We'd have to create a loader for that, which seems kind of wasteful, because we actually already have the user's name available somewhere. So it would be cool if we could just somehow get

[00:36] that information. So that is part of what you're going to be doing. Also, she has defaulted it to just be zero notes in the anticipation that you are going to calculate the number of notes based on the data that we have on the page already. So you're going to be doing that. And then also on the note ID page,

[00:53] she's added the username here, as well. And she's also added the contents of the note, the first 100 characters with the dot, dot, dot. And so that has already been done for you. But you need to enhance this so that we're getting the actual user's name, rather than just their username.

[01:10] So on both of those routes, you need to access some parent route data. So because the index route doesn't have a loader, but its parent does have a loader that has the data that we need. So you need to access that. And same thing on the note ID route, as well, to get the owner of the note to get their name,

[01:29] you're going to access the parent route data. So go ahead and do that. This one's a little bit more involved than the other ones. But the emoji are there to guide you. And I think that you will have a good time with it. So I'll see you when you're done.

Developers working on modern web applications today face a myriad of challenges.

The apps we build are expected to be good looking, fast, and secure. They need to be interactive, responsive, and accessible. They need to be SEO-friendly, and they need to be resilient to errors.

In order to be successful, you need to ensure you have a solid foundation to build on.

Full Stack Foundations is a comprehensive, in-depth workshop that sets the stage for the rest of the Epic Web series. It's designed to equip you with the current best practices for handling CSS, routing, data loading, and more.

This isn't some basic "intro" workshop! Even if you're an experienced developer, you'll learn new skills and techniques that will help you build better apps.

<Testimonial author={{name: "Gwen Shapira"}}>

It was 🤯. A lot of fun, and I learned so much in one day. Even with 23 years as a software engineer, I have a much clearer understanding of how the web actually works. Now, months after this workshop, I’m working on a web project and this gave me the mental framework I needed to quickly ramp up and feel competent. I’m not even using the same tools Kent uses in the workshops! 13/10.

</Testimonial>

## Styling

In recent years, CSS has seen a lot of evolution in its usage and tooling. There are new best practices for importing stylesheets, managing assets, and optimizing styles. Failing to follow them can lead to slow-loading pages and a maintenance nightmare.

Here, you'll learn how to handle styling right:

- Loading external stylesheets & other resources
- Managing assets with fingerprinting and caching
- Compilation with PostCSS and Tailwind CSS
- Bundling CSS for libraries and components

## Routing

The URL is critical for the web, and is closely tied to your application's routing. Making suboptimal decisions affects loading performance, navigation, and overall experience.

This section is a deep dive into routing, from the basic filesystem structure through nested routes and dynamic parameters:

- Conventions for signifying routes
- Layout and URL nesting
- Navigation and linking
- Dynamic route params
- Resource routes

## Data Loading

The web is all about data, and nothing frustrates users more than when loading is slow or broken. This section introduces you to AJAX/fetch and Remix loading features, giving you the tools to build stable, fast-loading applications:

- Working with `Request` and `Response` objects
- Fetching data for initial and subsequent loads
- Accessing environment variables
- Connecting routes to loaders

## Mutations

Interactivity makes apps engaging, but also introduces complexity. You need to ensure that the thing that happens when a form is submitted is what the user expects. Here you will use form methods and actions to mutate existing data in a mock database:

- Creating forms with `method` and `action`
- Storing and extracting form data
- Handling invalid submissions
- Form state management
- Specifying intent

*This module sets the stage for the complete Professional Web Forms workshop.*

## Scripting

The browser is capable of quite a lot on its own. Up until this point of the workshop, the Epic Notes application will work without any JavaScript. However, scripting allows us to enhance the user experience in ways that would otherwise be impossible.

In this section, you'll incrementally add in features like client-side pending UI, prefetching, and optimistic updates:

- Scroll position restoration
- Considerations when overriding default browser functionality
- Server and client bundles & entry files
- Preloading data & code for anticipated actions
- Transitions with the `useNavigation` hook

## Search Engine Optimization

Ignoring SEO is like building a store without a sign— people simply won't find you. If you want to be successful, your site needs to be discoverable and optimized for presentation on those platforms.

SEO is a very broad topic, but this section will get you set up on the technical side of the equation:

- Essential tags and attributes
- Overriding default metadata for specific pages
- Dynamically set metadata for social sharing
- Reusing parent data for nested routes

## Error Handling

Even the best apps can break, but what separates the good from the great is how they recover. Lack of proper error handling can lead to frustrated users and lost business.

This section will teach you how to anticipate, handle, and recover from errors, making your application resilient and user-friendly.

- HTTP status codes
- Using `ErrorBoundary` components to contain errors
- Handle thrown errors when fetching data
- Error bubbling from child routes to parent routes
- Implement useful 404 pages

The Full Stack Foundations workshop covers modern web development best practices including Styling, Routing, Data Loading, Forms, SEO, Error Handling, and more!

Full Stack Foundations

Kent C. Dodds

Full Stack Vol 1

Intro to Full Stack Foundations Workshop

Introduction

Intro to Styling 

Learn how to add favicons and other link elements to your Remix application, ensuring proper rendering across nested routes.

Remix includes a Links component that enables us to add links to the head of our application.

Using Remix's Links Component

Manage Asset Links in a Remix Application

Learn how to handle caching and automatically update static assets, like favicons, without waiting for the cache to expire.

By importing the favicon as a module, we can leverage caching and immutable URLs to ensure that it is always up-to-date.

Caching the Favicon

Asset Import Caching Issue

Learn how to link a CSS file globally in your application to apply styles across all pages, including specific font configurations.

Using the links function, we can add global styles to our Remix app.

Adding Global Styles to a Remix App

Add Custom Fonts to the Global CSS

Remix has built-in support for PostCSS and Remix, but there needs to be a little bit of configuration.

When PostCSS and Tailwind CSS are properly configured, Remix will properly compile the CSS and apply it to your application.

PostCSS and Tailwind CSS Configuration

Using PostCSS and Tailwind CSS in Remix

Remix allows you to bundle CSS files together to reduce the number of link tags on the page.

Create a bundled CSS link with help from the cssBundleHref function from Remix's css-bundle package.

Configure CSS Bundling

Bundling CSS in Remix

To mark the end of this section, take a quick break for a Dad Joke.

Dad Joke Break

Styling

An overview of routing in web development and how it works in Remix.

Intro to Routing

The Flat Routes convention provides a simple way to create nested routes in a Remix app.

Learn how to configure routes and create nested pages in Remix, a versatile framework for building web applications.

Creating User Profile and Notes Pages with Remix Routes

Routing in Remix

Learn how to create links in your web application to enable seamless navigation between different pages, including home, profile, notes, and specific note IDs.

Remix offers Link and NavLink components to create absolute or relative links with configurable behavior.

Adding Absolute and Relative Links

Adding Navigation Links

By adding dynamic parameter support to our routes, we won't have to have everything hardcoded.

Remix's useParams hook allows you to access route parameters in your components.

Access Params with useParams

Adding Dynamic Parameter Support

A loader route is useful for handling network requests for fetch requests or document requests.

Anything you can do with HTTP, you can do with resource routes. In this example, we use one to serve CSS.

Example Resource Route Usage

Adding a Resource Route

Take a quick break from the Routing section.

Routing

Intro to Loading

Learn how to use a mock database implementation to load and display user notes in your web application. 

Discover how to fetch and filter data from databases, minimize data sent over the network, and ensure type safety, resulting in improved performance.

Efficient Data Loading in a Remix App

Loading Data to Your Database 

Learn how to handle error messages and status codes effectively in your web development projects, making TypeScript happy and improving your experience.

Learn to handle nulls and throw custom errors in Remix with "invariant response" for status codes and error messages.






Handling Error Responses with Remix

Handling Error Messages

Dad Joke Break Loading

Loading

Intro to Mutations

Learn how to create a form to edit data, following a provided design, and prepare it for future functionality. 

Explore the importance of the post method, encoding form values, setting default values, and utilizing common browser behaviors like reset and submit buttons.

Creating Form Components with Remix 

Building Forms 

Discover the importance of setting the method to GET or POST, and the potential issues that arise from using unsupported HTTP methods.

Learn how to handle form submissions in Remix, update the database, and automatically revalidate and update data on the page without a full page refresh. 

Handling Form Submissions and Mutations

Handling POST Requests for Form Submission

Learn how to handle error cases in form submissions and anticipate potential mistakes made by users. 

Leverage the formdata.get function, we can ensure that only valid string values are accepted, avoiding potential errors and providing a better user experience.

Form Data Types and Validation 

Handling Form Errors and User Mistakes 

Learn how to enhance a button's functionality by wrapping it in a form and handling the deletion of data through a network request. 

Learn how to handle various scenarios and considerations when performing form submissions and mutations using web platform primitives. 

Form Submissions and Mutations 

Button Forms Data

Improve form submissions for multiple actions with additional data, enabling efficient handling within a single action function.






Discover how to use the name and value attributes in buttons to differentiate between different types of form submissions. 

Leveraging Name and Value in Buttons for Multiple Form Submissions

Handling Multiple Actions in a Single Action Function

Dad Joke Break Mutations

Mutations

Intro to Scripting

Remix operates effectively without JavaScript for basic functionality, but JavaScript becomes essential for advanced features and an optimal user experience.

Optimize Your Web App: Add Client-Side JavaScript, Implement Code Splitting, and Enhance Connectivity.  

Improving User Experience with Client-Side JavaScript

JavaScript in Remix: From Optional to Essential

Mastering Scroll Behavior in Remix with JavaScript: When to Auto-Scroll and When to Enhance User Experience.

Learn how to implement scroll restoration in your web app using the scroll restoration component from Remix Run React. 

Enhancing Scroll Restoration 

Page Navigation with Scroll Behavior

Dive into the implementation details and constraints of the Remix framework, and discover how to use environment variables to import DevTools dynamically.

Learn how to securely expose environment variables in a web application, allowing access to vital information on both the client and server side.

Exposing Environment Variables in a Web Application

Environment Variables for Client-Side and Server-Side 

Learn how to leverage JavaScript prefetching to anticipate user actions and preload required resources, improving page load times and user experience.

Understand how prefetching works, observe the automatic caching of resources, and discover the potential of future intelligent intent detection.

Enhancing User Experience with Prefetching

Optimizing Resource Loading with JavaScript Prefetching

Learn how to provide visual feedback to users during slow or bad network connections by implementing a pending status with a spinner using status buttons.

Learn how to add a pending state to form submissions in your Remix application, providing users with visual feedback and preventing multiple submissions. 

Adding Pending State to Form Submissions with Remix

Improve the UX with Pending UI

Dad Joke Break Scripting

Scripting

Intro to Search Engine Optimization (SEO)

Enhance web appearance with meta tags: set title and route-specific meta tags in your page's head.

Boost SEO and UX with title, description, charset, and viewport meta tags in your HTML.

Meta Tags for Better SEO and UX

Configuring Meta Tags 

Optimize user experience and SEO by making sure each page has relevant and distinct metadata.

Master dynamic meta tags in RemixRunReact for custom SEO on specific routes with parent route fallbacks.  

Managing Meta Tags and Descriptions in RemixRunReact

Dynamic Metadata for Different Routes

Customize meta information based on user profiles, note titles, contents, and more. Expand your knowledge in the next section with additional challenges.

Ensure type-safe, flexible dynamic data handling in Remix's meta function with TypeScript, plus explore fallbacks and error strategies for UX

Handling Dynamic Data with Remix's Meta Function

Customizing Meta Tags with Dynamic Data

Dad Joke Break - SEO

Search Engine Optimization

Intro to Error Handling

Refine error handling and beautify error pages with Remix's utilities for user-friendly experiences. 

Learn how Remix enhances error handling in server-rendered React applications.

Error Handling and Error Boundaries

Improving Error Handling and UI on User Profile Page

Use React error boundaries for user-friendly handling of expected errors, like 'user not found,' with customized messages and status codes. 

Improve UX with customized user not found error messages based on usernames, while managing diverse error responses effectively. 

Improving Error Messages for User 

Handling Expected Errors with Error Boundaries

Implement reusable error boundary with status handlers, custom messages for common errors (403, 404, etc.) across routes, boosting error handling. 

Handle nested route errors (e.g., resource not found, invalid IDs) with local error boundaries, preventing app-wide issues.

Error Boundaries and Handling in Nested Routes

Streamlining Error Handling in Routes with a General Error Boundary

Efficiently handle route and component errors with a dedicated fallback document component for meta, links, scripts, improving error handling. 

Enhance error handling and UX by refactoring app components: isolate app logic, implement error boundaries, and preserve loader data. 

Refactoring App Components for Better Error Handling

Improving Error Handling with a Document Component

Handle 404 errors in React Router with a splat route for proper header/footer rendering and optimal error handling practices.

Craft dynamic 404 pages via Remix splat routes. Leverage error boundaries for efficient not-found route handling. Explore setup and advantages.

Full Stack Foundations

Full Stack Foundations

Transcript

Optimizing Metadata for User Info

Transcript