Podcast: What happens when you visit a URL?

Transcript

[00:00:00] Raphaël: I think we’re recording. Alrighty. So I guess I’ll do like an intro thing. I think what I said last time, I was like, Hey folks. And welcome to okay. Alrighty. Alrighty. 

[00:00:19] Hey folks. And welcome to the Chewy podcast. Today is going to be our first episode, really other than the little cheesy intro episode. So we’ll just get started on how does the internet work? How does the web work actually technically,

[00:00:35] Éva: maybe you should introduce yourself. Or at first,

[00:00:38] Raphaël: Yeah.

[00:00:39] Éva: that could be an interesting thing to do here.

[00:00:43] Raphaël: Yeah, that’s probably a good idea. So I’m Raph and I’m one of the co-founders of Éphémère Creative, a small design and development studio in beautiful Vancouver, British Columbia. And this is Éva. Hi Éva.

[00:00:58] Éva: Hi Raph. And I’m Éva. Who am I? Big question. I’m Éva, I’m the other co-founder of Éphémère Creative. And in this podcast I will play the role of the. I’m not going to see the word cause it’s not appropriate. I played the role of the one that doesn’t really know much about the web and hopefully you can follow me along as we learn more about the big world, wild web.

[00:01:22] Raphaël: Sounds awesome. I recently put together this little video that is titled something along the lines of “what happens when you go to a URL.” And I figured that’s a good starting point for this whole journey of how the Internet’s work. Éva. How does the internet work?

[00:01:39] Like when you go to Euro what’s your impression of what happens? We can dive deeper into that.

[00:01:45] Éva: first of all, my user journey looks like this. I first Google any thoughts that I have, even if I know that URL, I Google it anyways, but let’s say.

[00:01:55] Raphaël: My dad does that too.

[00:01:55] Éva: Thank you for putting me in that same generation.

[00:01:58] I swear. I work in digital marketing and ladies and gentlemen. Okay. So when I put on URL what I would assume happens, there’s some kind of call.

[00:02:08] Done by some kind of web property. And then it goes and fishes for that first landing page. I’d assume maybe it loads a portion of what’s there lazy loading and once I’m on it, there’s probably some security stuff going on. 

[00:02:30] Raphaël: Yeah.

[00:02:31] Éva: Maybe some other calls back and forth, maybe some crawling of some sort and yeah.

[00:02:36] And then I’m there

[00:02:37] Raphaël: Yeah. Yeah. And I think in many ways that actually does cover a lot of what happens. Some of it is maybe like we can, the language is maybe a little different, but yeah, that’s kind of it. So the you’ve got a domain. And actually what’s your impression of what is a domain?

[00:02:55] Like 

[00:02:56] Éva: Domain to me is like www at something.

[00:03:02] Raphaël: yeah. Yeah. That’s it. And basically okay, so you’ve got like a domain, so you buy mycoolwebsite.com and essentially what happens is that just gives you the ability to tell various services out there that mycoolwebsite.com should go to this particular server. So there’s these records. And so you set up these what’s called DNS records and DNS is man, I’m gonna, I’m going to screw this up.

[00:03:32] The domain name, system, domain name. Yeah, I remember I at one point, I’m just going to look this up. DNS. Yeah. Domain name, system. There’s I remember I butchered it at some point. I called it the domain name, something else or the domain anyway, but so the domain names. And basically that is this like way of telling computers, what happened… like which address a request should go to when you hook it up to a particular like

[00:04:03] Éva: So that’s what I’m buying. When I buy a domain.

[00:04:07] Raphaël: Yeah. It was just the ability to set those records for that particular name. And so when you have like mycoolwebsite.com. You can say, yeah, I want this cool website to go to the, like that record. mycoolwebsite.com. I want it to go to the address. 136.592. Whatever. Like it’s

[00:04:29] Éva: And that’s the DNS

[00:04:31] Raphaël: yeah.

[00:04:32] And so that’s how DNS works is. You’ll have 135.69.199.23. And that’s like a, that’s an IP address.

[00:04:44] Éva: great.

[00:04:45] Raphaël: Yeah. And so those IP addresses are unique identifiers for things throughout the internet. And we can dive deeper into that and how like we’ve actually run out of addresses and the old version of IP addresses IPV four, and we’ve moved to IPV six.

[00:04:59] And those things are huge mess. They’re really complicated. You can’t just remember them like. For little chunks of numbers, they’re really long and complicated, but basically you’ve told now your the rest of the internet, basically it goes out and it propagates throughout networks across like internet service providers and stuff.

[00:05:17] And now they all get these records. And so they know that when someone who’s hooked up to the internet types, then I want to go to mycoolwebsite.com. We’ll go to that.

[00:05:27] Éva: Yeah.

[00:05:28] Raphaël: And then it’s like what you were saying, right? So that the browser sends out this call and says, yeah, I need to get some information from that domain under the hood.

[00:05:38] There’s a lot of complicated stuff that happens and we can messy, but we can talk about like the Facebook debacle recently, where all of their stuff just disappeared. And there’s some complicated DNS reasons why that happened. It’s always DNS. There’s a joke between developers that always DNS, DNS is always the problem. But that call goes through and under the hood, the various parts of the domain name system, like we’ll tell your computer, like actually you don’t want mycoolwebsite.com. You want this IP address. And that request gets sent to the IP address.

[00:06:13] Éva: Okay.

[00:06:14] Raphaël: And then you have to what happens then? Like once, once it goes through, like it gets to a server

[00:06:21] Éva: Okay. And that all happened in what like five second, one

[00:06:25] Raphaël: Like milliseconds,

[00:06:27] Éva: of the second milliseconds.

[00:06:29] Raphaël: yeah. Literally milliseconds, like all of this gets just resolved and then that request goes through. 

[00:06:34] Éva: And then there’s a pool of stuff and basically we go fishing. Would that request.

[00:06:39] Raphaël: Yeah, I kinda there’s I can get like really messy, like what happens at the other end, but basically you then need, if you’re using a web browser you’re a marketer, what’s the that like SEO and all of those things, like all of that depends on HTML. Yeah, basically, you need something at the other end to be like, Hey, let me give you some HTML.

[00:06:59] Éva: Okay.

[00:07:00] Raphaël: Yeah. And so that might be Shopify, right? So they might have like thousands of servers that under the hood, do some, all kinds of complicated things to be like we’re going to generate some HTML and send it back to you. Or it might be WordPress. Like 33% of the internet or something like that. It was WordPress. Or it might be just some computer that has like an HTML file. And it’s yeah, here’s this HTML file you asked for. But yeah that’s what happens. So on the other end, it’s I’ve got this HTML for ya. It’ll like, look at the path afterwards, like everything after mycoolwebsite.

[00:07:39] And that’s just like information that’s sent over to the server and it chooses what to do with it. So it’s just oh, you want slash start page. Cool. I know what that is. Or it might be like, I have no idea what that is, but it has to send something back. So it might send you back like a 4 0 4 page or it might not.

[00:07:57] And then your browser’s Hey, nothing happened here. And then you get a little Chrome dinosaur. You can

[00:08:02] Éva: It’s the Chrome dinosaur.

[00:08:04] Raphaël: actually, no that’s from a different page. My bad have you ever tried to like you’re on your computer, you open Chrome and then you’re not connected to the internet.

[00:08:12] And then you get a little page with a little tiny. But, okay you should, at some point, try to connect to, or open your browser when you’re not connected to the internet and there’s a little dinosaur, and if you press space, it starts running. There’s a game built into Chrome where you can just doodle around on this. Or you can play this little running game at the dinosaur while you wait for your internet to reconnect.

[00:08:35] Éva: that’s pretty cool. I never heard of that.

[00:08:37] Raphaël: Yeah, random little Easter egg. 

[00:08:39] Éva: Like denying bizarre is better than the 404

[00:08:41] Raphaël: Yeah. Yep. Yeah that’s so what’s next? I don’t know what w

[00:08:46] Éva: that’s nice. And then when I

[00:08:48] Raphaël: so yeah, go for it.

[00:08:50] Éva: if I click on something, what happens?

[00:08:52] Raphaël: Same thing over and over. It’s just a mess of that

[00:08:55] Éva: Wow.

[00:08:56] Raphaël: Tangled, web of links. Yeah, basically your browser knows how to render that HTML. So just plop something on the screen. And then you were talking about sending us a request. Yeah, when a page says it’s got an image

[00:09:08] Éva: Yeah.

[00:09:09] Raphaël: like that, it’s going to send another request like that. And for each image for each like other resource that might be loaded by page.

[00:09:18] Éva: How does the web handle that volume of requests at that speed,

[00:09:24] Raphaël: I don’t even understand. I like, it blows my mind pretty regularly that it’s oh, I might load this page. Have you? You’ve we’ve loaded the Chrome dev tools before a few times. And you’ve seen so

[00:09:38] Éva: Yes we

[00:09:39] Raphaël: there’s just so many things like,

[00:09:42] Éva: Yeah.

[00:09:43] Raphaël: you’re loading up like Intercom or segment or whatever.

[00:09:47] And there’s 20,000 other tools where your Google analytics and all of those things. Just there, each of them is a request like that. And so one request might suddenly turn into 150 requests

[00:09:59] Éva: Yeah. It’s pretty crazy.

[00:10:02] Raphaël: yeah, it’s wild and each image too. You got like a page with a bunch of images, icons, like stuff like that.

[00:10:08] Éva: Yup.

[00:10:09] Raphaël: one of those is one of those requests. That’s why. All blah, blah, blah. Yeah.

[00:10:13] Éva: Cool. I feel more educated. I’m still confused, but I feel more educated. I feel like. I get a good sense of what happens every time I go through the www URL.

[00:10:27] Raphaël: Yeah. Yep. Yep. Yep.

[00:10:28] Éva: So hopefully the folks that are listening also feel that they have a better understanding. And then, okay, last question, closed the podcast, but how would like a deployment stag do anything about it? Would that be involved in this or it’s just has nothing to do with it.

[00:10:43] Raphaël: If you need to get a server up and running somewhere, okay. So that computer that’s like listening on ad address, like 1, 3, 9, whatever. How do you like? Yeah. So you need a computer to listen for those requests. And so there’s a bunch of tools that you can use like Heroku or Vercel or Netlify or DigitalOcean or AWS or GCP or all of these different things are like different ways of spinning up a server.

[00:11:10] That is going to listen for those requests when someone types it into their URL or whatever. And yeah, so there’s a bunch of tooling out there that exists to quickly deploy servers to those services, including like the stuff that we’re building at Chewy, which will make it super easy to do a whole lot of complicated stuff.

[00:11:32] But without all of the messy complexity to get one of those servers up and running. I think is what you were hinting at there.

[00:11:39] Éva: Yup.

[00:11:40] Raphaël: Yup.

[00:11:40] Éva: Yeah. I was hinting at something that I didn’t know about. I was hoping you’d actually point me in the right direction. Sounds like you did.

[00:11:48] Raphaël: Yeah. So basically we’re going to try and make it super simple to get a server up and running probably initially on DigitalOcean. Cause it’s nice and friendly. We like DigitalOcean.

[00:11:59] Éva: I think you’re going down the rabbit hole. I think people don’t necessarily know what DigitalOcean

[00:12:03] Raphaël: Okay. It’s a company.

[00:12:05] Éva: Okay.

[00:12:06] Raphaël: Yeah. Yep.

[00:12:07] Éva: Maybe that’s a topic of our next podcast.

[00:12:10] Raphaël: Yeah. Or maybe the sponsor of our next podcast. That would be nice. Wouldn’t it?

[00:12:15] Éva: Yeah, it’s sponsored by DigitalOcean. And if that’s the case, I will have to read about them so that I don’t say what is, DigitalOcean while they sponsor us.

[00:12:24] Raphaël: Yeah. Yeah. We actually do use them for a lot of our clients.

[00:12:29] Éva: Ah, there you go.

[00:12:30] Raphaël: Yep. Yep.

[00:12:31] Éva: Alright. Thanks for the explanation. That was a cool, that was a cool definition.

[00:12:37] Raphaël: Thanks, Éva. Yeah, it’s a fun chat.

[00:12:41] Éva: Yeah. Okay, bye.

[00:12:43] Raphaël: Alrighty. Bye. Thanks folks. Thanks for listening and tune in for the next episode where we, I don’t know, talk about JavaScript. Should we talk about JavaScript? What’s JavaScript?

[00:12:52] Éva: Yeah. Let’s talk about JavaScript or let’s talk about Ruby, cause I feel you love Ruby on rails. No too

[00:12:58] crazy. 

[00:12:59] Raphaël: okay. Ruby’s okay. you do other stuff though?

[00:13:02] Éva: Okay.

[00:13:03] Raphaël: Alrighty. Yeah, let’s do JavaScript instead. All right. See you folks.

Related Articles