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
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? 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? 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. 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. Oh, wow.
So any website in the world can only be built on either of these three on the front end. Raphaël: Yup. 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? Hypertext, something like that. Raphaël: Yeah, I can't re 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 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. 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. Great. Raphaël: where do you think JavaScript falls into all of this?
If I'm reading between the lines, essentially JavaScript helps create the interactive element of the page. Raphaël: Yeah. Yeah. That's great. Raphaël: Yeah. So like when you click our little chat bubble Yeah, Raphaël: and it like pops up this thing where you can put in your name and email and a question or comment Yeah, Raphaël: That's JavaScript, that makes that pop up and. right. Raphaël: Controls what's happening on the page.
Yeah. 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. That's.
That's Raphaël: Yeah. 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. I am Raphaël: We're all a developer. Raphaël: Yep. Once you finish your homework on glitch. Yeah. Once I finished my homework on which now that I understand what the web is, I'm Raphaël: Yeah.
Yep. Yep. Okay. So what would be the, Raphaël: than that, but 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. 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. 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. Love it. I love it. Raphaël: Yep. 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. 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. perfect. The perfect. Raphaël: Yeah. Yeah, exactly. Awesome. Thanks RAF. Raphaël: Thanks Éva. And we'll see you all next episode. When we talk about these fun tools. Alrighty. 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.