WEBVTT NOTE This file was generated by Descript 00:00:11.770 --> 00:00:12.730 Raphaël: Hey. 00:00:13.510 --> 00:00:13.840 Okay. 00:00:13.870 --> 00:00:14.110 No. 00:00:14.156 --> 00:00:14.668 Okay. 00:00:14.908 --> 00:00:15.898 I'm going to do this. 00:00:15.967 --> 00:00:20.797 I think it was, Hey and welcome to the chewy podcast. 00:00:20.847 --> 00:00:30.523 I'm Raph and, and today we'll be talking about what happens when 00:00:30.523 --> 00:00:35.348 you land on a web page, like the things that you see on your screen. 00:00:35.417 --> 00:00:35.867 Yeah. 00:00:35.927 --> 00:00:36.437 So 00:00:36.672 --> 00:00:37.812 Eva: So what does happen? 00:00:38.627 --> 00:00:39.197 Raphaël: I don't know. 00:00:39.226 --> 00:00:42.106 Let's do this a bit, like the last episode, what do you think happens? 00:00:42.173 --> 00:00:42.923 Eva: Good question. 00:00:42.971 --> 00:00:46.931 So we talked about typing the URL and what happens when you type it. 00:00:46.961 --> 00:00:51.753 So now that I'm on the page I guess the first step that I would do is one I would 00:00:51.753 --> 00:00:57.783 scroll down to read and then a bit more about the content and probably click 00:00:57.783 --> 00:00:59.733 on like a call to action or a button. 00:01:00.173 --> 00:01:00.803 Raphaël: Yeah. 00:01:01.163 --> 00:01:05.659 So today we're going to talk about how all those things get shown up on screen. 00:01:05.689 --> 00:01:09.852 Like what are they like, what, when you see those things that, that CTA, that 00:01:09.852 --> 00:01:13.422 call to action, how does it show up there? 00:01:13.422 --> 00:01:17.215 And for example, we're on the gochewy.io website. 00:01:17.485 --> 00:01:19.085 So gochewy.io. 00:01:19.135 --> 00:01:24.355 If you all want to check this out and on this page, we can see things like helping 00:01:24.355 --> 00:01:26.155 developers build better products faster. 00:01:26.935 --> 00:01:30.475 And we've got a little, a really cute little character. 00:01:30.513 --> 00:01:32.251 And we've got some buttons. 00:01:32.251 --> 00:01:34.141 And if you put your mouse on the button. 00:01:34.141 --> 00:01:39.101 then a little arrow shows up at the bottom, we've got a little chat bubble. 00:01:39.161 --> 00:01:43.181 And if you click on the chat bubble, like some stuff pops up and you can do things. 00:01:44.261 --> 00:01:45.861 So Yeah. 00:01:45.861 --> 00:01:48.379 How do all of those things work? 00:01:49.369 --> 00:01:49.969 Eva: I don't know. 00:01:50.059 --> 00:01:52.967 I like that when I click on it, it moves to another thing. 00:01:52.967 --> 00:01:56.721 As I know on the magic that button 00:01:57.646 --> 00:01:58.756 Raphaël: Do you remember? 00:01:58.816 --> 00:02:01.006 I think we talked about HTML last time. 00:02:01.006 --> 00:02:05.423 It has been a couple of months since our last episode, but do you remember 00:02:05.423 --> 00:02:08.853 what HTML, CSS and JavaScript are. 00:02:10.623 --> 00:02:11.913 Eva: languages. 00:02:12.413 --> 00:02:13.163 Raphaël: Yeah. 00:02:13.463 --> 00:02:14.003 Yeah. 00:02:14.063 --> 00:02:19.703 So those are basically the languages that make up the front end web. 00:02:19.793 --> 00:02:24.953 So on the server side, you can use all kinds of different languages. 00:02:25.043 --> 00:02:28.533 I remember last time you asked me about Ruby and I was like, ruby 00:02:28.533 --> 00:02:30.003 is not exactly my cup of tea. 00:02:31.743 --> 00:02:32.853 Lots of people love it. 00:02:32.853 --> 00:02:35.043 And it's great, but it's just not my favorite. 00:02:35.993 --> 00:02:36.473 I don't know. 00:02:36.503 --> 00:02:37.193 I don't know why. 00:02:37.246 --> 00:02:44.924 But on the front end, the browser can only understand HTML, CSS and JavaScript. 00:02:45.899 --> 00:02:46.229 Eva: Oh, wow. 00:02:46.229 --> 00:02:51.211 So any website in the world can only be built on either of 00:02:51.211 --> 00:02:52.561 these three on the front end. 00:02:52.886 --> 00:02:53.366 Raphaël: Yup. 00:02:54.851 --> 00:02:56.291 Eva: That's a new information for me. 00:02:56.621 --> 00:02:59.141 It all, and all it usually just bursts together. 00:02:59.149 --> 00:03:00.253 All of these languages. 00:03:00.353 --> 00:03:04.573 And you think you can use them for any web application or 00:03:04.603 --> 00:03:06.013 usage, but clearly he can't. 00:03:06.913 --> 00:03:07.483 Raphaël: Yeah. 00:03:07.513 --> 00:03:13.712 And there are some loopholes in that and in the sense that some people will 00:03:13.772 --> 00:03:16.862 they've built tools in other languages. 00:03:16.892 --> 00:03:23.072 So for example, you can write Python and essentially they've built tools that will 00:03:23.072 --> 00:03:25.472 translate that Python into JavaScript. 00:03:26.937 --> 00:03:29.937 Or Ruby into JavaScript or whatever. 00:03:30.002 --> 00:03:33.902 But in the end, the only three things basically that the browser 00:03:33.902 --> 00:03:35.402 understands are those three. 00:03:36.872 --> 00:03:37.352 Yeah. 00:03:37.382 --> 00:03:40.922 So do you know what HTML stands for? 00:03:46.816 --> 00:03:48.736 Eva: Hypertext, something like that. 00:03:48.961 --> 00:03:52.111 Raphaël: Yeah, I can't re 00:03:54.271 --> 00:03:56.291 Eva: I can't remember what the M and the L is. 00:03:56.681 --> 00:03:58.181 Raphaël: Markup Language. 00:03:58.211 --> 00:03:58.691 Yeah. 00:03:59.561 --> 00:04:00.011 Nice. 00:04:02.201 --> 00:04:04.211 Hypertext Markup Language. 00:04:04.271 --> 00:04:05.311 And basically that's. 00:04:06.336 --> 00:04:10.547 That's just the language to make your text hyper to make 00:04:10.547 --> 00:04:13.255 your, to say what is on screen. 00:04:13.345 --> 00:04:19.995 So we've got basically three layers HTML is the content itself. 00:04:20.595 --> 00:04:26.265 So it's telling you what the text is, what the images are and the 00:04:26.325 --> 00:04:29.413 order that they're in and how they're grouped and things like that. 00:04:29.413 --> 00:04:31.346 What do you think that the next layer is? 00:04:31.346 --> 00:04:34.556 So if we talk about CSS, actually, I'll give you a hint. 00:04:34.586 --> 00:04:37.616 So CSS is cascading style sheets. 00:04:38.756 --> 00:04:39.176 So what do you 00:04:39.226 --> 00:04:44.356 Eva: I think CSS is used for the design aspect or like the 00:04:44.656 --> 00:04:47.146 standardizing design elements, 00:04:47.356 --> 00:04:47.956 Raphaël: Yeah. 00:04:47.986 --> 00:04:49.516 actually that's a great point. 00:04:49.546 --> 00:04:55.038 So standardizing, so CSS allows you to create rules. 00:04:55.998 --> 00:05:01.188 That apply, like you say, like as a standard to everything 00:05:01.188 --> 00:05:02.898 that, that matches that rule. 00:05:03.018 --> 00:05:09.724 So you can say all of the H1 one elements, like the top level headers should, I 00:05:09.724 --> 00:05:13.294 don't know, there should be like 60 pixels tall and they should be bold. 00:05:13.338 --> 00:05:17.763 And then all of the paragraphs should be 18 pixels tall and not bold and 00:05:17.763 --> 00:05:21.273 maybe a different font and whatever, like all of that kind of stuff. 00:05:22.548 --> 00:05:22.968 Eva: right. 00:05:24.693 --> 00:05:25.323 Raphaël: yeah. 00:05:25.533 --> 00:05:32.158 And then to some extent, yeah, you can do some other like fun stuff. 00:05:32.308 --> 00:05:37.122 Like you can make things fade in and out and like that sort of thing. 00:05:37.170 --> 00:05:39.211 But very limited on interactions. 00:05:40.606 --> 00:05:40.846 Eva: Great. 00:05:40.951 --> 00:05:43.109 Raphaël: where do you think JavaScript falls into all of this? 00:05:43.109 --> 00:05:50.811 Eva: If I'm reading between the lines, essentially JavaScript helps create 00:05:50.811 --> 00:05:53.211 the interactive element of the page. 00:05:53.676 --> 00:05:54.696 Raphaël: Yeah. 00:05:55.296 --> 00:05:55.836 Yeah. 00:05:56.011 --> 00:05:56.521 Eva: That's great. 00:05:57.036 --> 00:05:57.456 Raphaël: Yeah. 00:05:57.816 --> 00:06:00.216 So like when you click our little chat bubble 00:06:01.421 --> 00:06:01.571 Eva: Yeah, 00:06:02.436 --> 00:06:05.451 Raphaël: and it like pops up this thing where you can put in your name 00:06:05.451 --> 00:06:07.401 and email and a question or comment 00:06:08.496 --> 00:06:08.886 Eva: Yeah, 00:06:08.930 --> 00:06:11.463 Raphaël: That's JavaScript, that makes that pop up and. 00:06:12.318 --> 00:06:12.648 Eva: right. 00:06:12.741 --> 00:06:14.680 Raphaël: Controls what's happening on the page. 00:06:14.747 --> 00:06:15.255 Yeah. 00:06:15.520 --> 00:06:20.560 Eva: So if I'm looking at like the hero, for example, the hero section 00:06:20.560 --> 00:06:30.150 of Chewy, they kind of frame and they're like, The frame is HTML. 00:06:30.330 --> 00:06:34.740 And then the fact that the H one is bolded and that the button 00:06:34.740 --> 00:06:37.710 is white on orange is CSS. 00:06:38.310 --> 00:06:42.499 And then when I click on the button and it highlights this little like interactive 00:06:42.499 --> 00:06:44.329 elements, that would be JavaScript. 00:06:45.024 --> 00:06:45.654 Raphaël: Yeah. 00:06:45.924 --> 00:06:47.154 Yeah, exactly. 00:06:47.694 --> 00:06:52.594 And to some extent you can do those little interactions with CSS, but Yeah. 00:06:52.623 --> 00:06:52.953 Eva: That's. 00:06:54.138 --> 00:06:54.318 That's 00:06:54.335 --> 00:06:54.695 Raphaël: Yeah. 00:06:54.791 --> 00:06:55.961 Eva: It seems so simple. 00:06:55.961 --> 00:07:00.491 Now all of these years of what the hell are these things, and 00:07:00.491 --> 00:07:02.891 now it just makes a lot of sense. 00:07:03.236 --> 00:07:03.626 Raphaël: Yep. 00:07:03.836 --> 00:07:06.751 So those are the three things that's there we go. 00:07:06.811 --> 00:07:07.411 That's the web. 00:07:07.441 --> 00:07:07.891 That's it. 00:07:07.921 --> 00:07:08.641 It's all done. 00:07:08.731 --> 00:07:09.931 Nothing else to learn here. 00:07:12.246 --> 00:07:12.546 Eva: I am 00:07:12.661 --> 00:07:12.961 Raphaël: We're all 00:07:13.246 --> 00:07:14.046 Eva: a developer. 00:07:14.491 --> 00:07:14.881 Raphaël: Yep. 00:07:17.041 --> 00:07:19.051 Once you finish your homework on glitch. 00:07:20.196 --> 00:07:20.526 Eva: Yeah. 00:07:22.956 --> 00:07:27.066 Once I finished my homework on which now that I understand what the web is, I'm 00:07:27.091 --> 00:07:27.391 Raphaël: Yeah. 00:07:27.391 --> 00:07:27.519 Yep. 00:07:27.889 --> 00:07:28.069 Yep. 00:07:28.188 --> 00:07:28.458 Eva: Okay. 00:07:28.458 --> 00:07:29.358 So what would be the, 00:07:29.383 --> 00:07:29.983 Raphaël: than that, but 00:07:31.588 --> 00:07:35.988 Eva: what would be the next step in, in this kind of journey, which 00:07:36.018 --> 00:07:37.578 I guess maybe it's the next episode. 00:07:38.453 --> 00:07:39.113 Raphaël: Yeah. 00:07:39.203 --> 00:07:44.603 I think the next episode should probably be about the tools that 00:07:44.603 --> 00:07:48.860 we use to facilitate how we build. 00:07:48.899 --> 00:07:54.239 These webpages, because the thing is it's gotten really complicated. 00:07:54.599 --> 00:08:00.749 Like the web has grown so much in so many different ways over the decades 00:08:01.109 --> 00:08:07.960 and where used to be like perfectly okay to just build a page with some HTML 00:08:07.960 --> 00:08:10.240 CSS and like JavaScript just to do a. 00:08:11.775 --> 00:08:12.195 Eva: Yeah. 00:08:13.265 --> 00:08:17.500 Raphaël: you want to figure out how to optimize for mobile browsers and how to 00:08:17.890 --> 00:08:20.260 add an, a load up data asynchronously. 00:08:20.260 --> 00:08:24.130 So That things are really smooth when someone clicks to go from page to 00:08:24.130 --> 00:08:28.780 page and there's all kinds of stuff like that, that because people have 00:08:28.780 --> 00:08:32.230 gotten more demanding and people are doing more things on the web and 00:08:32.230 --> 00:08:36.014 everyone's optimizing, you need a lot of tools to manage all of those things. 00:08:36.084 --> 00:08:36.624 Yeah. 00:08:36.679 --> 00:08:37.699 Eva: sounds complicated. 00:08:38.244 --> 00:08:39.594 Raphaël: Oh Yeah. 00:08:39.624 --> 00:08:45.654 But fortunately at least for us, we don't need to deal with all of the complications 00:08:45.744 --> 00:08:48.234 of like how those tools work. 00:08:48.534 --> 00:08:52.952 We just need to learn how they yeah. 00:08:52.999 --> 00:08:57.419 The outer layer, like they give us a lot of like nice, easy things to do, and they 00:08:57.419 --> 00:08:59.219 take care of all of the complicated stuff. 00:09:00.504 --> 00:09:01.104 Eva: Love it. 00:09:01.204 --> 00:09:01.644 I love it. 00:09:02.534 --> 00:09:02.924 Raphaël: Yep. 00:09:04.284 --> 00:09:04.816 Eva: Cool. 00:09:04.839 --> 00:09:09.579 I'm looking forward to hear all of this stuff and hopefully that 00:09:09.579 --> 00:09:11.979 brings me clarity just like today. 00:09:11.979 --> 00:09:12.549 Brought me. 00:09:13.749 --> 00:09:17.050 Raphaël: yeah, I think you'll be building web apps in no time. 00:09:17.118 --> 00:09:21.120 I think you'll be a, like a Grandmaster of the web soon. 00:09:22.620 --> 00:09:24.090 Eva: I'm definitely the Guinea pig. 00:09:24.090 --> 00:09:25.770 So let's see how far I go. 00:09:25.770 --> 00:09:29.040 If I become a grand master of the web, then anybody can 00:09:29.660 --> 00:09:34.640 Raphaël: Yeah, we'll get you from Guinea pig to wizard or something. 00:09:36.300 --> 00:09:36.750 Eva: perfect. 00:09:36.930 --> 00:09:37.380 The perfect. 00:09:39.650 --> 00:09:40.130 Raphaël: Yeah. 00:09:40.250 --> 00:09:41.420 Yeah, exactly. 00:09:42.875 --> 00:09:43.565 Eva: Awesome. 00:09:43.586 --> 00:09:44.309 Thanks RAF. 00:09:45.284 --> 00:09:46.144 Raphaël: Thanks Éva. 00:09:46.754 --> 00:09:49.483 And we'll see you all next episode. 00:09:49.535 --> 00:09:51.761 When we talk about these fun tools. 00:09:52.032 --> 00:09:52.542 Alrighty. 00:09:53.452 --> 00:09:54.022 Eva: Bye. 00:09:55.038 --> 00:09:55.368 Raphaël: Bye. 00:09:55.953 --> 00:09:57.243 Hey, thanks for listening. 00:09:57.273 --> 00:10:04.373 And if you would like to subscribe to the podcast, head to podcast.gochewy.io. 00:10:04.683 --> 00:10:08.823 If you want to find out what we're building and, uh, get involved with 00:10:08.823 --> 00:10:13.353 our community, you can go to gochewy.io and you'll see all of the links to the 00:10:13.353 --> 00:10:19.773 different places that we interact online on Twitter, on our currently very quiet 00:10:19.773 --> 00:10:22.353 discord, but hopefully growing soon. 00:10:23.013 --> 00:10:28.133 And, you can check out our, community page with some stuff that we post 00:10:28.133 --> 00:10:30.973 here and there at we.gochewy.io. 00:10:31.343 --> 00:10:32.423 Thanks for listening. 00:10:32.693 --> 00:10:33.863 And we'll see you next time.