View Transitions API with Noam Rosenthal - JSJ 602

Noam Rosenthal is a Web platform engineer. They dive into the importance of standards in API behavior for browsers. Noam shares insights on the need for consistency in implementing standards across different programming languages and developers. They also discuss the balancing act between working on standards and collaborating with developers inside and outside of Google. Additionally, they cover some interesting topics like the fascination with the "bun" technology, the challenges of implementing transitions in web development, and the impact of licensing changes on open-source projects.

Hosted by:

AJ ONeal •

Dan Shappir •

Steve Edwards

Special Guests:

Noam Rosenthal

RSS Spotify Apple Podcasts YouTube Amazon Music

Show Notes

Sponsors

Picks

AJ - Gran Turismo
AJ - Suzanne Venker
AJ - Alison Armstrong (The Queen's Code)
Dan - Unity
Dan - Ongoing war in Ukraine
Noam - State of Utah
Steve- Spy Ops (TV Series 2023

Transcript

Steve (00:01.289)

Hello everybody. That's my Chuck impression. Welcome to JavaScript Jabber. I am Steve Edwards, the host with the Faithful Radio and the Voice for Being a Mime, but you're stuck with me today since Chuck's not here because he has something better to do. With me on our panel, we have the man in the purple room, Mr. AJ O'Neill. How you doing, AJ?

AJ (00:23.338)

Yo, yo, coming at you live from a shave and a haircut.

Steve (00:26.949)

Yes, we were just discussing that with the haircut, AJ is looking more, I think the term we used was distinguished, especially with the gray around the temples and stuff. So you can see that in the video. He's got a long way to go to catch up with me in terms of gray, but I hide all mine by shaving it. Anyway, also coming to us live from Tel Aviv, Mr. Dan Shapiro, how you doing, Dan?

Dan (00:43.263)

Haha!

Dan (00:50.218)

I'm doing fine with lots of gray. Hardly anything but gray. But unlike AJ, not a button down shirt, rather just a t-shirt from warm and sunny Tel Aviv. Here I am.

Steve (00:52.805)

Lots of gray.

Right.

Steve (01:06.685)

Dan is like, you got the gray, show it loud, show it proud.

Dan (01:10.011)

Exactly.

Steve (01:11.509)

and our very, very special guest. Well, all our guests are very special, but another special guest is Mr. Noam Rosenthal. How you doing, Noam?

Noam Rosenthal (01:20.178)

Doing great, how are you?

Steve (01:22.161)

Good. Before we dive into our topic of the day, why don't you give people a little background on who you are, what you do, why you're famous, and why people should give you money.

Noam Rosenthal (01:34.655)

And for the last question, because why not? But yeah. So I work currently at Google, a Chromium team, working on web standards in a big-ish team where our charter or role is to make

Steve (01:39.357)

Good answer, very good.

Noam Rosenthal (02:00.826)

navigation experiences on the web better and smoother and nicer and make the web better for everyone. That's why I joined this team. I actually started my career as a web developer, that was 25 years ago, and yeah, just about 25 years ago, and kind of stayed on that wheel until I got this opportunity to go into the browser and fix things in there.

And I was always passionate about making the web fast for everyone and better. So after also being at Wix and meeting Dan there, working together a lot, I got back to browser development and after some freelance work, I'm at Google and I'm happy to be involved in standards and shaping the API that everybody uses, hopefully.

and also bringing my background as a web developer into that, into development of browsers.

Steve (03:15.645)

Kokes, can you give us a little background of who this Google is? I haven't heard of them before. No, I'm kidding. I kid. Really, I kid. So the topic of the day has been one of the more recently released features in CSS, the View Transitions API. And for those of you who are in the View community, know this is not VUE. This is VIEW, as in viewing things on your page. So.

Noam Rosenthal (03:19.794)

Ha ha.

Noam Rosenthal (03:34.206)

All right.

Steve (03:44.489)

Why don't you start out and give us a little background as to, I guess, how this all came about. I know in the past we've talked about other people that have been working on this for years. So it's certainly not a recent development been in the works for a while. So what's the history of the view transitions API?

Noam Rosenthal (04:02.45)

So actually, this is a shout out to Jake Archibald, who dreamt this, I think, about seven years ago. He has a lot of iterations of spec to do something that does what we're doing now, a CSSV transition. The idea is that up until now, when you talk about animations on the web,

The best you could do natively with browser APIs is transition several properties of the same elements at the same time like Transition opacity and move the element around transform and all that or maybe do something with keyframes And and if you needed anything More complicated than that. You'd have to go for example to WebGL the canvas and

you had to do things that were even for things that are as simple as sliding the whole screen from one page to another. You'd have to do very complicated things like react transitions that create both pages in the DOM and then make the transition. Those things never really worked well. Also

Also at Wix we had like this quite complex system for whole page transitions that were, that is very basic in what it can do and it's very hard, difficult to make it perform.

Dan (05:46.354)

Yeah, I wanted to bring that up because, you know, like you mentioned, both of us worked at Wix and for those of in our audience who don't know Wix is a drag and drop website builder, which means that you build your website by just, you know, dragging things around and right clicking on things and enabling and disabling all sorts of properties on them. And in terms of, of the way that it works and what it can do, it was really

very inspired by the old flash system of being able to end to do a lot of visual visually pleasing things and obviously one of the things that they wanted to support from the get-go is all sorts of transitions you know if you're moving between pages in a website to be able to transition between the pages kind of like you do in let's say in a powerpoint presentation or if you if a

than to do some sort of animation on transition with that sort of thing, all sorts of scroll transitions and stuff like that. And I remember that people were working on it and it was such a huge challenge for them to actually implement it because one of the biggest challenges that people don't really think about is that you kind of need to keep both the start state and the end state in the DOM simultaneously. So...

For example, to create a page kind of transition, you effectively have to have essentially both pages loaded at the same time, let's say, and then create some sort of transition from one page to the other. Otherwise, it just can't work in that way when you build it in that way. And that was really, really hard to do because if you think about, let's say, building a webpage in React,

and you've got the virtual DOM or the component tree for page A, and then you build the component tree for page B, you don't have A and B in the V DOM at the same time. It's really difficult to do. So yes, it plays a big burden on the developers to be able to implement it. I remember a lot of hacks, a lot of performance issues related to that.

Dan (08:10.622)

a lot of buggy code. It was just really difficult to get it to do the right thing. Are you remembering the same things that I am, Norm?

Noam Rosenthal (08:20.262)

Yes, absolutely. Probably. I joined Wix a little after you, but still. There's always issues with that and Wix is a company that invested in this a lot. For other companies, it's probably just like gave up on it.

Dan (08:38.302)

Yeah, one of the reasons that Wix kind of started as an SBA was the fact that it was really the only way to properly implement transitions between pages at the time. Now Wix has other reasons to be SBA. Other frameworks have other reasons to be SBA. But back in the day, that was a big motivation, because otherwise you just couldn't get that.

Noam Rosenthal (09:04.422)

I think I'm not against SPAs as an ideology. But I, well, some people are, but I feel that people should choose between SPA and MPA or that kind of architecture, not because of constraints that come from the web platform. That our role as the web platform is to reduce those constraints.

Then people can make their choices based on other things, ergonomics, how they build it, some performance things and where they maintain states. I see SPS great for productivity style apps, things that are app heavy, for example. And maybe MPA for more like content website and there are a lot of things that are in the middle. But anyway.

Dan (09:52.61)

dashboards.

Dan (10:03.058)

Yeah, just to finish on that point, though, the funny thing is that, like I said, you kind of needed to be SPA in order to be able to implement transitions. But the reality was that implementing transitions was often so challenging that most SPAs just didn't do it. So theoretically, they could, but practically they didn't. Most SPAs, when you navigate it, you know, it looked exactly like an MPA baby faster.

Noam Rosenthal (10:03.25)

Yeah.

Dan (10:32.886)

But that's about it.

Noam Rosenthal (10:34.638)

Yep. So going from what you said about needing to have the two states of the view, let's call that the all the new states of the view. This is exactly what the CSS View transition does internally. So what?

It's a short explanation of how it works. When you start a view transition, we take the current state of affairs, what you have right now in the DOM. We capture images of the elements that you say participate in the transition.

Noam Rosenthal (11:21.766)

Then you tell us, the developer tells the browser when it's time to capture the new state. Then we do the same for the participating elements in the new state.

And then think about it as having a whole bunch of image pairs. Like you have images that represent the old state, images that represent the new state, we match them by name. And then we can, we have a state of the browser where we have a bunch of images in pseudo elements and we can run CSS on them, animate them in any way we want.

Dan (12:04.758)

So basically what you're saying is that rather than trying to deal with the complication of maintaining two DOM trees inside the session at the same time, you instead deal with it by looking at it basically as just a collection of images that you can apply all sorts of image transformations on instead.

So you're really working with bitmaps rather than with DOM elements.

Noam Rosenthal (12:38.046)

Correct.

Dan (12:40.679)

Very cool, very interesting.

Noam Rosenthal (12:40.699)

Boom.

Which means that during the transition, for example, those elements are not live. Like if you have a, if you have a one second transition, let's say, or let's say if you have a transition that takes 10 seconds and one of the elements you're animating is a video, you're not going to see the video running during this time. If you have an input, you can type text into it and the text will, will update. This is if your transition is a

morphing of two image collections into each other with certain rules, if you want.

Dan (13:22.11)

So for example, another example would be, let's say, a link that if you try to click on a link inside the view transition, it won't work because it's not the actual link or text. It's just the bitmap of that text.

Noam Rosenthal (13:30.076)

Right.

Noam Rosenthal (13:37.47)

Correct, this is a visual effect, which is limited in a way, but also what makes it possible.

Dan (13:48.742)

Very interesting. And how do you control, like you said that you break, it's not like one big bitmap into another bit big bitmap of the entire screen, rather you said it's a collection of bitmaps. How do you specify that collection? How do you tell the browser, you know, this part of the screen should be one bitmap, this, you know, I don't know, maybe the menu should...

Noam Rosenthal (14:04.316)

Right.

Dan (14:14.387)

The header and menu should be one bitmap, the footer should be another and so forth.

Noam Rosenthal (14:19.914)

This all works with the name matching. So when we capture the old state, we set in CSS names for elements that we want to participate in the animation.

And those are the elements that get cap checked.

Dan (14:41.579)

So these names, are they distinct from component IDs from like CSS class names or stuff like that? They're distinct from those?

Noam Rosenthal (14:45.863)

Yeah.

Noam Rosenthal (14:52.095)

Yeah, they are defined inside CSS, they're not in the DOM.

Dan (14:56.171)

Oh, I understand.

Noam Rosenthal (14:58.598)

It's more similar to containers when you need container queries and you can name or to animation keyframe names. It's an internal CSS naming thing.

Dan (15:11.362)

So the DOM itself is wholly, just to clarify to our listeners, again, if they don't know, the browsers actually maintain two distinct but related, and again, Noam, feel free to correct me, because you're, I think, more of an expert on this than I am. The browser maintains two, let's call it, distinct trees of objects, you might say. One is the DOM, which represents the HTML elements.

And one is the CSSOM, which represents the CSS. And these are kind of merged together to build the render tree or something like that. And you're saying, if I'm understanding you correctly, that the whole view transition thing lives wholly within the CSS side of things.

Noam Rosenthal (16:02.842)

You can say that the DOM, in the end, what matters here is that we resolve the style of a particular element using all the CSS rules, all the selectors and media queries, all the nice things in CSS. We end up resolving the current style of a DOM element. And in that resolved style, like how we resolve whether...

it has a certain font or color. That's a resolve, whether it has a view transition name, which means it will participate in the view transition.

Dan (16:45.922)

then what happens if two things have the same name?

Noam Rosenthal (16:49.751)

We are bored to transition right now.

Dan (16:51.919)

Oh, you abort the transition.

Noam Rosenthal (16:53.378)

Yeah, skip the transition. Uh, there are thoughts about this for the future to make it a little more flexible, but for now names have to be, uh, unique within the context of a particular transition.

Dan (17:07.446)

So you look at the names in the original state, you look at the name at the end state, names that match, you can specify the animation between them in the CSS and that's what happens more or less.

Noam Rosenthal (17:10.982)

Yep.

Yeah.

Noam Rosenthal (17:21.658)

Yep, more or less. So all this works with pseudo elements.

Dan (17:30.018)

Could you explain to our listeners what pseudo-elements are? I think that maybe many listeners don't actually know what that is.

Noam Rosenthal (17:39.334)

Sure, so pseudo-elements are elements that are visual, but do not exist in the DOM. So if you just look at the HTML, you wouldn't see them. But they have some representation visually and sometimes in terms of interaction. A good example is the parts of inputs. For example, there's...

I think it's a pseudo element or was it a pseudo class? Yeah, those are classics. So for example, the before and after pseudo elements, you can define that a particular div or whatever it is would have additional text or image after or before its regular content. And that text or image is not, if you just look at the HTML, you wouldn't see it, but it's there visually for users because it's defined as that.

Dan (18:11.874)

There's the before and after, I think, right?

Dan (18:38.23)

I kind of joke that with the DOM, you can inject CSS into the DOM. Pseudo elements are kind of like the other way around in a way. It's like for the CSS to inject stuff into the DOM.

Noam Rosenthal (18:55.714)

In a way, yes. It's a way to inject content that doesn't have a semantic meaning, but only a visual or style meaning. You don't need the screen readers to know about the

Dan (19:14.486)

So how do you use pseudo elements in the context of view transitions?

Noam Rosenthal (19:20.338)

So the way this works is that during the transition, after we captured both states, we create a tree of pseudo-elements, which are basically the images. Some of them are the images. And they have some sort of hierarchy. So each two images that match names are in a pair of images. And we have a pseudo-element for the whole transition. So the.

This allows some sort of orchestration, like a big stage of not your DOM, not your page, but the transition itself.

Dan (19:59.466)

So in that way you can, because you're using a pseudo element, you can specify the transition animation in the same way that you would specify transition animations for regular DOM objects in a lot of ways.

Noam Rosenthal (20:14.238)

in exactly those ways. You can use any type of CSS of web animation that you want, either the web animation API or CSS animation, moving them yourself. So, yeah, the idea is that when the transition is active, what you actually have is like a fake or a pseudodom hierarchy.

on top of your regular dome and you can style it in any existing way you want.

Dan (20:50.434)

Now in order to use this goodness, do I need to be an MPA, an SPA, either, neither? What's

Noam Rosenthal (21:01.706)

So in version one, which is what's shipped today in Chrome, I wouldn't say you need to be an SBA, but those transitions work inside a particular document.

So if you want to have a transition between pages and you're an MPA, you currently can't do that. This is the current state and this is what I'm working on in my everyday work is specifying how this would work across pages, across documents.

Dan (21:38.526)

So for now, if I want to view transitions, I still need to be an SPA in a way like I used to. It's just that my life is a lot easier because I don't need to do all the heavy lifting. Instead, I can more or less just do it in pure CSS.

Noam Rosenthal (21:58.954)

And hopefully by the time you're ready to ship whatever it is you're doing, we'll already have NPA working. So it's in the works.

And yeah.

Dan (22:09.59)

And yeah, that's really cool. If we can actually do it between pages, that opens up a lot of possibilities. By the way, in this context, I understand that the recently released Astro framework has built-in support for that. And I don't know how familiar you are with it. So.

Noam Rosenthal (22:35.994)

A bit.

Dan (22:37.374)

So a few questions on that. First of all, my understanding was that Astro is predominantly MPA. So if you're saying that view transitions are currently SPA, how does Astro work with that?

Noam Rosenthal (22:52.909)

It works in SPA mode for us.

Dan (22:56.642)

So Astro is able to reuse something that hasn't been quite officially released yet or something like that.

Noam Rosenthal (22:58.953)

Yeah, it did.

Noam Rosenthal (23:03.858)

No, no, they used the SPA mode. They used the... Astro has a mode where the page updates without switching to the new one.

Dan (23:13.586)

Ah, so it's kind of like, I understand. So it's kind of like mocking an SPA in an MPA environment enough for the transitions to work, something like that.

Noam Rosenthal (23:24.678)

I think just Astra has an SPA mode. I don't know if they call it that, but you can give us configure Astra to not update the whole, to not refresh the page. It's just more like an, their mental model is very MPH, but it doesn't mean that they, but they do have the whole thing where they capture forms and links and stuff.

Dan (23:28.896)

Hmm, okay.

Dan (23:49.64)

Okay.

Steve (23:50.493)

So one quick question for those beer drinkers out there, is there any IPA support?

Noam Rosenthal (23:54.322)

Hehehe

Dan (23:58.506)

And my second question is, it sounds like you were ideally were going for a model where JavaScript is wholly not required for it, which despite the fact that we are a JavaScript podcast, I'm super happy whenever you can do something sophisticated in the browser and not need JavaScript in order to do it.

Noam Rosenthal (24:27.238)

Yeah, we love jabbing at JavaScript.

Dan (24:30.463)

Yeah, more Java or less JavaScript. I think it was Bruce Lawson who said that. Anyway, so my question then is, why do I even need framework support for it? Isn't it just CSS that I use regardless of whatever framework I'm using?

Noam Rosenthal (24:33.166)

Yeah.

Noam Rosenthal (24:50.418)

Um, yes and no, more no than yes. Um, so the CSS yes, but remember I said there, it's like a lifecycle of when do you capture the old state and the new state. And this has to be in a framework world. This has to be integrated into the router of the framework. So they're.

Dan (25:17.899)

Mmm.

Noam Rosenthal (25:20.098)

Router is usually the piece in the framework that knows what and like, let's say if you're doing like full page transitions, the router is what knows this is the old state now I'm in the new state. We don't know that. It's like the user put us to say that and people who use frameworks, if they don't exactly know it themselves, they rely on the framework to do all this stuff for them.

Dan (25:48.314)

If I'm understanding correctly what you're saying is that in an MPA, in a, sorry, in a SPA type environment, the concept of navigation is not super well defined. It's not exactly obvious when you left the previous page and when you've fully arrived in the next page. And you're, you're using a JavaScript based API.

in order to indicate that. Am I correct in my understanding?

Noam Rosenthal (26:20.242)

Yep.

Yeah, also in MPA, there is no concept of the navigation is ended. There is no concept of you're in the new page. That is a UX concept and content. It's a concept that's that wherever builds the content can decide. It's not content that the browser can decide for them, for anybody.

Dan (26:29.216)

Yeah.

Correct.

Dan (26:43.678)

Yeah, that's kind of the thing about performance is that you measuring web page load performance is that you're never sure when page is fully loaded, if ever.

Noam Rosenthal (26:53.366)

Yeah, so it's even more so for SBA. So the only thing we can do is you tell us when you're done. That kind of thing. And sure.

Dan (27:04.366)

On load! I'm joking.

Noam Rosenthal (27:09.77)

And then you have a restore from BFcache. And okay. It's, uh, anyway, we had like a lot of conversations, philosophical conversations about when is a, when is navigation done? And the answer is pretty much depends on the content.

Dan (27:12.866)

Exactly, yeah I know, I know.

Dan (27:29.374)

It's kind of slightly related to, I think, work that Joav Weiss is doing. We actually spoke about this with Barry Pollard a while back about trying to measure soft navigations in single-page applications and directly goes to this whole issue of understanding when pages transition.

Noam Rosenthal (27:39.495)

Yep.

Noam Rosenthal (27:48.038)

Yep.

Noam Rosenthal (27:56.238)

Yes, I think that's a... What you have is doing is a separate problem because you don't really care when navigation is done. You just want to measure when the next largest contentful pain appears on the screen or what is the cumulative layer shift after self-navigation. So you don't need to be done for any of that.

Also, soft navigations are heuristic and here we can't really be heuristic because it's like people design their own pages. We want to be clear about exactly what's going on.

Noam Rosenthal (28:36.979)

So in the MPA world this is a little bit more complicated even because you could be transitioning to a page that is not fully loaded and is progressively loading chunks of HTML from the network.

Dan (28:52.542)

Yeah, especially in these days of react server components and stuff like that

Noam Rosenthal (28:57.818)

Yes, so how do we know when it's okay to start a transition? What do we do until then? What do we do if it times out? So those are a lot of questions we're trying to answer today.

Dan (29:11.686)

I could even foresee a situation in which you may want to even break that transition into parts, like transition some stuff and then continue. Like I always make that same joke that how can you tell if a web application is a web page is a modern web page, that it has multiple spinners instead of one big spinner. So if you may want to transition each spinner separately.

Noam Rosenthal (29:20.794)

Maybe.

Noam Rosenthal (29:36.01)

Yeah.

Dan (29:42.189)

Uh, yeah.

Noam Rosenthal (29:43.802)

Yeah, we're not there yet, but we'd be happy to start with a full page transition across documents, but there are some proposals for later about doing this in parts, etc. It's not easy. Problem to solve.

Steve (29:59.069)

So I'm looking at the docs because I've been listening to this or people talk about it and reading some of the docs and so on. And Dan, you asked a question earlier about how you're trying to do it with just CSS. So, you know, I've looked at transitions trying to do them before and it's like, okay, when I have a couple of hours, I'll come back and devote to try to do a transition because you're talking about key frames and, and a lots of other elements, but

It makes sense that because you're in the DOM, you also can manipulate with JavaScript, right? You can, I was reading for instance in the docs that if there's a specific element that you want to transition different than other elements, I believe there's some JavaScript methods that you can use to do that. So because you're in the DOM, JavaScript's there, right? You can use it, you just don't have to use it if you want to do some basic view transitions. Is that a correct statement?

Noam Rosenthal (30:51.538)

I would say that if you don't want to use CSS to transition to generate the whole animation, you can use the Web Animation API, which is JavaScript based and animated in it.

Steve (31:02.429)

Well, no, what I was saying is, is it possible to do it just with CSS and not have to use any JavaScript, but you can use JavaScript to augment and do custom things or am I not understanding that correctly?

Noam Rosenthal (31:12.466)

If for same document, no, for same document, you need JavaScript to at least give us the cues to when the transition started and starts and ends or to when to capture the old state and new state. This is like the basic thing for same document. For multi-page applications, you wouldn't need JavaScript. You can do everything with pure CSS.

Steve (31:25.705)

Mm-hmm.

Noam Rosenthal (31:41.308)

is our intention.

Dan (31:43.466)

So to what? Like notice that all the named components are there and just trigger the animation? Something like that?

Noam Rosenthal (31:51.326)

We will have a new kind of navigation behavior rule, we're still backshedding the name, that says, yeah, that says that if, that is kind of opt in to view transition in the same, between the two pages, and both pages need, both documents need to say, I'm okay with transitioning.

Steve (31:57.742)

shitting.

Noam Rosenthal (32:18.659)

with having a view transition to the next page or to all the same origin pages or some URL pattern or something like that.

AJ (32:24.238)

Thanks for watching!

Dan (32:32.252)

So I mentioned before that Astro 3 that recently came out introduced support for this. And they were, in fact, it was one of their biggest, let's call it, user-facing features and one that they were heavily promoting because it's just visually so cool.

Noam Rosenthal (32:35.962)

Aster.

Dan (32:55.314)

And it certainly got a lot of people, you know, chatting, at least in my neck of the woods on X, Twitter, whatever you call it. There was a lot of chatter there because, like I said, you know, theoretically, you could have done this before on, you know, React, Next, Remix, whatever. But practically nobody, hardly anybody was doing it because it was so challenging.

Noam Rosenthal (33:08.243)

Thanks for watching!

Dan (33:24.85)

And all of a sudden, Astro came out with a whole bunch of super cool demos. I remember somebody building the Netflix like app and it looked really like a native mobile app in all the way that it transitioned between parts. And it was super cool on one end, but on the other hand, I was thinking, Hey, this is really nice, but it's actually a platform feature.

not so much an astro feature.

Noam Rosenthal (34:01.819)

I think one of the strengths a framework could show to its users, developers, is we don't block you from using new platform features.

Dan (34:17.238)

Yeah.

Noam Rosenthal (34:18.182)

I'm totally serious about this. If a framework has something, some opinionated things in it that make it so that it's difficult for you to use a new platform feature, it's a selling point to the other frameworks.

Dan (34:34.082)

Can you give a concrete example of something like that?

Noam Rosenthal (34:37.578)

Yeah, Next.js, which like nothing against them. I know they're like asking people to vote for the feature, like they're supportive and working with them. But I've tried very hard to use CSS transitions with Next.js. And I found that without

patching Next.js itself, it's almost impossible.

Dan (35:11.19)

That's interesting. Can you like give a high level explanation of why that is?

Noam Rosenthal (35:19.762)

And well, for the new app router thing, right? And next.js just did this big, this big refactor to their API.

Dan (35:32.391)

Yeah, the app folder in React Server Component.

Noam Rosenthal (35:36.035)

So.

Like I said, to make this work with the framework, you need to hook into the route here of the framework and understand when a route change starts and when it ends.

Noam Rosenthal (35:53.463)

In the all next days they had hooks for that.

And now that they switched to all the new React 18 stuff, they removed those hooks because it doesn't work with the new React model. And...

Noam Rosenthal (36:09.826)

So to make this work, you need to hook into how the router works internally. There's just no API for it. And what you could do is wrap the Next.js router, but then you also need to wrap Next.js links because they access the router internally.

So you end up with... ..café...

Noam Rosenthal (36:45.93)

franken next kind of thing where you have your own links and your own router On top of their router and links and like it's not I wouldn't go down that route. It sounds great

Dan (36:55.718)

Yeah, the routers in multiple frameworks are becoming like Frankenstein's monster sort of thing. Because they're running stuff on the client side, they're running stuff on the server side, the whole thing works asynchronously and additional content is being downloaded as

can be downloaded as it becomes available. And yeah, so it took me a while to understand, for example, that one of the key things about React Server Components is that a router running on the client side instigates component rendering on the server side. And then the response is kind of streamed down, which is really...

Nuts.

Noam Rosenthal (37:57.242)

Yeah, the whole thing is quite complicated at this time. For better or for worse, but I think all this stuff came because of actual user need. And there are all kinds of solutions and like natural selection of developers brought us to some state where some things are more popular than others.

Dan (38:23.734)

So it's not just the React Core team being bored.

Noam Rosenthal (38:28.674)

I think developer preference in framework teams and in web platform teams, et cetera, et cetera, definitely plays a part in all this. All of the things play a part together, but I think it would be a bit superficial to say that the React Core team were poor, so they created something complicated. I say that...

Dan (38:37.231)

Oh, for sure.

Noam Rosenthal (38:56.762)

Although things play a part together and it's not easy for like today's complicated web apps to build routers that perform and work well by themselves.

Dan (39:09.298)

Oh yeah, a lot of things that we're currently doing with routers are things that nobody dreamt about a decade ago for sure. Type safe router, who was thinking about type safety in front of developers 10 years ago. So I'm totally with you on that. I also think, like I totally agree with your statement that things kind of get a life of their own. Like you make certain architectural decisions

Noam Rosenthal (39:25.832)

Bye.

Dan (39:39.282)

and one point in time and, you know, things need to evolve. So I, you know, when React was created back in 2013, what is it? A decade ago, you know, they weren't thinking about React server components. So, so yeah, they, they had to come up with solutions that worked with various architectural decisions that they made at certain points in time in the past.

Noam Rosenthal (40:10.88)

Or as I say, if things were different, they wouldn't be the same.

Dan (40:16.286)

Yeah. So you were saying that the big thing that you're currently doing in terms of view transitions is working on adding support for multi-page applications. Anything else that needs to be done?

Noam Rosenthal (40:32.358)

Yes.

Noam Rosenthal (40:36.474)

Yeah, I actually came back three days ago from something called TPAC. TPAC is the annual conference of browser and standard developers. It's really great to chat with all the people from Mozilla and Apple and from all kinds of companies that use...

Dan (40:47.442)

Lucky you.

Noam Rosenthal (41:07.13)

the web and come to be involved in standards. But the way I see view transitions today is that they're constrained, they're great, they're a lot more freeing than we could do before, but they're still constrained in that they're, the document, the whole document, and nothing but the document, they call it. Like you have this...

full page transition of the whole document. So, and we see people using it for different things today. For example, sorting lists in an animated way.

and animated to Earth.

Dan (41:52.516)

So basically what you're saying is if I have, even in the context of the same page, if I have two distinct states, like we were talking before in the context of Wix, that I want to do some sophisticated hover animation, but not just let's say moving something, but you know, actually changing the content that is shown.

Why not be able to use view transitions for something like that? Is that what you're saying?

Noam Rosenthal (42:22.21)

Oh, you can do it today, but it freezes the whole page while you do it, and you can't do simultaneous ones. So, it would behave as if your whole page is transitioning, and you would be transitioning a part of the page.

Dan (42:28.287)

Hmm

Dan (42:37.366)

So currently it's an all or nothing sort of a thing.

Noam Rosenthal (42:40.166)

It's an all or nothing sort of thing. Also in terms of a choosing which elements participate, you choose it based on the CSS folder of the whole document. And we want to enable to kind of tag when you start a transition, kind of choose which transition are you actually gonna run. And only select elements that participate in that transition. So we want...

allow those things but the most important thing right now is cross-document.

Dan (43:17.482)

And I'm guessing the second most important thing, or maybe actually the first most important thing, is getting better cross-browser support.

Noam Rosenthal (43:26.542)

Yes, so we have a positive standard position from Zilla and Apple on this.

And...

We... We can't build it for them. Ehh...

Dan (43:42.222)

you have you personally have done things inside webkit as i recall

Noam Rosenthal (43:47.534)

Yes, I have. I worked full-time WebKit a long time ago and also implemented standards inside WebKit as a freelance, like pain timing, which was charted by Wikipedia a couple of years ago. So it can be done, but it's...

Noam Rosenthal (44:13.494)

It's not what we're doing right now. We hope to empower the other browser engines to do it by themselves rather than us building the whole web just in three different engines.

Steve (44:27.185)

Yeah, I'm looking at can I use right now. There's a lot of red.

Dan (44:27.296)

But

Noam Rosenthal (44:31.718)

Yeah, it's definitely a chromium right now. Also, yeah, chromium. The thing is also very easy to progressively enhance it. You can use a feature and if you don't have the JavaScript called the start of your transition, you just go directly to the next state that will just work.

Steve (44:31.909)

Uh.

Dan (44:36.603)

Well, Chrome and Edge, I would assume.

Steve (44:38.469)

Yes, Edge as well.

Dan (45:01.002)

Yeah, you just don't get the fancy cute animation. Instead, it just switches between the pages or whatever, right?

Noam Rosenthal (45:09.026)

Yeah, it was very important for us to think about progressive enhancement the whole way through for this. So that people can build it into their web pages and then it would magically start working browsers once they implement it.

Dan (45:23.326)

In case any one of our listeners doesn't know what progressive enhancement means, it, and again, feel free to correct me if I'm wrong, but basically it means that, uh, you can enhance the functionality with more sophisticated APIs, usually JavaScript related. But if those APIs aren't there, don't exist, or you just, for some reason, don't use them, then you fall back to something that is simpler, but still.

very much worth.

Noam Rosenthal (45:55.154)

Something like that, yes. That it basically means also that you can have different levels of styling on top of your content. And yeah, right, functionality or styling. And you can have different layers based on what capabilities or preferences your users or user agents, browsers have. And you don't.

Dan (46:06.078)

In this case, styling, it could also be functionality.

Noam Rosenthal (46:23.602)

break the whole thing just because some feature is not available.

Dan (46:28.462)

And obviously when you're doing something like that, like the view transition, you should respect the use reduced animations or whatever.

Noam Rosenthal (46:37.466)

Oh, yeah, so there is a CSS media query prefers reduce motion. That's what you mean. So we don't respect it by default. It's really up to the web developer to do that. The reason is not every transition is motion. For example.

Dan (46:46.484)

Yes.

Noam Rosenthal (47:05.886)

And what reduced motion is, is a content decision. Content and design decision. It's not a, it's not really up to the browser to decide that the whole transition should be and off when prefers reduced motion is on. Maybe you're just cross fading as far as we know.

Dan (47:27.91)

And this whole animation thing, I assume, is like most of CSS is implemented as much as possible on the GPU, which means that it should be silky smooth, even on mobile devices and consume relatively little battery, etc. All the good stuff.

Noam Rosenthal (47:46.494)

I would say performance wise, there is a one big catcher, which is don't offer capture. We saw that in early, this is the API that people put those view transition names on a lot of elements and capture a lot of them. And that is expensive to do. That can get...

Dan (48:07.404)

Hmm.

Noam Rosenthal (48:13.734)

like a bit frozen if you overdo it. So yes, but also need to take care, like with everything in performance.

Dan (48:25.386)

And also overdoing animations is usually a bad idea.

Noam Rosenthal (48:30.318)

Yeah, from a UX perspective, really, the kind of things we saw people do with this, the main three animations that we kind of saw from partners starting to work with this and from demos, one is like just full page animations, like very basic slides or whatever. The other one was,

Noam Rosenthal (49:00.55)

Moving from a list of products in an e-com site to a single product and expanding the product image and title. It's a very horror from a playlist to a song. That product expanding is very, very common in all the demos we saw. The third one was like list sorting.

Dan (49:21.93)

And I think that it's not just a visual nicety. I think that there's an actual UX aspect here because when you click, like you said, on a particular product and that product responds to your click and it's very clear which product you're transitioning to, that definitely provides UX value from my perspective.

Noam Rosenthal (49:46.734)

Yes, there are a lot of pitfalls in making this confusing, but if you have a good mental model of direction and of relationship between the different states and you...

apply that to your animation there are a lot of opportunities there beyond just like oh this is cool

Dan (50:08.046)

Now, if I take a slightly higher view, unless there are more technical details you want to discuss in this context, but if I look at it from a higher perspective, it's really interesting to see how in this context, there's like the standards work of really being able to specify, you know, what the APIs look like, what the behavior exactly should be, and doing it in a way

so that when browsers implement it, and even though each one of them implements it, you know, totally separately using different programming languages, data structures and whatnot, but obviously by different developers, the end users all experience the same behavior. So there's this standards part and then there's obviously the implementation part. I mean, you know,

standard is all nice and good, but if it's not implemented, it's not nothing. So, can you talk a bit about, you know, how you balance these sorts of things? Because I know that, like you said, you, standards are where you're at. So how do you balance this with the work that you do with the developers in both inside Google and, you know, maybe also outside?

Noam Rosenthal (51:32.272)

So I don't work on this alone, we're in a team. And we're all participating and discussing internally and externally how the API should work and finding out places where, oh, this is kind of more difficult to implement or this doesn't make sense in the model of how this works or whatever. So this is all done with a team of...

very good engineers from the premium side work on this and getting input whenever we get it from implementers of Mozilla and

and was a lot of Gekko and WebKit. So you can say this whole thing is a conversation. And I bring my own.

like, I don't know, my own unique stance on it, my own unique background on it, from being a web developer in the past, from working on standards in several fields, from knowing some things about the other, about WebKit especially, and working with other browser vendors, working on Chromium on another project, and the other developers in the team bring also the...

And the know-how of what they need to do next and like how long it's going to take, how complicated things are on the Chromium side. And the whole thing becomes conversation and the CSS working group. Everything is done by consensus. So we have to reach consensus in the end of how this should work.

Dan (53:15.322)

And don't you actually ever miss the coding part?

Noam Rosenthal (53:21.498)

Um, actually no, but, uh, first of all, I do write code in terms of like writing example and using it, et cetera, but, uh, writing production code on the other project I work on in web performance, I'm writing the Chromium code. It's a better balance for me at this point to be more like 70, 30 standards versus

versus Chromium code. I feel like Chromium code requires a lot of focus, a lot of concentration. C++, a lot of memory management, very complicated tests, very long builds, as in 20 minutes sometimes. It's not the same as web.

Dan (53:55.734)

Well, it is C++.

Dan (54:14.666)

Get an M2.

Noam Rosenthal (54:16.83)

It's all down in the cloud distributed. Yeah, to my M1 it will take 8 hours, 10 hours.

Dan (54:19.351)

I'm joking.

Steve (54:25.586)

So let me ask you a couple of questions, Noam, just about browser development itself. One, I was listening to another podcast, and I forget which one and who the guest was, but she had mentioned that in the world of developers that actually work on browsers and implement all the standards in browsers is small enough that they could all fit in a large elevator, and if something happened to that elevator, we'd be in a world of hurt. Like it's a...

Noam Rosenthal (54:27.198)

Sure.

Steve (54:52.029)

pretty small community of developers that actually work on browsers and implementing all this stuff for us to use as front-end developers. So is that true? Is that, what is, how would you judge the size of the actual browser developer community?

Noam Rosenthal (54:59.134)

Sure.

Noam Rosenthal (55:07.058)

Well, it would be a very crowded elevator, I'd say that. But I would say people who work in browsers in total would be in the hundreds, where it's like 80% of them on Chrome. I don't know. I don't know numbers. It's just like a.

Steve (55:10.002)

Right.

Steve (55:19.781)

Mm-hmm. Okay.

Steve (55:25.134)

Oh, interesting.

Noam Rosenthal (55:31.435)

Yeah, it's a big group from Chrome.

Dan (55:37.954)

Yeah, for years there have been claims that Apple is under investing in browser development. It's really nice to find it. You know, I'm still upset that they're not allowing other browsers on iOS, but at least they're investing much more significantly in their own browser.

Noam Rosenthal (55:57.51)

Yeah.

Steve (55:57.669)

Yeah, Jen Simmons seems to have really driven a lot since she's been over there. I know her name from when she was in the Drupal world many years ago and everything I've seen and maybe this, you know, isn't accurate, but just my observations since she's been there, it seems that things have really picked up a lot from the, from the web kit, from the Safari side.

Noam Rosenthal (56:18.822)

Yeah, Jen is also a very visible member, but there are several key people from the startups community that Apple hired. I'm very happy about it to see. To have lively discussion with the other browser vendors and features is really great. Sometimes they...

Steve (56:24.594)

Mm-hmm.

Noam Rosenthal (56:47.11)

the Chrome echo chamber is not something we want internally. It happens sometimes because nobody's answering, not because it's what we want. But to your question, it is a small group. It's also, for those people who work on browsers, how many know the internals really well? It's a much smaller group.

Steve (56:50.607)

Exactly.

Steve (56:59.454)

Heh heh.

Noam Rosenthal (57:17.162)

So yeah, it's a small niche. I'm happy to be part of it.

Steve (57:21.725)

So then the other question is, Dan was mentioning your past. Both of you were mentioning your past experience. You had actually been a web developer, and then you've taken that and moved into the browser world, the standards world. How many would you say, or what's your estimation of how many people that actually work on browsers have actual front end web development experience? Somebody who knows, OK, I'm implementing this. This is the headaches I've dealt with as a web developer.

as compared to people that just like tools and, you know, I think, oh, this would be really great, but, you know, really don't have the familiarity with how they would actually use it from a web development standpoint.

Noam Rosenthal (58:02.661)

Very, very few.

Steve (58:05.285)

Very few that don't. So you'd say most of the browser developers have web front end experience and have actually used it or the other way around.

Noam Rosenthal (58:08.434)

There... No, no. I didn't... I wasn't doing a double negative. That's a sure full negative. Anyway, most browser developers don't have significant web development experience. It's kind of a different discipline. And... There are some people...

Steve (58:17.127)

Okay.

Noam Rosenthal (58:38.014)

that are more in the dev role part of things that kind of try to bridge the gap. Like Jake Archibald was one of them, Jen Simmons, et cetera. There are a lot of people that are kind of in between. But I think I would like to see more of that in the browser development community.

Noam Rosenthal (59:09.645)

Yeah, I try to bring that aspect myself as much as I can. That's also part of why I kind of rotated between browser and web development. And.

Steve (59:21.933)

Just sort of keep your feet in both worlds and being able to understand.

Noam Rosenthal (59:25.918)

Kind of keeping it real in a way. I think it's also why I joined Wix at the time. Like before that I never did a big web project in terms of production, in terms of something that really reaches millions of users in real time. That's like what was drawing, what was attractive to me at going to a web company, like when you...

The devout browsers, you have releases, it's not like that. It's like, you have releases that go through, like much slower, everything is much slower. Yeah.

Dan (01:00:05.311)

Yeah, it's really funny that the people on whom the whole web is built are not web developers and the way in which they develop and push out the software that they create is very much not the way in which web applications are distributed.

Steve (01:00:31.005)

Yeah, to me, I think of it almost like, I guess an example is a startup, you know, they're going to develop some platform and think, oh, this would be great, but they don't do any market research to say, would anybody would use this if we built this great tool, you know, and then they go under because from their standpoint, yeah, this would be a great tool, but in reality, nobody wanted it or needed it, at least at that time. So.

But yeah, I mean, I've been on both sides of things where I've been the developer using tools and I've been on the backend one, you know, creating the tools and think this would be great. And so being able to, you know, have your skillset and bridge that divide is certainly a large plus.

Dan (01:01:11.542)

So, oh, go on, go on.

Noam Rosenthal (01:01:14.214)

I would say though that relatively this is not as much of a problem as in other professions. Let's say you're building a tool for dentists and you're not a dentist. In this case, the tools we're building are at least accessible for us to use in a meaningful way. In a meaningful way, the web is accessible for everyone, so it's also accessible to people who are not professional web developers.

So in that sense where it's not as bad as another type of software.

Dan (01:01:50.818)

I'm actually extremely thankful to the engineers working on the platform itself. So first of all, I'm not as, certainly not as much as you, but I'm somewhat exposed to them because I'm an invited expert on the W3C web performance working group. So I'm less exposed to the actual developers writing the code, but at least I'm exposed to the standards process. But beyond that, again, if we are talking about performance for a minute,

Noam Rosenthal (01:02:11.347)

Thank you.

Dan (01:02:20.574)

You know, if I'm looking at the graph of how performance has improved in recent years, then it seems as if performance has, in terms of websites that have good core

Dan (01:02:52.178)

to three years, but in reality, it's mostly thanks to the platform. In fact, if we take the improvements in the platform out of the equation, I think the line, at large, not for specific technologies, but across the board, the line has pretty much stayed the same. So, yes, the...

The C++ developers are killing it. And I really, and I wish that the JavaScript developers were doing as, as well. And I'm saying that as, as a person predominantly working in JavaScript and TypeScript and not hardly any, if at all in C++.

Noam Rosenthal (01:03:38.286)

I'd say if we're going to performance land that actually frameworks today are a lot faster than they were. A lot more performance oriented and aware than they were. I think the main... I trace a lot of websites now to find what's making them slow.

Dan (01:03:52.766)

oriented.

Noam Rosenthal (01:04:08.762)

I'd say the main problematic player in the performance world today is not so much frameworks or JavaScript developers of apps, but rather the third parties.

Dan (01:04:24.982)

The marketing people.

Noam Rosenthal (01:04:28.174)

Yeah, there are a lot of sluggishness and responsiveness issues from that sort of thing. Cookie consent stuff, ad brokering, all that. We're working with a lot of those to raise awareness to that because many times what happens is you build your great websites, you went to all the Twitter feeds to find out the...

the best ways to avoid multiple renders in your React app and you use all the fancy new React server components and then you just put in a JavaScript file from some third party because that's your way to make money and then the whole thing you did is meaningless. That's what's taking your time.

Dan (01:05:20.222)

Yeah, for us at Next Insurance, we are loading quite a significant amount of third party scripts and pixels. And, you know, it is what it is. We actually need most of them, if not all of them. And for us, we basically were forced to use Party Town. And...

that dramatically improved our INP score. So, you know, we are ahead of INP becoming an official core vital. Again, we spoke about this with Barry Pollard a few weeks back. And, you know, this made a much bigger impact than any improvement that we've done inside our own code.

Dan (01:06:12.95)

So I'm totally in agreement with you on that. I can say, I definitely recommend, by the way, to our listeners, I definitely recommend checking out Party Town if you're using a lot of pixels, but do take into account that it is far from trivial to get it to work properly.

Steve (01:06:35.517)

All right, so we're sort of hitting the end of our time here. So we'll wrap up and move to PIX before we do that. Noam, is there anything else that we haven't discussed that you wanted to throw in real quick?

Noam Rosenthal (01:06:48.182)

I think we're good.

Dan (01:06:50.534)

I want to make one observation before we finish. I think that view transition is yet another example of several super exciting things that are taking place in CSS land. It seems that in, especially in the past year, a lot of the advancements in the platform have been around CSS related things.

So view transition, container queries, nested CSS. I'm sure I'm missing some stuff. There are even some additional things that haven't landed yet, like the ability to position things.

relative to each other. I'm forgetting the technical term for it. Anchor positioning. And again, if I'm thinking about the work that we did at Wix, that would have simplified things so much like getting rid of 80% of Wix's code, more or less, with a few CSS tags if and when it actually works. So I'm super excited about a lot of the things

Noam Rosenthal (01:07:51.819)

anchor positioning.

Noam Rosenthal (01:08:06.514)

Yeah.

Dan (01:08:15.85)

being introduced in the platform in the context of CSS.

Steve (01:08:22.081)

All righty, well thanks, Nolan, for coming and talking to us about this as someone who is more CSS challenged or fancy stuff challenged in the front end. This would be something definitely worth playing with. Actually make my stuff look really good. So we'll move on to picks. Picks are part of the show where we get to talk about anything we want to talk about within Reason, of course, and FCC guidelines. So it could be tech, could be non-tech.

It could be whatever you want. Since AJ's talked so much this episode, we'll let him go first. You got anything for us, AJ?

AJ (01:08:57.521)

Uhhh...

AJ (01:09:01.246)

Yes, I've got one and a half things, I think. So I went to see Gran Turismo and I was very surprised because I was expecting it to be kind of a cheap action flick in the way that, uh, let's say, I mean, transformers is, is kind of at its own category of bad, but I was just, I was just kind of expecting like normal.

was bang stuff. And instead, what I got was Rocky race car edition. And I loved it. And I don't know that I loved Rocky. I don't even know if I've seen Rocky but you kind of get like Rocky is a male drama. And that's what Gran Turismo is. It's not really a video game slash gamer movie. It's not. It's it's just not it's not what I expected.

Steve (01:09:41.289)

I'm going to go ahead and close the video.

AJ (01:09:58.45)

I was just kind of seeing something to pass the time. And then both of us, we ended up just really, really loving it. And so I don't, I don't want to make it sound too good because then, you know, you go and you see it and you're like, Oh, it wasn't that great. But just, just from the trailer, I thought, okay, it'll be an all right movie. And instead what I found was it was a really, really good movie that was so

focused on the plot and the story and the character development that. It, they couldn't have gotten a PG 13 rating and except for that. They just had to throw in a random F word in the middle of it for no reason, because otherwise it might've been G because it was like just about the story. It was just about the hero's journey. And, um, I really liked it. So I'll pick that. And then.

I mentioned before I've been listening to the, the Susan Venker podcast, which is she's a relationship coach. Her, her slogan is something like the counter cultural. She's like a feminist. And then there's a similar woman that I, uh, was listening to as well, Alison Armstrong, and there's some, there's some men also, but, uh, I think that

It's a little bit.

AJ (01:11:28.706)

There's, there's some value in hearing these things from, from women, I guess. And, uh, it's just been, it's been really good. And I've taken some tips and, uh, seen an improvement in the quality of, of my marriage over the past couple of weeks and, uh, hope that, you know, that, that continues, it's nice to feel closer and get some of that.

the man brain woman brain stuff a little better understood so that natural conflict that occurs can be not so confusing.

Steve (01:12:11.621)

Now when you said Gran Turismo, I started thinking Clint Eastwood. That was out of here, but that's Gran Turino, I think. So, but they're both very grand, I guess.

Dan (01:12:11.947)

Yeah.

Steve (01:12:22.801)

Hi, Dan, what do you got for us?

Dan (01:12:25.778)

Well, so I think in the last podcast that we recorded, my pick was about the whole TypeScript versus JavaScript kerfuffle and the, and Twitter slash X not being content with just one kind of a storm, a shit storm, pardon my French, decided to start a couple of new ones. So, um,

Another one was the whole recent thing about, uh, bun versus node, uh, bun 1.0 was released and by the way, this is a great point to remind everybody is that UAJ had an amazingly great interview one-on-one with the bun creators slash main developer, a few weeks back.

Steve (01:13:02.109)

Not you.

AJ (01:13:19.434)

That was yeah, that was really, really good. I really enjoyed that. I was sad you guys weren't there, but we had a really good show.

Dan (01:13:28.626)

Yeah, it was definitely great. I said that on the one hand, I was really sad that I couldn't participate. On the other hand, it was really great then that I could watch it, or given that I didn't see it before live. So yeah, I highly recommend for people, you know, anybody who might even consider using BUN to actually go and listen to that. But anyway, the point was that BUN

One came out and a lot of people that didn't really look at bun before started looking at it And people started tweeting about it or x-ing about it, whatever you call it. And I remember the one in particular where uh, uh some uh Person basically said does you know after using bun does nobody else even care about performance? Because all our tests using bun were so much faster

than those same tests that she did using Node. Now the thing is, is that it got a lot of Node maintainers really upset. Now, you know, before you say anything, yeah, I thought you'd say that, but do take into account that a lot of these Node maintainers are, you know, they're not

AJ (01:14:37.262)

Good.

AJ (01:14:49.55)

Which is the problem.

Dan (01:14:54.454)

doing a thankless job of trying to get Node to work faster and doing it in his free time, getting absolutely zero appreciation, zero pay, and then all of a sudden getting all the shit dropped on his head on Twitter, like you don't actually care about performance because Bun is killing you. And you know, it's an interesting discussion of why Bun is able to be.

that much faster than node. I'm not going to go there. We don't have the time for it. But a lot of those node maintainers were basically saying something along the lines of, F you, if you don't appreciate what we're doing, then we just won't do it anymore. And that's certainly not what we want to happen. We don't want all the node maintainers to basically abort. So yeah, so that thing happened.

But yeah, I definitely think that having BUN as an alternative is overall definitely a good thing.

AJ (01:15:59.774)

And, and bun does have money and node doesn't. And, but node was the same way, but no, just had so many community issues and. You know, so I think it's, uh, well, you know, you know, I think bun is great. I'm really excited to see where it takes us. I don't care if node dies because well, it was never really that good other than that. It was just exponentially better than everything else.

Dan (01:16:02.982)

Yeah, it's VC funded. Exactly.

AJ (01:16:29.59)

you know, for as much as that can make any sense.

Dan (01:16:32.282)

It's also the fact that things can be done better when you're starting from scratch and you know, and backward compatibility is lessen an issue. Bun did make certain architectural decisions that have backward compatibility implications. You can't always just use it. It's great when you can, but sometimes you can't.

AJ (01:16:38.75)

Yes, yes, yes.

and all of the history.

Dan (01:16:58.722)

Uh, it's interesting certainly it's shaking things up. So that that's the my first pick my second pick Uh is you know what? I know nom that you you're short on time So i'll skip my other picks hand over to you and then i'll come back to me later on

Noam Rosenthal (01:17:17.378)

Yeah, I have to drop, I'm sorry, but my pick is in honor of Chuck, my pick is the state of Utah, because they allow Zoom weddings and...

I am.

We had our big wedding a while back, but we never made it official. And now with, in Israel, it's all like difficult and irritating. So being able to do it with his own, via the state of Utah in a totally official way is a plus one for Utah.

AJ (01:18:02.408)

Interesting.

Noam Rosenthal (01:18:04.694)

Yeah. That's it. I do. Yeah.

Steve (01:18:05.057)

Alright, well thanks you home. If you need to drop, that's good. I can see your door opening behind you. I've had mine open twice here during this recording, so I get that.

Dan (01:18:14.474)

Bye, Nom. Thank you very much.

Noam Rosenthal (01:18:17.014)

Bye bye. Thanks everyone.

Dan (01:18:21.314)

So I'll resume my picks because I do have a bit more. So as if that whole bun versus no thing was not enough, we then got this whole issue around Unity licensing. I don't know if you've heard that one. So Unity, for those who don't know, is one of the leading 3D engines used in a lot of games to do all the cool rendering stuff.

then you can just put in the game logic and somebody else can deal with all the heavy lifting of the 3d scenes and whatnot. And they made a very significant licensing change and they even made it even more significant by making it retroactive. So it impacted anybody who's ever used a unity, you know, even if you're using some older version and you thought you were okay with it, it still applies to you.

And the change that they made was that effectively you need to pay them for every download. So it's not even for every user. It's not for registered user. It's not for somebody even playing with the game. It's enough that somebody downloaded the game and you need to pay them a licensing fee. Now think what this does to people who are using some sort of a freemium model. For example.

of letting people play for free, but then buy an upgrade. Well, all of a sudden you pay for that. You need to pay Unity for that free version. Or if you're creating some sort of an open source thing, I don't know. Or for example, you have a competitor that annoys you, then just create a bot that downloads their game a million times and get them and have them go bankrupt.

So now it seems that they're kind of back-paddling on that because people basically told them that they should go f themselves with that thing. And hopefully this whole thing gets resolved because replacing the engine inside your game is not an easy undertaking. It's not something that you can just rip and replace because they lost sense or something like that. And my final pick.

Dan (01:20:44.906)

is that it kind of gets, you know, I'm looking at all these technological arguments and kerfuffles and whatnot, and it's kind of difficult for me to get all in an uproar about them when here in Israel we've got a debate going on whether or not we should remain a democracy. That seems to be, you know, somewhat more significant. Oh yeah, that and the ongoing war in Ukraine.

support the people of Ukraine and those are my picks for today. Over to you Steve.

Steve (01:21:19.013)

Yeah, well, in regards of what to what you were talking about Unity, I've been reading all that, see some of the articles on Hacker News and so on. And this is sounds along the lines of what I think it was Red Hat did with one of their Linux distros. Is it recently they changed the licensing? Um, and I don't remember all the details. I'd have to go back and look it up. But as soon as I saw this thing with Unity, I'm like, Oh man, somebody else is doing the same thing, trying to change the light licensing and

And with the Red Hat case, I think it was, where somebody forked it and said, okay, we're gonna create our own community edition and applied to Apache to become part of the nonprofit through that whole structure. So, seems, hopefully there's not a third one coming down the pike, you know, since things supposedly happen in threes, but I keep hearing more and more about stuff like this where large...

entities that own an open source product are changing the licensing and really harming those people downstream for sure. And obviously there's, but then I think there's going to be two sides of the story, maybe it's, you know, financial issues and they need to squeeze more money out, but, uh, it seems to me that sometimes people don't really think through some of the implications of the changes they make when they have so many dependent users for sure. Uh, my picks. So, uh,

A couple of weeks ago, I mentioned a show I'd been looking forward to, and it wasn't out. And then in the process of that, I caught another episode of the show that I really liked called The Spy that was based on Ailey Cohen. And so the show that I was looking forward to on Netflix called Spy Ops was released on September 8. And I've watched a few episodes of it. It's really, really quite interesting. They're all true histories, true stories of different.

ops from different spy agencies. Probably one of the first episodes has to do with MI6 from Britain and how they got Oleg Kordyavsky, I always forget his last name, in 1985 right from under the nose of the KGB. And it's quite an interesting story. It involves a woman spy changing her baby's diapers to throw off the scent of a spy dog that was about to catch him in the trunk right before they.

Steve (01:23:43.473)

They went into Finland and crossed over the border into Finland. We're going to quite ingenious. But the other one that I wanted to see and was fascinating to watch was the story of Mossad, Israel's, uh, agency and how they went after the, uh, members of black September who killed all the nine Israeli athletes during the 1972 Munich Olympics, uh, by, uh, Kippen kidnapping them. Yeah. It's, it's an interesting story.

Dan (01:24:06.462)

Yes, very sad, very, very sad story.

Steve (01:24:11.857)

that there's actually two episodes dedicated to it. And one is the bombing or the kidnapping itself and how everything fell apart in Munich when they were trying to rescue them. And then the second part is how over the subsequent years Mossad went after the members of Black September. And the saddest part, and I didn't realize this till I watched this episode and hopefully it's not too much of a spoiler is how bad they screwed up going after the last guy.

Dan (01:24:42.3)

Yeah.

Steve (01:24:42.885)

and they got the guy, the innocent guy in Denmark. Yeah, Denmark, he was a musician. And what's fascinating is how the guy who got my mistake, his brother was a musician. Now he came into the story later, became an envoy for UNICEF or the UN, I can't remember, in the late 90s when all this, a lot of this was resolved, but really great stories. Fun to watch, especially since they're real and they're not.

Dan (01:24:46.62)

I believe, yeah.

Steve (01:25:11.785)

you know, not just made up spy stories.

Dan (01:25:13.306)

You might also want to see there was a movie made, to be honest, I didn't see it, so I don't know if it was good or not, but if that's kind of your jam. There's an interesting movie around how they captured Adolf Eichmann in South America and smuggled him to trial in Israel.

Steve (01:25:30.786)

Yes.

Steve (01:25:35.193)

I've watched that movie and I actually have the book. So the book is called Eichmann in My Hands and it's written by the guy, I forget his name, Dan something, who told all about how they did it. And then the movie was actually fairly accurate because I watched the movie after the book and it's called The Man Who Captured Eichmann. But really, those are really great stories too. They're really great stories that I've always liked.

So now into more lighthearted stuff, we will go with the dad jokes of the week to wrap up today's episode. So recently I went to my doctor and he told me that I have high blood pressure and short-term memory loss. I'm just glad I don't have high blood pressure.

Steve (01:26:25.806)

The other day I called my local dairy and asked them to deliver milk to me so that I could take a bath in it because milk baths are supposed to be really good and they said would you like it pasteurized? I said no just enough for up to my neck.

Dan (01:26:39.751)

Oh man.

Steve (01:26:41.933)

And then finally, I decided to jump into the book authoring business and I'm writing a book on reverse psychology. Please don't buy it.

Dan (01:26:56.01)

good one actually.

Steve (01:26:57.85)

So those are the dad jokes and picks of the week. Thank you to Noam for coming on. Unfortunately, he wasn't able to stay, but for a front-end developer like me, I'm really looking forward to being able to use that View Transition API for sure.

Dan (01:27:11.058)

Yeah, I'm really excited about these things. It's a lot of goods. Like I said, a lot of good things happening in CSS land and things that are actually usable and, and worthwhile.

Steve (01:27:20.583)

Yes.

Yes, for sure. Thank you, Dan and AJ for joining me and we will talk to you all next time on JavaScript Jabber.

Dan (01:27:30.314)

Bye!

View Transitions API with Noam Rosenthal - JSJ 602

0:00

1:26:31

Playback Speed: