The Frontend

Raphaël: Hey.

Okay.

No.

Okay.

I'm going to do this.

I think it was, Hey and
welcome to the chewy podcast.

I'm Raph and, and today we'll be
talking about what happens when

you land on a web page, like the
things that you see on your screen.

Yeah.

So

Eva: So what does happen?

Raphaël: I don't know.

Let's do this a bit, like the last
episode, what do you think happens?

Eva: Good question.

So we talked about typing the URL
and what happens when you type it.

So now that I'm on the page I guess the
first step that I would do is one I would

scroll down to read and then a bit more
about the content and probably click

on like a call to action or a button.

Raphaël: Yeah.

So today we're going to talk about how
all those things get shown up on screen.

Like what are they like, what, when you
see those things that, that CTA, that

call to action, how does it show up there?

And for example, we're on
the gochewy.io website.

So gochewy.io.

If you all want to check this out and on
this page, we can see things like helping

developers build better products faster.

And we've got a little, a
really cute little character.

And we've got some buttons.

And if you put your mouse on the button.

then a little arrow shows up at the
bottom, we've got a little chat bubble.

And if you click on the chat bubble, like
some stuff pops up and you can do things.

So Yeah.

How do all of those things work?

Eva: I don't know.

I like that when I click on
it, it moves to another thing.

As I know on the magic that button

Raphaël: Do you remember?

I think we talked about HTML last time.

It has been a couple of months since
our last episode, but do you remember

what HTML, CSS and JavaScript are.

Eva: languages.

Raphaël: Yeah.

Yeah.

So those are basically the languages
that make up the front end web.

So on the server side, you can use
all kinds of different languages.

I remember last time you asked me
about Ruby and I was like, ruby

is not exactly my cup of tea.

Lots of people love it.

And it's great, but it's
just not my favorite.

I don't know.

I don't know why.

But on the front end, the browser can
only understand HTML, CSS and JavaScript.

Eva: Oh, wow.

So any website in the world
can only be built on either of

these three on the front end.

Raphaël: Yup.

Eva: That's a new information for me.

It all, and all it usually
just bursts together.

All of these languages.

And you think you can use them
for any web application or

usage, but clearly he can't.

Raphaël: Yeah.

And there are some loopholes in that
and in the sense that some people will

they've built tools in other languages.

So for example, you can write Python and
essentially they've built tools that will

translate that Python into JavaScript.

Or Ruby into JavaScript or whatever.

But in the end, the only three
things basically that the browser

understands are those three.

Yeah.

So do you know what HTML stands for?

Eva: Hypertext, something like that.

Raphaël: Yeah, I can't re

Eva: I can't remember
what the M and the L is.

Raphaël: Markup Language.

Yeah.

Nice.

Hypertext Markup Language.

And basically that's.

That's just the language to
make your text hyper to make

your, to say what is on screen.

So we've got basically three
layers HTML is the content itself.

So it's telling you what the text
is, what the images are and the

order that they're in and how
they're grouped and things like that.

What do you think that the next layer is?

So if we talk about CSS,
actually, I'll give you a hint.

So CSS is cascading style sheets.

So what do you

Eva: I think CSS is used for
the design aspect or like the

standardizing design elements,

Raphaël: Yeah.

actually that's a great point.

So standardizing, so CSS
allows you to create rules.

That apply, like you say, like
as a standard to everything

that, that matches that rule.

So you can say all of the H1 one elements,
like the top level headers should, I

don't know, there should be like 60
pixels tall and they should be bold.

And then all of the paragraphs should
be 18 pixels tall and not bold and

maybe a different font and whatever,
like all of that kind of stuff.

Eva: right.

Raphaël: yeah.

And then to some extent, yeah, you
can do some other like fun stuff.

Like you can make things fade in
and out and like that sort of thing.

But very limited on interactions.

Eva: Great.

Raphaël: where do you think
JavaScript falls into all of this?

Eva: If I'm reading between the lines,
essentially JavaScript helps create

the interactive element of the page.

Raphaël: Yeah.

Yeah.

Eva: That's great.

Raphaël: Yeah.

So like when you click
our little chat bubble

Eva: Yeah,

Raphaël: and it like pops up this
thing where you can put in your name

and email and a question or comment

Eva: Yeah,

Raphaël: That's JavaScript,
that makes that pop up and.

Eva: right.

Raphaël: Controls what's
happening on the page.

Yeah.

Eva: So if I'm looking at like the
hero, for example, the hero section

of Chewy, they kind of frame and
they're like, The frame is HTML.

And then the fact that the H one
is bolded and that the button

is white on orange is CSS.

And then when I click on the button and
it highlights this little like interactive

elements, that would be JavaScript.

Raphaël: Yeah.

Yeah, exactly.

And to some extent you can do those
little interactions with CSS, but Yeah.

Eva: That's.

That's

Raphaël: Yeah.

Eva: It seems so simple.

Now all of these years of what
the hell are these things, and

now it just makes a lot of sense.

Raphaël: Yep.

So those are the three
things that's there we go.

That's the web.

That's it.

It's all done.

Nothing else to learn here.

Eva: I am

Raphaël: We're all

Eva: a developer.

Raphaël: Yep.

Once you finish your homework on glitch.

Eva: Yeah.

Once I finished my homework on which now
that I understand what the web is, I'm

Raphaël: Yeah.

Yep.

Yep.

Eva: Okay.

So what would be the,

Raphaël: than that, but

Eva: what would be the next step
in, in this kind of journey, which

I guess maybe it's the next episode.

Raphaël: Yeah.

I think the next episode should
probably be about the tools that

we use to facilitate how we build.

These webpages, because the thing
is it's gotten really complicated.

Like the web has grown so much in so
many different ways over the decades

and where used to be like perfectly
okay to just build a page with some HTML

CSS and like JavaScript just to do a.

Eva: Yeah.

Raphaël: you want to figure out how to
optimize for mobile browsers and how to

add an, a load up data asynchronously.

So That things are really smooth when
someone clicks to go from page to

page and there's all kinds of stuff
like that, that because people have

gotten more demanding and people
are doing more things on the web and

everyone's optimizing, you need a lot
of tools to manage all of those things.

Yeah.

Eva: sounds complicated.

Raphaël: Oh Yeah.

But fortunately at least for us, we don't
need to deal with all of the complications

of like how those tools work.

We just need to learn how they yeah.

The outer layer, like they give us a lot
of like nice, easy things to do, and they

take care of all of the complicated stuff.

Eva: Love it.

I love it.

Raphaël: Yep.

Eva: Cool.

I'm looking forward to hear all
of this stuff and hopefully that

brings me clarity just like today.

Brought me.

Raphaël: yeah, I think you'll
be building web apps in no time.

I think you'll be a, like a
Grandmaster of the web soon.

Eva: I'm definitely the Guinea pig.

So let's see how far I go.

If I become a grand master
of the web, then anybody can

Raphaël: Yeah, we'll get you from
Guinea pig to wizard or something.

Eva: perfect.

The perfect.

Raphaël: Yeah.

Yeah, exactly.

Eva: Awesome.

Thanks RAF.

Raphaël: Thanks Éva.

And we'll see you all next episode.

When we talk about these fun tools.

Alrighty.

Eva: Bye.

Raphaël: Bye.

Hey, thanks for listening.

And if you would like to subscribe to
the podcast, head to podcast.gochewy.io.

If you want to find out what we're
building and, uh, get involved with

our community, you can go to gochewy.io
and you'll see all of the links to the

different places that we interact online
on Twitter, on our currently very quiet

discord, but hopefully growing soon.

And, you can check out our, community
page with some stuff that we post

here and there at we.gochewy.io.

Thanks for listening.

And we'll see you next time.