Kent C. Dodds

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

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

Optimizing Metadata for User Info 

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.

Handling 404 Errors with Splat Routes in Remix

Handling 404 Errors in React Router with Splat Routes

Error Handling

Outro to Full Stack Foundations Workshop

Outro

Full Stack Foundations

Intro to Professional Web Forms Workshop

Introduction to Workshop

Intro to Form Validation 

Discover the importance of validation in web apps. Learn to implement required field validation for data integrity and UX enhancement.

Leverage HTML attributes for form validation, enhancing UX and accessibility. Explore browser validation and screen reader integration for user guidance.

Form Validation for Accessibility

Required Field Validation for User Input

Implement server-side validation to enhance security and user assistance, preventing client-side bypass. Customize error messages for a seamless design.

Master server-side form validation for data integrity and user-friendly error messages. Enhance UX by securely validating input before server processing.

Server-Side Form Validation and Error Handling

Server-side Validation and Custom Error Messages

Prevent incorrect form submissions pre-JavaScript with novalidate attribute using useHydrated hook. Elevate UX, maintain data integrity.

Optimize form validation with 'useHydrated' hook for client-side hydration. Enhance UX with browser-built and server-side validation synergy.

Form Validation with Client-Side Hydration

Dynamic Error Validation with Hooks

Dad Joke Break From Validation

Form Validation

Intro to Accessibility

Learn how to troubleshoot and fix issues with a non-functioning reset button and accessibility problems in a web form.

Learn how to properly associate buttons and form elements, such as the reset button, with their respective forms for improved functionality and accessibility.

Improving Accessibility and Form Associations

Fixing Form Reset Button and Accessibility Issues

Associate error messages with input fields via ARIA attributes for precise screen reader notifications. Learn about semantic HTML and ARIA for accessibility.

Use ARIA attributes like ARIA invalid & describedby. Link error messages to inputs for improved screen reader support, aiding assistive tech users.

Accessible Forms with ARIA Attributes

Error Messages and Accessibility with ARIA Attributes

Enhance app accessibility & UX with focus management: auto-focus error fields, programmable forms, & better editing. Create an inclusive, user-friendly app.

Enhance React app accessibility and UX: auto-focus form inputs and navigate to error messages for improved handling of form errors.

Managing Focus for Form Errors

Focus Management for Better User Experience

Dad Break Joke Accessibility

Accessibility

Intro to Schema Validation

Optimize development with Zod schema validation. Boost efficiency and code robustness, replacing custom logic for an enhanced developer experience. 

Learn how to implement schema validation using Zod in a note editor application. Discover how to define and enforce data

Schema Validation with Zod 

Schema Validation 

Data parsing with Conform's Conform utility. Apply server-side logic and streamline development with additional UI utilities for efficient form handling.

Improve UX & enable progressive enhancement: Replace form validation & error handling with powerful Zod utility in your app

 Form Submission and Error Handling with Conform & Zod

Form Data Parsing with Conform

Enhance UI with Conform's React utilities for end-to-end type safety. Leverage progressive enhancement for a fabulous development experience.

Eliminate custom code for better UX. Seamlessly manage form submission and client-side validation with Conform, ensuring robust server-side validation

Simplifying Form Handling with Conform and Schema Validation

Type Safety with Conform

Dad Joke Break Schema Validation

Schema Validation

Intro to File Upload

Add file upload to edit page for user-friendly image & file attachments. Handle uploads in Remix, enforcing size limits. 

Integrate image upload with form data and memory handling. Use image chooser, manage existing images, set encoding, size limit, and specify alt text. 

Image Upload with Form Data and Memory Upload Handling

File Upload Functionality 

Improve code quality and address TypeScript errors for a robust application, making Lily the life jacket (and yourself) happy.