 All right, I'm switching back to my broadcast voice. I'm ready to go. I thought, hey. You're not. It's almost like I stole your ability to speak there. But that's fine. It's my episode. You can just listen to me talk. I'm just going to sit here. Watch. I've been thinking about URLs. There's one. On your own blog, as always. Well done. I've got to advertise my blog. I haven't done anything in 2020 yet, but it's a URL. Every now and then, there'll be a Twitter thing goes around about Chrome changing URLs or something. Killing. Killing URLs is normally the way it's put. And everyone's angry about it. So I kind of wanted to just condense some of my thinking about URLs. Hopefully it won't be too controversial. It might be a little controversial. I see. The comments will let us know. URLs, what are they? They are a serialization of a request. Yeah? Does that make sense? Part of it. Part of it. And that is absolutely a good point. But I can give you this string. And you can make a request with that that will hopefully give you the same content. But you're right. It is partial because it is missing. I mean, yes. Yes, yes, yes. Yes. I'll accept this for now. OK. You hold on to your grievances. We can just deliver them at the end of the episode. I'm worried I'm going to spoil something that you're going to bring up. The things that this doesn't contain things like headers, HTTP method, HTTP body, right? The fact that it's HTTP. The fact that it's HTTP. Yeah, that's because Chrome hides it. I know, but I don't know what it was. HTTP S, actually, care about security. But yes, in some ways, that's a good thing. Those things are absent because it means that you're sending your own cookies, your own client hints. So you'll get an experience that's better tailored to you, but still the same core content. I actually think the fact that the body is missing from this is a problem. I don't know what the solution is. But if you've gone to, you know, filled in a form, and you're now looking at a page, and you go, I want to share that, there's nothing that the browser tells you that that is not going to work. Yeah. Because it's never going to work, because it's, you know, there's a post body there. I mean, I have the feeling that that kind of architecture where you actually send a post request has slowly been disappearing from the web over time, which is not a good thing, but I feel like it has. Yeah, that's fair. That's fair. I mean, one of the things that avoids is when you hit the refresh button, and it goes, do you want to resubmit the form, which is a weird user experience that a lot of people don't understand what's going on, which is totally understandable. But the fact that I can give, share this string around, I think is one of the things that makes the web good. Like it's one of the killer features of the web. Put that alongside view source, DevTools, like that is what brought me to the web. That's why I'm a developer. Here's a couple of URLs. Oh, they're so pretty. They're real URLs, except I've changed the host name just to disguise the site. But I mean, totally hard to find when the entire title is in there. Well, so would you say this is a bad URL? It's not a bad URL. I always go a bit, when I see the whole blog post or news article title in the URL, I'm like, it does make for a long URL. And long URLs tend to look ugly. But put these two URLs side by side. Definitely worse. Yeah, if you see that in a text pile, you roughly know what it is, right? That it's UK news. It's got a nice hierarchical structure. UK news from 2020 January the 7th. And it's about some archaeologists doing a thing, right, whatever. This one I find weird, because the query part actually only starts here. But this already has like a ref equals, like what? It's great, yeah. But that is an item in a popular online shop, let's say. I see. But yeah, so I would say this is nicer. Let's see some of the comments put in which item this is. Yeah, that would be fun to find out. I think it's quite easy to find out. I hope there's not my personal data in here. I didn't test that. That would be very bad for the site if they were doing that anyway. Yes, this is nicer. It's shorter. You can tell what it is. But really, both of these URLs work. Yeah. They both do their job. I can give you either of these. And you land where I wanted you to land. Exactly. And I do think that when it comes to URLs, I think we have a bit of Stockholm syndrome when it comes to people who've worked on the web for a long time, or even used the web for a long time. And the way I try and explain this to people, I'm going to give you this test now, is how would you explain to a non-technical user that two URLs, they have a part of the same site? I've tried this before. And this is an important thing to do, because they could have a URL that they know is from their bank. And they've got another URL that I'm unsure about. What do they do? Well, it's the kind of thing where you tell them ready to receive the rules. Oh, you want it to be an actual algorithm. Hey, this is not a rhetorical question. I'm actually asking. Step one. OK, number one. Is it HTTPS? Does it say HTTPS colon at the start? OK. Does it have HTTPS? I just realized I haven't used a pen in like 15 years. OK, at start, right? OK, what was number two? Come on. Number two. There's no number two. Because now you have to go to the first slash after the first double slash. After double slash. Backwards from there. Work. Backwards. And the first two items. Maybe three, the same. First. First two. Working from the right, the first two items, right? Because this is a very easy to understand instruction. Maybe three. And what are you really capturing in this maybe here? It's a very loaded maybe. The country is at do like gov.uk. Yeah, gov.uk. Or you know, stuff like that. Because that's totally, at the moment there might be more. There might be three top level shenanigans. I do not know. And then there's sites, actually. Maybe four. Maybe five. I'm going to lay you off the hook, because it's actually pretty good as it goes. I've created a test set here to measure you again. Obviously, these two here are like the same sites, right? We've got, well, these three. Fun fact on a fun fact. Explain to me, same site versus same origin. Going to get on to that. OK, good. Hold on to that thought. We're getting there. So you're thinking about having HTTPS at the start? Might not. Like if they're copying this from a message that has been sent in the email, it might. I did turn this into discussion I always have. Like is this a secure link to click? So yeah, maybe step one isn't actually necessary. But if you're seeing some browser resolving happening first, then the HTTPS thing might be obvious. I like this example, because it has the call on and the slash slash in. But this is definitely evil.com. I mean, obviously, it has to have a number between. You spotted the two or three steps back thing, which I tried to capture with the code at UK. And then I, you know. Oh, that's a good one. User name and passwords in URLs. Yeah, so this is another evil thing. But you did talk about going to the slash and working backwards. User name HTTP. Yeah, you can't put slashes in it, though. I did test this. You can't put slashes in the username. You would have to escape that. So do you know what? Pretty good. Some of the weird stuff. And I think. Like bank.com. Bank, bank, bank, bank. I thought, if you really want to convince people you're a bank, just put bank a ton of times in the URL. That's really a bank, isn't it? Yeah, it wouldn't. It must be a bank. They put it five times. Because someone evil wouldn't think of that. The three or four thing is really the key where the explanation falls down. And then it's actually, if I remember correctly, you talked about this one, which I didn't know. It's that there is a list. Wow. Hold on to that thought. Fine. We'll keep that in the episode. Don't worry about it. So I think my conclusion from that is you can't do it just from a thing written down. Yeah. Because you need the browser's help. You need the browser's help. And I think the URL bar is where a lot of that should happen. Yes. And so yes, the URL bar. Is this the tool that you wrote, Jake? Oh, wait. Yes, it is. Yes. Advertising my own stuff again. Got to take every opportunity to do that. I thought I'd compare some of the browsers here. With all your stuff. Oh, it's the same site in different browsers. Importantly, same URL. So this is Chrome. This is Edge on Mac. The new Edge. The new Edge. This is Firefox. This is Safari. Not, well, there's some differences. Mainly, Chrome hides the HTTPS. Well, we have pivoted to the thing where, if it's not HTTPS, it's labeled as insecure, isn't it? Yes. Yes, absolutely. Edge has chosen to continue to show that, which is interesting. Firefox and Edge are exactly the same in this example. Kind of the big different one is Safari, which only displays the host name. Yeah. You have to click to get into the path. And you know what? I'm OK with that. Because as long as I can get to the URL, I think the power users should feel fine. Yes. And so you can actually see here, it's very faint. But the host name is darker than the rest in all of these examples. So like you were saying, to try and help people focus in on the security important bit, we're using coloring or brightness or darkness of the type here. But yes, I think Safari is the one that makes the host name most obvious because it gets rid of everything else. You mentioned security. Here is an HTTP page and how modern browsers deal with it. As you can see, Chrome, Edge, Safari all do not secure, is their main message. Firefox, a bit of the odd one out here, has just a padlock across for it. Interesting. This actually changes once you start editing one of these text fields. And that's when it gets angry. Ooh, I like it. Red. Because you're typing a password into a non-secure website, which means whatever this form sends will not be encrypted. Yes. So if you're on a Wi-Fi in a cafe where you can literally listen in to everybody else's web traffic, there might be your password in plain text. Exactly. So your data, whatever, anything personal to you. Firefox is the odd one out here. It displays a little overlay with incredibly difficult to read text. Yeah, that's very low contrast. I think that might be a bug. So we'll give them the benefit that they don't. Oh, it might be dark mode buggy, I think. No, this is light mode. It's all light mode. Dark mode was the same. Because it was black, that's what was saying. Yeah, yeah, but it was the same. I don't dislike the UX pattern. No, I actually quite like this, yeah. But yeah, this is very low contrast. Yes, yeah, exactly. So this is a different URL. And a little summer challenge, second one of the episode. There's something different here compared to the other examples. I want to see if you can spot it. I'd be impressed if you do. And I can give you clues if it's not immediately obvious. Can I go back? No. Something is different. Like in every browser? No. Only in? Yes, so Firefox highlights the top level domain. Well spotted. Well spotted. I'm impressed you saw that. Yeah, what we're seeing here is compared to the top level domain. What do you call that bit of a domain? It is called the ETLD plus one. The ETLD plus one? Or the public suffix plus one, depending on. Yeah, they both mean roughly the same thing. And yes, that's what you can see happening there. And I think this is really good, because it's sort of highlighting the owner of that. The authority, yeah. The authority. But how's it doing this? And this goes down to what you said at the start of the episode. Because every one of these URLs has three parts to it. And that's the list I vaguely remember you mentioning to me once, where every browser must apparently bundle a list of top level domains, which can have one or more parts. Yes. And plus one to that means that's the authority. Exactly. So yeah, what we see here is profile and help as subdomains of bank.com. But even though these have three parts, the browser still knows that bank is the authoritative part. And as you said, there is a list. Oh, it's like they have a nice domain. Yeah, public suffix.org slash list. And it's maintained by Mozilla, but all browsers use it. And it's important because these two websites can share cookies. Exactly. I think that's why we talked about because this becomes very important for stuff like GitHub. Ah, hold on to that. No, this is good. So this is a lot of stuff from that list. This is not exhaustive, right? This is not exhaustive. The exhaustive list is over 8,800 entries. Wait, NHS.uk is a ETLD? Yes. So it would be something.nhs.uk, probably a trust, an individual trust. Interesting. One of the interesting things is the yes. What is it? School. And the reason it has a star on the front is it can have something in front of that that it's still part of the ETLD, the public suffix. And that's because in the UK, schools have addresses like this, where the subdomain here is the www, whereas Southgate is its own thing. That's the ETLD plus one? Yep. And then you have district, like Enfield. Wow. Let me go back one second. Why didn't they spell out the spell? Police? Yeah. Fine. OK. Yeah, whatever. Who knows? History happened. Consistency. Who needs it? But yes, as you pointed out, this list is not just registrar-based suffixes. It also has suffixes where they sublet. Right. Because something like GitHub.io, each user gets their own subdomain. Yes. However, you don't want these subdomains to share cookies because they're different authorities, literally different users. Exactly. Exactly that. And so these are part of the list as well. How do I get my blog onto that list? Because it's just for lulz. There's a submission process. It's quite easy. You just go and say, oh, this should be part of it. And they go, OK, I guess there's probably a bit more checks than that. But it's an open list for people to go and add to. And it's so remote. The technology to. Well, if you can prove you're subletting out, you give me part of your website. Jake has part of it. We need to be secure. Yeah. I don't want his stupid cookies. There are lots of complicated rules where sometimes every something dot the thing is a separate one, but then one of them isn't. And yeah, this list can take it is super difficult. But Firefox is using that list. That's amazing. To make this distinction. I think that's really, really good. So yeah, you can see that what WG is obviously not on this list. What WG.org, only dot org is. Yes. However, GitHub.io is on the list as an ETLD. That means you go ETLD plus one, which means, in this case, Jake Althaus included. So that one gets blackened. This one is only that. Yeah, I like it. I think it's really smart. To be fair, you could even now go the step. It's actually interesting that Safari doesn't use the list. I agree. Because they should just show the things that are important. That seems like a really good solution to this problem. Because? The phishing problem. So here's some URLs put through this pattern. Yeah. She used my name for once. I did. Oh, thank you. But it's not a real URL. No, it's just one error. I couldn't quickly find a project to use. Underdash? If you've watched the previous video, you would know. OK, I should have edited it. But I think this is good, because this makes it the evil one. Yes, this would help non-technological people to actually know what to look at. Except there's a bunch of other stuff either side of it. Right, but if you took the Safari pattern, just you don't show anything else unless you're used to the clicks and it wants to see the false analysis. Yeah. So I decided to put forward my design for the URL bar. And I want to absolutely stress that this is not a Google authorized thing, not a Chrome authorized thing. It's a Jake authorized thing. Jake reckons this is with my limited... Jake spent a day preparing the slides and thought, I can do better than this. Exactly. I'm just going to throw my hat in the ring. And there's probably reasons why it's bad. But it's interesting that you came to a very similar conclusion already. I'm going to expect Mike West to show up in the comments now. Yeah, it's just being really angry. He's like, don't put this episode out. It's ridiculous. One of the inspirations I actually took from this is what we used to do, or what multiple browsers used to do with extended validation certificates. Yes, where they showed the name of the company. Like this, at the start of the URL, EV certs turned out to be problematic and useless. Getting an EV cert wasn't as water tried as we assumed it would be. Exactly. So browsers ignore them now. But I found this bit of UI interesting. So that's kind of where I started. And so I thought, well, what if we put the ETLD plus 1 at the start? And then put it, because people get angry when you say, kill URL, remove URL. So I thought, well, we can keep it. But we put it in gray after. And if there's not enough space, you do this, I guess. Well, this would be the mobile view. Right, but you can still tap it to get to the URL, right? You can still. It's not gone. Yeah, I mean, this design I have stolen from Safari. But it's using, like you said, ETLD plus 1 rather than hostname. So yes, in the WG case, it would be like this. Why are we shipping this? Thank you. I'm sure we'll be told why. And yeah, the evil case. Well, I'm guessing that I would assume the security people are quite smart. They're probably considering this. But I think every change to something as fundamental as the other side, they always work slowly to be careful and to see how changes work. So this will probably be in 10 years time. When we've already seen, you have to take small steps here like we did with the HTTPS change. People get angry and suspicious when you talk about changing the URL bar. But I look at this and I think, and it doesn't solve all problems. Like it doesn't solve the problem like an R and an N together can look like an N. Unicode, the Unicode, we've actually got some interesting. I wasn't going to talk about this, but we've got some interesting solutions there where we unpack it to the punicode, but in code of values, if it's mixed language. So if you're using all of the character set from that part of Unicode, fine. But if you're crossing them over, where you might end up with two things which look almost exactly, if not actually identical to an N. That's good. So then you would say see the punicode. You would see the punicode. That makes sense. Which is very clever. I hadn't really appreciated that until I did some research for this. The only gap there is like if I can actually misspell a Western company's name with a completely different alphabet and Unicode. But you still got the uppercase I looks like an L. But you can have the browser just for the case. R and N looks like an M. Not sure what you do about that. I mean, that's just bad kerning at that point. It's bad kerning exactly or hemming as it's called. But that is really all I've got. And I'm glad that you've rubber-stamped this and we'll ship it in Chrome tomorrow. The two or three, seal of approval. There we go. That's it. I really want to hear what the secret people say to this. Well, we'll let people know in the comments or something. Absolutely. Hello, everyone. I'm still ill. One week later, it's almost like we record these in one group together. Look at my voice is going. Don't waste your voice. We still have the podcast to record. That is true.