Theo's Typesafe Cult

TTC

Theo's Typesafe Cult

Join the community to ask questions about Theo's Typesafe Cult and get answers from other members.

Join

CSS Question - black or white text color based on background

Hey guys, I'd like to have my text colored based on the background color. I found a way to do it on the CSS tricks website, but it's using a mix-blend-mode - they say it's not well supported and it also does not work with only black / white coloring. Is there a pretty convenient way to do it in CSS (maybe Tailwind) / JS (I'm using React)? The screenshot shows what I have right now (I want the black text on the red-ish background to be white)...

What's the best way to attach functions to a TypeScript interface?

So I currently I have game objects with properties attached. For example, a creature card with properties attached. Now I have code like this:
const isSlow = card.properties.includes(Property.Slow);
const isSlow = card.properties.includes(Property.Slow);
I kinda hate this, especially if I have to write code like this all over the place. ...

NextAuth 2FA with oAuth

Just have a quick question about adding 2fa to oAuth providers with next-auth. Does anyone have any example code or advice for me? Ideally I'd like to continue to use the existing provider without having to re-write it.....

why is prettier broken on vs code?

I have the vs code plugin installed, I have prettier included as a dev dependency in my project, and my settings.json has these lines. ``` { "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode"...

When is the streaming with Primeagen?

I mean, we all want it and it's pretty obvious at this point

TRPC query initial undefined

How can I get rid of the undefined issue, the initial trpc request returns undefined, which is causing an error what may I be doing wrong here? ```ts export default function Clients() { const allClients = trpc.client.getAll.useQuery() console.log(allClients); // this is initial undefined but fill it later...

is anyone else having issues with creating a new preact next app with pnpm?

running pnpm create next-app --example using-preact preact-app is ok, but then once I run pnpm dev I get: ``` ready - started server on 0.0.0.0:3000, url: http://localhost:3000 error - ../../node_modules/@prefresh/core/src/index.js:7:0 Module not found: Can't resolve 'preact'...

Convert zod schema to typescript interfaces

Does anyone know of a good way to convert zod schemas to typescript interfaces?

React Query - Update data after successful mutation

Using vanilla react query I was used to use one of these options. What are the options with tRPC? Since queryClient doesn't provide any of these methods. const queryClient = trpc.useContext(); ...

Credentials Auth with tRPC

I'm rebuilding a client's site with the T3 stack. We originally had to do away with NextAuth because we figured its CredentialsProvider wasn't going to work for us. Then we moved to Strapi and after using Strapi I decided I'm just gonna do it myself. <Insert Thanos GIF> We still need to authenticate users based on username/password credentials, and I'm not sure how tRPC handles that within its ctx since according to NextAuth docs (https://next-auth.js.org/providers/credentials) it doesn't store session data in the DB....

Adding next.js plugin to T3?

if I want to add a next plugin to t3 do I just add it to the arg in defineNextConfig?

Next.js multi zones and shared components

I am using Next.js' multi zone feature with a blog and web app so I can develop and deploy both apps independently. It was easy to set up by following their example and I have set up a blog app at port 3000 and a web app at port 4200, which is working fine. Unfortunately I am encountering some problems that aren't described anywhere in their documentation (as far as I can tell). I am working in a monorepo and have shared components between both apps, such as the header and footer, which obviously includes navigation. When I am on the blog and want to navigate to e.g. the /about page, then it will obviously navigate to localhost:3000/blog/about instead of localhost:3000/about. One solution is to check the base path in the navigation component and then prepend localhost:3000 to the href if the base path equals blog, but that refreshes the entire app and does not result in smooth navigation, so it's not really ideal. Is there anything else can I do about this?...

Generating a Layout with main AND sidebar content??

How would I go about creating a <Layout /> that will allow me to pass in children to define the body content AND sidebar content? So I'm expecting each page to have the Header, provided by the Layout, and then two children. The first child will be the body content, the second will be the sidebar. Is there a way to write a Layout that will accept specific children in specific places?

Analytics Platform

Hello, what analytics platform do you guys recommend to use? I thought of maybe using Google Analytics but saw in the past that countries were trying to ban them.

Super lightweight JS(X) parser?

Are there any good, super simple and basic JS parsers that can do typescript and JSX? I'm looking to basically parse strings of code that could contain a specific function, and grab the input to that function.

What does Preline UI actually do?

I'm trying to get my stack together for my next project. I've been using MUI + CRA for a while and I would like to try to rewrite it with better underlying tech. Theo mentioned DaisyUI and Preline UI for styling components and Headless UI for giving components reasonable behaviors. I've been experimenting with all of them so far I've concluded: - Headless UI seems very cool and immediately useful - DaisyUI is OK, but I was disappointed with customizing the components. Some of their css classes have high specificity so I couldn't override them in tailwind without adding ! in a lot of places. Their animations also seemed to not work with Headless UI. The library also seems to try to do more than just styling by how it uses hidden checkboxes to control components like accordions. I'm confused because that seems like it would go against Theo's Venn diagram from his video. - All that said, Preline UI is the one I'm most confused about. Their website seems to just have a bunch of normal tailwind classes. I can just copy / paste them into my code and they work fine....

Is t3 stack good for serverless

Is everything in t3 good for serverless without having any cold starts?

Am I doing Prisma relations right?

I'm mostly experienced with front-end dev so I'm less confident with data modeling decisions. Attached is some additions to the model I'm building. I'm working on an app where users can write stories and the stories can have multiple chapters. Attached is an image of the Story and Chapter models as I think they need to be. Am I in the right direction or no? Is there anything you would do differently to implement such relationships?...

Why can i click through a disabled button with ontouchstart event?

If im using onclick, my disabled button doesnt fire the onclick but if i use ontouchstart and i touch a disabled button, it still fires my ontouchstart event. Why is this and how can i prevent it?

my VSCODE broke

anyone know wtf is happening to my vscode, autocomplete is not working correctly and the syntax colors are weird and i tried it on many projects still doing this it not the theme and i tried to reinstall it still the same...