Ivan Babak

UI engineer, software architect. Enjoy building, maintaining, refactoring complex web apps, components, APIs, tools. Love open source and UI design. 🙌

[Ivan Babak @sompylasar]

An important skill for successful software engineering is:
1) being able to tell that two or more things are in fact the same thing, thus should be called by the same name;
2) being able to tell that things with the same name in two or more places are in fact different things.

[Ivan Babak @sompylasar]

@mrdoob @0xca0a Passthrough in r3f works with mode="AR", transparent html,body, and no Canvas background/Sky:

<XRButton
mode="AR"
sessionInit={{
optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers']
}}
/>

html,
body,
#root {
background: transparent none;
}

[Ivan Babak @sompylasar]

@mrdoob @0xca0a Is there a r3f / react-xr binding for this? Have been looking for this, only found disjoint parts in sandboxes, and haven't gone further to assemble them.

[Ivan Babak @sompylasar]

@0xca0a @mrdoob OK, gotcha. What I found was a certain combination of XRButton mode and sessionInit - but I haven't actually tried.

[Ivan Babak @sompylasar]

@0xca0a @mrdoob I understand it can work, i.e. we can write raw three-js code around r3f, assuming the necessary APIs are not fully hidden inside; for the passthrough, I think, I saw the needed ones exposed. My question was more about anything out-of-the-box-ish, e.g. <XR passthrough={true}>

[Artem Zakharchenko @kettanaito]

I like the way Vercel designs software, I really do. Their attention to detail and DX have been inspiring me for years.

But the decision to patch global "fetch" is borderline wrong. It even results in a poor user experience, counter-intuitively—something I feel was the sole reason of going into this slippery slope of module patching.

Okay, what's happening and why it's bad. Next patches the "globalThis.fetch" function for you. It's a globally available function to perform requests. Why? To support caching: https://t.co/6TNlV5Kuu0

And I get it, creating an illusion that you can control cache from your fetch call is neat. Until it's not. I think we as a community have learned that patching things you don't own in JavaScript is a terribly bad idea ever back in jQuery days. I leave the googling to you to educate yourself.

Briefly, it's bad for two main reasons.

First, it misleads the user. It's fair to say that 99% of Next users have never read the Fetch API specification. No shame in that. But what we use gets carved into your mind, and once Next users get used to this really neat caching API that seems to be coming from global fetch but not really, they will just confuse themselves. What will happen is those users will go to a different framework or, damn, just open their DevTools, and will expect "fetch" to handle caching. Only it won't. Because that's not what fetch does, it's not in the spec and is borderline confusing.

The second reason patching fetch is a terrible API design is that it blocks any third-party libraries that rely on module patching. See, not only Next patches fetch but it does it as the very last thing during the framework bootstrapping. This means that no third party can patch fetch themselves. "Wait, you are advocating against patching fetch but now say Next prevent other libs from doing that and it's somehow a bad thing?" Yes, precisely. Keep in mind, some packages have no other choice but to indulge in module patching. API mocking is one bright example, and I have a bit of expertise in that. There are simply no means in Node to intercept requests, so libraries patch request-issuing modules to do that. It's nasty terrible hack but, I stress it once more, there is literally no other way.

But there is a way if you are a framework designing a caching feature. In fact, there are a multitude of ways to achieve it, even preserving the "native-like" feel of that API. Here's but one example:

import { cache } from 'next'

const response = await cache('no-store', fetch(url, init))

I can't say it's a gigantic degradation of user experience, to be honest. I spent a few seconds coming up with this example, I'm certain that a team of some of the best engineers in the field can come up with a much better API here.

All the more confusing why that didn't happen.

This isn't a rant, really, just an observation of how framework features leak into standard code and harm both the users and the ecosystem in the long run. Don't modify things you don't own. That was true a decade ago, it's still true now.

[neural oscillator of uncertain significance @mycoliza]

this isn’t to say that every application should have its own totally bespoke database. most of them probably shouldn’t. but these things are not magical and we should remember that they’re just code, too. code we can understand and debug and modify as needed.

[neural oscillator of uncertain significance @mycoliza]

databases are just software. compilers are just software. cryptography is just software. operating systems are just software. if you’re a software engineer, you are capable of understanding software.

[Ivan Babak @sompylasar]

@DavidKPiano @royalicing Make sure your dependency array contains only values, changes in which should cause the effect init. If something else from the render scope is needed inside of the effect, it has to be taken from a Ref object synced with the render scope values independently via another effect.

[Programming Wisdom @CodeWisdom]

"Clean code always looks like it was written by someone who cares." – Michael Feathers

[Delip Rao e/σ @deliprao]

Some parts of creation (“fun”) can be painful because of boilerplate code. However, the solution to boilerplates is not LLMs but the right kinds of abstractions and good programming languages.

[Ivan Babak @sompylasar]

@DavidKPiano Is saving the nextState into the Actor's memory an effect?

[David K 🎹 @DavidKPiano]

This is basically how XState works:

[Guillermo Rauch @rauchg]

This is brilliant and will save devtools authors many a headache 😁

https://t.co/eo1kNWc8mU

[brain function collapse @brainFnCl]

Hey all, this is @threejs + @pmndrs #r3f rendering:

~12 millions triangles
~2 millions animated grass blades
- dead stable FPS

I didn’t even start optimising this code. It’s also a happy accident of wrong rotation calculations, that makes nice PoC.

Yeah, #react is slow 🙃

[Daniel Velasquez @Anemolito]

Rendering lines has been the bane of my existence for far too long

So, sharing some resources about it in my newsletter this week :)

#webgl #threejs #glsl

[Ivan Babak @sompylasar]

@icreatelife Tweeting becomes axing.

A tweet will be called an ax.

[Ivan Babak @sompylasar]

Do I remember when I joined Twitter? No. But Twitter does! #MyTwitterAnniversary

[Steven Tey @steventey]

This tooltip interaction in @vercel's new Logs UI 😍

Micro-interactions FTW

[Cory House @housecor]

I believe one of the most valuable things we can do in code reviews is improve naming.

"I'm unclear what this variable name means."

"This function's name doesn't seem to match the implementation. It looks like it does x. Can we rename it to x?"

[☄︎ @0xca0a]

how to have URL routes inside your scene, as well as bind webgl text to html to that it's accessible, selectable, and webgl gets to refract it.

https://t.co/SCbqHeOPcZ