frontend - MakerX

Sign in Subscribe

frontend

A collection of 8 posts

Building a typesafe multi-form action handler in Remix Series - Hooks, proxy and Dispatcher to the rescue

Building a typesafe multi-form action handler in Remix Series - Hooks, proxy and Dispatcher to the rescue

In this series, I build a small Todo application. To begin, I use a combination of Remix, TypeScript, Tailwind CSS, and React. It'll be functional but fragile to change. To address the fragility, I introduce and use Remix Validated Form, a React form library, Zod, a TypeScript-first schema validation framework,

Building a typesafe multi-form action handler in Remix Series - Remix validated form and Zod

Building a typesafe multi-form action handler in Remix Series - Remix validated form and Zod

In this series, I build a small Todo application. To begin, I use a combination of Remix, TypeScript, Tailwind CSS, and React. It'll be functional but fragile to change. To address the fragility, I introduce and use Remix Validated Form, a React form library, Zod, a TypeScript-first schema validation framework,

Building a typesafe multi-form action handler in Remix Series - The problem

Building a typesafe multi-form action handler in Remix Series - The problem

In this series, I build a small Todo application. To begin, I use a combination of Remix, TypeScript, Tailwind CSS, and React. It'll be functional but fragile to change. To address the fragility, I introduce and use Remix Validated Form, a React form library, Zod, a TypeScript-first schema validation framework,

Fight the focus loss, inspect elements that like to disappear

Fight the focus loss, inspect elements that like to disappear

Here I explain and demonstrate a not so well known feature of Chromium-based browsers that can be used to help inspect elements that disappear on focus loss.

Polymorphic, typesafe UI components with React (and Tailwind and Radix Slot)

Polymorphic, typesafe UI components with React (and Tailwind and Radix Slot)

Sometimes you want your buttons to be buttons. Sometimes you want them to be links.

Extracting reusable Tailwind CSS / React components

Extracting reusable Tailwind CSS / React components

A collection of opinions on creating maintainable, reusable and extendable React components using Tailwind CSS

Styling Radix UI components using Tailwind CSS

Styling Radix UI components using Tailwind CSS

How to create a tailwind plugin that helps style Radix UI components using data attribute CSS selectors.

Next.js code for creating React applications with functional components and React hooks for managing life-cycles

Optimizing React Components with useCallback() hook

Optimization is a crucial part of any application. In React applications this include to mitigate unnecessary renders as well as reducing the rendering time itself. In this article, we'll see how the React useCallback hook can help us to make our application to preform better. Memoization Let's first understand what