 I do sometimes wonder if there's, like, you know, some video connoisseurs and they're like, video is **** about the production quality. Yeah. Here's what I want to talk about. Silly old dom stuff. Not dom. Just dom. It is also going to be dom. But this is not our first time filming this. It is not. Because we had, you know, we did a recording, lost the footage. Anyway, but last time we recorded this late in the lunch before filming, our lovely producer Aaron. Said, so what's, what are you doing for Halloween special then? And I was like, what? What? Oh, we had this all planned out. So yeah, it was like a plate when this came out and I'm maybe making a big deal of how much work I did because what I did is I did this. I changed the background, changed the title and I was like, and you know what? I was actually more happy with this title because I'm wanting to talk about like features of the web that are, have failed to die. They're still there and we wish they weren't. And so far, this is a good title, but Halloween has gone. Are you now going to use the next seasonal colouring? So welcome to Rue Dom, the refloat rendue de roue. Wow. It doesn't make sense. Just go with it. Just go with it. So this is the Christmas special now. If I have to make this the Easter special. There'll be trouble. Okay. I'm still trying to think of a refloat renderer. What does it look like? It doesn't make sense. Just let it flow over you. Okay. I want to talk about all Dom stuff that we still have to live with. And in case you missed it, that's what we're talking about Dom stuff. Dom stuff. And a lot of it is me quizzing you about this. Because you came from more of a... You joined the web late, right? You could be more of a traditional computer science background. So some of this stuff might be before your time, but it's still stuff that we have to deal with in browsers today. So I'll ask you questions about it. And I'll fail and then you'll educate me. And see if you can remember how wrong you got it in the first time. Well, the thing is this is all old Dom stuff. I like Dom Dom stuff. I obviously didn't memorise it because it's old and dumb. So I think I've forgotten all about this. So hit me. Good. Which one of these is best? I'm feeling purplish today. Yes, correct answer. Because that is the archival colour. And the other is the summer colour. As in like if I put these letters as a CSS colour, that what comes out? Almost. One of these, it only works in the BG colour attribute. I remember the BG colour attribute. Old Dom stuff. It has very stupid, crazy ways of parsing something into a colour. I'll link to the full set of rules. And looking at these words, I have no idea how you arrive at blue for summer and at the purple for archibald. This is not the full set of rules. I'm just focusing on the ones that apply to these words. If it's not like a recognised colour name or whatever, what it'll do is it'll start off by removing all of the things that aren't hex letters, numbers, whatever. Okay. Yep. Next step is to pad it with zeros until there's a multiple of three characters. I'm already there. Nine. So you get the next one. I get a zero. Cool. There you go. And then split it into three. For red. Green and blue. Yeah. Absolutely. Okay. And then truncate from the right until you have two characters each. And there you go. That's how one is purple and one is blue. I like how you have things to the right just to then potentially just cut it off later again. Yes, absolutely. And like I say, there's even more weird rules around it. But that is how those ones work. Definitely should be in any good web developer interview. Yes. Absolutely. And we'll link to a website which lets you play around to the full rule set as well. That'll be in the description. All right. Here we go. An image. I'm going to show you an image. And you're going to tell me what format the image is. You ready? Didn't we do this once before? You can show me an image and I have. Okay. Yes. Yeah. Do it. Go on. But this is a different one. Here we go. What do you think? Oh. Oh. Oh. Oh. Wait. These artifacts are all over the place. This is like, well, it's, it's animating. So my, my immediate thought is GIF, but it has too many colors. Some of them have too many colors for GIF. Right. And so like in some of the artifacts are like very, this is Aviv artifacts. Well done. But the other ones are not. This looks like a two color GIF or PNG. And like, what is it, Jake? It makes no sense. Is it a video? You're right that these are different formats that you're looking at. So that's, you know, PNG, I think Aviv that one, WebP that one, JPEG that one, and Aviv as you correctly identified. But this is just a single image tag on the page. No JavaScript doing any of this. Because it is a special kind of HTTP response. What? It is multi-part X mix replace. With a rudon boundary. With a rudon boundary. See, it's the Christmas episode. It makes sense now. Yeah. And it's a multi-part format. So it's like this, you know, you get the boundary. You say what the content type is. And then you'll put the data there. And then that, and this is how it works. Oh, is this how old webcams used to work? This is how old webcams used to work. It just streamed JPEGs. It just streamed JPEGs. That is silly. And enough of those still exist. God, that we have to maintain this code. And it's one of those things that, I spoke to a Safari engineer on this. And they say, it's like, yeah, we break this all the time. And someone comes and tells us it's broken. Like, because people are still relying on it. And so we have, you know, got so many tests now. That's horrible. And here's the thing. In an image tag, it's only going to be able to display images. But if you navigate to this resource, you can do anything. And it will. So this works for navigations as well? So this works in Firefox and Safari. We removed support for this in Chrome. Because we were just like, this seems like something we'll forget about to make a security issue. That's like $1 box of issues. Exactly. It works effectively like a page reload. Every boundary will sort of be like a reload, but with the new content. Should I even ask how caching works in this context? No. It's a streaming resource, so it won't cache. I believe. I hope. That's an interesting test to write, though. I'm excited about that. But I think, yeah. I mean, it would only be able to cache, I guess, if it terminated. So if you reach the end of the stream at some point, I dread to think. I don't want to go there. That just seems. All right. Next one. All right. We create an image. An image. Which of these works? Which of these works? Well, as in an image will be displayed when the URL is assigned to it. It will behave like an image on the page. Like my intuition is because LOL Web would be both. I feel like they used to be like X HTML or something that had like image spelled out or something like that. No, you simpleton. It's just that one. Of course it is. Do you not know HTML? But you are right. Like this works. Oh, so the tag does exist. I was like, wait, I thought, OK. Yes. And it spans back long before X HTML and that sort of stuff. It's in the spec there. A start tag whose name is image, parse error, changing to IMG and reprocess. And this is. Don't ask. Don't ask. I did ask. And I think it was maybe even Mosaic or some old Netscape version. Right. Aliased it. Everyone else had to alias it. And now apparently there's enough of this on the Web. Really? Yeah. I would love to see this. Actually, maybe we can run an HTTP archive query of how many image spelled out tags. Do you know what? It's probably a harder query to do now than it used to be because SVG has image spelled out in full. It does. So your query would have to cater for things which are actually SVG images. I'm sure there are regex for that. Sure. Yeah. Parse it with regex. Why not? But yeah, this is only corrected in the parsing spec. Which is why when you did create element, it doesn't work. Yeah. So while the HTML is parsed, this will get auto, alias, and in JavaScript. The tag is not actually registered and so it just fails. I see. Yes. You'll end up with an HTML on an element. That's silly. If you do inner HTML, you'll hit this code path and it will work. So there you go. All things that we are still stuck with. Great. Works today in all browsers. All right. That's a nice doc type. Yeah. I mean, I think this is maybe one that people know a bit more about because we all start our documents with this or something like this. I joined the web luckily past HTML5 creation. So I never had to memorize the HTML4 doc type and previous genetics. Do you know what? I never remembered the longer ones. I always copy and pasted them. One of the first web conferences I attended before being at Google, Addy Osmani was speaking and he did a, and this is totally a stunt, but I respected him for it. He did some live coding and the first thing he did was manually write out the full doc type and got a huge round of applause for it. It was the first time anyone had recalled it from memory, I think. But the reason for this was... He had a macro. Yeah. It was that hacker type of a website where you just do that and it types out the code. So the reason for this was Internet Explorer shipped with a different box model. I mean, there was a few other quirks, but the main one was Internet Explorer shipped with a box model where it was with and then border padding. It was box sizing by default. It was box size border box by default. Whereas what the spec said and what other browsers shipped was with padding. Content border. Box. Content box. Absolutely. Yes, we now can do both. Yes, we have the option. We didn't back then. And let me tell you, developing for websites back then was painful because you had to write a code that worked in both. You basically, you would never use width and padding and border together at the same time. You would put a wrapper element around that did the width to maintain the sanity. Yeah, I can see that. There's actually more preferable workaround. So unfortunately around that era as well, a lot of people were writing websites for Internet Explorer. That weren't one of the browsers. So it was a situation where Internet Explorer couldn't change to do the right thing because it would break the sites that were written for Internet Explorer. Firefox didn't want to, you know, go against the spec and also it would break sites which were written for the standards. Yeah. So that's why a doc type was introduced, which was kind of like the switch that Internet Explorer could make to okay, we'll now do the proper thing. And some other things were fixed at the same time. Some of those quirks still exist in browsers. If you don't add the doc type, you can still run into those. Yeah, weird things happen. It's called quirks mode. Yeah, I have forgotten that things just get weird. I didn't know why until I learned about doc types that are actually important because it seems meaningless when you write it. Like, why do I have to tell you that this .html file Yeah, and the reason it's this is, this was the shortest doc type which triggered standards modes. It was originally, you know, you had your big long transitional strict, whatever, but this is the shortest version and that's why it's in the .html file spec. Here's another one. I don't have document at all. Yeah, do you use it? Yeah. Whenever I do like some prototyping, I actually do an object destructure over it where I just like, I mark all the elements and I mark those IDs, give them names and just say like, holy braze, type in all the names equals document.all and then you have access to all your elements. That is nice actually. This code always strikes out all as like, It's deprecated, don't use it and I'm like, but it's the web. Don't care. Yeah, go on, remove it. Remove document.all. Dare you. Double dare you. So yeah, it's, you can use it like an array and it's all of the elements. You can call it like a function. It's a function? Yeah, it's callable as well. I know, isn't it stupid? And it will get you named items of that. And if there's more than by name, I mean like the name attribute, the ID attribute, if there's more than one with the name attribute, it will return a list, a node list of those things. Oh, and sometimes an element, sometimes a list. Yes, fun. It's great when APIs do that. It's one of the worst bits of API design. If it's always going to return an array of things or a thing depending on how many they are. No, never do that. No. This is silly. But yes, as you've, you can just use, you know, your object destructuring or whatever that works. This started life as an Internet Explorer API. It was not part of any standard. They just added it. It was useful. Yeah. As you say, people were doing stuff like this. You know, even in the oldie days. But they were also doing this. Oh, because it was an IE only thing, that was an easy way to detect IE. It became a proxy for this browser is IE. But then other browser wanted to add this because now there's code out there with document.all. And this put like, your Firefox is an operas in a difficult spot because they can't now add document.all because their code's going to go to an IE special. An IE and a variety special. But obviously, if they don't add document.all, then the first bit fails. And you know, think people are writing for Internet Explorer, but it would just work in opera if they added this one API. Yeah. So they're in a tricky spot. I know where this is going. Yeah. Go on. Document.all is falsy. Document.all is falsy. It exists as a function and an object and an array, but it's falsy. Yes. So the idea would be, in this example, you know, document.all would be false. So in Firefox and opera, whatever, this would run fine. Yeah. And it was also something that Internet Explorer adopted once they started dropping things like the ActFX stuff. They were also able to make it. So now in every browser document.all is falsy. Even in... HTML and JavaScript spec. So this is the bit in the ECMAScript spec. There is an internal slot called is HTML.dda document.all, which defines this weird behavior where, yes, it's an object. It's callable, but also if you try and convert it to a Boolean or compare it to things like null in a loosely typed way. I like that it's not a special branch in two Boolean or is loosely equal, but there's just this paragraph. This behaves like undefined in these functions. Yes. Yeah. I mean, it's defined in the spec pros as well. There's the proper steps for it, but yeah. It is... That's incredible. Yeah. Ugh. It is horrible. Right. What's next? Ah. Yeah. Wait. Wait. This doesn't work, right? This doesn't work, right? Yeah. That method does not exist. It drives me mad. That's why I always have the array dot dot dot spread around it as it works around to the question is... Proper array. Why isn't a proper array? Like, why? Yeah, because it's not a document query sector at all. It doesn't give you, in contrast to get elements by ID or something, it doesn't give you a life node list. Let's talk about that. Yeah. Get element by tag name. Oh, yeah. Yeah. That would give you a life node list of all input elements, right? Which means that if you add another one to the page, the length is now 11. Yeah. You don't need to query arrays for you whenever you access it, which is a great performance for the gun. Yeah. So you could say in some ways like, oh, this has a reason to not be like an array because it's... It's not. Although you could, something could be pushing to it, like arrays are mutable, but it's slightly weird. It also behaves like document dot all. Really? Yes. So it has the same... That is horrible. Yes, it is. Yeah. It's... I wonder how TypeScript types this. I bet it doesn't. I mean, it surely... I hope it doesn't. As you say, query selector all is not live. It's static. But also still not an array. But also still not an array. And why? Why is it like that? Because you still can't... Yeah. Things like dot map are undefined. And the reason goes back to some bad decisions that were made. But for good reasons, let's say... Bad decisions for good reasons. So originally, the DOM was envisioned as a language-independent thing. What's this in the days of like VB script on the web and stuff? Well, so here's the 1998 DOM spec in the appendix D, which is the Java bindings. Ah, would be my first language of choice to write a web app. And actually, the bindings for Java are much better than the bindings ECMAScript in this way. Really? Yeah. And the JavaScript side of things. But this work, this was a thing you could do. You could write a JavaScript applet that did DOM stuff. This is some Java code that... That's incredible. So you can sort of think, well, hang on, this can't return a JavaScript array, you know? So the justification was like, let's make our own type that is, you know, interoperable. Some abstract array like, yeah, okay. And yes, this was in Internet Explorer. You could do this. You could, if you really wanted to spoil your morning, you could try and write this stuff in VB script rather than JavaScript. Look like this. But one of the interests and functions whatever, but one of the really interesting things is you could then switch into JavaScript and be accessing those things. It kind of worked and kind of didn't. Like some things, surprising work, some things didn't. And in some cases you were actually dealing with a VB script object, but in JavaScript, which... What could possibly go wrong? Right. So you could say if this, you know, if all of these types were, you know, not specific to any one language, it works well. I see what you mean. It was bad decisions driven by good intentions, which sounds like a My Chemical Romance album, but... Yeah. Yeah, this just seems like way too many problems for way too little gain. Absolutely. We don't do this anymore. There's a whole spec called WebIDL, which deals with how to convert from... to and from ECMAScript types to spec types. Right. So in a spec we will, you know, say a function returns a sequence and WebIDL, you know, goes into the low level of how that sequence is converted into an array. And that's what we just, we just say, that's fine. If someone ever wants to make another language to do this web stuff, they will have to write a fork of the WebIDL spec, which defines how these things map their platform primitives. Yeah. And that's, well, mostly job done. We have been trying to fix this problem over the years. Because they did add for each, right? Yeah. We added for each, we added iteration. But that still means like they're now adding these things, they're duplicating them for, I guess, they're all still a node list. A node list, yes. So they're not switching over to queries, like they're all gives you an array. So, like, you know, you know, you can't do that because there's code out there that will break if we ship this. Really? Because it's, it's, it's assumes like, you know, if the thing has dot map on it, then I have converted it to my thing. It's a bit like the old new tools issue that we had. The flattened school. Yeah. The array dot flat stuff. Same problem. Checking. Incredible. Yeah. But in the meantime, as you say, array spread. Yeah. Job done. Yeah. All right. Last one. The whole reason behind this episode was because of this tweet. Where I remembered or, you know, in a bit of spec writing had to deal with document.domain and it ruined my day. It's very complicated and you were like, well, explain that to me. And I put this episode together and I was like, what about that? So it's a last minute edition of like, oh, hang on the whole purpose of this. I was just talking about document.domain. Teach me. This doesn't work because the iframe is on a different origin to the page. Right. So you can access the content document from that iframe because different origin. Absolutely. We'll throw, right? It will throw. It's when you, yeah, when you do dot content document, I think, because this it starts working. So a subdomain can declare itself as one of the higher level domains. Yep. They can move up and now they match and now it works because they're they're effectively same origin kinder in some ways and this is why it's bad. Yeah. Like that does like IDB suddenly switch its contents? No, no, no, no, no, no, no. I mean, I don't even know how it would because part of the problem here is this is a synchronous operation. And so browsers will if something's another origin or if something's a different site we put it on the different process. Yeah. As if we can depending on the device constraints because it's much more secure. Yeah. We can't do that with some of these two origins because they can synchronously come into a position where they can actually. Because usually we say like, oh, it's good when you have an iframe either sandboxed or a different domain because then the event loops are independently like if the iframe jangs it doesn't affect the hosting site. Yeah. In this case, they are a different origin but I guess they will remain on the same event loop because there is the chance that the iframe goes lol. And that's why it's yeah. We talk about these things as being different. You know, we can put it on a different process of a different site rather than different origin and that's because of this. And yeah, let's say it doesn't change the cookies it has access to it doesn't change IDB local storage anything like that. It's only for applications. So basically it's just a source of mathematics. Yes, it is. And it also runs into the problem of like, we've discussed this in another episode. Could it go at a level up and just become calm? No. No, of course it can't. And it can't for the, yeah. The ETLD plus one is back. Yes. Or the public suffix list which is what it is at this list of thousands and thousands of items to define the boundaries for this and also the boundaries for cookies. But yes, it's another part on the web that doesn't work on origins it works on sites which depends on this massive list that we talked about in another episode. And that's it. That's all I've got. There's your old dumb stuff Christmas special episode. I've got nothing more to say to you. No, I'm speechless once again about the the legacy of the web and what still remains of it. But it means websites written 20 years ago still work today. Kinda. Kinda. So I think we said in some other episodes I'm not going to say that because we've put them out in a different order. We start that bit again.