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

Does anyone know of a nice starting template for a React component npm package?

I want to make a React component and publish it to NPM but cba setting it up myself and invent the wheel again. Is there a nice starting point for this that I can use? Needs TypeScript of course. Maybe Vite or something for dev.

clerk on localhost not working

I am following Theos tutorial on the T3 stack. Everything works in production, but on localhost, seemingly out of nowhere, it seems like Clerk is giving me an expired token which leads to no data getting fetched. This only happens in localhost and after I am signed in. There isnt any difference between my code and Theos from the video. Any ideas whats wrong?

'use client' directive throws error

Steps: 1. npx create-next@latest 2. accept app dir usage 3. create client component with 'use client' directive at the top 4. import and use client component in default home page...

keyboard purchase

I have a 100$ set aside to buy a keyboard. I'm thinking of the the Keychron k8 pro. Any thoughts or recommendations? First time mechanical keyboard so I don't know much. Sorry if I'm not allowed to ask a non tech related question, I'll take it down if it's against the rules.

Tailwind isn't working on React project

Im doing a project using React and Tailwind, and at the moment that im styling a component the only classname that works is bg-red-500, can anyone help me? I tried using any other color like bg-blue-500 and that's not working
Solution:
That's probably part of the problem, try rerunning npx tailwindcss init -p to get the postcss.config.js file

theme in storage

next.js (pages dir) + tailwind I want my user to click button. button adds a class of dark to the html tag, and tailwind updates all utilities with their dark counterpart. the button also sets local storage with a theme of dark. I want my user to leave or refresh the page to see their dark mode....

Calling procedure from api endpoint

How can I call updatePlaylists from a function handler in pages/api/updatePlaylists.ts

Next-Auth: Try signing in with a different account.

So this error I am getting in the browser
Try signing in with a different account.
Try signing in with a different account.
This is very common. It usually doesn't tell me what's wrong. The first thing I do when I see this is check my environment variables. Checking if theyre correct. Which they are. I am using create-t3-app So it also checks that for me by default. I am added a Google Provider and when I click on sign in with google, It doesn't redirect me to the correct page. It instead brings me to the /api/auth/signin page with an error message. ...

what are the factors to be considered in other to install an npm package as a dev Dependency

Because going around the internet everyone just runs
npm i package_name
npm i package_name
Should i install recoil as a dev Dependency Should i install @headlessui/react as a dev Dependency ...

How to gather user feedback?

I'm launching my product soon, I would like to let users give me feeback & reports bug. How do you usually approach that? Do you use 3rd party providers? Do you display a button at all time and redirect to form?

Simplest way to add cron job scheduler (PostgreSQL)

Hello. I have set up my project using the t3 stack and have added a custom server to my project (to set up a simple job queue using graphile-worker). This works pretty well, but I’m now wondering, is it possible to just drop a file into the pages/api folder for a worker like this instead? The Next.js docs recommended staying away from custom servers if you can, so I’m wondering if anyone has set something like this up without a custom server....

Planetscale pushing to an Array with Prisma?

So apparently you can't push items to array in mySQL? docs ```ts const userId = ctx.userId const status = await ctx.prisma.post.update({...
Solution:
Glad you figured that out, For anyone stumbling across this, here is the relevant Prisma docs: https://www.prisma.io/docs/concepts/components/prisma-client/relation-queries#connect-an-existing-record Feel free to mark one of these as the solution 😄...

TypeScript: Arktype vs Zod

For those who have used both why would you be inclined to use one over the other?

CRA Alternatives for SPA

Happy Monday everyone! I just wanted to check from some people that are likely more informed than me on this. Right now my employer has most everything built with CRA. This has for the most part not really mattered for us, but in one particular app we're needing to use libraries to sort of "crack open" the build and modify it - libraries which don't seem to really be maintained at this point. I'm going to be starting a spike to examine alternatives for us, as we're making major changes and have been given the go-ahead to modernize a few things (e.g. JS to TS, getting rid of CRA). Unless I'm mistaken, I believe my employer would like to keep the app as a SPA, as they want it to exist in an S3 bucket without having a server (app doesn't have any need for SEO so it's been deemed unnecessary)....

How to implement automatic scroll sync for a Markdown editor/preview app?

I'm currently building a Markdown note-taking app with ct3a: https://luccanotes.vercel.app/ Source code can be found here: https://github.com/ChromeUniverse/luccanotes So far the app works reasonably well for real-world note-taking but a very important feature that's currently missing is automatic scroll synchronization between the editor and preview panels. The idea would be to guarantee that the corresponding element you're editing in the editor (say an h1 heading) is always visible in the preview component. ...

Reload one data from layout.js ?

Yo, i've got a question, i've got my navbar in layout.js and i want it to have a number, basically the count of an array right after the name. But how do i reload it while navigating since layout.js doesn't refresh ? ( if i'm not wrong ? ) Quite new with server/client component thing tho, but i think there is a thing to do with (?) Thanks o/...

Can you add an arbitrary row when using an SQL Query?

Hey guys! I'm currently fetching a list of users assigned to a ticket to use in a filter. And I want an option for no assigned user as well. Due to the constraints of Retool, which I'm working in, I don't have a ton of control over the dropdown input to be able to put in a select for a "no value", but I need it in order to be able to filter out for tickets that don't currently an assingnee. Right now my query looks something like this:...

kysely join select query

hey guys im playing with kysely and im trying to get the count of the votes for and votes against, however it seems that only the votedForIds are counted. currently my code looks like this ```ts const query = db .selectFrom("Anime")...

where to learn about FE performance/optimizations?

I feel that I’m fairly advanced on regular FE development (building our features on a daily basis), but not feeling confident about tracking performance, optimization techniques etc. Anybody has any suggestion where to start learning about this stuff? Or how to approach it? Like, let’s say, we’ve got a feature in a react project implemented in two ways - how to understand which one is more performant (faster/memory efficient, etc)?...

tRPC Mutation

Hi, I don't quite understand how to pass the input when using with useMutation Server: ```ts create: protectedProcedure...
Solution:
api.deposit.create.useMutation is a hook so you cant use it like that it expose a mutate function, so you can use it to actually send the data to the server, something like ```ts const Deposit = () => {...