@_chenglou This is awesome. Reminds me a lot of the types of problems I had to solve when I created a meme generator. Not as cool or useful, but I love to see some of the similarities. denniskats.dev/Mocking-Sponge…
English
Dennis Kats
640 posts
Dennis Kats
@denk0403
Lead Software Engineer at $DECK. Previously @meta, @blueportdotcom, & @Carbonite. I like to share things that stimulate my brain cells. He/Him.
Brooklyn, NY Katılım Haziran 2013
612 Takip Edilen65 Takipçiler
My dear front-end developers (and anyone who’s interested in the future of interfaces):
I have crawled through depths of hell to bring you, for the foreseeable years, one of the more important foundational pieces of UI engineering (if not in implementation then certainly at least in concept):
Fast, accurate and comprehensive userland text measurement algorithm in pure TypeScript, usable for laying out entire web pages without CSS, bypassing DOM measurements and reflow
English
@ChadNauseam I had to implement the backward energy version in Java for a freshman year project, and it's to this day one of my favorite projects. I recently also turned it into a web version, but with pure JS denniskats.dev/seam-carving/. Super cool that you're using WebGPU.
English
Seam carving with forward energy. Gotta be one of the coolest algorithms of all time.
English
For anyone still using this performance hack but running into compatibility issues since React 19.2+, I think I've found an idiomatic fix: gist.github.com/denk0403/be136…
Seb ⚛️ ThisWeekInReact.com@sebastienlorber
🤯 React hydration perf trick Permits to avoid hydrating a mobile component on a desktop (or the opposite) Better than hydrating both and hiding one with CSS 👎 How it works? Deletes the useless DOM element before hydration. Is this even ok to do so?
English
QME
@wesbos Maybe there was a time it wasn't implemented yet, but my understanding is that it was always intended to work this way. And it's not specific to server functions; you can do this with references to client functions too. Dan's Functional HTML blog post explains this pretty well
English
I learned this lesson once with an unsubscribe link that worked on GET
Gmail prefetches links. Everyone got unsubscribed.
Aiden Bai@aidenybai
we had this insane P0 bug users would get randomly logged out we had a bunch of users churn... ...turns out Next.js prefetching the /logout page
English
@Snap_Back_Yap @Palmossi_ @aaaronson I believe it’s more so how close the letters of a word are to each other alphabetically. “gg” -> low SD. “az” -> high SD
English
@Palmossi_ @aaaronson i think its how far a word is from being sorted alphabetically
English
Word with the lowest standard deviation of letter position in the alphabet, for each length
English
@yoavabrahami @rutu_3 My guess is requestHandler is allowed to be synchronous, so the OP wants to ensure it returns a Promise, but you’re right that wouldn’t work if it synchronously errors. Promise.try is more likely what they want
English
@rutu_3 whats the problem?
just a functional express style request handler.
but I have to say that PromiseResolve().catch() is a bit strange... probably not doing what you'd expect
English
@tomasklingen @pontusab Truthfully anything client-only should likely be integrated with Suspense. That way it takes advantage of your app's existing loading sequence. Again, not sure what the perf characteristics are, but I believe it's the most idiomatic approach: #providing-a-fallback-for-server-errors-and-client-only-content" target="_blank" rel="nofollow noopener">react.dev/reference/reac…
English
@tomasklingen @pontusab I wouldn't say it's outdated considering uSES and transitions were both added in v18. But I also don't know enough about React internals to know the perf tradeoff. However, in my experience a top-level hydration context doesn't work well with streaming/lazy-loaded components
English
@i549 @hauke_schnau @adamwathan Well it doesn't really. The render prop is called by the server component; it's never serialized to the client, only its result. The pattern has unproven value in RSC, but my point is just that passing functions to server components is a bit more nuanced than it's "not allowed"
English
@denk0403 @hauke_schnau @adamwathan i guess i didnt realize that render props pattern can also work across network boundary
English
I really wish APIs like this were compatible with React Server Components...
No interactivity, no context, just a callback passed between two components that I want rendered on the server.
English
@i549 @hauke_schnau @adamwathan Or do you mean 'use client' for something other than a component? I wouldn't say that just happens to work; it's consistent with the higher-level behavior of 'use client'. There's a good article on it: overreacted.io/functional-htm…. But tbh I haven't had a legit use case for it yet.
English
@i549 @hauke_schnau @adamwathan The children function? It's just the render prop pattern. Most use cases for it got replaced with Context and hooks, but it is occasionally useful still.
English
Español
@i549 @hauke_schnau @adamwathan You can, but how the function is defined is more about where you call it. If it's called on the server, then you can inline it like in the OP's example. If it's called on the client, then it needs to be marked with 'use server', or be in another module marked with 'use client'.
English
@cnakazawa It seems sort of similar to some abstract ideas I’ve been having for months but haven’t had the time to synthesize. I would love to try out what you came up with
English
Dennis Kats retweetledi
in the mint. straight up "discontinuing it". and by "it", haha, well. let's just say. My pennies
Pop Base@PopBase
After 232 years, the U.S. mint has made the last Penny.
English
English
@lolpython it really shows you have no idea what you are talking about
English
javascript developer figures out how to unset variables.
incredible things happening in the world of next(dot)js
Shu@shuding
TLDR: It frees up to megabytes of RAM for some real world Next.js App Router apps, especially content heavy sites.
English
@robpalmer2 @tannerlinsley @sub_popular Tanstack does maintain a router.gen.ts that auto generates all the ts magic to give awesome type support.
English
I'll continue to die on the hill of "magic directives are bad API interfaces". They're not type-safe, they're not extensible, no native runtime control, they're just strings.
... I can't believe I'm saying this, but I would rather debate @ directives. Pls rewind history.
English