Latest / Coffee with Developers / Is CSS Catching Up To Flash? - Bramus Van Damme

Transcript

Is CSS Catching Up To Flash? - Bramus Van Damme · Coffee with Developers

• 0:05
  SPEAKER_00: Hello and welcome to another We Are Developers Live.
• 0:07
  SPEAKER_00: We're here with Bramus van Damme this time from Google, and you are a Google DevRel.
• 0:11
  SPEAKER_00: We thought about getting somebody in that I just keep stumbling over when I collect things for the Dev Digest newsletter.
• 0:19
  SPEAKER_00: He's joined us at the Congress in Berlin this year as well.
• 0:22
  SPEAKER_00: He's not coming, sadly enough, to San Jose next week.
• 0:25
  SPEAKER_00: But if you want to come, uh there are still tickets available, and we're gonna have a code for you, half price off later on in the show.
• 0:31
  SPEAKER_00: Now, Bramus, uh Bramus van Damme, Google DevRel at Google, where are you based and what do you do?
• 0:37
  SPEAKER_01: Um hi, Bramis.
• 0:38
  SPEAKER_01: I'm from Belgium.
• 0:40
  SPEAKER_01: Um, so it's it's a tiny country in Europe, in the middle of Europe.
• 0:44
  SPEAKER_01: Um, and I uh am a member of the Chrome DevRel team uh indeed at Google, and I mainly work on uh CSS and UI related features, um, stuff that you might have seen, like it's it's all the visual things like um scroll-driven animations, view transitions, um that type of thing.
• 1:00
  SPEAKER_01: Um if you read about it, probably I wrote an article about it, or I helped people out, like building the demo.
• 1:07
  SPEAKER_01: Um yeah, it's it's all visual stuff, um, stuff that we needed, bigger features, like the ones I mentioned, but also smaller features like like CSS Random, for example.
• 1:16
  SPEAKER_01: It's it's coming to Chrome uh soon.
• 1:17
  SPEAKER_01: So yeah, keep an eye out on that one.
• 1:20
  SPEAKER_00: I mean, you got View.js uh view transitions, and do you have React transitions as well and jQuery transitions, or is it just classic joke?
• 1:29
  SPEAKER_01: Uh but uh speaking of uh and this is news that that people might have missed.
• 1:32
  SPEAKER_01: Um React supports uh supported view transitions in their canary build, and I think as of last week or the week before, they shipped it to React stables, so you can use the view transition component in React without needing to run a canary version of uh React, which is amazing news.
• 1:48
  SPEAKER_00: Okay, that's good, yeah, because I mean that will get rid of a lot of code that's unnecessary.
• 1:52
  SPEAKER_00: And I think I mean uh jQuery just is 20 years old this year for the for uh and had his birthday just recently, and it's just not going away still.
• 2:00
  SPEAKER_00: It's just fascinating to see how the platform is has evolved so much and is so useful now that we don't need a lot of these uh uh uh things anymore, these these polyfills, these libraries, but we have a whole generation of developers that are basically grown up uh using them and being dependent on them, that even have looked at the standards yet.
• 2:21
  SPEAKER_00: So that's a really uh tricky problem, I think.
• 2:24
  SPEAKER_00: And we're gonna come back to that in a second when we go more into detail about what you want to do.
• 2:28
  SPEAKER_00: When I asked people, uh when I told people that you're gonna be on a show, uh the biggest question, of course, like uh was that most people wanted to know is like, uh, how is Jean-Claude and when is his next movie coming out?
• 2:40
  SPEAKER_01: So uh my uncle is doing fine.
• 2:42
  SPEAKER_01: Um he just sent me a text earlier today.
• 2:45
  SPEAKER_01: No, no.
• 2:45
  SPEAKER_01: Um so he is not my uncle.
• 2:47
  SPEAKER_01: Maybe story time.
• 2:48
  SPEAKER_01: So his last name is not Van Damme.
• 2:51
  SPEAKER_01: He changed it to sound more tougher.
• 2:53
  SPEAKER_01: His real name is Van Warenbech.
• 2:55
  SPEAKER_01: And it got him into trouble because he he so he's a martial artist, a martial arts uh fighter that movies.
• 3:01
  SPEAKER_01: Um, and when they when he started making moves, they they looked him up, they looked like okay, this Jean-Lord Van Damme, and they were like, Well, dude, we can't find like any fight track rec uh track record of you, like you you don't have it, like you're a fraud.
• 3:12
  SPEAKER_01: So then he had to explain, like, no, but my real name isn't Warenberg.
• 3:15
  SPEAKER_01: And then they looked up his name, they found like one official match in like an official competition, which he lost.
• 3:21
  SPEAKER_01: So maybe he still is maybe a fraud, but yeah.
• 3:26
  SPEAKER_00: Well, I mean, the bigger problem was pronouncing his name, wasn't it?
• 3:29
  SPEAKER_00: Like, I mean, Pandam is much easier that way.
• 3:31
  SPEAKER_00: Like, I like the way that you said like he's a martial artist and he does acting, and like it's kind of harsh, but also not far away from the truth.
• 3:40
  SPEAKER_00: Although I heard that the documentary about him that JVD is supposedly really, really hilarious.
• 3:47
  SPEAKER_01: Oh, I I don't know.
• 3:48
  SPEAKER_01: I he hasn't sent me a copy yet.
• 3:50
  SPEAKER_01: Maybe I should ask him for one.
• 3:52
  SPEAKER_00: Yeah, I think it's just him on his porch talking about his life or something.
• 3:55
  SPEAKER_00: It seems to be like a very bizarre thing, but yeah, it's uh it's it's fascinating to see.
• 4:00
  SPEAKER_00: But then it's interesting how all these action stars came back, and then the whole like uh dispensables series came out, and I'm like, oh, that's a fun joke, that's a good thing to have, and then they made four movies out of it, and you're like, why does everything have to be cooked out to become unnecessary?
• 4:16
  SPEAKER_00: I mean, why are there seven Shrek movies?
• 4:18
  SPEAKER_00: The first one was funny, and that was it.
• 4:21
  SPEAKER_00: Like, it was just very bizarre.
• 4:23
  SPEAKER_00: But let's go to some topics that people want to talk about before it then goes blurred off again.
• 4:29
  SPEAKER_00: Um so um let's talk about your stuff.
• 4:34
  SPEAKER_00: Uh so the thing that cracked me up the most was that thing that you sent the other day, uh, which was Canvas page flip.
• 4:40
  SPEAKER_00: And um it's basically it's uh it's the flip animation of pages that we know from Google Books, for example.
• 4:49
  SPEAKER_00: And I did not know that there was a flash component like that back then, because I I missed that completely.
• 4:55
  SPEAKER_00: But you wrote that you actually wrote the ActionScript component back then, and now you're happy that you converted to like proper uh HTML, right?
• 5:03
  SPEAKER_01: Yes, so so maybe one thing to clarify um I didn't write the the flash component back in the day, so that was in 2006.
• 5:09
  SPEAKER_01: I was a young uh man, just fresh out of college on my first job, which was a newspaper uh publishing company that also did web on the site.
• 5:18
  SPEAKER_01: So we wanted to like have our newspaper on the website.
• 5:22
  SPEAKER_01: Um I knew a bit of coding and I just found like this this action script component that you could just like drop into your fashion file and hey, you have a page flip uh interface.
• 5:31
  SPEAKER_01: I understood nothing of the math, but like everything that I saw back then, like it was like, oh cool, this is cool.
• 5:38
  SPEAKER_01: And now with HTML and Canvas, I was like, oh holy cow, like we can recreate this on the web because with HTML and Canvas, we can have uh the canvas do the 3D folding while actually showing the HTML content inside.
• 5:50
  SPEAKER_01: So everything that you see here, like the text that is being flipped to it's actual uh markup that is being flipped.
• 5:56
  SPEAKER_01: So um I still don't understand um anything of the math.
• 6:00
  SPEAKER_01: It it's still um very vague to me, but there there is an article.
• 6:04
  SPEAKER_01: There is an article out there that like describes all the math from from it.
• 6:07
  SPEAKER_01: So it's like okay, hey, Google anti-gravity, like this is HTML in Canvas.
• 6:12
  SPEAKER_01: Here's a document with all the math that like describes it, like make me a web component, and then a few nutches later, like this this came out of it.
• 6:20
  SPEAKER_01: So yeah.
• 6:21
  SPEAKER_00: And the big thing, of course, is that this is proper markup, so it's indexable, it gets readable by agents, it's uh Daniel playing with your microphone again.
• 6:29
  SPEAKER_00: Uh uh making you're making strange sounds.
• 6:33
  SPEAKER_00: I'm just saying.
• 6:34
  SPEAKER_01: I'm also hearing yang, yang the cable.
• 6:40
  SPEAKER_00: Yeah, you seem like is there a cat below or something?
• 6:43
  SPEAKER_00: Or I don't know.
• 6:44
  unknown: No.
• 6:45
  SPEAKER_00: Yeah, the good thing is this is proper markup, so agents can can read it, screen readers can have it, people can see it, and you can highlight it.
• 6:52
  SPEAKER_00: But I showed you a video that when I tried it in like Chrome Canary and I highlighted one page, it actually highlighted the other.
• 6:59
  SPEAKER_00: That's a canary bug, right?
• 7:00
  SPEAKER_01: Or that that that is fixed uh by now.
• 7:03
  SPEAKER_01: So the thing is HTML and Canvas, um yeah, Google, we came up with it.
• 7:07
  SPEAKER_01: Uh now, of course, it needs to go through the standardization process.
• 7:11
  SPEAKER_01: Um, and other browser vendors, so people from Apple, people from Mozilla, also have their input on it.
• 7:17
  SPEAKER_01: Um, so the the API that we currently have behind uh a feature flag or an origin trial, um it is uh like not shipped to stable yet, so we still have time like to actually change things based on the input from developers out there, but also the other browser vendors.
• 7:32
  SPEAKER_01: And right now we're at this moment in time where um we're about to update the implementation, so it's already been updated in Canary to have like slightly different API shapes, like some functions got renamed or like require an extra argument and so on.
• 7:46
  SPEAKER_01: So what when you tested it in Chrome Canary, it was like half of the new stuff was already in Canary, but then the other half wasn't.
• 7:52
  SPEAKER_01: But by now, but by now it is.
• 7:55
  SPEAKER_01: Okay, so you can properly select the text, you you can um translate it, whatever, like yeah, because like you say, it's it's it's markup.
• 8:02
  SPEAKER_00: Yeah, I mean this this kind of interface makes most sense on a touch device.
• 8:06
  SPEAKER_00: That's why I liked.
• 8:07
  SPEAKER_00: I mean, when Google Pay when Google Books came out with it, I'm like, oh, this is cool.
• 8:11
  SPEAKER_00: I can I can flip the page, and like this is really uh this really feels natural kind of thing.
• 8:17
  SPEAKER_00: Uh interestingly enough, here like you've got the Hic PageFlip page.
• 8:21
  SPEAKER_00: You could have used sections for that, right?
• 8:25
  SPEAKER_01: Yeah, probably could have, yeah.
• 8:26
  SPEAKER_01: Um, but I yeah, um so there's the the HIC page flip uh component, which is like the wrapper component, and then every page um in there, a direct child is an HIC page flip page.
• 8:38
  SPEAKER_01: Um there's some magic happening on it, like uh it is being set up as a container um to do some some scaling and whatnot.
• 8:46
  SPEAKER_01: But uh yeah, probably could have been a section as well.
• 8:48
  SPEAKER_01: Yeah, but um file a PR on the engine.
• 8:53
  SPEAKER_02: What's the 2D engine in terms of Chris?
• 8:55
  SPEAKER_02: If you can just go up to that bit there, yeah.
• 8:57
  SPEAKER_02: Um I just want to differentiate.
• 9:00
  SPEAKER_01: Yeah, so so um when you do a a real folding, like a real fold in 3D, you can see like the pages is getting curled up.
• 9:10
  SPEAKER_01: Um, but you can also like totally fake it by doing just a 2D clip.
• 9:13
  SPEAKER_01: And you you have an HTML component, it's already out there, uh, that that doesn't use HTML in Canvas.
• 9:19
  SPEAKER_01: Yeah, it's not gonna work here because um you you don't have to flag enabled um on on uh your browser right now.
• 9:26
  SPEAKER_01: Um but yeah, so so you can totally um recreate a uh fake page fit by basically just like putting um the layer on your document and then clipping out the content, so just like just cutting off something, and that is the 2D engine, which is like a faked 3D effect.
• 9:41
  SPEAKER_01: And if you then add like a subtle shadow above it, it looks like 3D, but if you pay close attention to it, like you can tell it's not real.
• 9:49
  SPEAKER_01: Um you can really see if if you're like folding text um over, um like here.
• 9:53
  SPEAKER_01: Um yeah, here you can switch between so if you move it all to the right, yeah, Chris.
• 9:57
  SPEAKER_01: Yeah, so you got the drop shadow here, and you don't have the drop shadow.
• 10:00
  SPEAKER_03: Yeah, yeah, yeah.
• 10:01
  SPEAKER_00: Yeah, so the shadow is on the wrong side.
• 10:05
  SPEAKER_01: Yeah, that's the proper 3D.
• 10:12
  SPEAKER_01: And that is how you can like already achieve it on the web today.
• 10:15
  SPEAKER_01: Like you can you can just like put stuff on a canvas and clip it out or transform a div or what whatever, uh, but it's still be faked.
• 10:22
  SPEAKER_01: And then the real 3D engine is what HML and Canvas here unlocks.
• 10:27
  SPEAKER_00: And I mean that's the the real cool thing about that is just I mean, just the calculation of a drop shadow when you did that by hand before we had Canvas and CSS, it was just like it's that was always like my my test run how fast a computer is by doing drop shadows on huge things in Photoshop, and then finding out that the thing is slowing down and it's it's really it's still super expensive, but browsers cache that that problem away from us right now as well.
• 10:53
  SPEAKER_00: You can also see the 3D uh bending into the into the uh into the depth on the 3D one, and in the 2D one, it's just a turn and a clip.
• 11:02
  SPEAKER_00: So that's basically the main difference there.
• 11:05
  SPEAKER_00: But yeah, the the the uh Chris Luke's the the anatomy of a page curl.
• 11:10
  SPEAKER_00: I mean, the other thing, of course, the fun thing is that every designer freaking hates it.
• 11:15
  SPEAKER_00: Like the page curl as it in a logo is like the worst thing we've done in the 1980s.
• 11:20
  SPEAKER_00: Like you should not ever do that again.
• 11:22
  SPEAKER_00: It's a bit like picking blue as the background color because nobody can complain about it.
• 11:27
  SPEAKER_01: But so this page that you have open right here, this is the document that I basically fed into uh Google Anti-Gravity.
• 11:33
  SPEAKER_01: It said, like, hey, here's the math, like implement it.
• 11:36
  SPEAKER_01: I don't care how, but like do it for me.
• 11:39
  SPEAKER_01: And uh the components came out of it, yeah.
• 11:42
  SPEAKER_00: Yeah.
• 11:43
  SPEAKER_00: It's interesting though that I see a lot of people releasing components now and then actually releasing them as npm packages, which kind of is a weird idea because you have HTML, CSS, and JavaScript as a as a HTML as an NPM component, but as we can now introduce them in a script tag without actually having to worry about the rest, it's it's not that that weird an idea.
• 12:05
  SPEAKER_00: But when we did the uh when we did the open web manifesto, we basically said like we don't want magic, we want uh granular control, we want live, we want uh uh simple things like Unix, one thing does one thing well and not more of that.
• 12:20
  SPEAKER_00: And now we're packaging up a lot of stuff into components.
• 12:23
  SPEAKER_00: And I remember when web components came out, the first thing that people did was like I do a my blog component, and you're like, that's not the idea of a reusable component because nobody's gonna import your blog into another one unless they're spammers, right?
• 12:37
  SPEAKER_01: Um, but there is one argument that I would say like uh for uh publishing it on uh on npm is that because then uh people can uh actually like import it and you can also load it off of a CDN.
• 12:47
  SPEAKER_01: So um just uh like here, for example, so you can npm install the package, uh, or you can just load it from here, it's JS Deliver.
• 12:55
  SPEAKER_01: It will do the registration for you, set up uh all the proper CSS in the shadow root, and so on.
• 13:00
  SPEAKER_01: Um yeah, like yes yesterday as well.
• 13:03
  SPEAKER_01: Yesterday I I published a what is it, a rich uh input uh component, uh, which is like this this GitHub uh search like uh filter field, uh which is also now just a web component that you can load into your uh project, uh put in some data lists uh that populated the yellow completion and so on.
• 13:22
  SPEAKER_00: Um so yeah, it's a really easy caught me by surprise 10 minutes ago because I saw it in my RSS reader and basically like, oh, I'm gonna have it on the show in 10 minutes.
• 13:32
  SPEAKER_00: And uh that was I just coded something for myself and I had this huge select box that basically with lots and lots of options, and I was like, okay, so now I can style select and I can do something, a multi-level select kind of thing.
• 13:46
  SPEAKER_00: Uh but then I realized data list is so woefully underused.
• 13:51
  SPEAKER_00: It's such a great idea in HTML to have like just your data in there, and then uh basically you have an input element and it's an autocomplete control without any JavaScript.
• 14:02
  SPEAKER_00: The browser does it for you, and all you need to do is basically here say data list with an ID, and in your input element, you just say data list for uh well it in in yours it doesn't do it here, but they basically say like list equals and the idea of the list, and then every input becomes an autocomplete.
• 14:21
  SPEAKER_00: I have not seen many people use it in the wild.
• 14:23
  SPEAKER_00: Is it a UX point of the people?
• 14:25
  SPEAKER_01: I think I know the reason why.
• 14:27
  SPEAKER_01: It's because they look awful, they they just look awful, you can't really style them.
• 14:33
  SPEAKER_01: Um, and thankfully, like that is one of the things that is on the roadmap of browser vendors.
• 14:37
  SPEAKER_01: Um, so uh the Safari team, for example, they are leading the work on the CSS forms specification, which is all about giving authors, web developers out there, uh the power to like properly style um your your form inputs and so on.
• 14:52
  SPEAKER_01: Um, like for example, um, if you have an input type is number, you like also have these little two buttons to go like a number up and a number down, you you want to control what these look like.
• 15:04
  SPEAKER_01: So they're like they've identified like okay, these are this is like the input itself, this is like the up button, or this is the down button.
• 15:10
  SPEAKER_01: Um, and then yeah, they're doing the work on that one.
• 15:13
  SPEAKER_01: Um, I'm really looking forward to to see that specification progress.
• 15:16
  SPEAKER_01: Uh, because once it's standardized, it's in a standard, then of course other browser vendors such as us, uh Google Chrome, we can also implement it into Chromium.
• 15:24
  SPEAKER_00: Yeah, the the other thing, of course, was that uh uh the I mean, all of those controls are people complain about the original look.
• 15:31
  SPEAKER_00: I mean, range was really non-stylable for a long time.
• 15:35
  SPEAKER_00: Now it actually is, and uh scroll bars, of course, as well.
• 15:38
  SPEAKER_00: And that's where again where flash came in, because people wanted to style their their scroll bars to make them less usable and more annoyingly according to your company colors.
• 15:47
  SPEAKER_01: And and also all the content that's in inside of the flash file was also inaccessible and unusable.
• 15:53
  SPEAKER_01: Yeah, and of course you had to fit pixels on the screen, so yeah.
• 15:56
  SPEAKER_00: Yeah, and you had to uh I remember my favorite hack that you always had to do was put an iframe in the page and change the change the location of the iframe, a hidden one, because that's that fed the uh the browser history before we had the history API.
• 16:11
  SPEAKER_00: So when you hit the back button, it actually didn't get rid of the thing, and instead of just it it uh refreshed the iframe.
• 16:17
  SPEAKER_00: So that was we had to catch user behavior that was natural and uh a sensible thing to do.
• 16:23
  SPEAKER_00: But yeah, it's it's interesting.
• 16:25
  SPEAKER_00: But yeah, this is I recall though.
• 16:27
  SPEAKER_01: There was also this, wasn't there also like this hack where that you had to do with the flash files to make sure that the the options of the select were like on top of it or whatever?
• 16:35
  SPEAKER_00: There was also like something back in the IE days that you had to yeah, you you uh you had to make sure that it had has layout, and you actually had to put uh a hidden frame over it, a hidden diff over it, so actually one component had a higher z index than the then the than the flash movie.
• 16:52
  SPEAKER_00: Uh which is kind of what click click checking does.
• 16:54
  SPEAKER_00: Like this is what actually people do to uh they give you a fair false website, put a layer on top of it, so you're not really clicking the link that you're clicking on, but the one that that they actually want you to go to.
• 17:05
  SPEAKER_00: But these were the things that we had to do because uh it was that was even before object was supported properly, because embed wasn't was not part of the main DOM.
• 17:16
  SPEAKER_00: Then of course you had the problem with like loading things in the background, and uh when uh when Ajax came out, then the scrubber of the browser wouldn't end, so you had to actually nest iframes to make the scrubber not actually load all the time and give people the impression that the page hasn't loaded.
• 17:33
  SPEAKER_00: But we gave up on that.
• 17:34
  SPEAKER_01: Like developers have it much easier nowadays.
• 17:38
  SPEAKER_01: Like all the all the hoops that we had to jump through back in the day were like, oh my god, and now like it's just oh, just npm install this package or whatever, and it'll take care of things for you.
• 17:46
  SPEAKER_01: Like, oh okay, nice.
• 17:48
  SPEAKER_00: I'm just I'm just very confused about like how many apps that I open that give me like 30 seconds of like skeleton animations instead of just giving me at least some content.
• 17:59
  SPEAKER_00: This is I think every loading uh every loading interface of your page is basically uh you declared bankruptcy on performance.
• 18:07
  SPEAKER_00: Like you you should not have to see a loading thing ever, like it makes sense.
• 18:11
  SPEAKER_00: I mean, especially with like new transitions and all kind of pre-caching and pre-loading that we can do in HTML now, it's really not that necessary anymore.
• 18:20
  SPEAKER_00: But here's a top tip: if you want to get investment and you want to be known as an AI company, just rename all the loading messages to thinking.
• 18:29
  SPEAKER_02: Yeah, I think that is how it works, actually.
• 18:33
  SPEAKER_02: Yeah.
• 18:35
  SPEAKER_00: Cool.
• 18:36
  SPEAKER_00: So uh this was also an interesting one the declarative route and navigation matching in CSS.
• 18:41
  SPEAKER_00: What is that about?
• 18:44
  SPEAKER_01: Yeah, so um yeah, if if you play on this one, so if you're going here from home to about, everything slides to the left, you're a if you're going from about to home, everything slides to the other side.
• 18:54
  SPEAKER_01: And then if you like click on something, like that avatar like grows bigger, and then if you hit back like that image and scales down into the thing again.
• 19:02
  SPEAKER_01: So this is powered by uh view transitions, um, and those view transitions are basically reactive to uh where are you currently on and where are you going to.
• 19:11
  SPEAKER_01: So based on uh uh page A and page B that you're going from, and two, you want to have like different view transitions or different animations.
• 19:19
  SPEAKER_01: Um right now you you can do that using the the page reveal and the page uh swap events, which are um JavaScript events uh that you need to add to your page.
• 19:27
  SPEAKER_01: But the problem is like they need to be in a blocking script because they need to run before the first frame render and so on.
• 19:32
  SPEAKER_01: So um it's yeah, not everyone is a fan of doing that.
• 19:36
  SPEAKER_01: Um and with this thing right here, this is a proposal um that we are working on.
• 19:41
  SPEAKER_01: So it is uh Noam Rosenthal and David Barron um and I, we are working on this one um to like give you this power in CSS where you can say, like, okay, hey, here's a set of uh location definitions.
• 19:52
  SPEAKER_01: It's been renamed from add crowd to add location.
• 19:54
  SPEAKER_01: So like a set of location definitions, and then based on the navigation from one of those locations to another location, now apply this CSS while the navigation is happening.
• 20:06
  SPEAKER_01: Um so that way you can say if if you scroll down a bit, like here, if you're going from home to about, uh well, apply this add view transition rule.
• 20:12
  SPEAKER_01: And if you're going from the about page to the home page, apply the other view transition rule.
• 20:17
  SPEAKER_01: So you can conditionally set CSS based on uh an active ongoing uh navigation.
• 20:23
  SPEAKER_01: It's currently um still like early early days on that one.
• 20:26
  SPEAKER_01: So it's it's not in any well, it's it's in Chrome behind the flag, like for testing, but the API shape will change uh because we're still like in the process of um getting this one through the CSS working group to make sure that everything in the spec, um like all browser vendors agree with what is in the spec.
• 20:42
  SPEAKER_00: Are they all in Google now?
• 20:43
  SPEAKER_00: Because uh Noam was at Microsoft and David I know from Mozilla.
• 20:47
  SPEAKER_01: Uh Noam uh used to work at Wix and then he he joined Google.
• 20:51
  SPEAKER_01: I don't think he ever was at Microsoft.
• 20:53
  SPEAKER_01: Okay, maybe maybe I should double check.
• 20:55
  SPEAKER_01: Uh and then uh D Baron uh started out at Mozilla indeed and then uh came to Google.
• 21:00
  SPEAKER_01: I think it's been a few years now.
• 21:03
  SPEAKER_01: Um so I'm at the company for more than four years, and he was here before I joined.
• 21:08
  SPEAKER_01: So okay.
• 21:09
  SPEAKER_00: Cool.
• 21:10
  SPEAKER_00: I mean, I like it at the same time.
• 21:12
  SPEAKER_00: I'm just very worried about the the uh uh I mean that's probably because I'm the only one who still cares about it, about the the separation of concerns.
• 21:22
  SPEAKER_00: Like basically I always have like yeah, you know, like HTML is there for markup, JavaScript is there for interaction, CSS is there for styling, but this is basically navigation that is part of HTTP and HTML rather than this.
• 21:37
  SPEAKER_00: But it's a deceptive, I think.
• 21:39
  SPEAKER_00: That's the yeah.
• 21:41
  SPEAKER_01: The the title of the blog post is styling the navigation, and that's the thing that we're we're trying to do here.
• 21:46
  SPEAKER_01: We want to allow you to style the navigation.
• 21:49
  SPEAKER_01: Um so yeah, not only like based on what where you're coming from, where you're going to, like also which element did you click.
• 21:55
  SPEAKER_01: Like right now, you need JavaScript for that, like at a click handler or which thing submitted.
• 21:58
  SPEAKER_01: And in in JavaScript, you an API for it like uh you can figure out um on the navigate event which element was like the source element that triggered to navigation we're also going to give you that one in in CSS and that one is um has been announced as for shipping um soon is in Chrome so you have a CSS pseudo class selector I think it's called uh colon navigation dash uh source that you can use to target okay which was the link that you clicked that started the navigation which is handy for view transitions because then you want to add a view transition name to that specific uh image like hey the thumbnail that you clicked that one is a photo that needs to grow into the big one on the next page I'm kind of happy I'm not working on the developer tools anymore in the browser because doing uh introspection and doing like uh uh how do you even debug this?
• 22:51
  SPEAKER_01: Yeah so we we have regular things with with our dev tools team and they're they're great people but yeah sometimes if you do introduce something new they go like what seriously like how are we ever going to debug this and then then we think of it.
• 23:04
  SPEAKER_01: Yeah um so like for for example for v transitions we already have uh something in there which is um like pausing the animations and that you can do so that like the animation of the v transition it never starts and here probably we're gonna need to have like maybe figure out something to like pause um the actual navigation from happening or allowing you like to to go through the various phases of a navigation so that you can like visually debug uh what what is going on yeah but it's it's uh it's something that that we we are definitely sticking with uh with our dev tools team uh we haven't solved it yet so hopefully so also the uh uh uh what is it with when I said uh motion turned off on the operating system to page transition still happen or is that uh you have to wrap it if to wrap wrap it inside a uh a query yes so the the default animation that happens for view transitions for a cross document view transition only if you as a developer have have has opted in into that is a cross fade between the two pages um so that is not something that is like really moving around um so that is is fine ish um if you want to have like no animation at all happen you can always wrap it in an add prefers reduced motion media query to say like okay now do do none of the animations just like do do the hard cut um from from the old state to the new state um maybe one thing to note along with that is that um prefers reduced motion does not equal no motion so if a person is like saying like okay I'm not that great with motion it means don't don't move the things around very quickly and a lot of stuff at the same time like a slow movement or a slow crossfade is maybe still fine then for them I think dyslexic people have an issue with it but like that's the only thing I can think of because I mean the other one is of course like causing nausea and these kind of things it's like I mean I remember when when WebGL came out and I'm like it's the first time I can really make you puke with JavaScript so that was really good.
• 24:58
  SPEAKER_00: But like um yeah yes so maybe maybe don't hit playton on this video here because the stuff is moving around yeah grid layouts with anchor positioning again like as a as a former browser maker I'm like we tried to make grid happen and it took us three years to make it happen and the first thing that people want to do is animate grid layouts and you're like no just be happy that they render without errors for a change okay I can be double advocating I can be double advocating here though and say that it's it's like we're so used to apps though on our devices being like draggable that we see these animations like every day and we're used to them and so when something snaps it looks cheap because we're kind of so used to everything doing this like easing and it's a really nice kind of animation.
• 25:45
  SPEAKER_02: Yeah.
• 25:46
  SPEAKER_01: Yeah and I mean I like that I I sorry like in the same regard I catch myself um from from using you from using my phone every day um I want to sometimes like click and drag a scroller on the web even if I'm on my desktop and like click and drag and then like oh no I have to use the scrolly gesture so it's the the like the the boundary between the platforms is is getting vague ish.
• 26:09
  SPEAKER_00: The two finger thing and like yeah the the yeah as I just like I now try to scroll horizontally and I I go back in history in the browser.
• 26:17
  SPEAKER_00: That's always an issue like yeah oh I hate that one oh yeah I think you can see yeah we saw yesterday that there is now a tongue control for people who can't use their hands and can't uh do uh uh blinking and these kind of things so for the first time on lick is not a typo so that's pretty good nice but I love that the way that you you you just basically you you're you're kind like me like you write something up and then you write an article about you give it out there and you don't want to win hacker news with it you just write it down so you don't forget it for yourself.
• 26:54
  SPEAKER_01: And these are the things that people people find like years later and then people like oh that's really cool to have and I I love that you do all that that you basically put my my blog is basically my my external memory like back back in the day before I joined Google I used to blog more like I also include like a bunch of links to other websites which was basically just my my public bookmarking system that other people then could also use.
• 27:17
  SPEAKER_01: But yeah very often I just like go to my blog hit on this hit the search button and like start start searching for something because I know it's on my blog somewhere I don't know what it what it exactly is but I know it's there somewhere now this is a thing that I found very um weird so you're basically detecting undetectable CSS features with add support named feature can you talk us through that yeah so um feature detection in CSS you can feature detect support for um properties with certain values you can do um selector support like you say like hey do you support this type of selector but the problem is that you can't detect uh changes to a certain feature for example did you and Yoji for this one is uh the gap property like back in the day um CSS flex box renamed to flex by now so the flex layout got shipped and it had um a flex dash gap css property later on the CSS came CSS grid came along that one shipped and grid contained a gap property so it was not grid dash gap but it was just gap because the CSS working group back then was like hold up we have a flex gap we have grid gap like we should just merge them into one gap property okay great browsers shipped it but browsers shipped it only for grid so if you then feature detected do you support display flex the browser said of course I can I can parse that and then if you ask well do you support gap one rem it said of course I support it but it didn't do the combination because a CSS add supporter check is just a selector is just like a parsing can you parse a string with without it erroring out okay so if you if you checked for flex and gap it said true even though it didn't support gap for flex box and then only later on they did support it.
• 29:03
  SPEAKER_01: But yeah so you you you can't support that one and now we're in the same situation um right now where um the anchor positioning for example also changed so if you anchor something uh a positioned element to a certain anchor um in an earlier version of Chrome like if you then uh added a transform to that original element to the anchor like the the positioned element wouldn't follow along with that one we change it later on but the problem is like you you you can't really feature the tech on like hey do you support transforms on anchored content?
• 29:32
  SPEAKER_01: Um so we had to figure something out and by now for example um uh Safari um in their I think it's in their latest release or the one before that like they now also support transform aware anchoring but you need to be able to feature the tech then because if they don't well then you need to like manually transform the positions element yourself as well um so yeah there's a bunch of things um that are like changes to underlying uh mechanism that you do want to feature the tech and for that one named feature uh was was um invented um by the Baron non other who you've already mentioned David Barron um so that was a result of I think it was a CS working group issue named feature and it's like reserved for like these really edgy cases where you can't feature detect something only then we're gonna add like a new keyword uh for that one it feels like a polyfill that might look really silly two years later when that feature has been supported across browsers for years and we we have to take it out again kind of thing.
• 30:32
  SPEAKER_01: But I think it's it's a good it's a good safety measure at for the moment I think yeah yeah yeah um and it can still happen in in in the future right uh because like newer browser engines are popping up um so for example LadyBird I don't know if they support single access scroll containers uh yes or no but if they don't I would be very surprised that they're still very happy to render video at the moment like that I mean it evolves quite a bit uh like the the the project is really shaping up nicely it's pretty bonkers isn't it to start a browser from scratch in 2024 is when he started like I I say I saw his talk at half stack in London.
• 31:09
  SPEAKER_00: No at uh set up the browser in London when he talked about that one and uh I mean his pedigree is amazing.
• 31:15
  SPEAKER_00: I mean he worked on Conqueror and then Safari and WebKit and like yeah so he knows how to build a browser but just like yeah I mean I'm gonna talk to Brandon Ike in uh uh in our day zero at our conference as well about like Brave and these kind of things because yeah I mean seeing how much of a hassle it was to work for Edge and get people to care about another browser or the browser that comes with your operating system is just like really interesting that people then everybody jumped to Arc and then Arc basically told them yeah we're not going to do anything to the browser anymore sucks to be you and yeah it's get well then what do you talk about that?
• 31:53
  SPEAKER_02: Yeah yeah this is it I'm I'm the single the the single user of ARC still kind of suffering on it.
• 31:58
  SPEAKER_00: I mean we talk about it every time of like there's the it's I like the sidebar it's handy having the nice big kind of you know graphic images in the corner for like you know you the logos of the sites basically the fabricons but that's it that's it really if I'm honest like it's just that I'm still on there because I've got my my kind of uh bookmarks or they put them again they call them something different and it's like that thing of it's the Emperor's new clothes that they just kind of name things slightly differently and it's not really that if you really like the the vertical tabs um it's also available in Chrome nowadays you can you can right click on the on the adversaries or it was or it was an edge for about one and a half years like yeah or like no three years now actually when I left the or it was in in Opera in 2001.
• 32:50
  SPEAKER_00: Yeah remember when Opera still had a banner in it so basically it's basically an ad banner that basically because you had to pay for Opera or you had to hack the registry to not pay for it.
• 33:00
  SPEAKER_00: So that was a really interesting one.
• 33:03
  SPEAKER_01: The other thing that's happening that I guess you are also being part of is that interop is happening again as well right now that uh people call for proposals people can actually submit their ideas what does the web platform need that all browsers should actually uh do uh should actually have uh anything interesting coming in this year that you that you're excited about um so all all the the like the the call for proposals uh is still open so people are still submitting um their proposals I think if you go to issues and then you you can see like which are the current uh proposals um a bot automatically like triages them like here you have like focus areas area proposal as well yeah HTML data list exactly yeah um so everybody is free to to like propose something and there are a few conditions of course like you you can't this is not the place to ask for new browser features um interop is about making an existing feature that is well specified that is well tested to make that interoperable um like this year for example in interop 2026 we had anchor positioning because it was like in Chrome and it was um also in Safari it wasn't in Firefox yet and then if you opened a page uh uh open with um anchor positioning it acted differently in all three engines so it was like hold up something is something is not right here who is right I don't know um so that is the goal of interop to make sure that like all these things that are already specified have great tests that they are interoperable across uh engines um so for example HTML and canvas uh right now it's still too early to to have that in interop um for next year but then maybe like by 2028 we can have HTML and canvas in interop uh 2028 because I I would expect that by then it has shipped in Chrome to stable there is a good standard it is sufficiently tested on WPT and so on.
• 34:52
  SPEAKER_00: Yeah I talked with the dude that actually does the implementation in Google can't remember if Ramag now uh and the bigger problem of uh HTML canvas was fingerprinting opportunities so that's why Firefox is not too happy about it but yeah it's it's tricky to make anything that does cannot be abused for a fingerprint these days that's really the the biggest issue that I see with uh uh giving it giving access to graphics rendering and giving access to fonts uh then it's very easy I mean we have to or or even even simple things like from the moment you you want to expose something on the platform it's an extra tracking bit somehow so like in in your operating system for example you have various preferences where you want like this should be the default font size and so on uh light dark preferences like all of that stuff is something that like adds a little tracking bit so you always have to make this trade off okay what do we gain and what do we lose with this um and speaking of HTML and canvas specifically we have great feedback.
• 35:52
  SPEAKER_00: Yeah this is the fun thing that why I I'm I'm excited about HTML in Canvas because text rendering in Canvas is crap.
• 36:00
  SPEAKER_00: It's really really not good.
• 36:01
  SPEAKER_00: That's why it's it's good to have the text interrupt thing and Google did a lot of things because you moved sheets to canvas rendering I think uh so you needed a lot a lot more stuff in the browser but like the the uh rendering the font in the correct size with proper kerning and these kind of things still seems like very rudimentary when you do it in canvas.
• 36:20
  SPEAKER_00: But just like making it in HTML and CSS now and then just getting it as an image into your canvas to do the other things with it wonderful.
• 36:29
  SPEAKER_01: So maybe to so maybe to clarify here this proposal here canvas text rendering has nothing to do with HTML and canvas it's just about improving the rendering of text inside of a regular canvas as we know it today where you like draw some text using JavaScript in there.
• 36:45
  SPEAKER_00: Yeah not just the performance or also the the uh the granularity that you have in it i'm not I'm not exactly familiar with with this uh one yet I think um yeah confounding docs send descent so that's that's the problem like the the the the typographic rendering on canvas was also super rudimentary compared to the CSS engine so that's that that's basically the the the idea here and uh yeah I would love to see more of that stuff.
• 37:11
  SPEAKER_01: Canvas is so powerful it's such a great thing but yeah by by the way call to action here um if people are browsing this list um hit the little thumbs up uh emoji underneath the page if you want to upvote it because like that is the signal that browser vendors are using uh if you want to have this and also my my colleague Rick Rick Fiscomi built a website that basically um sources github and then like gives you a nice visual uh ai generator layout where you can like just upvote it and drag and drop um stuff um I'm not sure where he published it but I'm sure uh we'll we'll we'll find the link uh somewhere cool so yeah interrupt happening if you want to make sure that some of the things are the same across our browsers instead of complaining that browsers are crap this is the right thing to do.
• 37:55
  SPEAKER_01: Yes, file bugs.
• 37:59
  SPEAKER_00: Chris Coyer did some interesting thing about like uh things in HTML you might have forgotten about.
• 38:05
  SPEAKER_00: And again this is where my purist of HTML comes in uh geolocation element like what is the what is the the yeah I I I like to make it easier because the bigger problem that we have by making what did the open web manifesto when we did that like we we made everything granular but we made it much harder to use that way as well.
• 38:28
  SPEAKER_00: So putting in and now we actually go into like things like we put a geolocation element in HTML but the semantic value of a geolocation element I I guess you could put the geolocation latitude and longitude in it and that way actually mark it up and then replace it with a geolocation that can be found by the browser.
• 38:48
  SPEAKER_00: But it it's the same problem that we have with the address element.
• 38:51
  SPEAKER_00: The address element was never meant to actually show a physical address but actually the address of the owner of the document kind of thing.
• 39:00
  SPEAKER_00: So that's where that's where it gets interesting.
• 39:02
  SPEAKER_01: But we have elements like geolocation we've got user media element I think this is a really good one because the media API to access cameras that has become so complex it's really tough to do right yeah no so it's it's a bit stupid right that you need like JavaScript and you press the button and then you get like this is notification way somewhere else in your browser that says like oh do you want to give this website permission to your camera if we give you this this user media element um like the permission can be uh directly in there um so if if you then then click it like you you you can even style it and everything like that so um yeah I think this is is much nicer um from a UX perspective in the end where you can like just stay inside of the flow um have it stylable if if you hit cancel or whatever the the component can respond to that one.
• 39:54
  SPEAKER_00: Install element that's again yeah I mean uh service workers are absolutely amazing and the wonderful specifications but holy cow if you had to jump through hoops to make things installable uh that may would make it a lot easier as well i i really look would love that kind of feature in there as well to just have an install button yeah and Jeremy Keat published a post about it uh I think it was yesterday um about um him being invited at the tag um as like a representative for developers and trying to help make the case for um the install element and and why we need it cool select element yeah this is the this is the customizable select okay yeah fair enough where you can now like put markup inside of your options like if you want to have the country picker with the little flags like you could you could put SVG flags in there if you want now.
• 40:50
  SPEAKER_00: And yeah other things declarative shadow DOM reference talk and a really good article to read and uh get in HTML includes that's super interesting as well especially with like uh streaming HTML in asynchronously that's just uh just in a declarative HTML who did we have on the show Dan that actually talked about that I can't remember it was now was it Theodore Lefebvre maybe not yeah yeah yeah I think it was yeah so that was really cool as well one thing I I like about like this whole article that Chris wrote here is that it's like showing how much the web has evolved over the past decade and even longer like all the stuff that we needed to do um back in flash earlier on and later on maybe in javascript and like now it like the the web always catches up and this is what I think is like the the the core message of of this whole post um yeah which is which is sizes auto is another one that makes things so much more easier.
• 41:50
  SPEAKER_00: You know that's another thing that I found yeah I mean it's so weird because every half year or every okay let's say every year we have to write an article HTML can do that now or CSS can do that now.
• 42:02
  SPEAKER_00: And we I mean not me anymore but me back in the days like as a browser maker we bent over backwards publishing this stuff but it still seems like people don't find it and it seems like we need to it it's fascinating that you can give a keynote at every developer conference about new features of CSS every year.
• 42:21
  SPEAKER_00: It's like it doesn't get old it's a very easy way to get a keynote slot.
• 42:28
  SPEAKER_01: The tricky thing is so like trying to get into the conference is like ideally I want to I want to go to a JavaScript focused conference like or a pure React focused conference and then talk about CSS.
• 42:39
  SPEAKER_01: But if I then go through the CFP project and like submit a talk about CSS are like yeah what are what are you going to do at our conference but I think like that is the audience to talk about like hey like yeah you can do all the stuff at React but like here's an HTML element here's a CSS property.
• 42:55
  SPEAKER_01: I recall going to a conference a few years ago and like just going over a bunch of CSS features and the the one that got the most claps was um scroll behavior smooth.
• 43:05
  SPEAKER_01: And if you click a link to somewhere on a page like the browser automatically scrolls and people are like whoa I no longer have to use my React hook for this like well this thing is like almost 10 years old.
• 43:16
  SPEAKER_00: So I remember Mark Thieler before he did uh Beyond Tellerund which is still one of my favorite conferences in the web space uh he did a flash forum conference uh like a for he had a huge forum for blaf developers and I was one of the speakers there and I talked about how JavaScript is better and you don't need flash anymore and that was in 2001 2002 or something like that.
• 43:39
  SPEAKER_00: And that was a daring talk but uh it got good feedback as well so you might be onto something let's go where let's go where the where people heard the web and teach them uh there where these things are there's no point uh patting our own back in every conference where we basically go and talk about things uh Chris just a heads up on the chat uh from Brahman
• 44:00
  SPEAKER_02: Yeah, just to cut in.
• 44:01
  SPEAKER_02: Uh the I know you've got you haven't got long left, right, Ramas?
• 44:03
  SPEAKER_02: So I think we should probably go to Fake One News if we uh if we can.
• 44:06
  SPEAKER_02: Yeah, I have a meeting right now.
• 44:09
  SPEAKER_02: Oh, okay.
• 44:10
  SPEAKER_00: All right, so let's play fake on news.
• 44:12
  SPEAKER_00: Yes.
• 44:18
  SPEAKER_00: Dr.
• 44:18
  SPEAKER_00: Doom thanked Seattle for all the surveillance cameras.
• 44:23
  SPEAKER_00: Was that a real headline or a fake one?
• 44:25
  SPEAKER_01: Yes, real.
• 44:27
  SPEAKER_01: Real.
• 44:28
  SPEAKER_00: Confident.
• 44:29
  SPEAKER_00: Somebody showed up dressed up as Dr.
• 44:31
  SPEAKER_00: Doom at a at a at a city council meeting and thanked them for all the great cameras.
• 44:37
  SPEAKER_01: Not surprised.
• 44:38
  SPEAKER_01: Crazy, but not surprised.
• 44:40
  SPEAKER_00: Five European companies just agreed to buy AI compute that doesn't exist yet.
• 44:44
  SPEAKER_01: News, and also only five?
• 44:46
  SPEAKER_01: I'm sure there's more.
• 44:49
  SPEAKER_00: Oh, somebody just basically sold them a company that didn't exist.
• 44:52
  SPEAKER_00: It's quite amazing.
• 44:54
  SPEAKER_00: Wow.
• 44:54
  SPEAKER_00: This is a very strong start.
• 44:55
  SPEAKER_00: No pressure.
• 44:56
  SPEAKER_00: A 20-year-old JavaScript bug allows agents to access private browsing sessions.
• 45:00
  SPEAKER_01: Oh, sounds like it could be true.
• 45:02
  SPEAKER_01: Um yeah, let's also go for news.
• 45:06
  SPEAKER_00: No, that was fake.
• 45:08
  SPEAKER_00: Cloudflare partnered with runway, so their new CMS will show content as engaging videos for humans and text only for agents.
• 45:16
  SPEAKER_01: Yeah, that could be true because the agents can't see the contents of the video, so you need to feed them text.
• 45:22
  SPEAKER_01: Yeah, probably true.
• 45:23
  SPEAKER_01: Oh, fake.
• 45:25
  SPEAKER_01: Well, I I hope I hope they never do it.
• 45:27
  SPEAKER_01: Like if you if you're building for the web, like there's one web.
• 45:31
  SPEAKER_00: Researchers found flaw in US flock camera that makes identifying people impossible when they wear a reflective cap.
• 45:38
  SPEAKER_01: Ooh, is that how you defeat the cameras?
• 45:41
  SPEAKER_00: Maybe.
• 45:42
  SPEAKER_00: Could be news.
• 45:44
  SPEAKER_00: No, it's fake.
• 45:45
  SPEAKER_03: Oh.
• 45:46
  SPEAKER_03: If only it were that easy.
• 45:48
  SPEAKER_00: It's a bit like when people put CDs on the on the back mirror of their car to stop like speed cameras.
• 45:53
  SPEAKER_00: Didn't work either.
• 45:55
  SPEAKER_00: Person hides prompt injection in legal filing, telling AI to side with them.
• 46:00
  SPEAKER_00: That is definitely true.
• 46:02
  SPEAKER_00: Very clever.
• 46:04
  SPEAKER_00: Yep, correct.
• 46:06
  SPEAKER_00: Asking Claude to avoid cliches like load bearing results in 2.5 the token cost, so leave it.
• 46:12
  SPEAKER_01: Not sure about that one.
• 46:15
  SPEAKER_01: Let's go with fake.
• 46:19
  SPEAKER_00: It is fake.
• 46:20
  SPEAKER_00: Doing well.
• 46:21
  SPEAKER_00: German government offers a 200k grant for automated AI way to convert pre-1950 wax roll recordings of parliament debates.
• 46:29
  SPEAKER_02: I think that's fake.
• 46:36
  SPEAKER_01: Oh.
• 46:37
  SPEAKER_01: I was gonna say it's news.
• 46:39
  SPEAKER_01: Oh you're uh you have me hanging up on the grant.
• 46:41
  SPEAKER_01: Uh go for news, go for news.
• 46:44
  SPEAKER_00: It's actually fake.
• 46:45
  SPEAKER_00: I just thankfully they didn't pay 200.
• 46:47
  SPEAKER_01: Yeah.
• 46:47
  SPEAKER_00: Google DeepMind published a paper on how 100 agents tasked with solving math problems learn to cheat.
• 46:54
  SPEAKER_01: Isn't that the nature of how things go?
• 46:56
  SPEAKER_01: Trying to cut corners and cheat.
• 46:57
  SPEAKER_01: So I would say news.
• 46:58
  SPEAKER_01: It's good logic again.
• 47:00
  SPEAKER_00: Yeah, you're a very cynical man.
• 47:02
  SPEAKER_00: That is correct.
• 47:03
  SPEAKER_00: Um I used ChatGPT for a murder appeal.
• 47:08
  SPEAKER_00: It made up witnesses who never existed.
• 47:11
  SPEAKER_02: That sounds so real to me.
• 47:12
  SPEAKER_02: I don't know about you, but that sounds real.
• 47:14
  SPEAKER_02: That sounds real, yeah.
• 47:16
  SPEAKER_02: We are cynical.
• 47:16
  SPEAKER_02: Okay.
• 47:17
  SPEAKER_00: It's actually true.
• 47:18
  SPEAKER_00: Yeah, it's real.
• 47:20
  SPEAKER_00: Number 11.
• 47:22
  SPEAKER_00: Microsoft's AI data center capacity could more than triple by 2032.
• 47:26
  SPEAKER_01: Yeah, I would say so.
• 47:28
  SPEAKER_01: Probably, yeah.
• 47:32
  SPEAKER_00: Yep, it is news.
• 47:33
  SPEAKER_00: Alrighty, nice.
• 47:34
  SPEAKER_00: Last one.
• 47:35
  SPEAKER_00: Europe's first truly driverless robot taxi is running in Croatia on Chinese software.
• 47:43
  SPEAKER_01: It seems plausible, but I'm gonna go for fake.
• 47:48
  SPEAKER_01: Nope, it is actually real.
• 47:51
  SPEAKER_00: Well, so yeah, you did really, really well, I think, in terms of like uh yeah, I think you're number one right now.
• 47:57
  SPEAKER_00: Yeah, that's a that's unexpected.
• 48:01
  SPEAKER_00: Nice, very good.
• 48:02
  SPEAKER_00: Cool.
• 48:03
  SPEAKER_00: Then I guess you have to leave for uh for meetings and stuff, exactly.
• 48:07
  SPEAKER_00: Or do you have a bit more time?
• 48:09
  SPEAKER_00: All right, let's take a look at some other things.
• 48:12
  SPEAKER_00: We don't need him, right?
• 48:13
  SPEAKER_00: I mean, if it just needs to do things like do his job and things, that's just annoying.
• 48:18
  SPEAKER_00: We've got a tool, to be fair.
• 48:20
  SPEAKER_00: We've got the tool video as well.
• 48:22
  SPEAKER_00: Yeah, that that that's coming anyways.
• 48:24
  SPEAKER_00: Like I love this one that basically there is a um there's a lot of CSS that actually uh brings up um uh HTML email clients that actually uh is like a security problem in them.
• 48:41
  SPEAKER_00: And I did not know that.
• 48:42
  SPEAKER_00: It's really really fascinating reading that you you can do that kind of stuff that you actually find uh uh I mean that that was not an uh that's not a new thing.
• 48:52
  SPEAKER_00: You could brute force password reading with a with CSS in the past, and also people doing keyboard controls in CSS using that kind of attribute trick.
• 49:01
  SPEAKER_00: But it's fascinating how many email clients are completely vulnerable to that.
• 49:04
  SPEAKER_00: So that was fascinating to see.
• 49:06
  SPEAKER_00: So really, really good in-depth read.
• 49:09
  SPEAKER_00: Oh my god, there's so much detail in there.
• 49:10
  SPEAKER_02: I was gonna say that's it.
• 49:11
  SPEAKER_02: Like when I when I kind of looked at it, it just kept going.
• 49:13
  SPEAKER_02: I was expecting like a a kind of this is the one thing that you know you need to look out for, and it just kept going.
• 49:18
  SPEAKER_02: And and it again, it shows kind of the vulnerabilities run deep, right?
• 49:22
  SPEAKER_02: That if you're on the internet, like there are vulnerabilities that you would never have even considered.
• 49:27
  SPEAKER_02: So yeah, crazy.
• 49:30
  SPEAKER_00: Another thing, uh, Simon Willison, who's gonna come and speak at our event in uh on the 23rd, uh, I mean, he always does amazing research, and I love that he actually he used the cache of um of codecs and looked what is in there, and it turns out there's the whole binaries of LibreOffice in there for it to render documents.
• 49:51
  SPEAKER_00: So instead of just using a JSdoc or these kind of things or uh a JSPDF kind of renderer, they actually just included the whole of LibreOffice.
• 50:00
  SPEAKER_00: So that's why you shouldn't be surprised if your hard drive is running out of space because you're using codecs.
• 50:05
  SPEAKER_02: I mean, we've said before though, like we've kind of talked even in different contexts about kind of how much uh software, you know, that's like very heavily used, well-known software, like um perhaps something that rhymes with Premiere Pro from Adobe.
• 50:17
  SPEAKER_02: But um the fact that you will have this like really well established software that's still got these like crazy crazily simplistic or bad or flawed like caching systems in terms of uh you know the amount of um cleanup that that it doesn't do.
• 50:31
  SPEAKER_02: And that's it.
• 50:32
  SPEAKER_02: I wonder if it's kind of I mean, not so much so for things like Premiere, where you know it's not going to have been affected by the vibe coding era so much, right?
• 50:39
  SPEAKER_02: But I think these kinds of things are just gonna happen more and more where there's something so ridiculous but it's just been done purely on speed, and the AI has has kind of made its assumption that speed is the most important thing.
• 50:50
  SPEAKER_02: And there's almost that thing of um this feels like, and I know I'm not I'm not suggesting that this would have just been like as a result of someone vibe coding in a feature, but it feels almost like the AI can be maliciously compliant, you know, where by you saying something like, I want to be able to use, uh I want to be able to read documents, and then it it's like it's willfully misinterpreted it rather than using like JS Doc.
• 51:10
  SPEAKER_02: It's gone and just gone.
• 51:11
  SPEAKER_00: Or just went to Reddit and say, like, what's a free way of uh of rendering doc elements?
• 51:15
  SPEAKER_00: And the first answer is reader office because it's like 16 years old rather than the other libraries kind of thing.
• 51:21
  SPEAKER_00: Like, but yeah, it's like 500 meg on my hard drive that probably will never get used.
• 51:25
  SPEAKER_00: I mean, that's the thing, like yeah, so that's an interesting one.
• 51:29
  SPEAKER_00: This is something for you as well.
• 51:31
  SPEAKER_00: I love that bit where it's basically angry sliders.
• 51:34
  SPEAKER_00: So you basically you slide it, you slide by doing the uh uh doing the the um what is it, lysser use uh uh uh things that you wouldn't normally do in Illustrator.
• 51:46
  SPEAKER_02: Oh, I mean so nice.
• 51:49
  SPEAKER_02: It is, and I mean we've all we always like kind of the fun and silly stuff, you know, but it's also the fact that that actually is there is a little bit of um I mean that would I wouldn't I wouldn't know how to kind of get that I mean well it'd be a lot of maths, I know, but like it that's what I mean.
• 52:02
  SPEAKER_02: If you if you were to say go and go and recreate that, there's more than you think, isn't there, that's gone into it, like making the animation smooth.
• 52:09
  SPEAKER_02: I I can imagine the the thing that jumps to mind is that where they bring the uh the the cursor over the next slider, and I know it would be kind of um like focused or active, but it it's it's because it's such a strange motion that I I'm surprised it's still working that way.
• 52:26
  SPEAKER_02: Like how much of that is because it's just a video they've included there, right?
• 52:30
  SPEAKER_00: Yeah.
• 52:31
  SPEAKER_00: I mean, the the uh there are libraries for that.
• 52:34
  SPEAKER_00: I mean, in the developer tools, when you use animations, that's why I just opened it.
• 52:38
  SPEAKER_00: There is a library that allows you to do it, which was written by Lea Baru back then.
• 52:42
  SPEAKER_00: So that was actually the easing uh JS, easing JS, was it?
• 52:47
  SPEAKER_00: That basically allowed you to anyways.
• 52:49
  SPEAKER_00: Basically, she did a really, really cool tool that allowed you to do that kind of interaction.
• 52:54
  SPEAKER_00: But I just love that people uh come up with these ideas.
• 52:56
  SPEAKER_00: I mean, there was this competition on Reddit a few years ago, like to make the worst sound control.
• 53:01
  SPEAKER_00: Like there was all kind of stuff that you had to do that was just wonderful.
• 53:04
  SPEAKER_00: Like absolutely genius, yeah.
• 53:06
  SPEAKER_02: Yeah, again, it's like the people when you know when someone puts on Photoshop, I like sorry, when someone posts on Reddit something like, Can you Photoshop out my friend or something like that?
• 53:14
  SPEAKER_02: And then they'll kind of misinterpret it.
• 53:16
  SPEAKER_02: Yeah, yeah.
• 53:19
  SPEAKER_00: There's always inappropriate things as well, so that's the fun thing as well.
• 53:22
  SPEAKER_00: But there's also always like people asking for like really stupid things, like can you put me in front of a cool car or something?
• 53:27
  SPEAKER_00: Then they shouldn't be surprised that the internet is giving you back in kind.
• 53:32
  SPEAKER_00: This is also really cool.
• 53:33
  SPEAKER_00: It's just uh it's just a collection of uh of buttons that he found on the web and he wrote like an extension that actually allows you to steal buttons yourself as well, and then actually use them.
• 53:45
  SPEAKER_00: Uh, it's really bizarre, like a wonderful little stupid thing to build.
• 53:50
  SPEAKER_02: Do you know what it reminds me of though that I quite quite like is it feels like a again, like slightly irreverent, like silly, maybe it's not actually that usable necessarily.
• 53:58
  SPEAKER_02: I don't know.
• 53:59
  SPEAKER_02: There was somebody out there perhaps who really uses it because I know they've got in there like the features are you know, you can kind of steal them, but then put them in your account, you know, so you can go back and kind of find your your stash, I think they call it.
• 54:09
  SPEAKER_02: Um, but it reminds me of the old like guessbook um you know, everyone would have the little guessbook icon and things like this, and then you'd have these kind of like um websites that would bring them all together, the like libraries where they would just show you all the different ones, and now you have the nostalgic ones, like we found all these guessbook gifts from you know the 90s or whatever.
• 54:27
  SPEAKER_02: And I think it's almost like people are they they're sort of creating that now, you know, for the the the web of now, um, seeing all the kind of the way that buttons are being styled, you know, and then we'll look back, and those buttons that at the moment just look like standard buttons will all look really of the time.
• 54:44
  SPEAKER_02: You know, you'll go, oh yeah, do you remember when everyone was making it look like that?
• 54:48
  SPEAKER_00: I mean, I'm an angel investor in a company that does like design to code, and they did the same thing.
• 54:53
  SPEAKER_00: They collected like over 80,000 buttons on the web to say, like, what should a button look like?
• 54:58
  SPEAKER_00: And instead of doing the research for the button that gets generated, they relied on other people doing the research for them.
• 55:04
  SPEAKER_00: And I think that's not a bad idea.
• 55:06
  SPEAKER_00: I mean, there's there's of course a lot of them in there that have accessibility issues and these kind of things, but I just love the idea of writing a little extension that just steals things.
• 55:14
  SPEAKER_00: That's pretty cool.
• 55:15
  SPEAKER_00: Yeah, you don't you don't need an you don't need a model for that, you can run an extension for that kind of thing.
• 55:21
  SPEAKER_00: This is donkey.bus.
• 55:23
  SPEAKER_00: It's basically from 1981.
• 55:25
  SPEAKER_00: It's a game that you basically have to avoid the donkey.
• 55:28
  SPEAKER_00: And the uh the history about that one, the interesting history is that it's actually written by Bill Gates.
• 55:35
  SPEAKER_00: Is it really?
• 55:37
  SPEAKER_00: Yeah, so that was the one of the first things that he wrote and uh didn't steal from others.
• 55:41
  SPEAKER_02: And uh yeah, that's basically Frogger.
• 55:44
  SPEAKER_02: That must be after Frogger, right?
• 55:46
  SPEAKER_00: Probably Frogger is like a 1970s thing.
• 55:48
  SPEAKER_00: I think my favorite, uh okay, that's kind of annoying now with the sound.
• 55:52
  SPEAKER_00: Um what I love about this one as well is that we talked about I talked about this with my wife, uh, although she didn't need to.
• 56:00
  SPEAKER_00: Um when uh there I saw this documentary about computer gaming and the the story of the Pong machine.
• 56:06
  SPEAKER_00: They basically built the Pong machine and put it up in a local pub and then said, like, oh, let's see if people like it.
• 56:11
  SPEAKER_00: And it cost you like 10 cents or whatever it was the currency back then, um to play it.
• 56:18
  SPEAKER_00: And then they basically just you could play Pong with like two controllers, and it was that.
• 56:22
  SPEAKER_00: And uh then the owner of the pub called them like three hours later and said, Your machine's broken, so can you come and fix it?
• 56:28
  SPEAKER_00: And they came, they went in and took a look at it and opened it, and was uh it was broken because it was full of coins.
• 56:35
  SPEAKER_00: Wow, people played so much that they actually had so much fun playing Pong that they basically filled up the whole machine and the slot overflowed and actually put the put the coins in like the machinery and the wiring.
• 56:46
  SPEAKER_00: Uh so that's why it didn't work anymore.
• 56:48
  SPEAKER_00: And it I think that's such a great that great insight of like you're you're a little startup and you want to see if it's successful, and you're like, wow, this this was a uh this was absolutely uh raging success.
• 56:59
  SPEAKER_00: It's amazing.
• 57:00
  SPEAKER_00: So yeah, we're we're we're kind of over the hour anyway.
• 57:02
  SPEAKER_00: So let's take a look at this week's tool that I've been using for quite a while.
• 57:06
  SPEAKER_00: And it might be interesting to get the creator of it on the show in the nearer future as well, because he did a lot of other stuff as well.
• 57:14
  SPEAKER_00: But let's take a look at the tool showcase, which you can also find on the magazine.
• 57:28
  SPEAKER_00: ImageOptim is a tool I've been using for years, as it's simply a joy to use.
• 57:32
  SPEAKER_00: Image optimization for file size, rendering speed, and memory usage is a specialist topic.
• 57:37
  SPEAKER_00: There are tons of new formats and many tools that help you pick the correct ones.
• 57:41
  SPEAKER_00: Large companies rely on content distribution services like ImageX, Cloudflare, or Cloudinary to deliver the best image formats to the end user.
• 57:49
  SPEAKER_00: If you don't want to spend money on that, you can at least optimize the images you do have before you upload them.
• 57:55
  SPEAKER_00: This is where ImageOptim comes in.
• 57:57
  SPEAKER_00: ImageOptim was written in its maintained by Colonel Lizinski, and you can get it either from GitHub or from its homepage.
• 58:04
  SPEAKER_00: To use it, simply drag and drop the images you want to optimize into it.
• 58:08
  SPEAKER_00: The tool will do its best to remove unnecessary image information and optimize the image.
• 58:13
  SPEAKER_00: It will not convert the images to other formats, but squeeze as much out of the image without changing its quality.
• 58:19
  SPEAKER_00: You don't even need to think about it, just let it do its magic in the background, and once it's done, the images will be smaller and replaced where they are on your hard drive.
• 58:27
  SPEAKER_00: The optimization process can take a while, especially with PNG images, and can be heavy on the CPU, so give it some time to churn in the background.
• 58:36
  SPEAKER_00: You can also use Image Optim in your own scripts by calling it from batch, both in an asynchronous fashion and a blocking one.
• 58:42
  SPEAKER_00: Personally, I use an automation tool to optimize images in a certain folder whenever I add a new image.
• 58:47
  SPEAKER_00: ImageOptim is on GitHub and you can request features there.
• 58:51
  SPEAKER_00: There's also a web service if you want to use it outside your own machine.
• 58:54
  SPEAKER_00: It's pretty much a no-brainer to use.
• 58:58
  SPEAKER_00: Which is good because I don't have a brain.
• 59:00
  SPEAKER_00: But I uh the funniest thing about making that video was I could not find any image that I hadn't optimized on my hard drive.
• 59:07
  SPEAKER_00: It's just such a normal thing for me to use image optim in the background for like decades now.
• 59:12
  SPEAKER_00: Not decade, well, maybe a decade, yeah.
• 59:14
  SPEAKER_00: And it's just I love that it doesn't, that you don't need to worry about like uh picking the right format.
• 59:20
  SPEAKER_00: You don't need to actually uh you don't have a copy.
• 59:23
  SPEAKER_00: You basically it changes the file on where it is.
• 59:25
  SPEAKER_00: So basically it's just a no-brainer.
• 59:27
  SPEAKER_00: So I use Hazel for automating it.
• 59:29
  SPEAKER_00: So I have a folder where it's called images, and I drag them all in there and they automatically get optimized.
• 59:34
  SPEAKER_00: And it's something that it can forget about in the background.
• 59:37
  SPEAKER_00: I really, really love the idea.
• 59:38
  SPEAKER_02: Yeah, it's a really good idea as well, because I think we we're all guilty of, especially when you've then got things being uploaded to the cloud and things like this, that we're all guilty of just kind of everything being uploaded everywhere and being black, never actually taking the time to like optimize things.
• 59:52
  SPEAKER_02: Because I know I've done that actually with uh with huge batches actually after you showed me image opt-in and and huge savings as well.
• 59:59
  SPEAKER_02: So over 10 years, like that's massive, massive savings you made, you know.
• 1:00:05
  SPEAKER_00: Cool.
• 1:00:06
  SPEAKER_00: Well, I mean, this is basically it for today.
• 1:00:08
  SPEAKER_00: I mean, you're off really soon to come to America.
• 1:00:11
  SPEAKER_00: I'm coming on Monday.
• 1:00:13
  SPEAKER_00: Uh so I'm packing my bags, I'm uh saying my goodbyes, and uh hopefully we will have a really good conference.
• 1:00:20
  SPEAKER_00: Day zero uh will be again live show.
• 1:00:23
  SPEAKER_00: Uh um, so there won't be a live show next week, I think then, because we are actually at the conference already.
• 1:00:30
  SPEAKER_00: So uh day zero live show will be live on stage.
• 1:00:33
  SPEAKER_00: So I we we will have a recording that probably will look weird, but of course we're all going to be chat lag, but we uh we have a great show ahead because we got uh uh we got Harold uh Kirschner from Microsoft in the fireside chat, and we have uh uh Brendan Icke from Mozilla and Brendan Icke from Brave, actually, to to come and talk to as well.
• 1:00:54
  SPEAKER_00: Uh and we're also announcing something huge that's gonna come.
• 1:00:58
  SPEAKER_00: Uh that's gonna be right after the event.
• 1:01:01
  SPEAKER_00: And so you to know about that one, you have to come to the event.
• 1:01:04
  SPEAKER_00: If you haven't got a ticket yet, the ticket down there says it like life 50 is a is a ticket, uh half price off.
• 1:01:11
  SPEAKER_00: We're still looking for moderators, so if you want to be a moderator, you can get a free VIP ticket and a ticket for one of your friends if you have friends.
• 1:01:17
  SPEAKER_00: And then um, yeah, we see you there in San Jose in the nice, colorful, and wonderful California.
• 1:01:25
  SPEAKER_00: Any last words from you before you're off?
• 1:01:28
  SPEAKER_02: Oh god, that's putting me on the spot there.
• 1:01:30
  SPEAKER_02: Yeah, um, I would say always invest in your internet connection because mine decided to just let me down today.
• 1:01:35
  SPEAKER_02: So, yeah, it's it's brilliant, isn't it?
• 1:01:36
  SPEAKER_02: That we we present a podcast about tech and it's always the internet that decides to die.
• 1:01:40
  SPEAKER_02: It's it's amazing, it's like they know we're we're doing this, you know.
• 1:01:43
  SPEAKER_02: They're listening.
• 1:01:44
  SPEAKER_00: I mean it's the same with Lee when I when I film things and then I make these production videos for us.
• 1:01:49
  SPEAKER_00: I mean, I feel like I'm always doing it too complex, and then I see influencers that have nothing to say, really, but they're really, really good at editing in like two seconds on their iPhone and then have a wonderful video out there.
• 1:02:01
  SPEAKER_00: And I'm like, how do they do that?
• 1:02:02
  SPEAKER_00: Yeah, it seems like uh being very rough, you know.
• 1:02:08
  SPEAKER_00: Yeah, or maybe I'm just trying to have too much control over it and basically just instead of just oh, I just pay for an app to do it for me, I try to do it myself all the time, and that's something maybe I have to work on because yeah, people who build these things also need users.
• 1:02:23
  SPEAKER_00: So who am I to not be that?
• 1:02:25
  SPEAKER_02: True, true.
• 1:02:26
  SPEAKER_00: Yeah, anyways, this was VR Developers Live for today.
• 1:02:29
  SPEAKER_00: Uh, we're now gonna have uh the newsletter out and we're gonna be publishing this soon as well.
• 1:02:34
  SPEAKER_00: There won't be any post-production anymore because we said we're gonna leave it rough and rough.
• 1:02:39
  SPEAKER_00: If you like the uh the order better this time, that we actually talk to the guest for a long time and then do the other sections and then bring in the news items a bit earlier, uh a bit later.
• 1:02:49
  SPEAKER_00: Uh tell us about it.
• 1:02:50
  SPEAKER_00: And we're always open to suggestions how to make this format better for you.
• 1:02:54
  SPEAKER_00: And um, until then, like and subscribe.
• 1:02:58
  SPEAKER_00: We don't have buttons for that, but like I hope you like and you hope to subscribe to our ideas.
• 1:03:04
  SPEAKER_00: And uh we see you next Saturday.
• 1:03:06
  SPEAKER_00: Uh well, we do you in three weeks then?
• 1:03:09
  SPEAKER_00: No, two weeks then.
• 1:03:10
  SPEAKER_00: Yeah, two weeks.
• 1:03:10
  SPEAKER_03: Yeah, I don't even know what it is anymore.
• 1:03:12
  SPEAKER_03: Yeah.
• 1:03:13
  SPEAKER_00: Unless you're gonna come to California and see us in person.
• 1:03:16
  SPEAKER_00: So we're real, we're not uh we're not avatars yet.
• 1:03:20
  SPEAKER_00: So that's something to cherish, I think.
• 1:03:23
  SPEAKER_00: For now.
• 1:03:24
  SPEAKER_00: All right, see you soon.
• 1:03:26
  SPEAKER_00: Bye bye.
• 1:03:26
  SPEAKER_00: See you.