Tutorials

Learn about Remix, React, and more.

Subscribe to my tutorials using RSS.

1. Make Regional HTTP Requests with Durable Objects

   Jul 29, 26

2. Add URL Normalization Middleware in React Router

   Jul 28, 26

3. Think in Remix UI Instead of React

   Jul 26, 26

4. Hydrate Isolated UI with Remix Client Entries

   Jul 26, 26

5. Create Animated Tab Indicators with CSS Variables

   Jul 23, 26

6. Create a Copy Button for Code Blocks

   Jul 23, 26

7. Build a Type-Safe Markdown Pipeline with Markdoc

   Jul 23, 26

8. Use waitUntil for Non-Blocking Cache Writes

   Jul 23, 26

9. Build a Cache Abstraction for Cloudflare KV

   Jul 23, 26

10. Use Client Hints for Server-Side Timezone Rendering

    Jul 23, 26

11. Add a Global Hotkey to a Remix UI Dialog

    Jul 22, 26

12. Build a Command-Driven Markdown Toolbar in React

    Jun 28, 26

13. Handle Custom Invoker Commands in React

    Jun 28, 26

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

    Jun 28, 26

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

    Jun 27, 26

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

    Jun 27, 26

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

    May 15, 26

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

    May 13, 26

19. Access React Router Context with AsyncLocalStorage

    Mar 06, 26

20. Create a Per-Request Database Instance with Middleware

    Mar 03, 26

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

    Feb 23, 26

22. Use Sec-Fetch Headers for CSRF Protection

    Feb 23, 26

23. Dedupe Server Calls with Remix Utils Batcher

    Oct 19, 25

24. Transform FormData Between UI and Database in React Router

    Oct 15, 25

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

    Oct 03, 25

26. Stream Shared Promise Results in React Router

    Sep 25, 25

27. Redirect Based on Screen Size in React Router

    Aug 13, 25

28. Avoid Waterfalls in React Suspense

    Aug 12, 25

29. Render Loader Promises with Suspense in React Router

    Jul 31, 25

30. Create Reusable Action Routes in React Router

    Jul 20, 25

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

    May 07, 25

32. Debounce Loaders and Actions in React Router

    Apr 14, 25

33. Authenticate OAuth2 Clients with client_id and client_secret

    Apr 05, 25

34. Use the OAuth2 Introspection Endpoint

    Apr 02, 25

35. Revoke OAuth 2.0 Refresh Tokens via the Revocation Endpoint

    Apr 01, 25

36. Protect OAuth 2.0 Authorization Code Flow with PKCE

    Mar 26, 25

37. Add Custom Claims to JWT Access Tokens Safely

    Mar 25, 25

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

    Mar 25, 25

39. Use OAuth 2.0 Scopes to Authorize API Actions

    Mar 24, 25

40. Validate JWTs with JWKS

    Mar 24, 25

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

    Mar 11, 25

42. Test React Router Middleware with Bun Test

    Mar 10, 25

43. Enable and use middleware in React Router 7.3

    Mar 08, 25

44. Show a 404 in React Router

    Mar 02, 25

45. Trigger File Downloads from React Router Loaders and Actions

    Feb 24, 25

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

    Feb 08, 25

47. Convert Markdown to PDF and ePub with Pandoc

    Feb 07, 25

48. Serve User-Specific Stylesheets in React Router

    Feb 03, 25

49. Split a React Router Route Config across Multiple Files

    Jan 15, 25

50. Configure the tracking branch in Git

    Jan 14, 25

51. Reuse route modules in React Router

    Jan 13, 25

52. Populate Your Rails Database with Fixtures

    Dec 18, 24

53. Stub a method in a class with Minitest

    Sep 02, 24

54. Show toast after a Remix action

    Aug 30, 24

55. Simplify Component Imports with TypeScript Namespaces

    Jul 10, 24

56. Validate a Form in Remix with clientAction

    Jun 18, 24

57. Generate a Cloudflare Environment Type with wrangler

    Jun 18, 24

58. Configure Scoped Private Packages in Bun

    Jun 18, 24

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

    Mar 26, 24

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

    Mar 13, 24

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

    Mar 08, 24

62. Autoload the Correct Node.js Version with NVM

    Mar 01, 24

63. Nest Routes with Dynamic Params in Remix

    Feb 15, 24

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

    Feb 13, 24

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

    Feb 13, 24

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

    Feb 13, 24

67. Handle not found URLs with Remix

    Feb 10, 24

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

    Feb 07, 24

69. Add dynamic canonical URL to Remix routes

    Feb 04, 24

70. Add custom attributes to Markdoc code fences

    Feb 03, 24

71. Enable Remix ~/ aliased imports in Vitest

    Feb 02, 24

72. Add syntax highlight to Markdoc using Prism.js

    Jan 31, 24

73. Create a CRUD with Remix

    Jan 25, 24

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

    Jan 22, 24

75. Call an action from a loader in Remix

    Jan 22, 24

76. Use React Portal in Remix

    Jan 22, 24

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

    Jan 22, 24

78. Defer a Fetch response in Remix

    Jan 19, 24

79. Use a CDN for your static assets in Remix

    Jan 19, 24

80. Get the absolute URL in Remix's MetaFunction

    Jan 19, 24

81. Build an app with Remix and Bun

    Jan 19, 24

82. Find and remove unused code with Knip

    Jan 18, 24

83. Create multiple top-level layouts in Remix

    Jan 17, 24

84. Test meta tags using Playwright

    Jan 10, 24

85. Prefetch data for Remix Fetcher usage

    Dec 08, 23

86. Keep Your Loader Data Fresh in Remix

    Dec 01, 23

87. Share Remix Route Logic between Web and API Routes

    Nov 27, 23

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

    Nov 22, 23

89. Upload Images in a Remix Application

    Oct 23, 23

90. Redirect with Search Param in Remix

    Oct 06, 23

91. Access the Loader Data in Remix

    Oct 05, 23

92. Abort Async Calls Inside Remix Loaders and Actions

    Sep 24, 23

93. Get Remix route params `entry.server`

    Sep 08, 23

94. Test meta tags with Cypress

    Sep 06, 23

95. Strongly type Remix route IDs

    Jul 17, 23

96. Strongly type public assets in Remix

    Jul 17, 23

97. Create a reusable Form component in Remix

    Jul 07, 23

98. Sync text input with URLSearchParam in Remix

    Jul 06, 23

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

    Jun 05, 23

100. Logout from Auth0 with Remix Auth

     May 24, 23

101. Send Node.js ReadStream objects from Remix loaders

     May 15, 23

102. Reset a form on success in Remix

     May 15, 23

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

     May 15, 23

104. Send JSON to a Remix action

     May 13, 23

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

     May 12, 23

106. Close SSE connection from the server in Remix

     May 10, 23

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

     Apr 30, 23

108. Automatically commit sessions on Remix

     Apr 04, 23

109. Customize Remix AppLoadContext type

     Mar 16, 23

110. Turn on Caps Lock on Cypress

     Mar 14, 23

111. Delete a Cookie using Remix cookie helpers

     Feb 13, 23

112. Add runtime SSG and ISR to Remix

     Jan 29, 23

113. Improve SEO by not sending JS in Remix

     Jan 25, 23

114. Use AMP with Remix

     Jan 23, 23

115. Use Remix as a SPA only

     Jan 23, 23

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

     Dec 15, 22

117. Add rolling sessions to Remix

     Dec 01, 22

118. Use Server-Sent Events with Remix

     Nov 25, 22

119. Progressively Enhance the useFetcher Hook in React Router

     Nov 16, 22

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

     Nov 09, 22

121. Persist inputs after a form submit in Remix

     Oct 20, 22

122. Lazy-load React components in Remix

     Oct 12, 22

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

     Sep 21, 22

124. Add additional data before submitting on Remix

     Sep 21, 22

125. Redirect to an external website with Remix

     Sep 21, 22

126. Bubble up data on Remix routes

     Sep 13, 22

127. Group related routes together in Remix

     Sep 09, 22

128. Parse Markdown with Markdoc in Remix

     Jul 21, 22

129. Optimize image loading with plain HTML

     May 09, 22

130. Add returnTo behavior to Remix Auth

     Feb 25, 22

131. Share session and cookies between Next and Remix

     Feb 24, 22

132. Fix double data request when prefetching in Remix

     Feb 24, 22

133. Run Tailwind and Remix in Parallel with PM2

     Jan 19, 22

134. Use Remix with socket.io

     Jan 11, 22

135. Generate a PDF in Remix with Resource Routes

     Jan 10, 22

136. Avoid waterfalls of queries in Remix loaders

     Jan 06, 22

137. Run Next and Remix on the same server

     Jan 03, 22

138. Test Remix loaders and actions

     Nov 25, 21

139. Use NProgress in a Remix app

     Nov 24, 21

140. Use Fathom with Remix

     Sep 23, 21

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

     Sep 09, 21

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

     Sep 08, 21

143. Load only the data you need in Remix

     Jun 18, 21

144. Use ETags in Remix

     Jun 16, 21

145. Redirect to the original URL inside a Remix action

     May 20, 21

146. Read search params with JS

     May 18, 21

147. Use ActiveModel::Serializer with non ActiveRecord object

     May 17, 21

148. Serialize list of items with ActiveModel::Serializer

     May 17, 21

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

     May 12, 21

150. Force a locale in Rails I18n from the params

     May 11, 21

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

     Mar 23, 21

152. Build your own RSS Reader

     Feb 01, 21

153. Keep Heading Levels Consistent with React Context

     Jan 31, 21

154. Use TailwindCSS Typography with Dark Mode Styles

     Nov 16, 20

155. Use SWR with Geolocation

     Jun 19, 20

156. Sync WebApp Session Status between Tabs with SWR

     May 15, 20

157. Sync SWR cache with Web Storage

     May 15, 20

158. Configure Google Suite MX records in Vercel

     May 12, 20

159. Report Web Vitals in Next.js

     May 11, 20

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

     May 09, 20

161. Purge unused CSS with TailwindCSS

     May 09, 20

162. Setup a redirect inside a project deployed to Vercel

     May 09, 20

163. Use a scoped registry with Yarn

     May 09, 20

164. Automatically Publish to npm using GitHub Actions

     Oct 29, 19