Sergio XalambrΓ­

Search

Tutorials

Learn about Remix, React, and more.

Subscribe to my tutorials using RSS, Atom, or JSON Feed.

  1. Add an MCP Server to a Remix v3 App

  2. Make Regional HTTP Requests with Durable Objects

  3. Add URL Normalization Middleware in React Router

  4. Think in Remix UI Instead of React

  5. Hydrate Isolated UI with Remix Client Entries

  6. Create Animated Tab Indicators with CSS Variables

  7. Create a Copy Button for Code Blocks

  8. Build a Type-Safe Markdown Pipeline with Markdoc

  9. Use waitUntil for Non-Blocking Cache Writes

  10. Build a Cache Abstraction for Cloudflare KV

  11. Use Client Hints for Server-Side Timezone Rendering

  12. Add a Global Hotkey to a Remix UI Dialog

  13. Build a Command-Driven Markdown Toolbar in React

  14. Handle Custom Invoker Commands in React

  15. Build a User Menu in React with Invoker Popover Commands

  16. Prevent a Modal Dialog from Closing with request-close in React

  17. Open a Modal Dialog in React with the Invoker Commands API

  18. Use an `iife` Helper for Inline Control Flow in TypeScript

  19. Cancel `useFetcher().load()` Requests on Unmount in React Router

  20. Access React Router Context with AsyncLocalStorage

  21. Create a Per-Request Database Instance with Middleware

  22. Create a Multi-Directory Route Organization in React Router

  23. Use Sec-Fetch Headers for CSRF Protection

  24. Dedupe Server Calls with Remix Utils Batcher

  25. Transform FormData Between UI and Database in React Router

  26. Build a Nested Master-Detail View with Redirects in React Router

  27. Stream Shared Promise Results in React Router

  28. Redirect Based on Screen Size in React Router

  29. Avoid Waterfalls in React Suspense

  30. Render Loader Promises with Suspense in React Router

  31. Create Reusable Action Routes in React Router

  32. Add a Cookie-Based Color Scheme Toggle in React Router

  33. Debounce Loaders and Actions in React Router

  34. Authenticate OAuth2 Clients with client_id and client_secret

  35. Use the OAuth2 Introspection Endpoint

  36. Revoke OAuth 2.0 Refresh Tokens via the Revocation Endpoint

  37. Protect OAuth 2.0 Authorization Code Flow with PKCE

  38. Add Custom Claims to JWT Access Tokens Safely

  39. Validate JWT Expiration, Issued-At, and Not-Before Claims

  40. Use OAuth 2.0 Scopes to Authorize API Actions

  41. Validate JWTs with JWKS

  42. Create a Per-Request Singleton with React Router Middleware

  43. Test React Router Middleware with Bun Test

  44. Enable and use middleware in React Router 7.3

  45. Show a 404 in React Router

  46. Trigger File Downloads from React Router Loaders and Actions

  47. Use Bullet to Detect N+1 Queries in Rails

  48. Convert Markdown to PDF and ePub with Pandoc

  49. Serve User-Specific Stylesheets in React Router

  50. Split a React Router Route Config across Multiple Files

  51. Configure the tracking branch in Git

  52. Reuse route modules in React Router

  53. Populate Your Rails Database with Fixtures

  54. Stub a method in a class with Minitest

  55. Show toast after a Remix action

  56. Simplify Component Imports with TypeScript Namespaces

  57. Validate a Form in Remix with clientAction

  58. Generate a Cloudflare Environment Type with wrangler

  59. Configure Scoped Private Packages in Bun

  60. Use package.json#bin to create a CLI

  61. Access location.state in Remix Client Loaders and Actions

  62. Add Internationalization with remix-i18next to a Remix Vite App

  63. Autoload the Correct Node.js Version with NVM

  64. Nest Routes with Dynamic Params in Remix

  65. Build Register, Login, and Logout Flows with Remix Sessions

  66. Access React Router's loader data from a route ErrorBoundary

  67. Access React Router's Loaders Data in entry.client

  68. Handle not found URLs with Remix

  69. Persist the User Locale Using Cookies with React Router and i18next

  70. Add dynamic canonical URL to Remix routes

  71. Add custom attributes to Markdoc code fences

  72. Enable Remix ~/ aliased imports in Vitest

  73. Add syntax highlight to Markdoc using Prism.js

  74. Create a CRUD with Remix

  75. Pass Cookies from a React Router Loader to an External API

  76. Call an action from a loader in Remix

  77. Use React Portal in Remix

  78. Prevent the React Router Loader to Run after Document Request

  79. Defer a Fetch response in Remix

  80. Use a CDN for your static assets in Remix

  81. Get the absolute URL in Remix's MetaFunction

  82. Build an app with Remix and Bun

  83. Find and remove unused code with Knip

  84. Create multiple top-level layouts in Remix

  85. Test meta tags using Playwright

  86. Prefetch data for Remix Fetcher usage

  87. Keep Your Loader Data Fresh in Remix

  88. Share Remix Route Logic between Web and API Routes

  89. Access the Search Params of a Request in React Router

  90. Upload Images in a Remix Application

  91. Redirect with Search Param in Remix

  92. Access the Loader Data in Remix

  93. Abort Async Calls Inside Remix Loaders and Actions

  94. Get Remix route params `entry.server`

  95. Test meta tags with Cypress

  96. Strongly type Remix route IDs

  97. Strongly type public assets in Remix

  98. Create a reusable Form component in Remix

  99. Sync text input with URLSearchParam in Remix

  100. Use TanStack Query to Share Data between React Router Loaders

  101. Logout from Auth0 with Remix Auth

  102. Send Node.js ReadStream objects from Remix loaders

  103. Reset a form on success in Remix

  104. Use `qs.parse` to use nested form fields in Remix

  105. Send JSON to a Remix action

  106. Set Multiple Cookies in the Same Response in React Router Loaders

  107. Close SSE connection from the server in Remix

  108. Measure performance with the Server-Timing header in React Router

  109. Automatically commit sessions on Remix

  110. Customize Remix AppLoadContext type

  111. Turn on Caps Lock on Cypress

  112. Delete a Cookie using Remix cookie helpers

  113. Add runtime SSG and ISR to Remix

  114. Improve SEO by not sending JS in Remix

  115. Use AMP with Remix

  116. Use Remix as a SPA only

  117. Downgrade to MPA if Users Prefer Reduced Data in React Router

  118. Add rolling sessions to Remix

  119. Use Server-Sent Events with Remix

  120. Progressively Enhance the useFetcher Hook in React Router

  121. Use `process.env` client-side with Remix

  122. Persist inputs after a form submit in Remix

  123. Lazy-load React components in Remix

  124. Destroy User Session and While Setting a Flash Message in React Router

  125. Add additional data before submitting on Remix

  126. Redirect to an external website with Remix

  127. Bubble up data on Remix routes

  128. Group related routes together in Remix

  129. Parse Markdown with Markdoc in Remix

  130. Optimize image loading with plain HTML

  131. Add returnTo behavior to Remix Auth

  132. Share session and cookies between Next and Remix

  133. Fix double data request when prefetching in Remix

  134. Run Tailwind and Remix in Parallel with PM2

  135. Use Remix with socket.io

  136. Generate a PDF in Remix with Resource Routes

  137. Avoid waterfalls of queries in Remix loaders

  138. Run Next and Remix on the same server

  139. Test Remix loaders and actions

  140. Use NProgress in a Remix app

  141. Use Fathom with Remix

  142. Fix `gyp: No Xcode or CLT version detected!` error

  143. Use Dependabot to keep Remix up-to-date

  144. Load only the data you need in Remix

  145. Use ETags in Remix

  146. Redirect to the original URL inside a Remix action

  147. Read search params with JS

  148. Use ActiveModel::Serializer with non ActiveRecord object

  149. Serialize list of items with ActiveModel::Serializer

  150. Use serializers with JSON.stringify and JSON.parse

  151. Force a locale in Rails I18n from the params

  152. Add missing `created_at` and `updated_at` columns in Rails

  153. Build your own RSS Reader

  154. Keep Heading Levels Consistent with React Context

  155. Use TailwindCSS Typography with Dark Mode Styles

  156. Use SWR with Geolocation

  157. Sync WebApp Session Status between Tabs with SWR

  158. Sync SWR cache with Web Storage

  159. Configure Google Suite MX records in Vercel

  160. Report Web Vitals in Next.js

  161. Use React.Suspense to wait for an image to load

  162. Purge unused CSS with TailwindCSS

  163. Setup a redirect inside a project deployed to Vercel

  164. Use a scoped registry with Yarn

  165. Automatically Publish to npm using GitHub Actions