00:00:00 Jake: I've been ill recently.
00:00:04 Surma: So have I. It's the time.
00:00:06 Jake: The worst thing about it was, I had a persistent cough. My brain just wasn't working. I felt tired all the time, and I had achy joints. I was like, "Oh."
00:00:21 Surma: The checklist.
00:00:23 Jake: "It's the Rona. The Rona got me."
00:00:25 Surma: You have a bingo.
00:00:27 Jake: I did one of the Latty flows. [crosstalk]
00:00:30 Surma: Oh, is that how they call it? The latty F.
00:00:34 Jake: Did a latty F all over my nose. Because there's different brands of lateral flow, and some of them don't tell you to do the throat.
00:00:43 Surma: I know. Aren't they all the same in the end, and you can just stick it wherever?
00:00:49 Jake: As Sam turns up in the infirmary. What seems to be the problem? Well, I did a lateral flow, and I assumed this swab. You could just stick it anywhere.
00:01:01 Surma: It was negative, though.
00:01:12 Jake: Are you hearing noise, a little scratchy noise?
00:01:17 Surma: Yes.
00:01:18 Jake: Oh, well. It'll be fine. We'll filter it out.
00:01:20 Surma: I don't think it'll be on the recording.
00:01:21 Jake: Okay. That's cool. The test came back negative. I felt offended because I felt like it was telling me that I'm making up my illness.
00:01:31 Surma: You're being a wuss.
00:01:32 Jake: Yes, exactly.
00:01:33 Surma: You had a good excuse to feel as miserable.
00:01:35 Jake: Yes, it just grow up. It really was. When I'm ill, I prefer to be properly ill, whereas I just felt incapable. It was the cough. The cough was fine. There was a bit of a thing there, but other than that, I was trying to code. I was just staring at the screen, and I couldn't. [crosstalk]
00:01:55 Surma: Yes. I also had the flu, which I thought was the Rona, it was not, but it took me out for a good 10 days.
00:02:04 Jake: Yes, to have an illness that long, and that is really just making you useless is how I felt.
00:02:10 Surma: Yes. I was thinking, "Is it just an extraordinarily strong flu, or have we all just gotten weaker because we spent two years in our homes?"
00:02:20 Jake: I know. I want to hear that from a doctor. I want the proper medical thing because that sounds like a really compelling theory, but do immune systems collapse that quickly? That sounds wrong.
00:02:32 Surma: No, also, it sounds like we were literally isolated in our homes. I did go back to supermarkets and [unintelligible 00:02:38]. The basic exposure to the normal stuff would have been there. Yes, I didn't lick door handles on the tube anymore, but, I mean.
00:02:50 Jake: I've missed that. Your particular mixture of metal and just mixed scum.
00:02:58 Surma: General human residue.
00:03:01 Jake: Salty metal. [chuckles] They should do a flavor of crisps.
00:03:09 Surma: Rona edition.
00:03:12 Jake: [laughs] Excellent. Should we dive into the web to some extent?
00:03:18 Surma: Yes, let's do it. It's weird because, for the first time, we're recording this in person, because we happen to be in the office, and I can look at you.
00:03:26 Jake: Yes, it's weird, and we can respond to each other faster than--
00:03:29 Surma: Yes, there's no delay. We don't have to do the one, two, three, clap or divvy up the latency.
00:03:35 Jake: Yes, or that thing where one of us-- It's tough in the edit because we end up with that thing where one of us will carry on speaking, the other one's accidentally interrupted, but you just stop talking with like, "We'll be able to mute it in the edit." Hopefully, we won't have to do that now.
00:03:49 Surma: I can still try and talk over you and try to get my word in and then you have still some editing to do just to give you the experience.
00:03:55 Jake: Thank you. You usually drop a few swear and that, every time that happens, and [beep] It's the thing. I don't really swear on the podcast.
00:04:05 Surma: Yes, I don't know how you do it.
00:04:07 Jake: Because I'm quite a sweary person, but when you're faced with the prospect of having every swear I do is an editing effort for me. It's a real discouragement. It works. I'm a good wee quiet boy.
00:04:23 Surma: I feel like I have to say, I feel like the usually CDS, I/O whenever there was actually generally giving a talk on a stage. There's a switch in my brain, it definitely makes the swear words go away.
00:04:38 Jake: The swear remote goes off.
00:04:39 Surma: I even managed to give a talk at view source once. Hey, that will be the segue if I wouldn't keep talking now. Where I was talking about brain [beep] the programming language. I said like, "Technically, it contains a swear so I'm going to call it brain [click]. " I actually managed to get through the entire talk except one slip-up at the end.
00:05:04 Jake: You dropped-
00:05:05 Surma: The F-bomb. Yes.
00:05:06 Jake: -a brain F-bomb.
00:05:07 Surma: Brain F-bomb.
00:05:11 Jake: I was going to try and do a segue into some content and do you know what? I can't be bothered. I'm tired, man. I still think I'm still tired from the illness. Anyway, content, actual content.
00:05:25 Surma: Probably we could talk about view source because I just mentioned view source.
00:05:31 Jake: Hang on. Are you talking about the conference view source?
00:05:33 Surma: I was talking about the conference view source, but we also had a lot of Twitter drama, around view source.
00:05:39 Jake: Oh, well. It's still going. There was drama, we're now recording this, and there will still be drama.
00:05:46 Surma: Actually, there's two pieces of drama because the one piece of drama is the whole a hacker managed to hack into the source code of a website and extract database data, and now they want to try and make view source illegal in America.
00:05:59 Jake: Yes. Missouri, was it?
00:06:01 Surma: Something like that. Now, I think just today or yesterday, it was in the news. A very, very misleading headline that Chrome is now-- Okay. I think I'm going to try and quote the headline, which was something along the lines of Chrome is adding an API to allow websites to block view source.
00:06:21 Jake: Actually, the headlines tended to be Google is doing this.
00:06:25 Surma: Oh, Google. Yes.
00:06:27 Jake: The headline is just almost wrong for every word. First off, the edition was actually by someone from Microsoft, not that that matters, not that I'm apportioning blame here because I don't think there's any blame, but it was literally [crosstalk]
00:06:41 Surma: If we're going to assign blame, it's Microsoft.
00:06:42 Jake: Yes, it's all Microsoft's fault. Then the next week was like is adding a feature to let sites block access to view source, while it's not, basically. First, the word adding there is wrong because this is building on a feature, which already exists. The key part is letting sites. It's not letting sites, it's letting the owner of the machine block access to it.
00:07:10 Surma: It's a policy that allows you to say-- I think the use case is for stuff like kiosks or schools, where you might take a test via the browser, and you don't want the student to go and-- Even then if that allows them to do something they shouldn't, you've done something wrong.
00:07:29 Jake: Yes, I agree. We're getting a little bit hysterical now because the lights have gone off in the room. All I can see is Sam's face lit up by his laptop screen, but I think we should just carry on like this.
00:07:42 Surma: Yes, sure. We can share the light.
00:07:44 Jake: I tell you what, I'm going to take a photo, excellent, cool. That looks creepy, man. All right. The view source, it's an enterprise policy. It's basically whoever owns your machine is telling you, you can't use view source. You're right, you picked some other thing there, it's like, your exam system shouldn't be hackable, [chuckles] via view source. It seems like some are. If you're the owner of a machine, you can already force install Chrome extensions. We have some, even internally at Google, there are certain ones there. One that has caught me out once before, where it detects if you enter in your corporate password into an unknown Google website.
00:08:30 Surma: Then you get an instant email, "You must change your password."
00:08:34 Jake: Yes. That's a forced extension. These schools and kiosks and things were force installing extensions to try and stop view source and dev tools. Some of them were doing it in a way that wasn't very secure, it was bad for privacy. This policy was added to do it properly. When I say added, this hasn't been added recently. I think the view source bit maybe is new, but the blocking dev tools is well old. Even Firefox has this. They have the same feature.
What makes me really sad and grumpy about this is that there are people and people who I actually really respect in the open web community that are making a big noise about this, and I am pretty sure that they know that this is nothing, that this is a fuss over nothing, but they want their view source war, and they don't want a silly thing like facts getting in the way, they just want a big rallying cry behind view source. I love view source. It's making me properly sad to see and see all that happening. Anyway.
00:09:40 Surma: In the end, there's actually nothing there to talk about. It's a complete non-story.
00:09:45 Jake: Just before we recorded, I explained this on Twitter, and people went, "Well, yes. Well, but, right. Slippery slope, isn't it? Google's done that."
00:09:58 Surma: The slippery slope argument.
00:10:00 Jake: So wants to stop them, now the mechanism is there to block it as an enterprise policy, wants to stop them adding it for science. The answer is nothing. There's nothing stopping it but in the same way that--
00:10:11 Surma: There never has been.
00:10:12 Jake: Well, yes this is the thing. To me it sounds like saying Google has added a feature to let users delete old profiles. What's to stop them deleting everything on your hard drive? The answer is nothing.
00:10:27 Surma: Nothing.
00:10:28 Jake: Yes, but it's such a daft slippery slope argument. If Google or Microsoft or whoever trying to remove view source or dev tools from the browser or allow sites to control that, I will be out there campaigning against it. Because that is so fundamental to the web.
00:10:46 Surma: It's also futile because this content will-- Well, I say futile because my argument was the content can still be requested over the web. You can still call it or whatever.
00:10:57 Jake: Yes.
00:10:57 Surma: Then the same argument can be made for DRM, right? Like basically.
00:11:03 Jake: Yes, DRM, there's sadness. I have sadness around DRM but.
00:11:09 Surma: There's a lot of sadness around DRM. I guess maybe the worry is warranted. Maybe at some point companies do demand that they can protect their HTML source code with DRM.
00:11:21 Jake: Yes, there's two things that people who have-- It seems like people have discovered for the first time and I'm pretty sure they are not discovering it for the first time in reality. Is that if your machine is managed by someone else, it is not your machine. It's a fundamental security thing. If someone else is in control of your machine then everything you do is like as if they are standing over your shoulder. There's a basic fact of security.
00:11:46 Surma: Isn't it looking over your shoulder?
00:11:48 Jake: Well, yes they might be standing. The other part of it is that yes, you have to trust your browser.
00:12:00 Surma: Yes, you have to trust your hardware. There is a level where you need to just assume trust unless you go like full Richard Stallman. Buy a couple of diodes and just glue together your own processor.
00:12:10 Jake: Right, exactly and that's the thing. It's like you have to trust your browser. Then the browser has to trust the operating system and by extension therefore you do as well. When people say like, "Oh, I don't use a particular piece of Apple software on my Mac because I don't trust them." It's like, "Well, you're using OSX, right? You've already given them everything." The same goes with using Chrome on Android. It's like, "I'm not using Chrome on Android because I don't trust Google." You're using Android. That's--
00:12:44 Surma: I'm sure webfree will solve all of this.
00:12:46 Jake: Yes, exactly. Yes, the fundamental rules of security is you have to be trusting the greater platform.
00:12:53 Surma: The fundamental rule of security is just trust that everything is okay.
00:12:59 Jake: Well, it is but open source is a big part of trying to gain that trust. Ironically, it's the open sourceness-- that's a word, stick with it-- that has landed Google and Microsoft in trouble over this view source thing. Is because it's a commit message. It's a commit message that's written for the audience over maintainers. So it doesn't have the chill out everyone this isn't doing this. The people who that message is intended for don't need that information. That information is contextual. Yes, if Apple with Safari shipped the same thing on their internal system or whatever it would be a problem for them because people wouldn't see the commit message. I don't know. Okay, I'm grumpy and sad. I'm grumpy and sad about the whole thing and I know that once we've done this recording there's going to be more on Twitter anyway.
00:13:51 Surma: Should I actually cheer you up with a urinal story?
00:13:53 Jake: Yes.
00:13:54 Surma: We haven't had one a long time actually. It's because-- well, we hadn't in a while, didn't we?
00:13:58 Jake: Public toilet experiences are--
00:13:59 Surma: I don't have the urinal at home.
00:14:00 Jake: No. Here's the thing, you're doing of a bathroom. You move somewhere. The bathroom needs doing, what's your strategy? What are you putting in there? Give me your bathroom appliances. What's your--
00:14:18 Surma: I'm actually, I think, a nice good bathroom that I'm comfortable in is one of my most important things for a house. I would actually spend considerable time figuring that out. I will spend--
00:14:31 Jake: A few seconds now and come up with a list because that's content.
00:14:35 Surma: Open wide, here comes the content. Definitely a really nice, spacious rain shower thing.
00:14:47 Jake: Were you going to say spacious toilet? Because sometimes I do huge dumps and even that one's like a--
00:14:53 Surma: Nice comfortable. Definitely a heated seat for the toilet.
00:14:57 Jake: Well, do you know what? I agree. I would say if I'm doing up a bathroom my number one thing to add would be-- I really hope the noises we're hearing are not on the recording because it sounds like there is a landing.
00:15:09 Surma: [crosstalk] it is invisible.
00:15:09 Jake: Okay. I'm holding you to that. If I was doing up a bathroom the one thing I'm putting in there is one of those Toto Japanese-
00:15:18 Surma: Ah, the bidets.
00:15:20 Jake: -built-in bidet heated seats. All of that.
00:15:23 Surma: Fake noises?
00:15:24 Jake: I can produce my own noises. I'm all over, I'm good at it.
00:15:30 Surma: I would 100% not put in one of these stupid two faucets British things.
00:15:37 Jake: Yes, absolutely.
00:15:38 Surma: Because they're pointless.
00:15:39 Jake: They are pointless. That's all yieldy Britania.
00:15:43 Surma: Yieldy.
00:15:44 Jake: Yes. It's good because what you can do is like you can burn your hands using the hot one and then you can move over to the freezing cold one to--
00:15:55 Surma: Want something in the middle? Screw you.
00:15:57 Jake: Yes, absolutely not.
00:15:59 Surma: Heated mirror. I'm a big fan of so it doesn't fog up. I especially like the ones in hotels where only the center square is heated so the entire mirror fogs up except for this nice little square that is in the middle.
00:16:10 Jake: Yes, because you want to know that it's doing so. Because if the whole mirror did that you wouldn't realize it was happening.
00:16:15 Surma: Yes. You wouldn't appreciate it.
00:16:15 Jake: You wouldn't appreciate it. Exactly, exactly.
00:16:18 Surma: If I could I would also make it one of these bathrooms that have a view onto the ocean. That's obviously more of a requirement of the house than the bathroom but.
00:16:29 Jake: Can you fit an ocean outside? Is that something you-- No, okay? Would I get a plumber, a different kind of plumber for that, to make an ocean happen outside? No, okay.
00:16:41 Surma: That'll be nice.
00:16:43 Jake: Do you have a shower where the temperature gauge has numbers on?
00:16:46 Surma: No, I have a vague the little triangle that gets bigger.
00:16:52 Jake: A triangle getting bigger.
00:16:54 Surma: The thing with the numbers because I think it's never right.
00:16:56 Jake: Yes, of course, it's never right.
00:16:58 Surma: Because I think it's all just they have a boiler that has a temperature. You get some cold water which is warmer in the summer than it is in the winter and you mix it. I think it's just to give you the feeling of control.
00:17:08 Jake: Yes I am at 60 shower heat units. That's what I like.
00:17:15 Surma: It's a bit like the toaster scale. Do you want your toast on a one or more of a three?
00:17:18 Jake: Then the second round of toast is always different, yes.
00:17:23 Surma: Yes.
00:17:23 Jake: Oh my God. Can we talk about the weather?
00:17:26 Surma: We have problems, mate.
00:17:29 Jake: Oh my word. It's nice doing this in person again. Anyway.
00:17:34 Surma: Anyway.
00:17:35 Jake: I've been playing more with Deno. Deno.
00:17:39 Surma: Deno. It's Deno. If you didn’t know that you should watch the AGB two or three video episode we did on Deno.
00:17:47 Jake: Yes, and when we did that episode I don't think I'd ever used it apart from reading a couple of docs. I used it. Okay, I wrote an article blog cause recently which is good, it can go in the show notes because I've mentioned it. Part of that is I wanted to do a little interactive demo where you could select the kind of request you wanted and it would send it to a server and tell you what happened. I needed a server that could receive HTTP requests and then log them in some way that it could be gotten back so the client makes two requests. It makes the calls fail request and then another one to say, "Hey server can you tell me what you got? Did you get a request at all? Did you get a pre-flight"? That sort of thing. I found that I couldn't use Node.
00:18:39 Surma: Was that? Usually, Node is quite good at being a web server.
00:18:46 Jake: The HTTP implementation in Node is based on NGINX
00:18:55 Surma: Is it actually C bindings?
00:19:07 Jake: Do you know what? I'm not confident on this bit? I know they forked the NGINX stuff and I don't know if they rewrote it in a different language but they stayed with some of the NGINX concepts. Apparently, NGINX is-- We know NGINX is incredibly fast. It powers half of the web. Apparently, the code is an absolute nightmare. One part of that is the HTTP method is an Enum. Meaning it supports a finite list of HTTP methods. If you go outside of this-- and they've got like 30 items in there. If you go outside this set it's big old error time.
00:19:41 Surma: Now does HTTP spec prescribe verbs as they're called? They're called verbs? Or can you actually technically make up your own?
00:19:50 Jake: I think it's the same way that status codes. It will document particular status codes and maybe even behaviors of particular status codes. I think if you send a response with a 599, I'm assuming that's not being registered. It might be, but then it's fine.
00:20:08 Surma: 911.
00:20:09 Surma: 911.
00:20:15 Surma: It just sounds like-
00:20:17 Jake: Something screaming.
00:20:18 Surma: -like Guinea pig are being thrown into a blender.
00:20:24 Jake: I now hope they are on the recording.
00:20:27 Surma: That's cruel.
00:20:29 Jake: I think it's like status code in which particular status codes are documented, but I think really, it's just a field for a number and you can do what you want. It's definitely true for the method. [crosstalk]
00:20:39 Surma: Yes. You can definitely return a random status code that doesn't have any meaning associated with it and it won't break a browser.
00:20:47 Jake: Yes, exactly. An HTTP method is one of those that you can send a request with any method and the spec, there's all weird stuff with auto capitalizing certain ones. That's in the fact spec but yes. Anyway, to node credit, their HTTP/2 server is fine. It can do any kind of method. Well, yes, then if you're going to host a Node HTTP/2 server, where do you do that? Because if I'm doing a Node thing--
00:21:20 Surma: Have you heard of Google App Engine?
00:21:22 Jake: Oh man. I don't know for sure if it supports the HTTP/2 server in Node.
00:21:28 Surma: I think you don't get access to it yourself. You use HTTP/1.1 to communicate to the Google frontend thing. Yes, no, it [crosstalk]
00:21:35 Jake: Which is the same as Glitch, which is my other go-to for that sort of stuff, which lands you with the same problem. Then it turns out Deno, not got this problem. Because it uses a rust implementation for its HTTP stuff which doesn't doesn't have this problem. I thought, oh, I'll use that. I started learning all of its stuff and then I realized that Deno Deploy, Deno Deploy, I'm going to get that wrong every time, Deno Deploy, which is their equivalent of Glitch sort of thing. It has its own wrapper API, which is basically service worker. It's effectively that.
I was just like, oh, hang on. Where has this been on my life? Because I know this. It's just like, I can just start writing this stuff. Yet, it's a few lines of code. It's not as low level as some of the stuff that you can do with Node. Oddly for me it was lower level because it supported these free form HTTP method stuff. I think it's pretty incredible. I was looking a little bit more at the Deno Deploy stuff. I don't know if you've seen this, they've got broadcast channel, but the way broadcast channel works in Deno Deploy land is like when you deploy something via Deno Deploy, it's going to send multiple copies of that thing running scale out.
That round the world, multiple instances, the broadcast channel is a synchronization point for all of those deployments.
00:23:08 Surma: That's cool.
00:23:09 Jake: Isn't that cool? I think that's really cool.
00:23:12 Surma: That's really clever.
00:23:13 Jake: I know. I was really impressed by that.
00:23:16 Surma: It's really interesting how there's one thing about Deno doing the whole we're going to embrace all the web platform APIs that are there and just support them. They even have WebGPU, which I thought was amazing to access to your GPU as a compute entity, but then they're also not doing-- if they need to invent something or want to bring something new to Deno that doesn't exist or there is no precedent, then they will build it on top of the web platform [unintelligible 00:23:48] and that's really nice. That's a really nice approach at least for us web developers, I guess.
00:23:52 Jake: Yes. It's good and it's bad. It means that because it does things the Fetch API way, it means you can't get hold of the encoded response because we haven't figured out a way of doing that in Fetch yet. Hopefully we will one day but it does put a bit of stop energy, I think, on Deno. On the other hand, writing stuff using the web streams, API, Fetch, all this, I've been blown away thinking how much cool would this have been if I wrote it in Node?
00:24:26 Surma: Do you know if on the Deno Deploy, if stuff like local storage is also synchronized between the instances?
00:24:33 Jake: That's interesting.
00:24:35 Surma: Because they do have local storage.
00:24:37 Jake: Yes. That's a good question. I don't know.
00:24:39 Surma: They don't have IDB, luckily, I think.
00:24:44 Jake: Local storage being synchronous suggests to me that no local storage is going to be something more local to that deployment.
00:24:51 Surma: Maybe it has eventual consistency. Who know?
00:24:53 Jake: Well, I guess, that is how local storage works in browsers as well. Because you can access local storage across processes. Two tabs run different processes.
00:25:01 Surma: They could block on a write until all other processes have received and acknowledged.
00:25:07 Jake: I think we do eventual consistency. I think is--
00:25:10 Surma: Interesting.
00:25:11 Jake: Maybe. I don't know. I'm talking nonsense now. Just making stuff up. Sounded good though, didn't it? Sounded like I knew what I was on about.
00:25:20 Surma: Is it your new go to?
00:25:23 Jake: I think for basic little servers, yes, I reckon. I wrote a thing recently and I'll post a link to it and actually it was on the weeks I was ill and I'd set myself a little coding challenge just to convince myself I could still think or I could still code. Because I thought it was maybe permanent. I coded a little thing that would take a list of all of the titles from Wikipedia because I wanted to be able to search things that started or ended with a particular string for another project. It doesn't matter.
Now, the stuff I was getting from this file from Wikipedia is gzipped but it's not sent. It's not gzipped as in the content and coding way.
00:26:05 Surma: It's a GZ file.
00:26:06 Jake: It's a .gz. Deno hasn't yet implemented the compression stream stuff.
00:26:13 Surma: Oh.
00:26:14 Jake: I had to reimplement that. I found a library which did something that wasn't quite what I wanted, but I found buried in there.
00:26:26 Jake: Well, I couldn't find one that did it streaming and I was obsessed with using streams. I did find actually just the underlying inflate primitive for another library, but that felt like a bunch of effort there. Whereas in Node land, I had just done NPM, blah, blah, blah.
00:26:42 Surma: You would've not streamed.
00:26:44 Jake: No, I think there are streaming ones for Node as well. Oh, but I would still have to use the Node streaming API, which is, I don't know. I don't like so much, but.
00:26:52 Surma: I do like about Denos, you don't do like an NPM in it or have to install packages. You just import them and then it just runs and its nice.
00:27:01 Jake: It's so good.
00:27:02 Surma: It's weird because it seems like a minor thing, but emotionally, it makes a big difference when I'm just like hacking away.
00:27:09 Jake: I like the TypeScript by default stuff as well. I know people have big feelings about TypeScript, but I also have big feelings about TypeScript and people who have different feelings to me, they can--
00:27:20 Surma: They're wrong.
00:27:21 Jake: They're wrong.
00:27:23 Surma: There is some-
00:27:24 Jake: I get it.
00:27:24 Surma: -valid criticism.
00:27:25 Jake: Absolutely.
00:27:26 Surma: I also feel like Deno actually, you can just not do type annotations and it will just still work.
00:27:40 Surma: Absolutely.
00:28:11 Jake: Is it the urinal story? Do you know what, we never actually did the urinal story.
00:28:15 Surma: No, we didn't. We sidetracked that completely. One of my first times back at a restaurant with my partner, just eating out and I bummed into an American dude at the bar and apologized and we just had this little bonding moment. Oh, sorry. Oh no. It's all right, [unintelligible 00:28:37] and just moved on.
00:28:37 Jake: Best of friends now. [crosstalk] Christmas.
00:28:39 Surma: I remembered his face. Later on, went to the bathroom, did my thing. Wanted to leave and he just opened the door to come in and it really stuck with me that when he recognized me his response was all right, there you go. Well done. I thought something to myself, A, that's a very American response and B, thank you. Nobody ever praises me for the exquisite work.
00:29:04 Jake: For your output. Your toilet output.
00:29:08 Surma: What a-
00:29:10 Jake: I wish I did.
00:29:13 Surma: It's like with my dog, he gets treats whenever he-- Well, not anymore but.
00:29:18 Jake: He turns that into poo which is great.
00:29:20 Surma: It's a self sustaining system.
00:29:25 Jake: I feel like I might have told this story before, but because it's from ancient history. It was in the day of Nokia phones. I was an intern and there was a guy in the stall next to me, this is in the work, where I was working at the time. The guy in the stall next to me having some degree of problem. He was having to really work this one out. I felt for the guy but eventually through one last push-
00:30:01 Surma: Success.
00:30:02 Jake: Yes. Bloop. At that moment, he, I guess received a text message or something. Anyway, all I heard is bloop [ringing] [chuckles] and I nearly ruptured several veins trying not to laugh out loud at the poo fanfair.
00:30:25 Surma: You may or may not remember that December last year, I wrote a blog post about dithering, black and white dithering.
00:30:37 Jake: That was a good post.
00:30:37 Surma: That was a fun blog post.
00:30:39 Jake: It was one of the ones that it broke the system where usually what happens is the more effort you put into something, the less success it has, but I think you put a lot of effort into it, and actually, people read it.
00:30:50 Surma: Yes. I think it was December, I can spend some time doing something fun. That was that. Yes, actually I didn't do too badly, and I'm still quite proud of that. As you also know, that recently, through CSS, I was forced, not forced, but I felt compelled to learn about colors and how they work and color spaces. Mostly because CSS now was starting to allow you to get access to more colors through wider gamuts like P3 and REC. 2020, and those shinanigans. Also, that color spaces have a huge impact on what a gradient look like. What does mixing even mean?
00:31:40 Jake: Yes. We recorded an HTTP/2 or 3 episode about this.
00:31:45 Surma: Yes, never made it. We're going to try and re-record this.
00:31:48 Jake: We're going to re-record it.
00:31:49 Surma: Hopefully. I can't link to that just yet, but when I was sick, for some reason, I was working on my blog post build system. I was checking that things still work. One of the things I clicked at was my dithering article, and I read through it. One of the things I was talking about is gamma correction, which I realized you need to-- Now I understand actually, why you need to do it because what you're basically doing instead of creating a color on a pixel, you are trying to emulate a color by putting two differently colored pixels next to each other so that their light mixes.
00:32:30 Jake: Isn't the whole gamma thing based on the CRT [crosstalk]
00:32:33 Surma: It is. For sRGB. It is.
00:32:35 Jake: For sRGB.
00:32:36 Surma: You need to remove that because in linear sRGB, you are basically working with light as prescribed by physics. You can add colors together and the result will be what happens when you add these two colors as light. It turns out-- I thought you do with pixels because they're light sources.
00:32:55 Jake: Right. Of course.
00:32:56 Surma: That's why you need to basically go into linear sRGB when you do dithering. Now that I understood that I was like, "Hang on. Do I now have enough knowledge or sufficient-- or to actually think about dithering in more than just black and white? What about color dithering?"
00:33:14 Jake: Oh, well, I would say the thing you're mentioning now the like, gamma-corrected versus linear sRGB is something even high-end graphics applications get wrong.
00:33:25 Surma: Oh, they still do that. Even Photoshop, when you blur in gamma-corrected sRGB rather than in a linear color space, which means if you have a big red rectangle and a big green rectangle next to each other and you blur them, you will go to poo color in the middle and lose brightness, which shouldn't be happening.
00:33:49 Jake: Chrome's blue filter is the same.
00:33:52 Surma: Same.
00:33:52 Jake: It might be the same in Firefox as far as well. I don't know for sure.
00:33:56 Surma: Exactly what I wanted to talk about because I've been working on basic-- The last time for the dithering thing, back and white, I brought a little Workerize app where you can just throw an image in and it dithers it for you in different dithering algorithms. You can look at it. Now with colors, there's obviously more parameters, more choices, same deterring algorithms but more choices. What do you do and what color space blah, blah, blah? I used the Scrooge slider, the two app pinch-zoom combination that you can zoom in and look at the differences, all very nice.
00:34:25 Jake: Wait. Why haven't I seen this? Have you Tweeted it?
00:34:27 Surma: I haven't written it yet. I'm building the demo currently and I plan to write a blog post on it. Let's see if I ever do. My idea was how can I make it easy to see whether the dithered image actually looks the same as the original. Is the dithering appropriately emulating the colors from the original because obviously, I'm doing pellet reduction? The whole point of dithering is that you have less colors at hand. I was like, "Oh, easy. I will blur."
00:34:56 Jake: Yes. Then you have to do it in linear space.
00:34:58 Surma: Then I was like, "Hang on. When I blur it-- I tweaked the parameters until it looked correct. Then I was like, with my human eyes without the blur, it looks completely wrong. The dithered version looks sufficiently different from the original. Then I started doing it with squinting. I went analog.
00:35:18 Jake: Brilliant.
00:35:19 Surma: That's how I discovered exactly that, that even in Chrome, the blurring is in gamma correct essentially. Most disturbingly, I talked to Fernando, who is one of our team lead for the canvas engineering team. He says, "Yes, they know. Yes, they want to add something to allow you to fix it, but they cannot change it anymore because now sites rely on this."
00:35:44 Jake: It's a compad issue.
00:35:45 Surma: It's a compad issue. We cannot fix how blur filters work anymore. They have to be in sRGB now.
00:35:51 Jake: Oh, that's sad. Isn't it?
00:35:53 Surma: It's so sad.
00:35:55 Jake: On the squinting thing, I like the thing where if you get really-- I'm actually getting really close to my pop filter right now. If you get so close that you can't focus on the individual threads of the thing, but then you squint one eye, they come back into focus. For the same reason like an aperture works.
00:36:10 Surma: Exactly.
00:36:12 Jake: That's cool, isn't it? It's like can make more focus happen.
00:36:14 Surma: What find interesting about it. I like how I'm actually doing it because otherwise, I couldn't talk about it without doing it.
00:36:20 Jake: I found myself doing the same thing just now.
00:36:24 Surma: With a camera, if you closed on the aperture, your image gets darker.
00:36:28 Jake: Of course. There's light, isn't it.
00:36:30 Surma: In our human brains--
00:36:31 Jake: They just lift up the light as they [crosstalk]
00:36:33 Surma: They correct for it because the screen that I'm looking at stays the same brightness despite squinting.
00:36:38 Jake: Have you seen the thing where if you darken one eye, which you can do via squinting as well--
00:36:45 Surma: Wait. Do you mean like put ink in my eyeball to darken it?
00:36:49 Jake: There are definitely better ways of doing it, but you can do it just by squinting but also sunglasses just with one lens, it introduces a signal lag.
00:36:58 Surma: This is the Tom Scott?
00:37:01 Jake: Yes. Do you know what really annoyed me is I--
00:37:04 Surma: We will link to the video in the description.
00:37:06 Jake: We will link to the Tom Scott video. This was done. I first was introduced to this, I think it's the same place Tom was introduced. It was in a comic relief special of Doctor Who and some other things, and they were doing 3D this way. I thought like, "Oh, that's a really cool thing. I'm going to make a YouTube video about this." Then I thought, "Hang on a minute. Fairly retro thing with a UK link to sci-fi." I bet Tom Scott's done a video. [unintelligible 00:37:39] Yes, he has. Of course, Tom Scott has done a video about his already. Can we stop talking about Tom Scott? Look, I'm jealous of the guy. Can we stop?
00:37:51 Surma: Oh, are you?
00:37:51 Jake: No. No.
00:37:53 Surma: No?
00:37:53 Jake: No.
00:37:53 Surma: No, he's successful. We're not jealous.
00:37:55 Jake: No. I'm happy for the success.
00:38:01 Jake: No, I really like him actually, I really like his stuff.
00:38:10 Jake: Why don't we get a million views, Sam? Why aren't we popular? Look, I get that we're not likable. [chuckles] Why should other people [crosstalk]
00:38:19 Surma: Still, other people aren't likable. Cutie Pie isn't likable.
00:38:23 Jake: Exactly. When has likability ever been in the way of success? [chuckles] Oh, man. Look, shall we talk about the web?
00:38:33 Surma: Sure.
00:38:35 Jake: Look, I don't have time to cover this topic, we've already been rabbiting on for ages, but I will give some details about one of the things, the standards things I'm working on right now is shared element transitions because what we want, or what I want is when you click a link on a page to another page on your own site, is it free to do a nice transition? That thing that people end up sticking react and whatever else onto the page.
00:39:05 Surma: The routers and push state and fetching documents, manually pausing them, creating DOM, and then transitioning. It's a lot of work.
00:39:14 Jake: It's a lot of work, do you know what? Even in an SPA case, it's hard because you end up with both bits of the DOM there at the same time. You need to be careful that they don't get double-clicked, that they're not visible to the accessibility tree, that you don't end up keyboard-focused in something that's now disappearing off the screen. It's full of problems.
00:39:32 Surma: If then people start going back and forwards and you want to put in the work to maintain scroll positions and it's horrible.
00:39:40 Jake: The whole idea behind shared element transition is to make that easier. It's not just going to be for multi-page architecture, it's going to be for SPA as well. The idea is to try and smooth over that issue where you need to have both things alive at the same time or at least visually, and that's the key to this whole thing is that the rough way is you've got your page A that's going away and it can go, "I've got some stuff here that you might be interested in making a transition out of." It's talking to the next page, by the way. I don't know if I made that clear.
00:40:17 Surma: It's in the name. It's transition with the shared element.
00:40:22 Jake: Yes and do you know what? I'm going on a tangent already. Is that I threw the grenade into the chatroom just before coming to this podcast where I said, "Is shared element actually the right name for this?" Because I don't think it is.
00:40:37 Surma: Oh, is there no shared element anymore?
00:40:39 Jake: When the page is saying, "Look, here's my header. Here's this hovering button that's maybe going to be in both pages and here's the rest of my page." It's the next page's responsibility to do stuff with that but it just gets representation of those old parts. Usually, as a texture. There are some cases where you can pass bits of CSS around as well but it's a much more simplified copy of those parts and then the new page is like, "I've got all this stuff and I can also do similar copies of my own stuff and now, I'm going to animate them around. Then I'm done and that's my page."
00:41:17 Surma: It's sad that this is a podcast because I think that Dan actually describes this process very well.
00:41:23 Jake: As I say, I don't want to make this a long, long topic. I'm willing to explain some of that but I think, you raise a good point. It's the shared element thing. In my explainer and people are trying to get me to put it back, to shared elements rather than transition parts, which I've called them.
00:41:40 Surma: How about transition bits?
00:41:42 Jake: Transition bits and parts. It's like-
00:41:45 Surma: Bits and bobs.
00:41:45 Jake: -how many words do you need to come up with for stuff on the website? Your metadata and all of that stuff but I'm trying to make the case that I don't think it's a shared element because I was thinking about the other shared things that we have on the platform and they are? Go for it, Sam.
00:42:01 Surma: What?
00:42:02 Jake: [chuckles] I was just checking if you're listening. We've got other shared things. Think of things that we have on the web platform, which are a thing but you've got a shared version of it because that's what it is saying here. It's we've got an element. We know what an element is but it's the shared one of those.
00:42:20 Surma: We have a shared array buffer.
00:42:21 Jake: Shared array buffer and also, shared worker. There might be more but I can't think of any but in those two cases-
00:42:34 Surma: It's very different.
00:42:35 Jake: -the two clients are sharing the same thing.
00:42:39 Surma: As implied by the word sharing.
00:42:41 Jake: Well, so then shared element is wrong.
00:42:43 Surma: Because you're saying it's more like the placeholder until the real one comes in.
00:42:48 Jake: It's a copy. It's a simplified copy of the element because in a shared world you do something to the thing. The other side sees the thing you did and they're both accessing it at the same time. They're sharing it and that's not what is happening here.
00:43:03 Surma: It's carbon copy elementary transition.
00:43:05 Jake: Yes, a photocopy.
00:43:08 Surma: Like and like.
00:43:10 Jake: I think, that's what we're calling it but yes, that's the mechanism we're going for is-- Here's one part that will talk about in detail and I'll leave the rest for the explainer. Crossfading on the web is-
00:43:26 Surma: Hard.
00:43:26 Jake: -impossible.
00:43:28 Surma: Impossible?
00:43:28 Jake: Well, I think so.
00:43:33 Surma: What's quite sexual for the word impossible?
00:43:37 Jake: Impossible. I think it's impossible. A way you can do crossfading on the web is to have two elements, at least one of which has an opaque background and you put that one on the top, you fade it away or fade it in, whichever way you're going, and then remove the other one but if both have elements of transparency, that forces your hand to have one go from opacity one to opacity zero and the other one go from opacity zero to opacity one.
00:44:11 Surma: You get into a multi [unintelligible 00:44:12] activity territory.
00:44:14 Jake: I know a situation where if you have black 50% opacity on top of black 50% opacity, you get black 75% opacity, which is not how a crossfade works.
00:44:27 Surma: Nope.
00:44:28 Jake: That's why it's difficult. One of the things that we've looked at and there is actually a crossfade function in CSS that I don't know if anyone implements but it only works for images. It's designed to take two of the things that CSS will call an image.
00:44:49 Surma: What is the mathematical solution?
00:44:51 Jake: In the big list of compositing functions there is-
00:44:56 Surma: The [unintelligible 00:44:57] whatever they're called.
00:44:59 Jake: [unintelligible 00:45:00] Corporation. I think if I get in trouble with something legal I'm going to hire them.
00:45:10 Jake: Porter Duff.
00:45:11 Surma: Porter Duff.
00:45:13 Jake: It's Porter Duff, I think. Is it Porter Duff?
00:45:14 Surma: I don't know. I Googled for source over.
00:45:18 Jake: What did you say? Like Hilbad [unintelligible 00:45:20] over or something.
00:45:24 Surma: Why does MDN just use those words and not give context on where they--
00:45:30 Jake: Are you just live editing MDN now?
00:45:31 Surma: Can I? I'm pressing pods. They don't even mention-
00:45:36 Jake: The spec does mention Porter Duff. The spec has a series of blend modes and a series of compositing modes.
00:45:45 Surma: Android called in PorterDuff.Mode. They even have it in the API name. That's good.
00:45:49 Jake: The spec has a series of blend modes and compositor modes. The blend modes are all exposed in mixed blend mode and the compositor modes and maybe the blend modes as well are supported in the canvas global compositing operator. The compositing mode that I believe that we're looking for is lighter or plus-lighter.
00:46:17 Surma: What's the difference?
00:46:18 Jake: Plus-lighter has just got a cap to one. Maxes things to one. I don't know what we would-- I mean, lighter surely does that are well. I don't what it would do otherwise because when it converts it back to 0255 it's got to cap it somewhere. It's not going to buffer overflow.
00:46:36 Surma: When it crashes. You blended an image wrong.
00:46:40 Jake: Exactly and the way that works is it sums the two opacities of the things together and it multiplies the colors together but [crosstalk]
00:46:50 Surma: By opacity. You don't multiply red with red because that seems-
00:46:56 Jake: I think, you do but it's pre-multiplied.
00:46:59 Surma: In pre-multiplied land.
00:47:00 Jake: Yes.
00:47:01 Surma: For the listeners, pre-multiplied means that the color channels are premultiplied with the alpha channels.
00:47:07 Jake: Yes, thank you. Then I had this obsession for so long. It was actually one of our engineers who said, "We've got this plus-lighter thing and it appears to be how crossfading works internally and other parts of Chrome. We just need to expose that," but I was looking at the massiveness you know I'm a strong, mass person but I was looking at this, particularly the multiplying of the colors. I was like, "This doesn't feel like it's right unless we isolate the two things that are crossfading because they're going to still composite on the background."
I ended up writing a very messy piece of code to implement the compositing operation just using 2D Canvas. It's really, really slow. I should have used WebGL but it doesn't matter and yes, it made the case that it actually works fine if it's only done between two elements. You can do more elements but as long as their opacities add up to one and it works fine. That is going to be our method of crossfading and I'm hoping we're going to just add this to mixed blend mode, hopefully.
I hope there isn't a massive fuss about, well, this is a compositing operation. Why would you put it in a mixed blend mode? It's like where else would we put it? I don't know but it might be more work but I'm hoping that even though all this effort is to do with shared element transitions, I'm hoping we can just expose that as a separate thing, so people can do proper crossfading.
00:48:39 Surma: That'll be nice.
00:48:41 Jake: I'll link to the demo, my slow, horrible demo, and someone can go and re-implement in WebGL because that would be the right thing to do but I--
00:48:47 Surma: If it's just showing if it works or not, if something goes wrong it seems fine.
00:48:52 Jake: Thanks, mate. It's one of those things where I just needed to hack it together quickly and I don't--
00:48:58 Surma: You were totally still ill and couldn't think.
00:49:01 Jake: No, it's just that I'm not confident enough with WebGL.
00:49:04 Surma: It's such a bow leg to the boilerplate.
00:49:09 Jake: That's the thing and I've only ever done it once and it was for that talk we gave on images and I did the--
00:49:18 Surma: Chroma extraction and the [crosstalk]
00:49:21 Jake: The Chroma subsampling stuff and I was dead proud of myself but I was like, I'm not going through that again when I need an answer in--
00:49:27 Surma: Actually, what you could do is rip out the shader custom element from prox.
00:49:33 Jake: Oh, that could work.
00:49:34 Surma: That has an all-
00:49:36 Jake: I probably could have reused the stuff I did for that image exam. I was just like, "I don't-- [crosstalk]
00:49:40 Surma: No and I'm not doing three yes because I don't use libraries. I make them.
00:49:45 Jake: Do you know what? I didn't know where I stood when it came to pre-multiplied alpha and this stuff. Whereas, I know Canvas is not pre-multiplied and-
00:49:57 Surma: I always thought it was.
00:49:58 Jake: No, if you're doing put image data, it assumes not multiplied.
00:50:03 Surma: Really?
00:50:04 Jake: Yes.
00:50:05 Surma: I could have sworn.
00:50:07 Jake: Well you're wrong [laughs] I think so, I could be really embarrassed. I've to add a little disclaimer into this. "Turns out, Jake was wrong all along.
00:50:17 Surma: We'll put a disclaimer in there either way, one of us is wrong.
00:50:20 Jake: No. I'm pretty sure because I had to multiply the numbers to do the operations and unmultiplied them when writing it back to put in.
00:50:27 Surma: I actually don't even know how you check.
00:50:29 Jake: Well, you do that, presumably. You just not do the second step. [chuckles] It needed multiply together else the effect didn't work and then it needed unmultiplied else it didn't work. I don't know. I don't know. Maybe.
00:50:43 Surma: We'll fistfight it out.
00:50:47 Jake: Oh, well. We've surely talked enough now, haven't we? I need to go and be grumpy somewhere else.
00:50:52 Surma: Be grumpy at our colleagues.
00:50:56 Jake: Let's see what Twitter is saying about the view source thing now. Let's see if someone has-- I'm increasingly just sick of everything.
00:51:04 Surma: Grumpy old man.
00:51:05 Jake: Yes. That happens, doesn't it? I see so many people that are better at their role because they're cheery and they're able to be cheery all the time. I hate them
00:51:16 Surma: Drugs.
00:51:20 Jake: I just envy their ability to not just lose it with someone who's being annoying. Good on them. Good on them, I say.
00:51:31 Surma: Yes. Some people are very tactful even in the most belligerent conversations on Twitter.
00:51:36 Jake: [laughs] Oh, dear.
00:51:39 Surma: We should cut it.
00:51:40 Jake: Yes, we're done here.
00:51:40 Surma: We should cut it. So I'll see you in March for the next podcast roughly?
00:51:48 Jake: [laughs] Yes. Something like that. I've enjoyed this, though.
00:51:50 Surma: Yes. It was good. The [unintelligible 00:51:51] was unpleasant even though we can barely see each other.
00:51:53 Jake: Yes. We're still sitting in the dark. For anyone wondering.
00:51:57 Surma: At some point, even the laptop's being turned off. So that had to be fixed.
00:52:00 Jake: Plunged into darkness.
00:52:02 Surma: Should I press the boop-boop button?
00:52:04 Jake: Go on. Press the bloop-bloop button. Hang on. We've got our catchphrase.
00:52:10 Surma: I was going to say like, "Well, what do we say before we press the button?"
00:52:14 Jake: Wait. Don't press the boop-boop straight away afterwards because, I don't know, something might happen.
00:52:20 Surma: [laughs] The universe.
00:52:21 Jake: It might be gold. It might need to stay in the episode
00:52:23 Surma: It says, "Test recording done. Now deleting file."
00:52:27 Jake: Do you know what? I couldn't handle that right now.
00:52:29 Surma: No. After losing three video episodes to device malfunction.
00:52:34 Jake: It's weird listening because we're wearing headphones now. I don't know what's happening with my voice but I feel like I'm starting to sound like the guy from Billions. Have you ever watched Billions?
00:52:41 Surma: No.
00:52:42 Jake: He's a New York attorney and he talks like this all the time. "And I'm going to find where the secret is that Bobby Axelrod has and I'm going to show him for what he is in front of the whole goddamn city."
00:52:58 Surma: Sounds like he gets off on showing people. [scoffs]
00:53:01 Jake: Actually, that is part of the plot.
00:53:05 Surma: [laughs]
00:53:05 Jake: You got him with that voice talking about all of the legal stuff all the time. Then you got Damian Lewis, who comes in to do the other part. Do you know Damian Lewis?
00:53:16 Surma: Yes.
00:53:16 Jake: His way of doing an American accent is just to shove his mouth as far up the side of his face as he can. Just kind of talks like this. [unintelligible 00:53:27] [laughs] He's mouth ends up just next to his ear. Both sides of his mouth are next to his left ear. [giggles] "Oh, okay, well I actually double-double-crossed you." [00:53:40] "Well, actually I triple crossed--" I can't do a good impersonation of it.
That reminds me, didn't you show me a video of Michael Cane in an old movie, doing an American accent? It's so good. I don't bother [unintelligible 00:53:55] the doors, right? That's him, right?
00:53:59 Surma: Not in that movie, he isn't. [laughs] He is somewhere in between reality and complete absurdity.
00:54:07 Jake: The other one, Ray Winstone.
00:54:09 Surma: Close [scoffs]
00:54:10 Jake: Ray Winstone is amazing because find any clip of Ray Winstone playing an American. Ray Winstone is a big Cockney man, right. Him doing American is like, "I'm going to go down here and down the bloody [unintelligible 00:54:23]"
00:54:25 Jake: It just falls straight back into "All right, mate-- " Straight back into like East Enders style "I'm going to [unintelligible 00:54:33] and I'm going to absolutely slap you around." [wheezes] We'll link to some terrible accents. I actually think that my Billions guy voice is pretty good. I think it's pretty goddamn good.
00:54:47 Surma: I feel like towards the end of this podcast the sexual tension is-
00:54:53 Surma: -through the roof.
00:54:55 Jake: Can you do any impressions?
00:54:56 Surma: Oh, no. Especially not in English. I'm glad I got my accent under control. I can't do other ones. I can do some German ones but that's not really helpful for this podcast, I reckon.
00:55:05 Jake: What if my favorite accents is a German comedian. He is called Henning Wehn. His accent is sort of, kind of, like a London accent but with not. [laughs] It sort of all over the place and kind of like that. I love it. I absolutely love Henning Wehn.
00:55:26 Surma: I haven't watched him in a long time. We're just promoting--
00:55:28 Jake: I feel like [crosstalk] I feel like I'm holding you hostage now. Refusing to end this podcast
00:55:34 Surma: I can just press the boop boop button.
00:55:36 Jake: You could just press the boop boop button. I suppose you have the control.
00:55:39 In-unison: Happy next time!
00:55:40 Jake: Bye.
00:55:41 Surma: Bye.
00:55:56 Jake: Okay. Beep Beep.
00:55:57 Surma: Boop Boop.
00:55:58 Jake: Boop bi-di beep beep.
00:56:00 Surma: ba-boop boop-bi di-boop.
00:56:02 Jake: Makes more sense than usual episodes.