Off The Main Thread Podcast

New View Transition Stuff

In this episode, Jake goes through some of the newer features of the View Transition API, along with some vaguer ideas that are planned for the future.

Resources

Transcript
  1. Surma:All right, Jake, amuse me!
  2. Jake:Alright, I suppose I'd better do an intro. Hello! Welcome to another episode of OTMT
  3. Jake:with me, Jake. We're getting better at that. And thanks to Shopify for letting us do this
  4. Surma:And me Surma.
  5. Jake:every now and then. Don't want to spoil some of the magic. This is the third episode we're
  6. Jake:recording in a row. We normally do two, but you went and, like, split your episode into
  7. Jake:two. That's good. I am not going to do that. I really hope I'm not. I don't think I've
  8. Surma:Ah, yeah, I milked it.
  9. Surma:I guess I should, like, share my thoughts.
  10. Jake:got that much content. But yeah, I'm having to sort of bring the happiness, sort of force
  11. Jake:the happiness out right now, because I'm actually in quite a bad mood. Because I moved house
  12. Jake:about a year ago. And so I've had to have the process of buying furniture. And I bought,
  13. Surma:Hmm.
  14. Jake:you know, I've got a little kitchen island.
  15. Surma:Oh, look at you! You've climbed your way up the social ladder.
  16. Surma:You're now a kitchen island owner.
  17. Jake:Yeah, that's, that's, I'm doing all right.
  18. Surma:That's a kitchen on a separate island in the Bahamas, right?
  19. Jake:Yes, that's right. It's a tax haven, the kitchen island. That's why. And that took a lot of doing,
  20. Jake:mate. That took a lot of doing. The forms I had to fill in. Yeah, so I had to get some
  21. Jake:barstools for the kitchen island. So I bought some. I know, got some gas lift ones, you know,
  22. Surma:Ah, the pain. Your struggles in life.
  23. Surma:Gas lift?
  24. Jake:good. You know, you know what I mean? Like, it's got the little lever and it goes
  25. Surma:Oh!
  26. Jake:upy downy. Yeah.
  27. Surma:Ah, yes.
  28. Surma:Oh, I always wanted one that has, like, really a lot of pressure,
  29. Jake:So you just eject yourself out. Yeah, that would, that would be good. No, these aren't like that.
  30. Surma:so you can catapult yourself onto the couch.
  31. Jake:They, they come ready assembled, which is great for me, because I am not.
  32. Surma:As in, you don't have to pressurize them yourself?
  33. Jake:No, well, I mean, the whole unit, it's, you know, there's like, there's your barstool.
  34. Surma:Nice.
  35. Jake:It's like, right, that's a barstool. That's a usable barstool. All I need to do now is just
  36. Jake:put it into the position, you know, that's it. Like no assembly required, I guess is what I
  37. Surma:Nice.
  38. Jake:mean. Right. Which is good because it's the kind of thing I'll mess up. And as I was, you know,
  39. Jake:taking the second of my barstools downstairs, I discovered that this one was not ready assembled
  40. Jake:or not properly readily assembled as the, the bottom half of it detached itself.
  41. Jake:And this is the heavy part. This is the part that sits on the ground and keeps the whole thing
  42. Jake:balanced. Detached itself and started bouncing down my stairs, laying waste through my house,
  43. Surma:Nice.
  44. Jake:creating a series of holes in the wall and floor and banisters.
  45. Surma:And that's where you regretted building your house made of glass.
  46. Jake:It was as soon as, you know, because you know, it's happening because I was carrying the thing
  47. Jake:downstairs and all of a sudden it just kind of got lighter. And then there was a thud and I was
  48. Jake:like, oh, I know what's happened here. And then as I watched this thing go, bang, bang, bang, bang.
  49. Surma:You really, like, you can really observe the misery happening in those moments, can't you?
  50. Jake:I wasn't, you know, time slows and it's like, well, there's nothing I could do about that.
  51. Jake:Yeah. Yeah. It's kind of like, I'm, God, I'm going to be really sad about this once I have
  52. Jake:time to feel feelings rather than just watching it. So, so I am. Yeah. So, you know, there's a
  53. Jake:bunch of emails. Well, whatever. Hopefully. Yeah. Yeah. That's right. Yeah. Just put a frame
  54. Surma:That's not fun.
  55. Surma:Or you could just, like, you know, frame it and call it art.
  56. Jake:around it, sign it, date it, sell it. There we go. That's pays for itself.
  57. Surma:It's a subtle critique of social dynamics in the modern era.
  58. Jake:My odes to this particular furniture company, which I won't name because I don't know,
  59. Jake:I might name, I might name them if the compensation process doesn't go through.
  60. Jake:But in the meantime, let's assume it's all going to be fine.
  61. Surma:So, should we, yeah, talk about, yeah.
  62. Jake:Should we talk about the web? Oh no. Oh yeah. The way you went.
  63. Surma:You talked so much, can I at least ask the question if we should talk about the web?
  64. Surma:Come on, mate.
  65. Jake:Well, should we, I mean, should we talk about the web? Should we just do?
  66. Surma:Let's talk about the web.
  67. Surma:Come on!
  68. Jake:All right. Let's all right. Let's talk about the web.
  69. Jake:I struggled for a topic. So always in that situation,
  70. Jake:stick to what you know, that's, that's what I say. So I'm going to talk about few transitions.
  71. Surma:Oh, I thought you were talking about checkered backgrounds.
  72. Jake:That's the other thing I know about. But no, this time, this time it's few transitions,
  73. Jake:but I wanted to, I want to talk about some of the upcoming features, like the things that have
  74. Surma:Yeah.
  75. Jake:landed relatively recently. And like the things that are just being talked about that might arrive
  76. Jake:at some point. Cause you know, the few transitions have shipped in both Chrome and Safari. They're
  77. Jake:they're all hat now, but there's, there's been a bunch of work happening in the background,
  78. Jake:I know. And it was a lot quicker than what happened with service workers put it that way.
  79. Surma:How proud are you of that, though?
  80. Jake:So that's that, that is satisfying. No, it's really, it's actually really nice to see.
  81. Surma:That something that you worked on is in Safari?
  82. Surma:That doesn't happen.
  83. Jake:It's a nice high level feature. So Safari tends to go for that kind of thing, but it's yeah,
  84. Surma:Yeah.
  85. Jake:it's, it was nice to see in web standard speed. And it's, it's, it's, it's, it's, it's, it's,
  86. Jake:it's, it's, it's, it's, it's, it's, it's, it's, it's, it's, it's, it's, it's, it's, it's, it's,
  87. Jake:in web standard speed, a fast turnaround on, on that kind of thing.
  88. Surma:Yeah, absolutely.
  89. Jake:So I guess I'll, you know, a recap, quick recap. What are view transitions? I don't know.
  90. Jake:You give a bunch of elements, view transition names in your CSS, you call document dot start
  91. Surma:Yeah.
  92. Jake:view transition, and that browser captures the current state and everything with a view
  93. Jake:transition name is captured separately. Great. It's like little screenshots. Amazing.
  94. Jake:Then you change your DOM in whatever way you want to using a framework, not using a framework,
  95. Jake:whatever. And then the browser creates an animation from those old states to those new
  96. Jake:states. So yes, the, the old states screenshots me, and this isn't good because you can animate
  97. Jake:something which isn't there anymore, which is kind of the biggest problem we set out to solve
  98. Jake:with this. Cause if you're just changing between like two tabs, it's an accessibility nightmare,
  99. Surma:Yeah.
  100. Jake:but it's also difficult implementation wise to like keep both views around for a bit while
  101. Jake:you're animating from one to the other. So yeah, it solves, solves that problem.
  102. Jake:They're just screenshots. There's no accessibility issues. Whereas the new states are live screenshots.
  103. Jake:They kind of work like bitmaps, but they're being constantly updated with the actual real DOM.
  104. Surma:Oh.
  105. Jake:And then, yeah, it's a default animation, which animates the size and position of everything,
  106. Jake:which has the same view transition name in both states. And it crossfades from the, the,
  107. Surma:Yeah.
  108. Jake:the old screenshot to this new view and that can all be customized. And that's,
  109. Jake:that's a view transition. But I want to talk about some of the new bits and the features
  110. Surma:Lovely.
  111. Jake:in development and view transitions. They're a very like visual feature. So what better place
  112. Jake:to discuss it than on a podcast? So, you know, use, use your imagination throughout, I suppose.
  113. Surma:Yeah.
  114. Jake:All right. Entry and exit animation. So this is, this is an old feature, but I think not many
  115. Jake:people seem to know about it who I, who I talked to. So you, you've got these like old and new
  116. Jake:states, like I mentioned, the old ones are screenshots, the new ones are live screenshots,
  117. Jake:and they both exist in this like image pair pseudo element. You can use the only child
  118. Jake:pseudo selector, like pseudo class to match states where there is only one of those.
  119. Jake:Like, so there's only an old state or there's only a new state.
  120. Surma:Okay.
  121. Jake:Yes, because you, so you've got, colon, colon, view dash transition dash old. And then you pass
  122. Surma:But do you, can you also know which it is?
  123. Surma:Ah.
  124. Jake:in the, the name of the, you know, the, the one you're targeting, the view transition name.
  125. Jake:And then at the end, you just pop on colon only child, which means that there's only a new state
  126. Surma:That's nice.
  127. Jake:and you can give it different animations in that case, which means you can create like a,
  128. Jake:a different entry animation. So yeah, like you could have a sidebar, but you can say, right,
  129. Surma:Yeah.
  130. Jake:all right, but if the new state of the sidebar is the only child, then I'll slide it in from the
  131. Jake:right, you know, assuming that's where the sidebar is. And then that animation would only happen
  132. Jake:when it's, it wasn't there in the previous state, it's there in the new state. So you
  133. Jake:create an entry animation and you can do the reverse for, for an exit animation. Yay.
  134. Surma:Very nice.
  135. Jake:So this next one I wanted to talk about, this is not just about view transitions, but it is
  136. Surma:Yes.
  137. Jake:definitely relevant. So in Safari in particular, this is where I first noticed this. You can do a
  138. Jake:some number of fingers on the track pad swipe to go back and forward between pages. Have you
  139. Jake:seen this? I always turn this feature off. Yes. Well, some people don't. And it also,
  140. Surma:Yes.
  141. Surma:I was just going to say, I turn it off immediately.
  142. Jake:and it also happens on iOS as well.
  143. Jake:Oh,
  144. Surma:Sitting next to someone working on a laptop, and he asked,
  145. Surma:a mate of mine, and he asked for help,
  146. Surma:and he had his touchpad on the non-inverted scrolling,
  147. Surma:you know, like the scrolling from the 2000s,
  148. Surma:where you scroll, you move your fingers up,
  149. Surma:you scroll up.
  150. Jake:every now and then I'll encounter a device, which doesn't have the option to do it the new way.
  151. Jake:Cause I got used to the new way so quickly. I know a lot of people didn't last place. I
  152. Surma:Yeah.
  153. Jake:encountered it actually on an Android tablet. I was trying to see how far I could get with
  154. Jake:an Android tablet as a developer machine. Um, and you can connect to a keyboard,
  155. Jake:you can connect to mouse, but that was one of the things that the mouse used the
  156. Jake:wrong direction, scrolling the old direction, scrolling, and there was no option to change it.
  157. Jake:I was like, well, no, I can't, can't possibly use this. Yeah, absolutely.
  158. Surma:It's a red flag for a psychopath, isn't it?
  159. Surma:Okay, well, back to view transitions.
  160. Jake:Yes. So in Safari on both iOS and desktop, and, you know, I think other browsers do this as well
  161. Jake:is as you are doing the drag gesture to go back, it gives you a preview of the previous,
  162. Surma:Yeah.
  163. Jake:of the state you're going back to like a screenshot. But the bad news is Safari,
  164. Surma:Yes.
  165. Surma:Yes, yes, yes.
  166. Jake:the browsers, they do this even for same document transitions.
  167. Surma:Which is annoying if you have your own animation implemented.
  168. Jake:Now you're onto something. Exactly. And in fact, Safari does it even for just like
  169. Jake:you click on a link with a hash, you know, it's going to a different scroll position.
  170. Surma:Yes.
  171. Jake:Like they do it for this as well. So yeah, exactly what happened. And the thing you see
  172. Surma:Yes.
  173. Surma:Yes.
  174. Jake:when you drag across, it's like a screenshot taken just before the navigation. So you're
  175. Surma:Yes.
  176. Jake:looking at your new state, you start dragging to go back to the old state, you see the old state
  177. Jake:and you drag all the way across and you let go. And then that just does the navigation.
  178. Surma:Yes.
  179. Surma:Yes.
  180. Jake:It snaps back to the new state and does a lovely little
  181. Jake:web page transition into the old state. And it looks awful.
  182. Surma:Yes.
  183. Surma:I mean, it seems easy to fix from Safari's point, if there is view transitions.
  184. Surma:Don't do it.
  185. Jake:Well, so this has been a problem before view transitions, right? Like this, any kind of state
  186. Surma:Ah, true, yeah, any custom, yeah, okay.
  187. Jake:change. Yeah. So the fix here is a property has UA visual transition, which will appear on
  188. Jake:navigation event objects and pop state event objects. And it's basically telling you,
  189. Surma:Ah.
  190. Jake:look, the browser's already done it for you. So you might not want to do your own.
  191. Surma:Oh, so my ability to implement navigations is being taken away from me,
  192. Surma:rather than me signaling to the browser, saying, I got this, let me do it.
  193. Jake:Exactly. Yeah. Well, yeah, maybe I do. Yeah, I do hope in future that would do as a way to say,
  194. Surma:That seems the wrong way around.
  195. Surma:And...
  196. Jake:look, no, I would actually like to do my own transition if you don't mind. But that's not
  197. Jake:the way it is now. But at least you can avoid the double transition.
  198. Jake:Yes. Yes. Yeah. Same. But hey, that's in Safari 18 and Chrome 118. So lucky, lucky you. But yes,
  199. Surma:Yes, it definitely is a solution to give a better user experience.
  200. Surma:As a developer, I'm a bit miffed.
  201. Jake:it does. It does solve a real problem. But yes, I hope it's not. Yeah. We've got transitions now.
  202. Surma:Woo!
  203. Jake:Can I use them? No. Browsers have got their own now. So it's pointless. Okay.
  204. Jake:Never mind. Fair enough. But yes, there is a solution to that small problem.
  205. Jake:Next thing. All right. View transition class. Okay. So each view transition name on the page
  206. Surma:Uh-huh.
  207. Jake:needs to be unique. All the elements that are involved in the transition, it needs to have a
  208. Surma:Yes.
  209. Jake:unique name, because this is how the browser determines that the old thing is the same as
  210. Jake:the new thing. And it just does that because they have the same name. So if there's two things,
  211. Surma:Yes.
  212. Jake:it's like, well, no, which is it? So that doesn't work. But it means that when you're defining your
  213. Surma:Yes.
  214. Jake:animation, like you might have a group of cards and you give them view transition name card one,
  215. Surma:Yes.
  216. Jake:card two, card three, or whatever. But that means in your animation, you have to say,
  217. Surma:Yes.
  218. Jake:okay, I want card one to animate like this. I want card two to animate like this. I want
  219. Surma:Yes.
  220. Jake:card three to animate like this. When usually they all animate the same. Like it's the same CSS
  221. Jake:to make that animation work. That's where view transition class comes in. So you can give
  222. Surma:Uh-huh.
  223. Jake:everything a unique name, but then you can give them all the same class, which means that whereas
  224. Jake:that you would do colon, colon, view transition group, and then give it a name. Instead, you can
  225. Jake:give it dots and the class name that you've given it. And this is not the same as the class name of
  226. Surma:Right.
  227. Jake:the element. This is that view transition class and you assign it that way. So they're similar
  228. Surma:Yes.
  229. Jake:to classes in HTML, but they're at a CSS level, but do roughly the same job.
  230. Surma:Can I combine that with, like,
  231. Jake:Yeah. Yeah. So interestingly, you, in a basic card reordering thing,
  232. Surma:nth child?
  233. Surma:You know, if I have, like, a list of cards
  234. Surma:and I want every second one to go to the left and every...
  235. Surma:The odd ones to the left, the even ones to the right,
  236. Surma:that would work with this?
  237. Surma:Brilliant.
  238. Jake:if you do your, like, okay, even cards do this, odd cards do that. You open yourself up to the
  239. Surma:Yeah.
  240. Jake:problem of like, well, what if the class names are different in the new state to the old state,
  241. Jake:which is fun, but the solution there is the new state class names win.
  242. Surma:Yeah.
  243. Jake:That's it. So, which is actually interesting because if you want it to do your odd and even
  244. Jake:thing, it's like, well, do you want it to be odd and even from the end state or from the new state,
  245. Jake:which is kind of fun, but yeah, it's all, it's all, it's all a solvable problem, but yes, you
  246. Jake:can use nth child. Just, just be aware that it's going to be nth child from the new state rather
  247. Surma:Yes, that's definitely important to keep in mind.
  248. Jake:than the old state. Yeah. And that was in Chrome 1.2.5 and Safari 18.2. Like, so soon, not, not
  249. Jake:out yet, but soon ish. That's cool. Yeah. Now here's a feature that I'm mentioning this for
  250. Jake:completeness really, because I think it's a, I don't know. I don't know how much I care about
  251. Surma:Wow, you got me excited.
  252. Jake:this one. Hey, I'm not DevRel for it anymore. I don't have to. It's great. I could be entirely
  253. Surma:You got me excited.
  254. Surma:This...
  255. Jake:honest. That was always entirely honest, I think. Right. It's common for view transitions to be
  256. Jake:different depending on where you're coming from and where you're going to. And they, you know,
  257. Jake:so, so from your article page to your homepage might be a different transition than from a
  258. Jake:article page to an article page. Sure. And also if it's a back button, you might have animations
  259. Surma:That makes sense.
  260. Surma:Yeah.
  261. Jake:that are different from if it's not back, you know, if it's a forward or a link click or whatever.
  262. Jake:The way I've always solved this is just by putting a class on the HTML element dynamically,
  263. Surma:Yeah.
  264. Jake:and then I can give different things, view transition names. I can give, you know,
  265. Jake:different animations to the groups and the old, the new states, all of that sort of stuff.
  266. Jake:And then just when the animation is complete, I remove that class. Yay. But there's a feature to
  267. Jake:kind of do that for you. So when you call start view transition, you can pass in types,
  268. Surma:Yeah.
  269. Jake:which are similar to classes. We keep running out of names for just like words you give us
  270. Jake:that come out at the other end of the API somewhere. And types, it just means you,
  271. Jake:you get a selector. I think it's like view transition, active view transition type.
  272. Jake:And you can use that as a pseudo class to hang the rest of your styles off.
  273. Surma:Oh, okay.
  274. Jake:You know, to say, right, oh, if it's this type of transition, then I want, you know,
  275. Surma:Yeah.
  276. Jake:capture these different elements and animate it in this different way.
  277. Jake:And I guess the nice thing about it is it removes that pseudo class for you
  278. Jake:once the transition is complete.
  279. Surma:I mean, these are always the things that I feel like
  280. Surma:when you build them yourselves,
  281. Surma:there is a weird code branch
  282. Surma:where then the class doesn't get removed
  283. Surma:and then everything gets in a jumble,
  284. Surma:so having this, like, baked in, done right,
  285. Surma:is really valuable.
  286. Jake:Yeah. And I do think actually there's a, if you're doing the class name thing yourself,
  287. Surma:Ah, yeah.
  288. Jake:I do think there's a race condition if another view transition comes in,
  289. Surma:Ah, yeah.
  290. Jake:before the other one ends. And I think the timing that you get to remove the class name is too late.
  291. Jake:So yeah, the types thing is like, I would definitely use the types thing
  292. Jake:now instead of the class name thing. But whatever.
  293. Surma:The amount of times I've had weird animations
  294. Surma:because if you press the back button twice
  295. Surma:just slowly enough that the first animation has started
  296. Surma:but not quick enough that...
  297. Surma:So slow that it has also fully ended
  298. Jake:Exactly.
  299. Surma:and then you have, like, two overlapping animations
  300. Surma:and, like, it's...
  301. Surma:You have to implement a whole state machine and everything
  302. Surma:and, yeah, it is such a convenient thing
  303. Surma:to not have to do yourself anymore.
  304. Jake:Yes, I agree. So yeah, small benefit, but it is a nice little, nice little feature. And that was
  305. Jake:that was Safari one, Safari technical preview that's in. So well, I was about, I got my words
  306. Surma:Safari 1?
  307. Surma:Safari 1.
  308. Jake:mixed up. It's like Chrome 1.2.5 and Safari technical preview. But yeah, so coming soon
  309. Jake:to Safari, but it's already shipped in Chrome. All right. This next one, this next one's a big
  310. Jake:one. I think Chrome 1.2.6, this landed in Safari 18.2, which is the next version that is cross
  311. Jake:document view transitions. So like, you know, you can do view transitions without JavaScript.
  312. Surma:Oh.
  313. Jake:We've wanted that, right?
  314. Surma:Yeah!
  315. Surma:So this is, like, non-spa, almost.
  316. Jake:Exactly. Yeah, you can do it like with entirely without JavaScript view transitions. The way it
  317. Surma:It's just, like, literally static sites I can...
  318. Surma:Eleventy!
  319. Surma:My Eleventy blog.
  320. Jake:works is both pages needs to be same origin right now. There might be ways of making it same sites,
  321. Jake:but they're not there yet. But yeah, two pages of the same origin. They both opt in via CSS rule.
  322. Jake:It's at view transition. And it's a, it's a block. And in there you put navigation call on auto.
  323. Surma:Oh, I thought you put yes.
  324. Surma:Yes, please.
  325. Surma:And that's the opt-in.
  326. Jake:Yes, please. That's happened before in the web platform,
  327. Jake:like autocomplete the autocomplete attributes accepts the values. Yes. And no,
  328. Surma:Not true, false!
  329. Surma:But yes.
  330. Jake:no, not true false. No, no, no. Because true false. And that's, oh, it's beautiful,
  331. Jake:isn't it? Because in the world of ARIA, you have ARIA visible, which is, yeah, ARIA hidden,
  332. Surma:Yes.
  333. Jake:actually it's ARIA hidden, which is set to true or false the string true or false,
  334. Jake:because it's an attribute. And then you've got like disabled or you've got the hidden attributes
  335. Surma:Mm-hm.
  336. Jake:in HTML, which is doesn't matter what the string value is. If you do hidden equals false,
  337. Jake:it gets hidden because it's the thing exists. So it's there. And then you've got autocomplete
  338. Jake:with yes, no values, which is, ah, yes, beautiful. What a beautiful platform we have.
  339. Jake:What a beautiful platform we have. I mean, I can kind of, the reason autocomplete did that is
  340. Surma:It is.
  341. Surma:Wonderful.
  342. Jake:because it's a truthy default, which you can't express with a Boolean attribute. Anyway, this
  343. Jake:is a tangent. Cross-document view transitions. That's what everyone wants to hear about.
  344. Jake:So yes, so you've got the navigation auto, and that means like on navigations that were
  345. Jake:started within the page. So like link clicks, form submissions, and then also like JavaScript
  346. Surma:I...
  347. Surma:I'm...
  348. Surma:I'm not sure what you're saying.
  349. Jake:triggered navigations will be a candidate for a view transition, but also back and forward button.
  350. Surma:I'm not sure what you're saying.
  351. Surma:I'm not sure what you're saying.
  352. Surma:What are you saying?
  353. Jake:Ah, the things which aren't included is the reload button and URL modification,
  354. Jake:like URL bar stuff, even if it lands same origin.
  355. Surma:That is genuinely exciting to me.
  356. Surma:Like, that's actually something where I
  357. Surma:may sit down and throw it at my blog just for the lols
  358. Surma:because it's also, like...
  359. Surma:It's one of...
  360. Surma:Such a classic case of progressive enhancement
  361. Surma:because, you know, if a browser doesn't understand it
  362. Surma:everything stays as it is.
  363. Jake:Exactly.
  364. Surma:Happy days.
  365. Jake:Yeah, absolutely. Yeah, it's on my to-do list. Add it to my blog. I started working on it on
  366. Surma:But if the browser does support it
  367. Surma:look at my spinning page while you navigate.
  368. Jake:a flight and then ran out of time and then never picked it up again, like so many little hack
  369. Jake:projects. But yes, it's something I really want to do. So there's a rule that your navigation
  370. Jake:has to be fast, and that means four seconds in Chrome.
  371. Surma:4 seconds is a lot of spinning, mate.
  372. Jake:Exactly. Oh, no, your transition can be as slow as you want, I think, but it means that the new
  373. Surma:Oh.
  374. Jake:document needs to be there within four seconds.
  375. Surma:There, as in loaded.
  376. Surma:It doesn't...
  377. Jake:Ready, ready to transition, which doesn't have to be too long.
  378. Surma:Not transition...
  379. Surma:Right.
  380. Surma:4 seconds seems lenient?
  381. Surma:What I...
  382. Surma:Oh, does that mean, like,
  383. Surma:I am on, like, 2G airplane WiFi
  384. Surma:that the transition will obviously not start
  385. Surma:until the document is ready?
  386. Jake:Well, so here's the thing. So when it comes to this, it doesn't prevent streaming. So you're...
  387. Surma:But if it doesn't get ready
  388. Surma:until 4 seconds
  389. Surma:then it goes to good old streaming in?
  390. Surma:No, but you wouldn't see it if you have a transition.
  391. Surma:Right?
  392. Jake:Ah, yeah, you could, because the new state is all like live, right? It's not just a screenshot.
  393. Jake:So your new state could be sort of rendering in,
  394. Jake:particularly things like images, which could be loading in.
  395. Surma:I assumed that
  396. Surma:I would obviously keep the new content
  397. Surma:off...
  398. Surma:Wait.
  399. Surma:The transition starts before the new document is ready?
  400. Surma:In a cross-document transition?
  401. Jake:Well, define ready is really the... Okay, good definition, actually. Well done.
  402. Surma:Dom ready.
  403. Surma:There's an event for that!
  404. Jake:So there is an event for that. So no, it's not. So a couple of other features have arrived.
  405. Jake:So you can do link rel equals expect, and then you can href for a local element.
  406. Surma:...
  407. Jake:So like, you know, hash, whatever, to point to an element.
  408. Surma:Like a sentinel that...
  409. Jake:Yeah, sure.
  410. Surma:As you mark as
  411. Surma:this is my marker for
  412. Surma:I'm ready?
  413. Surma:Oh, so this would basically allow you to be like
  414. Surma:I need to go until here
  415. Surma:to know that my above the fold
  416. Surma:is fully renderable.
  417. Jake:Yeah, exactly, exactly. Yeah, like my main content area or something like that.
  418. Surma:Clever!
  419. Surma:...
  420. Jake:And yes, and then, so in that tag, you also have blocking equals render.
  421. Surma:Did you say that's a link tag?
  422. Jake:Yes. Oh, that's a good question. I don't know for sure. It would have to be discovered.
  423. Surma:Does it have to be in the head?
  424. Surma:Because one thing that's always difficult with frameworks
  425. Surma:is...
  426. Surma:head stuff.
  427. Surma:Not...
  428. Surma:It's solvable, but, you know,
  429. Surma:just thinking out loud.
  430. Jake:I guess in the body element, you're running race conditions, right?
  431. Jake:Like, so there's a possibility that tag is not discovered by the time it
  432. Surma:...
  433. Jake:knows it needs to wait for it. You know what I mean?
  434. Jake:Like, if you put that at the bottom of your document, you run a high risk of it not being...
  435. Jake:It's kind of pointless, isn't it? Because you would then
  436. Jake:need another tag to tell it to wait for that tag.
  437. Surma:No, no, no, I think
  438. Surma:of course I would put it as high up as possible,
  439. Surma:but, you know, if you run like your
  440. Surma:your good old DIY
  441. Jake:Yes. It's interesting. I don't... I mean, my guess would be by default, it's a race condition in the body.
  442. Surma:static side generator that uses
  443. Surma:Preact, it's a lot easier to put something in the body
  444. Surma:than it is to put in the head.
  445. Surma:...
  446. Jake:I don't know if they've put in some code to say, like, once the head is passed, then that's it.
  447. Jake:I don't know which of those it is. It will be one of those, though, I bet.
  448. Jake:But yes, but you can also use blocking equals render on scripts and on style sheets as well.
  449. Surma:Nice!
  450. Jake:Yeah. I mean, blocking render is a risky thing for performance, but like you say,
  451. Jake:sometimes it is key to a transition to wait for a particular element to be there or
  452. Surma:...
  453. Jake:wait for a particular script to have loaded or something like that.
  454. Jake:So that's possible. And you also get, like, you get a page swap event
  455. Jake:on the old page just before it goes away and a page reveal event on the new page just as it arrives.
  456. Surma:Hmm...
  457. Jake:Because we already have page hide and page show, but they run at the wrong time.
  458. Jake:So they had to make their own new events. Page show in particular.
  459. Jake:Yeah. When do you think page show fires? Take a guess.
  460. Surma:Is this from the page lifecycle API?
  461. Jake:Yes. These page hide and page show came in around bfcache.
  462. Surma:Or is it even from before that?
  463. Surma:So page height, page show
  464. Jake:Yeah. Yes, exactly.
  465. Surma:is separate from visibility, right?
  466. Surma:Like just because a window is
  467. Surma:in the background or something
  468. Surma:probably does not file.
  469. Surma:...
  470. Jake:Yeah. Page hide and page show is like you've navigated away from this.
  471. Surma:Is it like when the document is actually
  472. Surma:about to be evicted from memory?
  473. Surma:Like so long off the screen
  474. Surma:but maybe still kept alive?
  475. Jake:Oh, no. Do we have an event for that? I can't remember if we did in the end.
  476. Surma:I wonder if that would be probably lifecycle API.
  477. Jake:I don't think we did. Yeah, it's lifecycle.
  478. Surma:Where you're like, oh, you now need to like
  479. Surma:store some of your stuff in local storage
  480. Surma:if you want to keep it around or something.
  481. Jake:The big issue here is the page show event, which like with bfcache, it fires at roughly the right
  482. Surma:...
  483. Jake:time. So, you know, you click back and it brings the page out of bfcache.
  484. Jake:The page show event fires. Everyone's happy.
  485. Jake:If you do a forward navigation and it's not bfcache, it has to load it from the network.
  486. Jake:Page show fires along with the onload event of the window.
  487. Jake:So that's all images have loaded,
  488. Jake:which I would argue the page has been showing for some time before that.
  489. Surma:Oh yeah.
  490. Jake:So, yeah. Oh, ages ago.
  491. Surma:Yeah, DomReady would have arguably been better.
  492. Jake:Oh, yeah. Dom ready would have been. Well, but still, you know, just tell me when it's shown.
  493. Surma:Still not ideal, but better.
  494. Jake:Yeah. Yeah. I would say once the old page is not showing anymore and the new one is
  495. Jake:has got a realm, you know, I guess there's always that issue of, well, it can't just be when it's
  496. Jake:got a realm because there needs to be enough JavaScript running for you to be able to listen
  497. Jake:to the event. Oh, you have to call start to get it.
  498. Surma:Unless you introduce something like
  499. Surma:I guess you can't, you know, with postMessage
  500. Surma:you can, there's actually like an implicit queue
  501. Surma:until an event listener is registered.
  502. Surma:Yeah.
  503. Jake:So the way it works is it's just before the first render is this new page reveal event.
  504. Surma:Right.
  505. Jake:Page swap is just before the last render.
  506. Jake:And that next render will be the final render of that page.
  507. Jake:And so this is where you can customise the transition with JavaScript.
  508. Surma:When you say just before the first render
  509. Jake:So you can like.
  510. Surma:like enough for me to like still
  511. Surma:muck about with positioning and
  512. Jake:Yep, that's exactly what it's for.
  513. Surma:nice. So before the first layout.
  514. Jake:And it's before the new state is captured in terms of the view transition.
  515. Surma:Brilliant.
  516. Jake:So you can use that time to go and add view transition name
  517. Jake:to particular things to set up your view transition types.
  518. Jake:And you get information about the navigation.
  519. Jake:You get the previous navigation object and the current one.
  520. Jake:So you can go, oh, this was a navigation.
  521. Jake:This was a transition from my article page to my home page.
  522. Surma:...
  523. Jake:So I'll do something in particular different because of that.
  524. Jake:So that's all there for you.
  525. Jake:So yeah, that's cross document view transitions.
  526. Jake:And yes, there is a question of can we do same site at some point,
  527. Jake:which would be useful for going from your thing.com to profile.thing.com or whatever.
  528. Surma:But I guess cross-origin is out of the question?
  529. Jake:Entirely cross-site would be out of the question, I think.
  530. Surma:...
  531. Jake:Or at the very least, it would be a very like a cut down version
  532. Jake:because you don't want it to be an avenue for sites to be sending data to each other.
  533. Surma:I wonder if, you know, if you could opt in via course
  534. Surma:or something, you know, if I say like
  535. Surma:hey, I'm cool to be transitioned in by
  536. Jake:It's been a while since I've paged this into my brain,
  537. Surma:domainlol.com
  538. Jake:but that opting in is fine.
  539. Jake:And that's what would have to happen even for the same site cases.
  540. Jake:I think the worry is where it's not the sites agreeing to it.
  541. Surma:...
  542. Jake:That's the problem.
  543. Jake:It's the user agreeing to it.
  544. Jake:That's the problem.
  545. Jake:So it's the privacy issue rather than security issue.
  546. Surma:Oh, you can make things look, yeah, okay.
  547. Jake:Yeah, it's about transferring data from about the user.
  548. Surma:Yeah, maybe.
  549. Jake:They keep trying to shut down all of these avenues of having sites
  550. Surma:...
  551. Jake:communicate that sort of stuff.
  552. Jake:And so it's just not wanting to introduce a new one of those.
  553. Surma:Hmm. Yes, yes, yes.
  554. Jake:All right.
  555. Jake:So far, it's all been stuff that's actually shipped in Chrome, at least.
  556. Jake:And it's in development in Safari, aside from the cross-origin stuff.
  557. Jake:But I wanted to talk, I had a little look around the CSS working group
  558. Jake:and about stuff that's kind of being worked on,
  559. Surma:...
  560. Jake:but hasn't kind of got to a full release yet.
  561. Jake:I'm going to start talking about things that have been developed the most
  562. Jake:through to things that have been developed the least, I think.
  563. Jake:So the one that is actually,
  564. Jake:I see an experimental implementation of this in Chrome.
  565. Jake:It's nested view transitions.
  566. Surma:Oh lord.
  567. Jake:When you have a view transition, you've given all of the things,
  568. Jake:your view transition name, and that creates these view transition groups.
  569. Jake:Those view transition groups are all siblings of each other.
  570. Surma:...
  571. Jake:So although your DOM is like a complex tree, the transition is flat.
  572. Surma:Uh-huh.
  573. Jake:And that's pretty useful because it means you can, like,
  574. Jake:animate something going from one container
  575. Jake:or appearing to go from one container to another,
  576. Jake:even though the container is like overflow hidden or whatever.
  577. Jake:So that flat tree is pretty good because it's just not a problem anymore.
  578. Jake:It's entirely flat.
  579. Jake:But sometimes you don't want that.
  580. Jake:You want your transitioning thing to be inside another thing,
  581. Surma:...
  582. Jake:which is transitioning.
  583. Jake:And so, and particularly when you have clipping involved,
  584. Jake:or that you want the thing to be transitioning up and down,
  585. Jake:but the outside thing is rotating or something like that.
  586. Jake:And doing that is too...
  587. Surma:Oh, so you want to like maintain
  588. Surma:like the relative positioning
  589. Surma:between elements sometimes, because by default
  590. Surma:currently that's all gone.
  591. Jake:Exactly.
  592. Jake:Exactly.
  593. Surma:...
  594. Jake:Yes.
  595. Jake:So that's the feature.
  596. Jake:So it's basically, you have view-transition-group.
  597. Surma:...
  598. Jake:In the same place, you would do view-transition-name.
  599. Jake:And you give it the name of another...
  600. Jake:Your container would have view-transition-name-container.
  601. Jake:And the thing inside it would have view-transition-group-container.
  602. Jake:And then it knows, ah, okay.
  603. Jake:So this view transition group is going to go inside that other view transition group.
  604. Surma:Gotcha.
  605. Surma:It's about position and scale then, right?
  606. Surma:Like if I scale up the container
  607. Jake:Yeah.
  608. Surma:all the children get scaled up, if I spin
  609. Surma:the container all the children inside
  610. Surma:get the same thing, but if I move the children
  611. Surma:they, yeah, do their movement but
  612. Surma:with the group parent, the container
  613. Surma:being the origin rather than the page.
  614. Jake:Yeah.
  615. Jake:So imagine you've got a container which has a list of items within it.
  616. Jake:Those items are reordering themselves
  617. Jake:while the container moves from one side of the screen to the other.
  618. Surma:Okay, cool.
  619. Jake:Yeah.
  620. Jake:So that grouping would help there,
  621. Jake:especially if you've got a particular easing on the outer container.
  622. Surma:...
  623. Jake:You don't want to have to then add that into all of the children elements,
  624. Jake:but you would only...
  625. Jake:Especially if the container has a very particular easing curve,
  626. Jake:whereas you want the things inside it to have a different easing curve.
  627. Jake:That becomes really difficult to do in the current model.
  628. Surma:And I can nest that
  629. Surma:multiple levels.
  630. Jake:Yes, you can.
  631. Surma:So basically edit with a view transition
  632. Surma:by default, all the hierarchy
  633. Jake:Yeah.
  634. Surma:you know from DOM is gone
  635. Surma:because you just basically have some
  636. Surma:free floating screenshots
  637. Jake:Exactly.
  638. Surma:and this kind of lets you rebuild a new
  639. Surma:hierarchy which can be completely
  640. Surma:independent from the DOM hierarchy.
  641. Jake:Exactly.
  642. Jake:And then you can give the outer view transition group overflow-clip to regain some clipping.
  643. Surma:Ah, yeah, that's very powerful.
  644. Jake:That's powerful.
  645. Jake:So yeah, I'm looking forward to that.
  646. Jake:There's definitely times I've not been able to use view transitions
  647. Jake:because that feature was missing.
  648. Jake:And then there's a series of little feature ideas for...
  649. Jake:So I mentioned before that if you're reordering a group of cards or something,
  650. Surma:...
  651. Jake:you have to give each one a view transition in card one, view transition in card two.
  652. Jake:I mean, you probably wouldn't give them card one, card two.
  653. Jake:You would give them some form of ID which represents the data that's in that card
  654. Jake:because it's not positional.
  655. Jake:You care about it because you can reorder the position,
  656. Jake:but you care about it in terms of the content that's in it.
  657. Jake:Very much like key when you're doing key in React, right?
  658. Jake:So you're keying each element.
  659. Jake:But what folks are looking at is,
  660. Surma:...
  661. Jake:is there a way we can do it without having to name each element manually?
  662. Jake:And so there's a few different proposals around this.
  663. Jake:One is, well, no, view transition name match-element is one.
  664. Surma:Is this the return of XPath?
  665. Jake:And this says element identity defines what's the same before and after.
  666. Surma:Identity as in ID?
  667. Jake:No, as in equals, equals, equals.
  668. Surma:Oh, wait, but how
  669. Surma:how would that work?
  670. Jake:Well, cross document, it doesn't.
  671. Surma:Ah, for spa it does though.
  672. Surma:I get you.
  673. Jake:Yes.
  674. Surma:If you take good care of your react
  675. Surma:elements, then yes, this could work
  676. Surma:very well.
  677. Jake:You've hit upon one of the things that I worry about with this feature.
  678. Jake:It seems to me that the CSS working group are very excited about this because it just works.
  679. Jake:And what I've been trying to tell them is it just doesn't.
  680. Jake:Like, I mean, they understand that it doesn't work cross document, right?
  681. Surma:...
  682. Jake:No one's under that illusion.
  683. Surma:Yeah.
  684. Jake:But view transitions right now are page transitions
  685. Jake:because they are scoped to the whole document.
  686. Jake:That might not always be true.
  687. Jake:We'll talk about that in a minute.
  688. Jake:But it's scoped to the whole document.
  689. Jake:You can only have one view transition happening at once.
  690. Jake:And yeah, the document is the scope.
  691. Jake:So they're page transitions.
  692. Jake:When I built my simple demos of view transitions, I hooked into the navigation API,
  693. Jake:which tells me when something's trying to do a navigation.
  694. Jake:I canceled the default.
  695. Surma:...
  696. Jake:And I went and got, I did a fetch request to the page, the target page, if it was same origin.
  697. Jake:And I got the HTML and I blatted it onto the page using innerHTML.
  698. Surma:Yeah.
  699. Jake:And that means match-element would not work for me in that case.
  700. Surma:No, exactly.
  701. Jake:Because even though my heading in this particular example,
  702. Jake:or my sidebar, was being recreated from scratch,
  703. Jake:even if it was visually identical, it's a new element.
  704. Jake:So match-element would not work for me.
  705. Jake:And then if I was using something like React,
  706. Surma:...
  707. Jake:then there is a greater chance that match-element would work.
  708. Jake:But I don't think most people know when it would work and when it wouldn't.
  709. Jake:Because it's all the dipping algorithm, right?
  710. Jake:It's an optimization, whether it reuses the element or whether it doesn't.
  711. Jake:You get some control over it with the key prop.
  712. Jake:But, you know, sometimes it will seem from the outside that React has decided,
  713. Jake:no, I'm just going to recreate that element.
  714. Jake:Because it's not in one of those situations where I can reuse it.
  715. Surma:Yeah, and with frameworks you could
  716. Surma:even be in a world where in
  717. Surma:the current release it happens
  718. Surma:to work on the next release.
  719. Surma:They have decided to like do
  720. Surma:like buffer swapping almost like
  721. Surma:element swapping where they prepare the next
  722. Jake:Yes.
  723. Surma:elements that is replacing
  724. Surma:the old element and they look the same.
  725. Surma:They do the same, but they're not the same
  726. Surma:in terms of referential equality.
  727. Surma:It seems
  728. Surma:it seems like a bit like a foot gun.
  729. Surma:Yeah, it's it's it feels a bit like
  730. Surma:it looks like it's going to be on paper, but it doesn't
  731. Surma:hold up in reality unless you hand craft
  732. Surma:both your DOM and your animations.
  733. Jake:Yeah, so the original proposal was just to call this auto.
  734. Jake:And I'm glad they haven't.
  735. Jake:Because, again, I agree with you.
  736. Jake:And I have used the word foot gun in the CSS working group multiple times
  737. Jake:trying to tell them that this is not a silver bullet, right?
  738. Jake:This is not the solution to all problems.
  739. Surma:Yeah.
  740. Jake:And I think they've been swayed by a lot of CodePen demos
  741. Jake:of, like, rearranging a group of cards, like, you know, randomizing a list.
  742. Surma:...
  743. Jake:And it's like, oh, I just want to, you know, I just wanted to figure it out.
  744. Jake:And it's like, yeah, it does work in that case.
  745. Jake:But I don't think it scales to actual use cases.
  746. Jake:Those demos of reordering cards, I don't think they work in production
  747. Jake:as well as people think.
  748. Jake:And I know this because at Shopify, we couldn't make it work.
  749. Surma:Yeah.
  750. Jake:And so the reason we couldn't make it work is, you know, we got so far with it.
  751. Surma:...
  752. Jake:We had, like, an interface where it was, like, a filtering.
  753. Jake:And it would reorder, like, a list.
  754. Jake:But the box that controlled the filtering slightly overlapped the list,
  755. Jake:which meant it's like, okay, so now that box that controls the filtering,
  756. Jake:we need to give that a view transition name
  757. Jake:so it can sit on top of the things moving around in the list.
  758. Surma:Yeah, it has to be its own screenshot.
  759. Jake:Has to be its own screenshot.
  760. Jake:And then, right, okay, we solved that.
  761. Jake:But then the fact that that is not interactive during the animation
  762. Surma:...
  763. Jake:became really apparent and became a bug.
  764. Jake:So what we really wanted was scoped view transitions.
  765. Jake:Like, we really want a way to say,
  766. Jake:I want a view transition that is limited to this element on the page
  767. Surma:Yeah.
  768. Jake:rather than being for the whole document.
  769. Jake:And then you can just have your little, you know,
  770. Jake:your sorting, filtering UI overlaying all over the top just fine.
  771. Jake:Why not?
  772. Jake:Because the view transition is limited to the list.
  773. Surma:It sounds a bit like the first step is being
  774. Surma:taken with a nested view transition almost right
  775. Surma:like it's a similar pattern.
  776. Jake:Ah, well, the nested one is more about, like,
  777. Jake:the grouping of the pseudo element groups,
  778. Jake:whereas this is taking that whole tree
  779. Jake:and putting it onto an element rather than on the HTML element.
  780. Jake:No, but those two features would work together, for sure.
  781. Surma:Yeah.
  782. Jake:And then in that case, I think match element becomes more interesting.
  783. Jake:But again, it's still a bit of a bit of a foot gun.
  784. Jake:I feel it's something people will go, oh, this will be handy.
  785. Surma:...
  786. Jake:And then they'll use it and then find that,
  787. Jake:like, their animation only kind of works sometimes.
  788. Jake:And then fall back to using view transition name because that's the reliable one.
  789. Surma:Here's maybe a curveball
  790. Surma:for the view transition
  791. Surma:name where
  792. Surma:I give a DOM element a name.
  793. Surma:Can I use the
  794. Surma:attribute function?
  795. Jake:Yes.
  796. Jake:Now, here, if I've got, you're good at this.
  797. Jake:This is the next thing I wanted to talk about.
  798. Jake:So this is something else they're looking at,
  799. Jake:is being able to use the attribute function.
  800. Jake:So you can bring an ID or a whatever.
  801. Surma:...
  802. Surma:Well, the thing is
  803. Surma:we are talking about handcrafted DOM.
  804. Jake:So you can bring an ID or a whatever.
  805. Surma:This will probably work fine.
  806. Surma:But in framework land
  807. Surma:the problem is you're not necessarily controlling
  808. Surma:the DOM creation and modification.
  809. Surma:But whenever you render lists
  810. Surma:in most frameworks, you often do set
  811. Surma:a key property so that the framework
  812. Surma:knows which
  813. Surma:elements correspond to each other.
  814. Jake:But that doesn't fall down to a attribute.
  815. Surma:No, but you could.
  816. Jake:I would say it's like, well, you just do an inline style
  817. Jake:and give it a view transition name.
  818. Surma:...
  819. Jake:This is another feature where I'm like, cool.
  820. Jake:I'm glad you'll be able to do this.
  821. Jake:But I do not think it's as useful as people think it's going to be.
  822. Surma:Well, at least it's a half decent
  823. Surma:escape hatch I feel like
  824. Surma:because if I take
  825. Surma:infinite scroller
  826. Surma:off the shelf components
  827. Surma:right, and I do not
  828. Jake:Yeah.
  829. Surma:exactly control
  830. Surma:how these individual items
  831. Surma:are rendered to the DOM
  832. Surma:but it turns out there is
  833. Surma:maybe a data attribute on them.
  834. Jake:Yes.
  835. Surma:Then being able to do
  836. Surma:use the attribute function to
  837. Jake:I like that.
  838. Surma:link to that data attribute
  839. Surma:seems useful.
  840. Jake:Yes.
  841. Jake:And I think exactly what you said is the right way I would go about it.
  842. Jake:So it's by having a special data attribute to control this
  843. Jake:or some other attribute on a custom element, whatever.
  844. Jake:The thing that's being thrown around the CSS working group is using the ID attribute.
  845. Surma:...
  846. Jake:So specifically, the idea that's coming from a couple of folks in the group
  847. Jake:is that view transition name auto will use the ID attribute if it's there.
  848. Jake:Otherwise, it will fall back to match element.
  849. Surma:But that's not how IDs are used.
  850. Surma:Right? Like if I go from
  851. Surma:one view to the next and I have
  852. Jake:So
  853. Surma:my list of albums
  854. Surma:and I click an album and on the next page
  855. Surma:it's about the album
  856. Surma:the ID on one
  857. Surma:would be big as important main album
  858. Surma:cover and the other one is a list item
  859. Surma:I probably wouldn't even have an ID.
  860. Jake:yeah, for that particular case, it doesn't work at all.
  861. Jake:But for things like header and sidebar, it might.
  862. Jake:I mean, I don't think people use IDs that all that often anymore.
  863. Surma:Yeah...
  864. Jake:But it is a reasonable way to say, right, if two things have the same ID,
  865. Jake:it's fair.
  866. Jake:You have a reasonable confidence of saying they're the same.
  867. Surma:I mean
  868. Surma:that's true. Like if they have the same ID
  869. Surma:they probably have the same
  870. Surma:identity. That's true.
  871. Surma:I feel like, why limit it to ID?
  872. Surma:With the attribute function
  873. Jake:Yes, indeed.
  874. Surma:I could say ID or anything else.
  875. Jake:What I don't like about this proposal, I think my biggest issue with it is
  876. Jake:it means like view transition name auto.
  877. Jake:It's like, oh, that's just going to do it all for me.
  878. Jake:I'll use that.
  879. Jake:But it's mixing in this match element behavior,
  880. Jake:which we've already decided between the two of us is a foot gun.
  881. Surma:Yeah...
  882. Jake:But you don't know that's what you're getting,
  883. Jake:because it's kind of just hidden behind the word auto.
  884. Jake:And also, one pattern we see on like big websites is this pattern where
  885. Surma:...
  886. Jake:you click on a thing, and it will do an SPA navigation,
  887. Jake:unless it knows that there's an update to the site,
  888. Jake:in which case it will do a full navigation to pick up the new version of the site,
  889. Jake:kind of almost in secret.
  890. Jake:It's a nice little thing where it doesn't have to show you,
  891. Jake:by the way, there's an update available, press here.
  892. Jake:It just kind of gives you the update automatically.
  893. Surma:Hmm...
  894. Jake:And it's nice that you can have view transitions in your same document,
  895. Jake:but then you could have the same view transition cross document in that case.
  896. Surma:...
  897. Jake:But this means if you're using auto and you test it,
  898. Jake:it seems to work because, I don't know,
  899. Jake:the ID is pretty good and the match element's working well.
  900. Jake:In that cross document case, it's going to all fall down
  901. Jake:because match element isn't going to work.
  902. Jake:It's going to seem to kind of work
  903. Jake:because your things with IDs are going to work,
  904. Jake:but the rest is all going to behave weirdly.
  905. Jake:And it's going to be like, oh, that half worked.
  906. Jake:Great. That's the worst kind of debugging, right?
  907. Surma:...
  908. Jake:Now to find out which things didn't work properly and which ones did.
  909. Jake:Yeah, it seems like a foot gun to me.
  910. Jake:So I don't like that.
  911. Jake:I like that match element exists,
  912. Jake:and I like that I could get the thing from an attribute.
  913. Jake:I don't know how often I would use those features personally.
  914. Jake:Maybe with scoped view transitions, match element a bit more,
  915. Jake:but we're nowhere near that yet.
  916. Jake:It's just a kind of, you know, sketch right now.
  917. Jake:So I'm hoping we can block this like auto thing.
  918. Surma:...
  919. Jake:Otherwise, you know, we're going to have,
  920. Jake:I think we'll end up writing documentation saying,
  921. Jake:hey, if you transition name auto is a thing, don't use it.
  922. Jake:It's rubbish. It's rubbish and confusing,
  923. Surma:...
  924. Jake:which would be sad, but there you go.
  925. Surma:...
  926. Surma:Yeah, I hope that if that is
  927. Surma:you know, if it's not just
  928. Surma:you, but it's not because I tend to agree
  929. Surma:so it's at least the two of us
  930. Surma:if there's some more people who agree
  931. Surma:with that sentiment then maybe the
  932. Surma:working group
  933. Surma:might cause correct. That'd be the hope.
  934. Surma:It would be really sad to see something
  935. Surma:launch that is a foot gun.
  936. Jake:It would be sad to see something launch that's a foot gun.
  937. Jake:But unfortunately, I'm adding this note in after we recorded
  938. Jake:to let you know that Safari in Safari 18.2 just went ahead
  939. Jake:and shipped view transition name auto,
  940. Jake:even though it was being actively disputed in the CSS working group.
  941. Jake:It's not great, but it is something that happened.
  942. Surma:...
  943. Surma:...
  944. Jake:Happy days.
  945. Jake:Anyway, back to the episode.
  946. Surma:...
  947. Surma:...
  948. Jake:I was looking around at other auto values in CSS,
  949. Surma:...
  950. Jake:and I think some of them like image height auto
  951. Surma:...
  952. Surma:...
  953. Jake:has, you know, given us aspect ratio on images recently.
  954. Surma:...
  955. Surma:...
  956. Surma:I think the only time I ever type auto
  957. Surma:is margin zero auto.
  958. Surma:...
  959. Jake:Right. Let's talk about that.
  960. Surma:...
  961. Jake:I think that's badly named because what does that mean?
  962. Surma:...
  963. Surma:It is!
  964. Surma:Oh no! I've activated
  965. Surma:your tweet trap card!
  966. Surma:...
  967. Jake:Yes, I think it's.
  968. Surma:...
  969. Jake:I think seriously, if that feature was invented now,
  970. Surma:...
  971. Surma:...
  972. Jake:you would do margin zero one FR to mean I want the margin
  973. Surma:...
  974. Surma:...
  975. Jake:to be a fraction of the remaining space.
  976. Surma:...
  977. Surma:Yeah, but that wasn't a thing!
  978. Surma:That came with flex.
  979. Jake:No, no, no.
  980. Jake:I realized that, but I said that's why I'm saying if we did it now,
  981. Surma:That wasn't a thing. That unit was on...
  982. Surma:...
  983. Jake:but OK, let's say they're inventing it back in a day.
  984. Surma:...
  985. Surma:...
  986. Jake:What if it was margin zero distribute, you know,
  987. Surma:...
  988. Surma:...
  989. Jake:like name it something that describes what it does.
  990. Surma:...
  991. Surma:...
  992. Surma:But I think auto was already a keyword
  993. Surma:that we're not gonna invent. I think at that time
  994. Surma:it was just like, just use one of the keywords
  995. Surma:we already have. We don't want to fix the parser.
  996. Surma:...
  997. Jake:Well, that's bad for the future, isn't it?
  998. Surma:...
  999. Jake:So I don't know if that's the reason.
  1000. Surma:...
  1001. Surma:...
  1002. Jake:I suppose.
  1003. Jake:But yeah, maybe that's the case.
  1004. Surma:...
  1005. Surma:...
  1006. Jake:Maybe it was just not wanting to have extra words in there.
  1007. Surma:...
  1008. Surma:...
  1009. Surma:...
  1010. Jake:Yeah, but it's only sometimes the thing you want, right?
  1011. Surma:...
  1012. Surma:...
  1013. Surma:...
  1014. Jake:It's anyway.
  1015. Surma:...
  1016. Jake:Yes. OK.
  1017. Jake:I hope that all turns out OK, but it's, you know, if it doesn't,
  1018. Surma:...
  1019. Surma:...
  1020. Jake:then we can, you know, it's down to dev rel people
  1021. Surma:...
  1022. Jake:to just guide developers away from the foot guns.
  1023. Surma:...
  1024. Surma:...
  1025. Jake:Whatever, whatever.
  1026. Surma:...
  1027. Jake:It'll be fine.
  1028. Surma:...
  1029. Jake:Yeah, I mean, that's pretty much we've been talking long enough.
  1030. Surma:...
  1031. Jake:There are a few more features, but they're smaller ones.
  1032. Surma:...
  1033. Jake:So we can maybe revisit this as they become sort of more real proposals.
  1034. Surma:...
  1035. Surma:...
  1036. Surma:...
  1037. Surma:...
  1038. Jake:But that's kind of where we're at.
  1039. Surma:...
  1040. Jake:I think there's a lot to be excited about.
  1041. Jake:I think the biggest one is those scoped view transitions for single page apps.
  1042. Surma:...
  1043. Surma:...
  1044. Surma:...
  1045. Surma:...
  1046. Surma:...
  1047. Surma:...
  1048. Surma:...
  1049. Surma:...
  1050. Surma:...
  1051. Surma:...
  1052. Jake:Absolutely.
  1053. Jake:Yes.
  1054. Jake:Yeah, particularly the ones that have already shipped, like CrossDocument.
  1055. Surma:...
  1056. Surma:...
  1057. Surma:...
  1058. Surma:...
  1059. Surma:...
  1060. Surma:...
  1061. Surma:...
  1062. Jake:Our ex-colleague Brahmus is the one who wrote the CrossDocument view transitions guide,
  1063. Surma:...
  1064. Jake:I guess.
  1065. Surma:...
  1066. Jake:It's really good.
  1067. Jake:I was able to lead on that to kind of double check some of the content here as well.
  1068. Surma:...
  1069. Surma:...
  1070. Jake:So I will link to that and a bunch of other CSS issues and stuff.
  1071. Surma:...
  1072. Jake:So yeah, go and play with that.
  1073. Surma:Nice
  1074. Jake:I think it's great to see that this stuff hasn't just shipped half a thing.
  1075. Surma:...
  1076. Surma:...
  1077. Surma:...
  1078. Jake:It's done the thing of minimum viable product,
  1079. Surma:...
  1080. Jake:but it is being actively worked on in quite a significant way, which is great for the web.
  1081. Surma:...
  1082. Surma:...
  1083. Surma:...
  1084. Jake:All right.
  1085. Surma:...
  1086. Jake:That's all I got.
  1087. Jake:Should we go away now?
  1088. Surma:...
  1089. Surma:...
  1090. Surma:...
  1091. Surma:...
  1092. Jake:I think so.
  1093. Surma:...
  1094. Jake:All right then, mate.
  1095. Surma:...
  1096. Jake:Nothing left to say except...
  1097. Surma:
  1098. Surma:...
  1099. Jake:Happy next time!
  1100. Surma:...
  1101. Jake:Bye!
  1102. Surma:...
  1103. Surma:...
  1104. Surma:...
  1105. Surma:...
  1106. Surma:...
  1107. Surma:...
  1108. Surma:...
  1109. Surma:...
  1110. Surma:...
  1111. Surma:...
  1112. Surma:...
  1113. Surma:...
  1114. Surma:...
  1115. Surma:...
  1116. Surma:...
  1117. Surma:...
  1118. Surma:...
  1119. Surma:...
  1120. Surma:...
  1. New View Transition Stuff

    New View Transition Stuff

    49mins
  2. TC39 Roundup Drama Edition Part II: JS0 and JSSugar

    TC39 Roundup Drama Edition Part II: JS0 and JSSugar

    31mins
  3. TC39 Roundup Drama Edition Part I: Shared Structs

    TC39 Roundup Drama Edition Part I: Shared Structs

    30mins
  4. More build tools: Nix

    More build tools: Nix

    41mins
  5. The new stylable <select> element

    The new stylable <select> element

    45mins
  6. Chrome's new LLM AI API OMG

    Chrome's new LLM AI API OMG

    38mins
  7. Chrome’s secretly installed extensions

    Chrome’s secretly installed extensions

    29mins
  8. Are web components worth it?

    Are web components worth it?

    43mins
  9. Why Source Maps don’t always work

    Why Source Maps don’t always work

    42mins
  10. Putting React In The Browser

    Putting React In The Browser

    43mins
  11. Canvas-based Web Apps

    Canvas-based Web Apps

    46mins
  12. The Apple PWA Ban

    The Apple PWA Ban

    51mins
  13. TC39 Roundup and Bevy’s ECS

    TC39 Roundup and Bevy’s ECS

    1h20mins
  14. The Big Build Bool Bonanaza II

    The Big Build Bool Bonanaza II

    1h18mins
  15. WebGPU and Browser Ideologies

    WebGPU and Browser Ideologies

    1h18mins
  16. From the Archive — Changing jobs, Deno, and optimizing animations

    From the Archive — Changing jobs, Deno, and optimizing animations

    57mins