Dev Tips

When working with zod, you might have found yourself using .optional().nullable() to make a field optional and nullable. Especially when you are working with tRPC or similar API libraries, this is a common case for API input validation.

But there is a better way to do this.

Instead of using .optional().nullable(), you can use .nullish().

const schema = z.object({ 
    name: z.string().optional().nullable(), // ❌ don't do this
    name: z.string().nullish(), // ✅ do this instead
});

When using Tailwind CSS to style your UI, you might have noticed that they use a shade system for colors. Usually when you pick brand colors though, you don't necessarily pick all shades for them but only a few specific colors.

To create shades that you can easily use in your Tailwind CSS classes and therefore in your UI, you can use the uicolors.app tool.

It allows you to enter the hex code of your brand color and will generate all the shades for you, as well as give you recommendations on what shades to use where in your UI including contrast ratios.