Chad Edrupt

Software Engineer. I make things. @ScopeyAI

[Andrew Prifer @AndrewPrifer]

Dear frontend devs and UI designers. I bring you Liquid DOM, a complete and faithful implementation of Liquid Glass on the Web.

- Shape morphing
- All properties animatable
- Dynamic refraction and reflection
- Adaptive tint
- Adaptive specular highlight
- Dispersion
- Full html integration
- Super fast layout engine that works across Canvas and html
- Pointer event handling
- Framework and renderer-agnostic low level API
- High level React API
- Ootb @threejs and r3f integration

And lots more.

Read on for implementation details and demos.

[Kyle @imkylelambert]

if you know, you know

[render @infinterenders]

react fiber is honestly one of those things that people think they get until they actually look under the hood and then suddenly the whole thing feels like some alien technology living inside javascript. everyone parrots those same shallow lines like “fiber is the new diffing engine” or “fiber is concurrent rendering” and it’s just… no man, it’s so much deeper and way more deranged than that. the old react, the stack one, was like this innocent recursive tree walker that just kept diving into components like some happy kid climbing down a ladder, except that ladder was welded directly to the javascript engine’s callstack, so once you’re halfway down you can’t stop, you can’t turn around, you can’t take a break, you can’t do shit except finish it. so if you had big trees, like some giant UI with thousands of nodes, react would just lock the entire main thread and choke the browser until it was done. you typed into an input? too bad, the browser can’t react because react is too busy react-ing. it was legit painful. and the browser’s like “pls, bro, i need to paint” and react’s like “nah bro, i’m in the middle of rendering this dumb component”.

so the react team basically looked at that mess around 2016 and realized the entire approach was screwed. like no amount of small optimizations could fix the fact that recursion is not interruptible in JS. the JS engine owns the stack, not you. and if you can’t pause, you can’t avoid jank, it’s just physics. so instead of fighting it, react just said screw the whole model and built their own stack. not metaphorically, literally. that’s what fiber is. it’s not some “algo”, it’s an entire fake callstack implemented as a linked structure of nodes. each fiber is like a tiny memory cell react controls completely, storing the component type, props, state, the children pointer, sibling pointer, parent pointer, priority info, effects flags, and all this other internal stuff. it’s like react turned every component into a little OS task.

and the crazy part is that because it’s all controlled manually, react finally got freedom from the JS callstack. instead of recursive rendering, it’s this iterative stepping through fibers one by one. and that suddenly means react can pause. like just literally stop mid render, drop everything, let the browser repaint, handle input, chill, take a breath, then pick up exactly where it left off inside that huge UI tree. no more “oh no i’m stuck deep in recursion”. you can’t get stuck because react isn’t using the builtin stack anymore. it’s rolling its own.

this is where the whole scheduling thing comes from. people think scheduling is some abstract idea but it’s literally react walking the fiber graph and deciding which updates matter more. typing is urgent. animations are medium. background data fetching is low. old react treated everything the same and that's why old apps felt like garbage when doing heavy work. fiber changed that whole world. suddenly react could say “yo, someone typed into an input, drop the low-priority render, resume later.” and the app stays smooth even if you have 50k components.

and because fiber creates this double-tree thing, the current tree and the work-in-progress tree, react can run through the whole render phase in like a simulation mode. this is the wild part most ppl dont realize: when react is “rendering”, it’s not touching the dom at all. it's building this offscreen imaginary version of what the UI should look like. and only when the whole thing is done, consistent, no half-finished nodes, react switches to the commit phase and actually mutates the real DOM. like how game engines draw everything in a hidden buffer then flip it. that’s why the UI never shows broken half-updated states. fiber gives react the room to compute the perfect frame before actually showing it.

and dude, this is exactly why suspense works. why transitions feel smooth. why server components can be streamed in and stitched into the client ig

[Chad Edrupt @chadedrupt]

@pitdesi @georainbolt https://t.co/5VwdLxCBHI

[ArkType @arktypeio]

📢Introducing ArkRegex📢

a drop in replacement for new RegExp() with types ⬇️

[Chad Edrupt @chadedrupt]

@PaschalDev @joshm @arcinternet @browsercompany Spaces, persistent tabs and today tabs. Have different Space per project/persona. Each space has tabs you always keep open, as well as temporary ones that just get deleted every day. Weird for 1 week but then it’s amazing and can’t live without. I feel Dia will be harder sell.

[Chad Edrupt @chadedrupt]

@titanas @markgurman There was so much reference to SF itself in the video that I think it could have been more for recruitment than anything else.

[Chad Edrupt @chadedrupt]

@benswerd @vercel @illothy Just please be careful with prompt injection 🫣

[Chad Edrupt @chadedrupt]

@NaialCasanovas @shak_sparrow @jctrxx Haha immediately heard it in his accent also, but Xavi is Spanish… you mean Spanish… “Question?”

[Chad Edrupt @chadedrupt]

Is the tractor a great parallel?

Yes, the farm owners had less need for farm workers, but the farm workers had no land, no hope of ever gaining land, and therefor no chance of ever competing.

Is that the same with AI?
Yes, large companies will have less need for humans, but what is stopping a group of smart individuals within the company going it alone? Is the current size of companies now their greatest risk? Is it an existential threat to the individual? Or to the S&P 500?

[Chad Edrupt @chadedrupt]

@paulg The underlying protocol is interesting, and reminds me of this https://t.co/9Et4zZzq8D

[Chad Edrupt @chadedrupt]

@Nexuist @rauchg But it’s not a “tell” of RN or not… ReactNavigation’s native stack uses the underlying UINavigationController under the hood, so plenty of RN apps navigate indistinguishably from swift only apps.

[Chad Edrupt @chadedrupt]

@ChShersh C# does have bind (essentially) as a first class citizen via LINQ. There are a few little annoyances, but it gets you a lot of the way there.

[Chad Edrupt @chadedrupt]

And this is C#… just to bring this full circle

[Josh DeGraw @rawdeg]

F# btw

[Guillermo Rauch @rauchg]

React is such a good idea that we will spend the rest of the decade continuing to explore its implications and applications.

[Chad Edrupt @chadedrupt]

@samdcbu Surely it’s the model pretending to be @sama

[Patrick Collison @patrickc]

Me: "We need a serious website that helps enterprises understand the business impact of our new Adaptive Pricing. It's a big deal, and people are kinda sleeping on it."
Stripe Design Team: "Say no more."

[Chad Edrupt @chadedrupt]

@dillon_mulroy @davesnx This is my only reason for prefering async await. Try catch is never better!!!! Interestingly, LINQ can combine the best of both worlds when dealing with promise-like-monady-things.

[Chad Edrupt @chadedrupt]

@moyix Surely the normal price is the exciting bit? $3 per M Tokons of training. If you hit limit each day for 60days you have saved… ~$360

[sam @samdape]

just run