Tutorials

Learn about Remix, React, and more.

Subscribe to my tutorials using RSS.

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

   May 15, 26

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

   May 13, 26

3. Access React Router Context with AsyncLocalStorage

   Mar 06, 26

4. Create a Per-Request Database Instance with Middleware

   Mar 03, 26

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

   Feb 23, 26

6. Use Sec-Fetch Headers for CSRF Protection

   Feb 23, 26

7. Dedupe Server Calls with Remix Utils Batcher

   Oct 19, 25

8. Transform FormData Between UI and Database in React Router

   Oct 15, 25

9. Build a Master-Detail UI with React Router

   Oct 03, 25

10. Leverage React Router's Built-in Data Deduplication

    Sep 25, 25

11. Redirect Based on Screen Size in React Router

    Aug 13, 25

12. Avoid Waterfalls in React Suspense

    Aug 12, 25

13. Handle deferred data in React Router

    Jul 31, 25

14. Use Action Routes in React Router

    Jul 20, 25

15. Add a Color Scheme Toggle in React Router

    May 07, 25

16. Debounce Loaders and Actions in React Router

    Apr 14, 25

17. Use client_id and client_secret in OAuth2

    Apr 05, 25

18. Use the OAuth2 Introspection Endpoint

    Apr 02, 25

19. Revoke a Refresh Token in OAuth2

    Apr 01, 25

20. Use PKCE in OAuth2 Authorization Code Flow

    Mar 26, 25

21. Add Custom Claims to JWT Access Tokens

    Mar 25, 25

22. Validate exp, iat, and nbf in JWTs

    Mar 25, 25

23. Use `scope` to Authorize Actions in Your API

    Mar 24, 25

24. Validate JWTs with JWKS

    Mar 24, 25

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

    Mar 11, 25

26. Test Middleware in React Router

    Mar 10, 25

27. Use middleware in React Router

    Mar 08, 25

28. Show a 404 in React Router

    Mar 02, 25

29. Download a file from a React Router route

    Feb 24, 25

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

    Feb 08, 25

31. Use Pandoc to convert a Markdown to a PDF and ePUB

    Feb 07, 25

32. Load Dynamic Stylesheets in React Router

    Feb 03, 25

33. Split routes config in React Router

    Jan 15, 25

34. Configure the tracking branch in Git

    Jan 14, 25

35. Reuse route modules in React Router

    Jan 13, 25

36. Populate Your Rails Database with Fixtures

    Dec 18, 24

37. Stub a method in a class with Minitest

    Sep 02, 24

38. Show toast after a Remix action

    Aug 30, 24

39. Simplify Component Imports with TypeScript Namespaces

    Jul 10, 24

40. Validate Form in Remix with clientAction

    Jun 18, 24

41. Generate Cloudflare environment type with wrangler

    Jun 18, 24

42. Configure scoped private packages in Bun

    Jun 18, 24

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

    Mar 26, 24

44. Access location.state in Remix loaders and actions

    Mar 13, 24

45. Add i18n to a Remix Vite app

    Mar 08, 24

46. Autoload the correct Node version with NVM

    Mar 01, 24

47. Nest routes with dynamic params in Remix

    Feb 15, 24

48. Build a simple login and logout with Remix

    Feb 13, 24

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

    Feb 13, 24

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

    Feb 13, 24

51. Handle not found URLs with Remix

    Feb 10, 24

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

    Feb 07, 24

53. Add dynamic canonical URL to Remix routes

    Feb 04, 24

54. Add custom attributes to Markdoc code fences

    Feb 03, 24

55. Enable Remix ~/ aliased imports in Vitest

    Feb 02, 24

56. Add syntax highlight to Markdoc using Prism.js

    Jan 31, 24

57. Create a CRUD with Remix

    Jan 25, 24

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

    Jan 22, 24

59. Call an action from a loader in Remix

    Jan 22, 24

60. Use React Portal in Remix

    Jan 22, 24

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

    Jan 22, 24

62. Defer a Fetch response in Remix

    Jan 19, 24

63. Use a CDN for your static assets in Remix

    Jan 19, 24

64. Get the absolute URL in Remix's MetaFunction

    Jan 19, 24

65. Build an app with Remix and Bun

    Jan 19, 24

66. Find and remove unused code with Knip

    Jan 18, 24

67. Create multiple top-level layouts in Remix

    Jan 17, 24

68. Test meta tags using Playwright

    Jan 10, 24

69. Prefetch data for Remix Fetcher usage

    Dec 08, 23

70. Keep Your Loader Data Fresh in Remix

    Dec 01, 23

71. Expose Remix Routes as API Endpoints

    Nov 27, 23

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

    Nov 22, 23

73. Upload Images in a Remix Application

    Oct 23, 23

74. Redirect with Search Param in Remix

    Oct 06, 23

75. Access the Loader Data in Remix

    Oct 05, 23

76. Abort Async Calls Inside Remix Loaders and Actions

    Sep 24, 23

77. Get Remix route params `entry.server`

    Sep 08, 23

78. Test meta tags with Cypress

    Sep 06, 23

79. Strongly type Remix route IDs

    Jul 17, 23

80. Strongly type public assets in Remix

    Jul 17, 23

81. Create a reusable Form component in Remix

    Jul 07, 23

82. Sync text input with URLSearchParam in Remix

    Jul 06, 23

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

    Jun 05, 23

84. Logout from Auth0 with Remix Auth

    May 24, 23

85. Send Node.js ReadStream objects from Remix loaders

    May 15, 23

86. Reset a form on success in Remix

    May 15, 23

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

    May 15, 23

88. Send JSON to a Remix action

    May 13, 23

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

    May 12, 23

90. Close SSE connection from the server in Remix

    May 10, 23

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

    Apr 30, 23

92. Automatically commit sessions on Remix

    Apr 04, 23

93. Customize Remix AppLoadContext type

    Mar 16, 23

94. Turn on Caps Lock on Cypress

    Mar 14, 23

95. Delete a Cookie using Remix cookie helpers

    Feb 13, 23

96. Add runtime SSG and ISR to Remix

    Jan 29, 23

97. Improve SEO by not sending JS in Remix

    Jan 25, 23

98. Use AMP with Remix

    Jan 23, 23

99. Use Remix as a SPA only

    Jan 23, 23

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

     Dec 15, 22

101. Add rolling sessions to Remix

     Dec 01, 22

102. Use Server-Sent Events with Remix

     Nov 25, 22

103. Progressively Enhance the useFetcher Hook in React Router

     Nov 16, 22

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

     Nov 09, 22

105. Persist inputs after a form submit in Remix

     Oct 20, 22

106. Lazy-load React components in Remix

     Oct 12, 22

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

     Sep 21, 22

108. Add additional data before submitting on Remix

     Sep 21, 22

109. Redirect to an external website with Remix

     Sep 21, 22

110. Bubble up data on Remix routes

     Sep 13, 22

111. Group related routes together in Remix

     Sep 09, 22

112. Parse Markdown with Markdoc in Remix

     Jul 21, 22

113. Optimize image loading with plain HTML

     May 09, 22

114. Add returnTo behavior to Remix Auth

     Feb 25, 22

115. Share session and cookies between Next and Remix

     Feb 24, 22

116. Fix double data request when prefetching in Remix

     Feb 24, 22

117. Run Tailwind and Remix in Parallel with PM2

     Jan 19, 22

118. Use Remix with socket.io

     Jan 11, 22

119. Generate a PDF in Remix with Resource Routes

     Jan 10, 22

120. Avoid waterfalls of queries in Remix loaders

     Jan 06, 22

121. Run Next and Remix on the same server

     Jan 03, 22

122. Test Remix loaders and actions

     Nov 25, 21

123. Use NProgress in a Remix app

     Nov 24, 21

124. Use Fathom with Remix

     Sep 23, 21

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

     Sep 09, 21

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

     Sep 08, 21

127. Load only the data you need in Remix

     Jun 18, 21

128. Use ETags in Remix

     Jun 16, 21

129. Redirect to the original URL inside a Remix action

     May 20, 21

130. Read search params with JS

     May 18, 21

131. Use ActiveModel::Serializer with non ActiveRecord object

     May 17, 21

132. Serialize list of items with ActiveModel::Serializer

     May 17, 21

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

     May 12, 21

134. Force a locale in Rails I18n from the params

     May 11, 21

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

     Mar 23, 21

136. Build your own RSS Reader

     Feb 01, 21

137. Keep Heading Levels Consistent with React Context

     Jan 31, 21

138. Use TailwindCSS Typography with Dark Mode Styles

     Nov 16, 20

139. Use SWR with Geolocation

     Jun 19, 20

140. Sync WebApp Session Status between Tabs with SWR

     May 15, 20

141. Sync SWR cache with Web Storage

     May 15, 20

142. Configure Google Suite MX records in Vercel

     May 12, 20

143. Report Web Vitals in Next.js

     May 11, 20

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

     May 09, 20

145. Purge unused CSS with TailwindCSS

     May 09, 20

146. Setup a redirect inside a project deployed to Vercel

     May 09, 20

147. Use a scoped registry with Yarn

     May 09, 20

148. Automatically Publish to npm using GitHub Actions

     Oct 29, 19