What happens when you visit a url?

Éva and Raph explore what happens when you visit a url. In broad strokes, what's the magic behind the scenes to get those web pages loaded up in your browser?

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.

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,

Éva: maybe you should introduce yourself.

Or at first,

Raphaël: Yeah.

Éva: that could be an
interesting thing to do here.

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.

É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.

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?

Like when you go to Euro what's
your impression of what happens?

We can dive deeper into that.

É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.

Raphaël: My dad does that too.

Éva: Thank you for putting
me in that same generation.

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.

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.

Raphaël: Yeah.

Éva: Maybe some other calls
back and forth, maybe some

crawling of some sort and yeah.

And then I'm there

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?

Like

Éva: Domain to me is
like www at something.

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.

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

Éva: So that's what I'm buying.

When I buy a domain.

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

Éva: And that's the DNS

Raphaël: yeah.

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.

Éva: great.

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.

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.

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.

Éva: Yeah.

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.

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.

Éva: Okay.

Raphaël: And then you
have to what happens then?

Like once, once it goes through,
like it gets to a server

Éva: Okay.

And that all happened in
what like five second, one

Raphaël: Like milliseconds,

Éva: of the second milliseconds.

Raphaël: yeah.

Literally milliseconds, like all
of this gets just resolved and

then that request goes through.

Éva: And then there's a pool of
stuff and basically we go fishing.

Would that request.

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.

Éva: Okay.

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.

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.

And then your browser's
Hey, nothing happened here.

And then you get a little Chrome dinosaur.

You can

Éva: It's the Chrome dinosaur.

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.

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.

Éva: that's pretty cool.

I never heard of that.

Raphaël: Yeah, random little Easter egg.

Éva: Like denying bizarre
is better than the 404

Raphaël: Yeah.

Yep.

Yeah that's so what's next?

I don't know what w

Éva: that's nice.

And then when I

Raphaël: so yeah, go for it.

Éva: if I click on
something, what happens?

Raphaël: Same thing over and over.

It's just a mess of that

Éva: Wow.

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

Éva: Yeah.

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.

Éva: How does the web handle that
volume of requests at that speed,

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

Éva: Yes we

Raphaël: there's just so many things like,

Éva: Yeah.

Raphaël: you're loading up like
Intercom or segment or whatever.

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

Éva: Yeah.

It's pretty crazy.

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.

Éva: Yup.

Raphaël: one of those is
one of those requests.

That's why.

All blah, blah, blah.

Yeah.

É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.

Raphaël: Yeah.

Yep.

Yep.

Yep.

É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.

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.

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.

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.

Éva: Yup.

Raphaël: Yup.

É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.

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.

Éva: I think you're going
down the rabbit hole.

I think people don't necessarily
know what DigitalOcean

Raphaël: Okay.

It's a company.

Éva: Okay.

Raphaël: Yeah.

Yep.

Éva: Maybe that's a topic
of our next podcast.

Raphaël: Yeah.

Or maybe the sponsor of our next podcast.

That would be nice.

Wouldn't it?

É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.

Raphaël: Yeah.

Yeah.

We actually do use them
for a lot of our clients.

Éva: Ah, there you go.

Raphaël: Yep.

Yep.

Éva: Alright.

Thanks for the explanation.

That was a cool, that
was a cool definition.

Raphaël: Thanks, Éva.

Yeah, it's a fun chat.

Éva: Yeah.

Okay, bye.

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?

Éva: Yeah.

Let's talk about JavaScript or
let's talk about Ruby, cause

I feel you love Ruby on rails.

No too

crazy.

Raphaël: okay.

Ruby's okay.

you do other stuff though?

Éva: Okay.

Raphaël: Alrighty.

Yeah, let's do JavaScript instead.

All right.

See you folks.

What happens when you visit a url?
Broadcast by