Sergio XalambrΓ­

Search

Tutorials

Learn about Remix, React, and more.

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

  1. Build a Command-Line Tool with @sdxc/cli

  2. Add an MCP Server to a Remix v3 App

  3. Make Regional HTTP Requests with Durable Objects

  4. Add URL Normalization Middleware in React Router

  5. Think in Remix UI Instead of React

  6. Hydrate Isolated UI with Remix Client Entries

  7. Create Animated Tab Indicators with CSS Variables

  8. Create a Copy Button for Code Blocks

  9. Build a Type-Safe Markdown Pipeline with Markdoc

  10. Use waitUntil for Non-Blocking Cache Writes

  11. Build a Cache Abstraction for Cloudflare KV

  12. Use Client Hints for Server-Side Timezone Rendering

  13. Add a Global Hotkey to a Remix UI Dialog

  14. Build a Command-Driven Markdown Toolbar in React

  15. Handle Custom Invoker Commands in React

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

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

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

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

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

  21. Access React Router Context with AsyncLocalStorage

  22. Create a Per-Request Database Instance with Middleware

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

  24. Use Sec-Fetch Headers for CSRF Protection

  25. Dedupe Server Calls with Remix Utils Batcher

  26. Transform FormData Between UI and Database in React Router

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

  28. Stream Shared Promise Results in React Router

  29. Redirect Based on Screen Size in React Router

  30. Avoid Waterfalls in React Suspense

  31. Render Loader Promises with Suspense in React Router

  32. Create Reusable Action Routes in React Router

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

  34. Debounce Loaders and Actions in React Router

  35. Authenticate OAuth2 Clients with client_id and client_secret

  36. Use the OAuth2 Introspection Endpoint

  37. Revoke OAuth 2.0 Refresh Tokens via the Revocation Endpoint

  38. Protect OAuth 2.0 Authorization Code Flow with PKCE

  39. Add Custom Claims to JWT Access Tokens Safely

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

  41. Use OAuth 2.0 Scopes to Authorize API Actions

  42. Validate JWTs with JWKS

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

  44. Test React Router Middleware with Bun Test

  45. Enable and use middleware in React Router 7.3

  46. Show a 404 in React Router

  47. Trigger File Downloads from React Router Loaders and Actions

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

  49. Convert Markdown to PDF and ePub with Pandoc

  50. Serve User-Specific Stylesheets in React Router

  51. Split a React Router Route Config across Multiple Files

  52. Configure the tracking branch in Git

  53. Reuse route modules in React Router

  54. Populate Your Rails Database with Fixtures

  55. Stub a method in a class with Minitest

  56. Show toast after a Remix action

  57. Simplify Component Imports with TypeScript Namespaces

  58. Validate a Form in Remix with clientAction

  59. Generate a Cloudflare Environment Type with wrangler

  60. Configure Scoped Private Packages in Bun

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

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

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

  64. Autoload the Correct Node.js Version with NVM

  65. Nest Routes with Dynamic Params in Remix

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

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

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

  69. Handle not found URLs with Remix

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

  71. Add dynamic canonical URL to Remix routes

  72. Add custom attributes to Markdoc code fences

  73. Enable Remix ~/ aliased imports in Vitest

  74. Add syntax highlight to Markdoc using Prism.js

  75. Create a CRUD with Remix

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

  77. Call an action from a loader in Remix

  78. Use React Portal in Remix

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

  80. Defer a Fetch response in Remix

  81. Use a CDN for your static assets in Remix

  82. Get the absolute URL in Remix's MetaFunction

  83. Build an app with Remix and Bun

  84. Find and remove unused code with Knip

  85. Create multiple top-level layouts in Remix

  86. Test meta tags using Playwright

  87. Prefetch data for Remix Fetcher usage

  88. Keep Your Loader Data Fresh in Remix

  89. Share Remix Route Logic between Web and API Routes

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

  91. Upload Images in a Remix Application

  92. Redirect with Search Param in Remix

  93. Access the Loader Data in Remix

  94. Abort Async Calls Inside Remix Loaders and Actions

  95. Get Remix route params `entry.server`

  96. Test meta tags with Cypress

  97. Strongly type Remix route IDs

  98. Strongly type public assets in Remix

  99. Create a reusable Form component in Remix

  100. Sync text input with URLSearchParam in Remix

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

  102. Logout from Auth0 with Remix Auth

  103. Send Node.js ReadStream objects from Remix loaders

  104. Reset a form on success in Remix

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

  106. Send JSON to a Remix action

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

  108. Close SSE connection from the server in Remix

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

  110. Automatically commit sessions on Remix

  111. Customize Remix AppLoadContext type

  112. Turn on Caps Lock on Cypress

  113. Delete a Cookie using Remix cookie helpers

  114. Add runtime SSG and ISR to Remix

  115. Improve SEO by not sending JS in Remix

  116. Use AMP with Remix

  117. Use Remix as a SPA only

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

  119. Add rolling sessions to Remix

  120. Use Server-Sent Events with Remix

  121. Progressively Enhance the useFetcher Hook in React Router

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

  123. Persist inputs after a form submit in Remix

  124. Lazy-load React components in Remix

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

  126. Add additional data before submitting on Remix

  127. Redirect to an external website with Remix

  128. Bubble up data on Remix routes

  129. Group related routes together in Remix

  130. Parse Markdown with Markdoc in Remix

  131. Optimize image loading with plain HTML

  132. Add returnTo behavior to Remix Auth

  133. Share session and cookies between Next and Remix

  134. Fix double data request when prefetching in Remix

  135. Run Tailwind and Remix in Parallel with PM2

  136. Use Remix with socket.io

  137. Generate a PDF in Remix with Resource Routes

  138. Avoid waterfalls of queries in Remix loaders

  139. Run Next and Remix on the same server

  140. Test Remix loaders and actions

  141. Use NProgress in a Remix app

  142. Use Fathom with Remix

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

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

  145. Load only the data you need in Remix

  146. Use ETags in Remix

  147. Redirect to the original URL inside a Remix action

  148. Read search params with JS

  149. Use ActiveModel::Serializer with non ActiveRecord object

  150. Serialize list of items with ActiveModel::Serializer

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

  152. Force a locale in Rails I18n from the params

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

  154. Build your own RSS Reader

  155. Keep Heading Levels Consistent with React Context

  156. Use TailwindCSS Typography with Dark Mode Styles

  157. Use SWR with Geolocation

  158. Sync WebApp Session Status between Tabs with SWR

  159. Sync SWR cache with Web Storage

  160. Configure Google Suite MX records in Vercel

  161. Report Web Vitals in Next.js

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

  163. Purge unused CSS with TailwindCSS

  164. Setup a redirect inside a project deployed to Vercel

  165. Use a scoped registry with Yarn

  166. Automatically Publish to npm using GitHub Actions