๐ I'm Alex & I tweet about web dev stuff.
๐ Creator of
@trpcio
(โญ๏ธ30k+).
๐งโโ๏ธ Open-sourcerer & fully-stacked typescripter.
๐ฃ Speak ๐ธ๐ช๐ด๓ ง๓ ข๓ ฅ๓ ฎ๓ ง๓ ฟ๐ง๐ท
This week I've been working on a declarative isomorphic permission library.
On the backend we create Prisma `WhereInput`s & on the frontend we get rules like this
hopefully will OSS it soon
Heyheheyheyhey!!!๐
I got something exciting to share! We just released the version 10 beta of tRPC! ๐
Go have a look! ๐๐ (also, the website has gotten a real facelift recently ๐)
Did ya know you probably should be using `interface` rather than `type` where possible?
There's a section about this in the official wiki on ts performance
TypeScript decision: How should a function that calls fetch be typed?
Options:
1. Type the return statement
2. Type the function's signature
3. Type both
Poll in the next tweet ๐
#typescript
Spent some time hacking with
@trpcio
+
@nextjs
13
- ๐ Use tRPC in RSC &/or in client
- โพ Made infinite scrolling with the first page being RSC SSR'd
- ๐ Hacked next-auth to work
It's ugly & code is quite messy, don't judge
/
We're now the official Gold Sponsor of
@alexdotjs
'
@trpcio
for his amazing work in the open-source industry.
We heavily use tRPC in our core app and look forward to the monthly consulting sessions, too!
Sponsor Alex:
Zod is the validation library in the JS/TS ecosystem with undoubtedly the best DX. ๐ฅ
I use it everywhere:
- frontend forms
- backend request param parsing
- env var parsing
- validating shapes of third party APIs/webhooks
- validating json blobs in my db
.....aaaaaaaaaaand
๐คฉ๐โจ๐ซโญ๏ธ๐โจ๐ซโญ๏ธ๐โจ๐ซ๐คฉ
โญ๏ธ Zod just hit 10000 stars!!! โญ๏ธ
๐คฉ๐โจ๐ซโญ๏ธ๐โจ๐ซโญ๏ธ๐โจ๐ซ๐คฉ
Did you know that you can use
@trpcio
as the data layer in
@nextjs
to get a lightweight & secure layer with auth-checked code & runtime validated input/outputs?
You don't even need to use trpc routers, client, or the react libs
We should probably make a blog post about dis ๐
Interesting Next.js RSC security article
๐ก TIL that using Layout for checking auth/payment is not great
The layout might not be accessible, but the page content can still leak through the RSC endpoint ๐ฌ
Using a middleware is a better protection
We're very close to releasing support for FormData in mutations so you can do file uploads nicer (w/o base64 encoding ๐ ) & to support form submits w/o js enabled
@s4chinraja
has done some really solid work to decouple our request handling to not only handle JSON bodies
tRPC version 10 should *really* be viewed as tRPC version 2, I was just very strict about semver the first 6 months of tRPC (whilst very few people were using it)
This is the first real *big* change to tRPC since its creation.
Hard disagree. This is actually fine.
Coupling is better than letting the clients stitch together a bunch of APIs in various slow request/response iterations (aka "waterfalls")
Use graphql or make a BFF, but avoid stitching APIs together too much on the client
This week I've been working on a declarative isomorphic permission library.
On the backend we create Prisma `WhereInput`s & on the frontend we get rules like this
hopefully will OSS it soon
I got a real Friday treat for all full-stack TypeScript lovers. ๐ฌ
Introducing zART ๐คฏ - Zero-API, React, & TypeScript
A monorepo showcasing how you can leverage the power of TS to never have to write an API-schema for your React [Native] app again.
We borrowed
@remix_run
's implementation on how they create a JSON representation of a specific type... then
@s4chinraja
improved it and fed that back into Remix!
OSS is pretty cool sometimes huh?
Also, follow
@s4chinraja
, he'll be your boss some day
I did my first-ever in person conference talk yesterday!
I'm so happy to be on the other side of it & that it went quite WELL! ๐ I was anxious for over a month ahead of it
I definitely want to do more of this shit now, hit me up! ๐
I really like where nextjs is going with the app dir stuff, I'm a ex-php guy who wrote my own php framework fifteen years ago in an eerily similar style to Remix/Nextjs stuff (I even had "action"-files using the PRG-pattern!)
However, I mainly use React nextjs for *apps* [...]
We just published an update to
@trpcio
that automatically serializes your output types to how JSON does it, in case you are **not** using something like superjson.
tRPC without data transformers is now a lot better! ๐ฅณ
The next major of
@trpcio
's main "feature" will be removing the v9 interop support.
It's a bit painful to support two parallel APIs and removing it will speed us up :)
Current diff ๐
I feel like people would expect new features in a major version, but that's mostly not what it is about. I know it makes them "less exciting", but it's about cleaning up all the little "mistakes" that have amassed over time.
"While building a feature, we performed a database migration command locally, but it incorrectly pointed to the production environment instead, which dropped all tables in production."
I'm surprised this sort of incedent doesn't happen more frequently tbh
I've had prod access
On February 21st, Resend experienced an outage that affected all users due to a database migration that went wrong.
Here's a summary of what happened, how the incident was resolved, and the changes we're making moving forward.
Is this a kosher way of detecting version changes in
@nextjs
and forcing a reload on the next navigation change?
The goal is to turn any `<Link>` into an `<a>` if we have a new build.
Full gist:
nobody:
me: I hacked together a POC of an alternative API to `useFormState()` / `useActionState()` that I think is nicer than what's in
@reactjs
/
@nextjs
today
I've made several attempts at trying to understand how to get `useFormState()`/`useActionState()` to work well isomorphically (which is the whole point, right!?).
I made a repo to showcase the issues I have & added some API suggestions for React.
Convince me I'm wrong. ๐
๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐
that's 16 stars ๐
each of those represents a thousand people who've now starred
@trpcio
on GitHub, that is pretty damn crazy
Revisited my lil' thing that tries to make sure that the user is always on the latest version of the app
The way I detect changes is that all tRPC response returns a request header with the commit hash which is used to signal that the next navigation should be a hard navigation
Is this a kosher way of detecting version changes in
@nextjs
and forcing a reload on the next navigation change?
The goal is to turn any `<Link>` into an `<a>` if we have a new build.
Full gist:
This started as a shitpost and went way too far. Don't read into this, just trying to document some things I think about too much. I rant more in the thread
Sooo.... tRPC v10 is pretty ready! ๐
.... buuuut there are still some room for tweaks & there are some API design decisions which already have had heated debates on GitHub even if we haven't shouted about the alpha yet.
๐โโ๏ธ What is the best way to resolve those?
Ok, LinkedIn won't be the next Twitter at least. ๐
I've actually never received this kind of clueless/rude/arrogant hot take here in regards to
@trpcio
๐คก
Talked to a friend the other day who works at a company where some tech leads are lobbying that the solution to their recruiting problems is to migrate their whole tech stack from Vue to React ๐คฆโโ๏ธ
๐ฏ
It's a bit ridiculous that I've willingly reduced time, and a big chunk of my income, at my "real job" to hack on open-source stuff for free*
(* I'm very grateful to all my sponsors who also enable me to distribute some to other people)
I love maintaining open-source software and providing support for anyone who needs help using it.
It's admittedly a bit ridiculous that we do it for free, but I love it anyway.
I genuinely don't know how to deal with this graph! ๐ณ๐
The most astonishing thing to me is that we've really not done any groundbreaking changes in over a year(!), but it's really exploding right b/c of a series of compounding events (& a lot of thanks to
@t3dotgg
's rants tbh)
I don't think many developers realize how stressful being an open-source maintainer can be.
You provide countless hours of work and support, for *free*. And devs will still complain and unfairly criticize your work.
But the ones that are appreciative keep us going.
New lil' feature โจ
Do you find it annoying to invalidate specific queries on every mutation and keeping track of what should be invalidated?
If so, maybe you want to always invalidate all queries automatically on any mutation.
Today I used the `form` attribute (for the first time ever ๐ ) -
Now I can place my submit buttons anywhere instead of always nested within the `<form>`
it's great and makes complex layout-code way less messy
Can someone help me write or structure a blog post? The main thing holding back the RC of
@trpcio
10 is my inability to write the announcement post ๐คฆโโ๏ธ
The whole marketing thing has never been my strong suit ๐ฅฒ I'm glad it hasn't held back the growth too much
The new major of tRPC is slooowly getting there ๐
Spoiler: it's going to be ๐คฏ + fully backward compatible with an interoperability mode which will make incremental adoption trivial ๐ฅ
Has anyone written a nice & small TypeScript-based `Promise.props()` util? I've missed this ever since I stopped using bluebirdjs in favor of native promise fns.
- Decoupling is often an anti pattern
- Few big files with code > many small files
- Your company should try to stick with 1 language for everything
- Monorepo 4 lyfe
- Serverful is easier than serverless
We now support businesses
@polar_sh
- Sync your GitHub team
- Set a monthly budget
- Set team member limits
Enable your engineers to easily fund open source efforts. Increase your own velocity & fund open source. Win-win.
Just set our own team allowance: $200/month/engineer
With tRPC + Next.js 13, you'll have your components render on the edge but be able to have the "server logic" in a traditional lambda close to the DB.
Unless you have a globally distributed DB, I at least *think* this is the best approach?
Shower-thought: if you have any query waterfalls in your app, serving it on "the edge" will actually make it *slower* compared to hosting your app close to your data.
I think I just killed my own hype for serving dynamic sites on the edge.
Am I thinking about it wrong?
@devagrawal09
@trpcio
Haha yeah, people tend to get surprised about that. We mainly care that the "edges" are well typed to create the DX we want. The juice is not worth the squeeze in a bunch of the internals
Another obvious favorite TypeScript-utility of mine!
- Infer the type of a function
- Unwrap the return type's promise.
```
type AwaitedReturnType<T extends (...args: any) => any> = Awaited<ReturnType<T>>;
```
Me and
@jullerino
are hacking on automatic hydration for server-rendered "use client"-components component by generating a `<script>`-tag on the server that gets picked up by the browser