Tutorials
Learn about Remix, React, and more.
Subscribe to my tutorials using RSS.
- Add a Color Scheme Toggle in React Router
- Debounce Loaders and Actions in React Router
- Use client_id and client_secret in OAuth2
- Use the OAuth2 Introspection Endpoint
- Revoke a Refresh Token in OAuth2
- Use PKCE in OAuth2 Authorization Code Flow
- Add Custom Claims to JWT Access Tokens
- Validate exp, iat, and nbf in JWTs
- Use `scope` to Authorize Actions in Your API
- Validate JWTs with JWKS
- Create a Per-Request Singleton with React Router Middleware
- Test Middleware in React Router
- Use middleware in React Router
- Show a 404 in React Router
- Download a file from a React Router route
- Use Bullet to Detect N+1 Queries in Rails
- Use Pandoc to convert a Markdown to a PDF and ePUB
- Load Dynamic Stylesheets in React Router
- Split routes config in React Router
- Configure the tracking branch in Git
- Reuse route modules in React Router
- Populate Your Rails Database with Fixtures
- Stub a method in a class with Minitest
- Show toast after a Remix action
- Simplify Component Imports with TypeScript Namespaces
- Validate Form in Remix with clientAction
- Generate Cloudflare environment type with wrangler
- Configure scoped private packages in Bun
- Use package.json#bin to create a CLI
- Access location.state in Remix loaders and actions
- Add i18n to a Remix Vite app
- Autoload the correct Node version with NVM
- Nest routes with dynamic params in Remix
- Build a simple login and logout with Remix
- Access Remix's loader data from a route ErrorBoundary
- Access Remix's loaders data in entry.client
- Handle not found URLs with Remix
- Persist the user locale using cookies with Remix and i18next
- Add dynamic canonical URL to Remix routes
- Add custom attributes to Markdoc code fences
- Enable Remix ~/ aliased imports in Vitest
- Add syntax highlight to Markdoc using Prism.js
- Create a CRUD with Remix
- Pass cookies from a Remix loader to an external API
- Call an action from a loader in Remix
- Use React Portal in Remix
- Prevent the Remix loader to run after document request
- Defer a Fetch response in Remix
- Use a CDN for your static assets in Remix
- Get the absolute URL in Remix's MetaFunction
- Build an app with Remix and Bun
- Find and remove unused code with Knip
- Create multiple top-level layouts in Remix
- Test meta tags using Playwright
- Prefetch data for Remix Fetcher usage
- Keep Your Loader Data Fresh in Remix
- Expose Remix Routes as API Endpoints
- Access the Search Params of a Request in Remix
- Upload Images in a Remix Application
- Redirect with Search Param in Remix
- Access the Loader Data in Remix
- Abort Async Calls Inside Remix Loaders and Actions
- Get Remix route params `entry.server`
- Test meta tags with Cypress
- Strongly type Remix route IDs
- Strongly type public assets in Remix
- Create a reusable Form component in Remix
- Sync text input with URLSearchParam in Remix
- Use TANStack Query to share data between Remix loaders
- Logout from Auth0 with Remix Auth
- Send Node.js ReadStream objects from Remix loaders
- Reset a form on success in Remix
- Use `qs.parse` to use nested form fields in Remix
- Send JSON to a Remix action
- Set multiple cookies in the same response in Remix loaders
- Close SSE connection from the server in Remix
- Measure performance with the Server-Timing header in Remix
- Automatically commit sessions on Remix
- Customize Remix AppLoadContext type
- Turn on Caps Lock on Cypress
- Delete a Cookie using Remix cookie helpers
- Add runtime SSG and ISR to Remix
- Improve SEO by not sending JS in Remix
- Use AMP with Remix
- Use Remix as a SPA only
- Downgrade to MPA if users prefer reduced data in Remix
- Add rolling sessions to Remix
- Use Server-Sent Events with Remix
- Progressively enhance the useFetcher hook in Remix
- Use `process.env` client-side with Remix
- Persist inputs after a form submit in Remix
- Lazy-load React components in Remix
- Destroy user session and while setting a flash message in Remix
- Add additional data before submitting on Remix
- Redirect to an external website with Remix
- Bubble up data on Remix routes
- Group related routes together in Remix
- Parse Markdown with Markdoc in Remix
- Optimize image loading with plain HTML
- Add returnTo behavior to Remix Auth
- Share session and cookies between Next and Remix
- Fix double data request when prefetching in Remix
- Run Tailwind and Remix in Parallel with PM2
- Use Remix with socket.io
- Generate a PDF in Remix with Resource Routes
- Avoid waterfalls of queries in Remix loaders
- Run Next and Remix on the same server
- Test Remix loaders and actions
- Use NProgress in a Remix app
- Use Fathom with Remix
- Fix `gyp: No Xcode or CLT version detected!` error
- Use Dependabot to keep Remix up-to-date
- Load only the data you need in Remix
- Use ETags in Remix
- Redirect to the original URL inside a Remix action
- Read search params with JS
- Use ActiveModel::Serializer with non ActiveRecord object
- Serialize list of items with ActiveModel::Serializer
- Use serializers with JSON.stringify and JSON.parse
- Force a locale in Rails I18n from the params
- Add missing `created_at` and `updated_at` columns in Rails
- Build your own RSS Reader
- Keep Heading Levels Consistent with React Context
- Use TailwindCSS Typography with Dark Mode Styles
- Use SWR with Geolocation
- Sync WebApp Session Status between Tabs with SWR
- Sync SWR cache with Web Storage
- Configure Google Suite MX records in Vercel
- Report Web Vitals in Next.js
- Use React.Suspense to wait for an image to load
- Purge unused CSS with TailwindCSS
- Setup a redirect inside a project deployed to Vercel
- Use a scoped registry with Yarn
- Automatically Publish to npm using GitHub Actions