1 00:00:00,000 --> 00:00:02,230 2 00:00:02,230 --> 00:00:03,200 SPEAKER 1: All right. 3 00:00:03,200 --> 00:00:04,280 Hello, everyone. 4 00:00:04,280 --> 00:00:06,770 And welcome to the CS50X Educator Workshop. 5 00:00:06,770 --> 00:00:09,680 Can everyone hear me OK? 6 00:00:09,680 --> 00:00:11,690 So nice to see everyone again. 7 00:00:11,690 --> 00:00:13,730 Only two sessions to go. 8 00:00:13,730 --> 00:00:18,740 Today, of course, we'll be joined by CS50's own Brian Yu for a look at CS50W 9 00:00:18,740 --> 00:00:22,070 or CS50's web programming with Python and JavaScript, 10 00:00:22,070 --> 00:00:25,250 the new and improved version for 2020 and beyond. 11 00:00:25,250 --> 00:00:27,950 Tomorrow then will be Brian, again, introducing us 12 00:00:27,950 --> 00:00:33,140 to CS50 AI, an introduction to artificial intelligence using Python. 13 00:00:33,140 --> 00:00:36,470 Before we dive in as usual, please feel free to say 14 00:00:36,470 --> 00:00:38,990 hello and where you're from in the chat, particularly 15 00:00:38,990 --> 00:00:40,940 to any new faces and names. 16 00:00:40,940 --> 00:00:46,100 Might anyone be comfortable saying hello on camera as well to everyone? 17 00:00:46,100 --> 00:00:49,323 Rampur, do you want to start things off today? 18 00:00:49,323 --> 00:00:49,990 SPEAKER 2: Yeah. 19 00:00:49,990 --> 00:00:51,735 Hi, David. 20 00:00:51,735 --> 00:00:52,860 SPEAKER 1: Nice to see you. 21 00:00:52,860 --> 00:00:55,200 Do you want to tell us a little something about yourself 22 00:00:55,200 --> 00:00:56,793 that you haven't told us already? 23 00:00:56,793 --> 00:00:57,460 SPEAKER 2: Yeah. 24 00:00:57,460 --> 00:00:57,650 Yeah. 25 00:00:57,650 --> 00:00:58,320 Sure. 26 00:00:58,320 --> 00:00:58,820 Yeah. 27 00:00:58,820 --> 00:01:00,380 I love programming. 28 00:01:00,380 --> 00:01:04,590 I have been teaching web programming from Boston three, four years. 29 00:01:04,590 --> 00:01:07,410 So I'm very much excited to look at what is programming 30 00:01:07,410 --> 00:01:09,552 that you are going to cover today. 31 00:01:09,552 --> 00:01:10,260 SPEAKER 1: Great. 32 00:01:10,260 --> 00:01:11,070 Well, likewise. 33 00:01:11,070 --> 00:01:15,365 And for those who are new today, where are you from? 34 00:01:15,365 --> 00:01:16,960 Oh, we lost you. 35 00:01:16,960 --> 00:01:19,130 SPEAKER 3: Professor, this is [INAUDIBLE].. 36 00:01:19,130 --> 00:01:24,850 I did your HPAC program, EDSS class. 37 00:01:24,850 --> 00:01:26,310 Glad to be here. 38 00:01:26,310 --> 00:01:27,470 Thank you very much. 39 00:01:27,470 --> 00:01:28,137 SPEAKER 1: Yeah. 40 00:01:28,137 --> 00:01:30,940 Nice to see you, the whole family, too, I see as well. 41 00:01:30,940 --> 00:01:31,640 SPEAKER 3: Yeah. 42 00:01:31,640 --> 00:01:32,800 He's learning CS50 as well. 43 00:01:32,800 --> 00:01:34,330 [LAUGHTER] 44 00:01:34,330 --> 00:01:35,330 SPEAKER 1: That's great. 45 00:01:35,330 --> 00:01:37,580 Nice to meet him as well. 46 00:01:37,580 --> 00:01:39,700 Rampur, shall we come back to you, since everyone 47 00:01:39,700 --> 00:01:42,550 is dying to know where in the world you are, I think. 48 00:01:42,550 --> 00:01:44,535 SPEAKER 2: I am from [INAUDIBLE]. 49 00:01:44,535 --> 00:01:45,410 SPEAKER 1: Wonderful. 50 00:01:45,410 --> 00:01:45,890 Thank you. 51 00:01:45,890 --> 00:01:47,557 Sorry for the muting and unmuting there. 52 00:01:47,557 --> 00:01:49,995 SPEAKER 2: I teach engineering graduates. 53 00:01:49,995 --> 00:01:50,870 SPEAKER 1: Excellent. 54 00:01:50,870 --> 00:01:52,040 Excellent. 55 00:01:52,040 --> 00:01:57,560 And let's see do we have any other hands who would like to get things started? 56 00:01:57,560 --> 00:01:58,440 OK, Ramon. 57 00:01:58,440 --> 00:01:59,420 The floor is yours. 58 00:01:59,420 --> 00:02:03,255 And do give us a really enthusiastic transition to Brian. 59 00:02:03,255 --> 00:02:04,380 SPEAKER 4: Hello, everyone. 60 00:02:04,380 --> 00:02:06,890 My name is Ramon. 61 00:02:06,890 --> 00:02:09,530 I actually was an information systems major. 62 00:02:09,530 --> 00:02:12,140 But then I dropped out to work as an English teacher 63 00:02:12,140 --> 00:02:14,790 and focus on the translation of the course. 64 00:02:14,790 --> 00:02:18,340 And I'm really excited for Brian's session today. 65 00:02:18,340 --> 00:02:21,800 The CS50 web programming was the second course I took. 66 00:02:21,800 --> 00:02:23,480 And let's get started. 67 00:02:23,480 --> 00:02:24,563 Let's jump right in. 68 00:02:24,563 --> 00:02:25,730 SPEAKER 1: All right, Brian. 69 00:02:25,730 --> 00:02:27,747 I think the floor is indeed yours. 70 00:02:27,747 --> 00:02:28,580 BRIAN YU: All right. 71 00:02:28,580 --> 00:02:29,990 Thanks very much. 72 00:02:29,990 --> 00:02:31,040 Welcome, everyone. 73 00:02:31,040 --> 00:02:34,200 Good to see familiar and new faces today. 74 00:02:34,200 --> 00:02:37,520 So today what we're going to be talking about, as was mentioned, 75 00:02:37,520 --> 00:02:42,200 is CS50W, which is CS50's web programming with Python and JavaScript. 76 00:02:42,200 --> 00:02:45,350 This is a class that picks up right where CS50 leaves off. 77 00:02:45,350 --> 00:02:48,200 So at the tail end of CS50, students are introduced 78 00:02:48,200 --> 00:02:53,030 to a little bit of web programming using Python to write Flask web programs 79 00:02:53,030 --> 00:02:57,090 and introducing students to SQL to be able to create databases as well. 80 00:02:57,090 --> 00:03:00,840 So CS50W web programming with Python and JavaScript 81 00:03:00,840 --> 00:03:03,650 takes a deeper dive into the design of web applications 82 00:03:03,650 --> 00:03:05,720 and looks at how to build them and how to think 83 00:03:05,720 --> 00:03:10,010 about organizing databases, how the different languages and frameworks can 84 00:03:10,010 --> 00:03:14,210 interact with each other, and looking at some modern tools and libraries for web 85 00:03:14,210 --> 00:03:18,170 application development, as well, to hopefully give students the tools 86 00:03:18,170 --> 00:03:22,040 and resources that they need to then go forth and build web applications that 87 00:03:22,040 --> 00:03:24,240 are interesting to them, for example. 88 00:03:24,240 --> 00:03:26,990 So what I thought we'd do, just to get a sense for who you all are 89 00:03:26,990 --> 00:03:31,320 and whether you some of you may have taken the course before-- 90 00:03:31,320 --> 00:03:34,550 so the course itself is available as open courseware 91 00:03:34,550 --> 00:03:35,940 and is also available on EdX. 92 00:03:35,940 --> 00:03:39,380 I'll paste the link for that course in the chat, too. 93 00:03:39,380 --> 00:03:41,410 But I thought I'd ask each of you, if you could, 94 00:03:41,410 --> 00:03:43,640 to fill out this poll, that if you open up the chat, 95 00:03:43,640 --> 00:03:46,070 I'm about to paste in the link to a poll. 96 00:03:46,070 --> 00:03:49,730 Curious to hear if you've taken any of CS50W before. 97 00:03:49,730 --> 00:03:51,860 So if you've ever started any of the lectures 98 00:03:51,860 --> 00:03:54,200 or started any of the projects, there are actually 99 00:03:54,200 --> 00:03:58,700 two versions of the class, a 2018 version and a 2020 version 100 00:03:58,700 --> 00:03:59,682 of the class. 101 00:03:59,682 --> 00:04:02,390 So if you could just fill out that poll, it would just be useful. 102 00:04:02,390 --> 00:04:05,660 It looks like everyone so far has not taken the class before. 103 00:04:05,660 --> 00:04:07,790 All right, so in that case, hopefully today 104 00:04:07,790 --> 00:04:10,820 will be a good introduction then to tell you 105 00:04:10,820 --> 00:04:13,490 a little bit about what the course is, what it's about, 106 00:04:13,490 --> 00:04:15,830 and what it is that students learn in the course 107 00:04:15,830 --> 00:04:20,029 and how you, then, could potentially teach this course and this curriculum 108 00:04:20,029 --> 00:04:22,680 to your own students as well. 109 00:04:22,680 --> 00:04:25,130 So we'll give people another couple of seconds 110 00:04:25,130 --> 00:04:29,310 to answer the poll, because it looks like about half of people 111 00:04:29,310 --> 00:04:31,153 have answered it so far. 112 00:04:31,153 --> 00:04:32,570 Give people a couple more seconds. 113 00:04:32,570 --> 00:04:36,030 114 00:04:36,030 --> 00:04:39,180 And all right, so it looks like vast majority of us 115 00:04:39,180 --> 00:04:41,640 have not seen any of this course before. 116 00:04:41,640 --> 00:04:43,680 So hopefully today will be an opportunity 117 00:04:43,680 --> 00:04:46,380 to get a little more familiar with the curriculum. 118 00:04:46,380 --> 00:04:49,320 And we'll start just by talking about the syllabus and diving 119 00:04:49,320 --> 00:04:51,300 into what the course is all about. 120 00:04:51,300 --> 00:04:55,660 Definitely at any point today if you'd like to ask a question about anything, 121 00:04:55,660 --> 00:04:58,920 feel free to raise your blue hand in the participants' window. 122 00:04:58,920 --> 00:05:00,920 And I'll call on you and you can ask a question. 123 00:05:00,920 --> 00:05:02,712 If you'd like to ask questions in the chat, 124 00:05:02,712 --> 00:05:05,840 as well, I'm keeping an eye on the chat all throughout today's session. 125 00:05:05,840 --> 00:05:08,465 So if you have any questions about the material, what we teach, 126 00:05:08,465 --> 00:05:13,050 why we teach it, and how we teach it, definitely feel free to ask away. 127 00:05:13,050 --> 00:05:15,340 That's what this session is for. 128 00:05:15,340 --> 00:05:19,020 So with that in mind, let's go ahead and start talking about web programming 129 00:05:19,020 --> 00:05:20,680 with Python and JavaScript. 130 00:05:20,680 --> 00:05:23,250 And just to set up some context, if you look online, 131 00:05:23,250 --> 00:05:25,710 you will see two different versions of the class. 132 00:05:25,710 --> 00:05:28,620 The class was first offered in 2018. 133 00:05:28,620 --> 00:05:32,340 So we had one version of CS50W that was released then. 134 00:05:32,340 --> 00:05:35,880 And more recently, over the course of the past couple of several months, 135 00:05:35,880 --> 00:05:40,230 we've been reproducing and recreating a new and refreshed version of the course 136 00:05:40,230 --> 00:05:45,000 as well, so CS50W 2020, so two different versions of the course 137 00:05:45,000 --> 00:05:45,990 that you might see. 138 00:05:45,990 --> 00:05:48,030 I'm going to be focusing today on the latest 139 00:05:48,030 --> 00:05:51,425 version of the course with the latest material and the latest curriculum. 140 00:05:51,425 --> 00:05:54,300 But if you're curious about the differences between the two versions, 141 00:05:54,300 --> 00:05:57,900 between the web programming class as offered in 2018 142 00:05:57,900 --> 00:06:01,570 and this year's version of the web programming class as well, 143 00:06:01,570 --> 00:06:05,610 the new version of the class focuses primarily on Django as the web 144 00:06:05,610 --> 00:06:07,300 framework that we use with students. 145 00:06:07,300 --> 00:06:10,320 And I'll talk a little bit more later today on what that is 146 00:06:10,320 --> 00:06:11,940 and why it's useful. 147 00:06:11,940 --> 00:06:15,600 Whereas in 2018, we focused on two different Python frameworks. 148 00:06:15,600 --> 00:06:18,180 We focused on both Flask and Django. 149 00:06:18,180 --> 00:06:22,740 The 2020 version of the course just focuses on Django as its backend 150 00:06:22,740 --> 00:06:24,850 for designing web applications. 151 00:06:24,850 --> 00:06:28,140 And that lets us spend more time to go into more detail into the features 152 00:06:28,140 --> 00:06:28,980 that Django offers. 153 00:06:28,980 --> 00:06:30,640 And I'll talk about some of them there. 154 00:06:30,640 --> 00:06:32,847 But it includes things like making it easier 155 00:06:32,847 --> 00:06:35,680 for students to create forms, which are quite common on the internet 156 00:06:35,680 --> 00:06:38,820 if students are creating applications that let users fill out 157 00:06:38,820 --> 00:06:43,260 information and submit information or data to your application, 158 00:06:43,260 --> 00:06:46,620 creating forms very quickly and easily can be quite helpful. 159 00:06:46,620 --> 00:06:50,370 The 2020 version of the course also spends some time introducing students 160 00:06:50,370 --> 00:06:52,470 to modern front end libraries. 161 00:06:52,470 --> 00:06:55,350 So libraries are in frameworks like React, 162 00:06:55,350 --> 00:06:58,380 which is a popular framework now for building 163 00:06:58,380 --> 00:07:00,850 very dynamic and interactive user interfaces. 164 00:07:00,850 --> 00:07:04,290 It's a framework developed by Facebook, quite popular all across the internet 165 00:07:04,290 --> 00:07:08,220 now for just being able to quickly create very interactive user 166 00:07:08,220 --> 00:07:11,340 interfaces where things are responding to new data, 167 00:07:11,340 --> 00:07:15,960 things are responding to user input, and it's a common paradigm for programming 168 00:07:15,960 --> 00:07:17,623 now as well. 169 00:07:17,623 --> 00:07:20,290 And then we introduce students to some more newer tools as well. 170 00:07:20,290 --> 00:07:23,430 GitHub Actions is a more recent tool offered by GitHub. 171 00:07:23,430 --> 00:07:27,850 It didn't exist in the same form back in 2018 that we now introduce. 172 00:07:27,850 --> 00:07:30,120 And the projects are all new, too, in 2020 173 00:07:30,120 --> 00:07:33,450 and that are very much inspired by the types of web applications 174 00:07:33,450 --> 00:07:37,980 that are quite common in industry that students might encounter or use 175 00:07:37,980 --> 00:07:41,610 on a day-to-day basis, things like websites like Amazon or Gmail 176 00:07:41,610 --> 00:07:43,570 or Google that are very common. 177 00:07:43,570 --> 00:07:47,130 We ask students to think about how those applications might be implemented 178 00:07:47,130 --> 00:07:50,520 and to recreate a smaller version of those sorts of websites 179 00:07:50,520 --> 00:07:54,960 that have similar features, just to give students a better understanding for how 180 00:07:54,960 --> 00:07:58,290 those web applications might work, how they might be designed, 181 00:07:58,290 --> 00:08:01,080 and ultimately, how students might be able to create 182 00:08:01,080 --> 00:08:03,908 similar things of their own, too. 183 00:08:03,908 --> 00:08:07,200 So those are the big picture differences between the two versions of the class, 184 00:08:07,200 --> 00:08:09,490 if you happen to see those two versions around. 185 00:08:09,490 --> 00:08:11,460 There are also some smaller changes. 186 00:08:11,460 --> 00:08:14,130 In particular, there's some code from the 2018 version 187 00:08:14,130 --> 00:08:17,160 that was a little bit outdated, APIs that no longer worked over 188 00:08:17,160 --> 00:08:20,790 the course of those two years that have been refreshed and updated. 189 00:08:20,790 --> 00:08:23,280 So the 2020 version of the course is the version 190 00:08:23,280 --> 00:08:27,750 that you should be looking at if you were interested in taking or teaching 191 00:08:27,750 --> 00:08:30,760 this particular class. 192 00:08:30,760 --> 00:08:32,813 So with that, I don't see any questions so far. 193 00:08:32,813 --> 00:08:34,980 But we'll go ahead and dive right into the syllabus. 194 00:08:34,980 --> 00:08:37,500 I'll talk you through what it is this course talks about, 195 00:08:37,500 --> 00:08:41,400 where it picks up from CS50, and what the new things are. 196 00:08:41,400 --> 00:08:44,169 So the first topic that we cover, the very first lecture 197 00:08:44,169 --> 00:08:48,420 and the first project introduces students to HTML and CSS. 198 00:08:48,420 --> 00:08:51,180 So if unfamiliar, these are two languages that are commonly 199 00:08:51,180 --> 00:08:53,310 used for creating web pages. 200 00:08:53,310 --> 00:08:56,550 Where HTML is used to describe the structure of a web page, 201 00:08:56,550 --> 00:09:01,350 defining where the paragraphs are, where the images are, 202 00:09:01,350 --> 00:09:04,650 maybe if there are tables on the page, or if there are videos on the page 203 00:09:04,650 --> 00:09:06,480 or other content on the page. 204 00:09:06,480 --> 00:09:10,290 And then CSS, or Cascading Style Sheets, is another language 205 00:09:10,290 --> 00:09:14,340 that is used in order to be able to style those web pages, 206 00:09:14,340 --> 00:09:19,020 to be able to create things in different colors, different fonts, 207 00:09:19,020 --> 00:09:21,267 laying things out with the appropriate spacing. 208 00:09:21,267 --> 00:09:23,100 So they work very well together where we use 209 00:09:23,100 --> 00:09:25,680 HTML to describe the structure of the page 210 00:09:25,680 --> 00:09:28,500 and then CSS to describe the aesthetics of that page, 211 00:09:28,500 --> 00:09:34,320 to describe how each individual element inside that page should be structured. 212 00:09:34,320 --> 00:09:35,560 I see a question in the chat. 213 00:09:35,560 --> 00:09:39,400 Is React used together with Django or interchangeably? 214 00:09:39,400 --> 00:09:41,830 We'll talk about React a little bit more in a bit. 215 00:09:41,830 --> 00:09:45,280 But as Shristi answered, which is absolutely correct, 216 00:09:45,280 --> 00:09:46,930 they can be used interchangeably. 217 00:09:46,930 --> 00:09:51,460 Because we draw a distinction between what the backend frameworks are 218 00:09:51,460 --> 00:09:53,410 and the backend code of the application, so 219 00:09:53,410 --> 00:09:55,960 the code that might be running on a web server, 220 00:09:55,960 --> 00:09:59,830 like Google's web servers or Amazon's web servers, for example, 221 00:09:59,830 --> 00:10:02,870 as contrasted with the front end of the web application. 222 00:10:02,870 --> 00:10:05,650 So that's the part of the application that really is what's 223 00:10:05,650 --> 00:10:07,150 showing up in the browser window. 224 00:10:07,150 --> 00:10:10,210 It's maybe the JavaScript that has users interacting 225 00:10:10,210 --> 00:10:12,100 with various parts of the page. 226 00:10:12,100 --> 00:10:16,210 And so Django is what we might consider to be a backend framework. 227 00:10:16,210 --> 00:10:20,470 It's a framework that helps us to build out the structure of the web server 228 00:10:20,470 --> 00:10:23,800 and describes how the server is handling those requests. 229 00:10:23,800 --> 00:10:25,870 React, meanwhile, is a front end framework. 230 00:10:25,870 --> 00:10:30,440 So React describes how elements will appear on the page to the user. 231 00:10:30,440 --> 00:10:32,560 And so these two can interact with each other. 232 00:10:32,560 --> 00:10:36,040 So React on the front end can communicate with Django on the backend, 233 00:10:36,040 --> 00:10:40,240 or really with any other backend framework, so things like Ruby 234 00:10:40,240 --> 00:10:42,640 On Rails or Node.js are other backend frameworks, 235 00:10:42,640 --> 00:10:44,680 if those are familiar to you as well. 236 00:10:44,680 --> 00:10:46,720 Those can be used with React, too. 237 00:10:46,720 --> 00:10:50,440 So a lot of these components and ideas that we show students 238 00:10:50,440 --> 00:10:51,830 can be mixed and matched. 239 00:10:51,830 --> 00:10:54,220 They don't need to use the entire same set of tools 240 00:10:54,220 --> 00:10:55,680 that we show in the course. 241 00:10:55,680 --> 00:10:58,360 But we give students one possible set of tools 242 00:10:58,360 --> 00:11:01,570 that they can use to do both the backend and the front end. 243 00:11:01,570 --> 00:11:06,150 But more on that, certainly, when we get to it. 244 00:11:06,150 --> 00:11:08,440 All right, so we first introduced students to HTML. 245 00:11:08,440 --> 00:11:10,990 This over here is what HTML looks like, if you're 246 00:11:10,990 --> 00:11:13,090 unfamiliar with the exact syntax. 247 00:11:13,090 --> 00:11:17,842 But in short, it's composed of a series of nested HTML tags, 248 00:11:17,842 --> 00:11:20,050 where we might say that this is the title of the page 249 00:11:20,050 --> 00:11:21,850 and here is the body of the page. 250 00:11:21,850 --> 00:11:25,000 And you might have paragraphs inside the body of the page and images 251 00:11:25,000 --> 00:11:26,950 that are inside the body of the page. 252 00:11:26,950 --> 00:11:29,260 And so HTML is this mark up language that 253 00:11:29,260 --> 00:11:32,260 lets students describe the structure of the page. 254 00:11:32,260 --> 00:11:35,920 And we don't introduce students to all of the various different HTML tags. 255 00:11:35,920 --> 00:11:40,940 There are certainly too many to cover in any one lecture, for example. 256 00:11:40,940 --> 00:11:44,650 But what we do show students are some of the common HTML elements, 257 00:11:44,650 --> 00:11:47,980 things like lists and images and paragraphs 258 00:11:47,980 --> 00:11:51,970 and other common HTML elements, headings and the like. 259 00:11:51,970 --> 00:11:53,830 And then point students towards resources 260 00:11:53,830 --> 00:11:57,670 where they can then find the other tags for whatever problems 261 00:11:57,670 --> 00:11:58,900 that they're trying to solve. 262 00:11:58,900 --> 00:12:01,270 And many of the projects will involve asking students 263 00:12:01,270 --> 00:12:04,540 to do a little bit of work on their own to try and figure out 264 00:12:04,540 --> 00:12:09,460 what's the right HTML tag to use here and how do I learn how to use it. 265 00:12:09,460 --> 00:12:14,590 So we try to equip students with the tools in order to do that. 266 00:12:14,590 --> 00:12:18,640 When teaching middle school kids, should they learn HTML first? 267 00:12:18,640 --> 00:12:21,640 Or can they learn each HTML5 directly? 268 00:12:21,640 --> 00:12:26,230 So HTML5 is just the latest version of this particular standard 269 00:12:26,230 --> 00:12:31,070 for describing the page and things don't change all that much between HTML 270 00:12:31,070 --> 00:12:31,570 versions. 271 00:12:31,570 --> 00:12:33,945 And for the most part, they're very backwards compatible. 272 00:12:33,945 --> 00:12:37,120 The things that used to work in previous versions of HTML 273 00:12:37,120 --> 00:12:40,930 will often still work in HTML5, although some of the best practices 274 00:12:40,930 --> 00:12:44,210 will change a little bit from version to version. 275 00:12:44,210 --> 00:12:47,820 HTML5, in particular, just introduces a lot of new elements. 276 00:12:47,820 --> 00:12:51,640 So it makes it easier to be able to create autocomplete dropdown lists 277 00:12:51,640 --> 00:12:54,700 and to be able to create video elements and those sorts of things 278 00:12:54,700 --> 00:12:58,150 that might have been harder to do in previous versions of HTML. 279 00:12:58,150 --> 00:13:02,140 So certainly fine to just introduce students to the latest version of HTML. 280 00:13:02,140 --> 00:13:04,510 They don't need to be using all of the latest tags 281 00:13:04,510 --> 00:13:06,820 and all of the latest elements, but this at least 282 00:13:06,820 --> 00:13:12,550 allows them the option of doing so if they choose to, for example. 283 00:13:12,550 --> 00:13:16,120 Another question in the chat, will you please talk about Django deployment 284 00:13:16,120 --> 00:13:17,850 at the end of the presentation? 285 00:13:17,850 --> 00:13:18,350 Yes. 286 00:13:18,350 --> 00:13:21,160 So we do talk a little bit at the end of the course 287 00:13:21,160 --> 00:13:24,400 as to how you might take an application and deploy it to the internet 288 00:13:24,400 --> 00:13:28,000 and what concerns around scalability and security students 289 00:13:28,000 --> 00:13:30,230 need to be thinking about when doing that. 290 00:13:30,230 --> 00:13:33,370 There are a number of options for how to deploy a Django application. 291 00:13:33,370 --> 00:13:38,140 I think the simplest one is to deploy to a service called Heroku. 292 00:13:38,140 --> 00:13:41,590 Heroku is a web application hosting service 293 00:13:41,590 --> 00:13:44,320 that makes it pretty easy to take a web application 294 00:13:44,320 --> 00:13:45,880 and just put it on the internet. 295 00:13:45,880 --> 00:13:49,600 It's also nice because there is a free tier for Heroku 296 00:13:49,600 --> 00:13:52,120 where, for free, students can put their website online 297 00:13:52,120 --> 00:13:53,810 so that anyone can use it. 298 00:13:53,810 --> 00:13:56,470 And they can also get access to a free Heroku database, 299 00:13:56,470 --> 00:14:01,630 too, that lets them for free store up to 10,000 rows inside of a SQL database. 300 00:14:01,630 --> 00:14:04,240 So that tends to be a common option for students 301 00:14:04,240 --> 00:14:06,570 when trying to deploy Django applications. 302 00:14:06,570 --> 00:14:07,480 And there is even-- 303 00:14:07,480 --> 00:14:10,210 I don't have the link offhand, but maybe someone can find it-- 304 00:14:10,210 --> 00:14:13,810 a Django-Heroku-Python package that you can just 305 00:14:13,810 --> 00:14:17,230 install into your Django application, which automates the process 306 00:14:17,230 --> 00:14:20,040 of setting up all the settings for Django as well. 307 00:14:20,040 --> 00:14:23,890 That just makes it really simple to take a Django application and put it online. 308 00:14:23,890 --> 00:14:27,400 There are other options, too, many good options for doing so. 309 00:14:27,400 --> 00:14:33,120 But yes, so thank you, Arturo, for pasting the link for that in the chat. 310 00:14:33,120 --> 00:14:36,120 There are many options, but Heroku tends to be the one that I recommend. 311 00:14:36,120 --> 00:14:39,218 It's just an easy way to take applications and put them online. 312 00:14:39,218 --> 00:14:40,760 And that's a lot of fun for students. 313 00:14:40,760 --> 00:14:42,978 Especially with final projects, for example, 314 00:14:42,978 --> 00:14:44,770 where they can then take their application, 315 00:14:44,770 --> 00:14:47,920 put it online, and let friends and family access it and run it 316 00:14:47,920 --> 00:14:51,840 and interact with each other as well. 317 00:14:51,840 --> 00:14:55,010 Another question, which HTML editor the students use? 318 00:14:55,010 --> 00:14:56,900 We leave it up to the students. 319 00:14:56,900 --> 00:14:59,720 In class itself, in the lectures, I demonstrate 320 00:14:59,720 --> 00:15:03,230 using Visual Studio Code from Microsoft. 321 00:15:03,230 --> 00:15:08,210 In the 2018 version, I believe I used Atom, which is developed by GitHub. 322 00:15:08,210 --> 00:15:13,490 So both VS Code and Atom are both very popular text editors 323 00:15:13,490 --> 00:15:14,750 that work quite well. 324 00:15:14,750 --> 00:15:17,660 But there are others, as well, that I happen to know of. 325 00:15:17,660 --> 00:15:21,140 Sublime Text is another popular text editor, too. 326 00:15:21,140 --> 00:15:25,700 And Brackets is one I've heard a lot of students using recently as well. 327 00:15:25,700 --> 00:15:27,950 Because brackets does, like, a live updating page 328 00:15:27,950 --> 00:15:31,610 where, as you type HTML code, you can see exactly what the HTML looks 329 00:15:31,610 --> 00:15:35,750 like on a Chrome window without having to refresh the page over and over 330 00:15:35,750 --> 00:15:40,120 again, so a bunch of good options. 331 00:15:40,120 --> 00:15:43,375 Yeah, Atom, also a very good choice, PyCharm, another good one, yeah. 332 00:15:43,375 --> 00:15:45,250 So there are a lot of different text editors. 333 00:15:45,250 --> 00:15:47,830 We happen to use VS Code in the lectures. 334 00:15:47,830 --> 00:15:50,440 But students can really use any text editor of their choosing, 335 00:15:50,440 --> 00:15:53,530 whatever they like, and whatever they're comfortable with. 336 00:15:53,530 --> 00:15:56,510 If you can't hear anything-- actually, I'm going to say this. 337 00:15:56,510 --> 00:15:59,135 But someone should type this in the chat if they can't hear it. 338 00:15:59,135 --> 00:16:02,472 In the bottom left of the Zoom window, there should be a join audio button 339 00:16:02,472 --> 00:16:03,430 that you have to click. 340 00:16:03,430 --> 00:16:05,860 And you have to click the join audio button in order 341 00:16:05,860 --> 00:16:07,560 to be able to hear the session. 342 00:16:07,560 --> 00:16:10,390 So if someone could please relay that message to Azimat, who's 343 00:16:10,390 --> 00:16:14,860 asking in the chat, that might help. 344 00:16:14,860 --> 00:16:19,360 How can one determine whether to use Django versus Ruby versus Node.js? 345 00:16:19,360 --> 00:16:24,160 Ultimately, it comes down to some of the tools are better for certain things. 346 00:16:24,160 --> 00:16:25,960 Node.js happens to be quite good at dealing 347 00:16:25,960 --> 00:16:30,280 with asynchronous types of activities that we'll talk a little bit more 348 00:16:30,280 --> 00:16:31,522 about later. 349 00:16:31,522 --> 00:16:33,730 Ultimately, it comes down in large part to preference 350 00:16:33,730 --> 00:16:37,720 in language and preference in what packages and tools are available. 351 00:16:37,720 --> 00:16:41,830 We happen to just stick with Python for the most part in this class. 352 00:16:41,830 --> 00:16:45,670 And Django happens to be probably the most full-featured Python web 353 00:16:45,670 --> 00:16:51,420 application tool out there right now and one of the most popular. 354 00:16:51,420 --> 00:16:55,860 All right, so in addition to just teaching students the syntax of HTML, 355 00:16:55,860 --> 00:16:58,200 we also show the Document Object Model, which 356 00:16:58,200 --> 00:17:00,540 is just a way of structuring an HTML page 357 00:17:00,540 --> 00:17:02,714 and defining the various different components 358 00:17:02,714 --> 00:17:05,339 and just thinking about things in a bit of a more organized way 359 00:17:05,339 --> 00:17:09,130 as this hierarchy of nodes that are included with each other. 360 00:17:09,130 --> 00:17:13,490 And we'll talk a little bit more about this when we get to JavaScript as well. 361 00:17:13,490 --> 00:17:16,863 All right, a bunch of questions-- a link for the slides? 362 00:17:16,863 --> 00:17:19,530 The slides are on the notion page where you found the invitation 363 00:17:19,530 --> 00:17:20,859 for today's session. 364 00:17:20,859 --> 00:17:25,109 So if someone could paste the slides there, as well, that would be great. 365 00:17:25,109 --> 00:17:28,800 Question-- when I upload the app to Heroku with SQL database, 366 00:17:28,800 --> 00:17:30,990 the data disappears. 367 00:17:30,990 --> 00:17:33,990 Let me delay that question a little bit to when I talk about SQL itself, 368 00:17:33,990 --> 00:17:34,782 which is coming up. 369 00:17:34,782 --> 00:17:36,480 It's one of the topics of the course. 370 00:17:36,480 --> 00:17:39,640 And if I forget, just remind me again. 371 00:17:39,640 --> 00:17:45,330 Is it possible to teach this course to teenagers before teaching CS50X? 372 00:17:45,330 --> 00:17:49,410 So we assume in this course a little bit of prior programming 373 00:17:49,410 --> 00:17:52,570 experience in Python is really the main prerequisite. 374 00:17:52,570 --> 00:17:54,867 So if students have taken CS50X, they're more than 375 00:17:54,867 --> 00:17:56,700 well-equipped to be able to take this class. 376 00:17:56,700 --> 00:17:58,825 Because they've already seen Python and potentially 377 00:17:58,825 --> 00:18:01,930 even seen a little bit of web programming, as well. 378 00:18:01,930 --> 00:18:05,310 It's possible for students to take the class without taking CS50X. 379 00:18:05,310 --> 00:18:07,620 And students definitely have done that before. 380 00:18:07,620 --> 00:18:11,490 But we do assume some prior programming familiarity, so familiarity 381 00:18:11,490 --> 00:18:16,290 with things like loops and functions and conditions and variables and data 382 00:18:16,290 --> 00:18:17,130 types. 383 00:18:17,130 --> 00:18:18,630 Those are things that we introduce. 384 00:18:18,630 --> 00:18:21,100 But we don't introduce them from scratch. 385 00:18:21,100 --> 00:18:24,100 So if students have a little bit of prior background, 386 00:18:24,100 --> 00:18:26,130 even if it's not in Python, then they may 387 00:18:26,130 --> 00:18:29,130 be able to find that this course is accessible to them. 388 00:18:29,130 --> 00:18:32,460 But we're not going to explain all of the programming fundamentals 389 00:18:32,460 --> 00:18:34,590 from the ground up the way that CS50X does. 390 00:18:34,590 --> 00:18:39,600 We do assume a little bit of prior programming familiarity first. 391 00:18:39,600 --> 00:18:43,620 What is the best backend for websites with ML modules, so machine 392 00:18:43,620 --> 00:18:45,285 learning, or ML? 393 00:18:45,285 --> 00:18:47,910 Again, this is going to be something that people are reasonably 394 00:18:47,910 --> 00:18:49,680 going to disagree about. 395 00:18:49,680 --> 00:18:53,970 But definitely Python, I would say, is a very popular language for data science 396 00:18:53,970 --> 00:18:55,620 and machine learning nowadays. 397 00:18:55,620 --> 00:18:59,258 Especially with all these great Python libraries for machine 398 00:18:59,258 --> 00:19:01,050 learning that now exist, some of which I'll 399 00:19:01,050 --> 00:19:04,008 be talking about tomorrow when I talk about the artificial intelligence 400 00:19:04,008 --> 00:19:04,520 course. 401 00:19:04,520 --> 00:19:08,190 But I tend to think Python is a very good choice for machine learning 402 00:19:08,190 --> 00:19:12,000 and for integrating machine learning with web applications, too. 403 00:19:12,000 --> 00:19:17,850 So another good reason why Python is great for backends of web applications. 404 00:19:17,850 --> 00:19:22,540 Do students develop projects locally or remotely on something like Repl.it? 405 00:19:22,540 --> 00:19:24,140 We have students develop locally. 406 00:19:24,140 --> 00:19:27,100 And this is a difference from CS50X itself. 407 00:19:27,100 --> 00:19:30,970 Where for CS50X, most of students' work is inside the IDE. 408 00:19:30,970 --> 00:19:32,750 That way everything is installed for them. 409 00:19:32,750 --> 00:19:35,620 They don't have to worry about setting up their own local environment. 410 00:19:35,620 --> 00:19:37,370 In the web programming class, we encourage 411 00:19:37,370 --> 00:19:40,540 students to set up their own programming environment 412 00:19:40,540 --> 00:19:43,810 just to get comfortable with doing so, to get more comfortable programming 413 00:19:43,810 --> 00:19:45,237 on their own computer. 414 00:19:45,237 --> 00:19:48,070 So that's something that we have students do, install their own text 415 00:19:48,070 --> 00:19:52,760 editor, install all of the frameworks and libraries on their own computer 416 00:19:52,760 --> 00:19:57,320 so that students can really get practice with that on their own, too. 417 00:19:57,320 --> 00:20:00,460 Is their list of concepts required to make CS50W 418 00:20:00,460 --> 00:20:02,420 a more user friendly class to take? 419 00:20:02,420 --> 00:20:06,050 Really, the one prerequisite that we have is prior programming experience, 420 00:20:06,050 --> 00:20:08,930 ideally in Python, since that's the language that students 421 00:20:08,930 --> 00:20:10,760 are doing the most work with. 422 00:20:10,760 --> 00:20:12,950 But here at Harvard, at least, we generally 423 00:20:12,950 --> 00:20:16,550 ask that students have one or more years of prior programming 424 00:20:16,550 --> 00:20:20,510 experience in any programming language in order to take the class. 425 00:20:20,510 --> 00:20:23,030 426 00:20:23,030 --> 00:20:24,960 All right, so after HTML in this lecture, 427 00:20:24,960 --> 00:20:28,350 we introduce CSS, which is just a way of styling a web page. 428 00:20:28,350 --> 00:20:30,680 So this is what CSS code might look like, for example. 429 00:20:30,680 --> 00:20:34,417 To say, take a heading and change its color, center the text, 430 00:20:34,417 --> 00:20:36,500 and so this is a lot of fun for students, as well, 431 00:20:36,500 --> 00:20:40,160 to be able to customize the style of a page, to make it look the way 432 00:20:40,160 --> 00:20:42,680 that they want that page to look, for example. 433 00:20:42,680 --> 00:20:46,490 And then we dive a little more in detail into how all of this is working, 434 00:20:46,490 --> 00:20:50,870 deeper than we do look at in CS50 itself, where CS50 introduces CSS. 435 00:20:50,870 --> 00:20:53,720 But in this class, we take a little more of a critical eye 436 00:20:53,720 --> 00:20:57,230 and think about things like how does specificity work? 437 00:20:57,230 --> 00:21:01,760 What if there are two different CSS selectors that are saying-- 438 00:21:01,760 --> 00:21:03,980 one says you should make this red and the other one 439 00:21:03,980 --> 00:21:05,570 says you should make this blue. 440 00:21:05,570 --> 00:21:06,290 How does it work? 441 00:21:06,290 --> 00:21:09,260 It turns out it doesn't just go, like, top to bottom order. 442 00:21:09,260 --> 00:21:13,670 It's looking at how specific these various different selectors, as they're 443 00:21:13,670 --> 00:21:16,970 called, are to try and identify how particular elements work. 444 00:21:16,970 --> 00:21:20,490 So we talk through some of the logic for that as well. 445 00:21:20,490 --> 00:21:24,140 And then we also always try to take an eye towards modern web design 446 00:21:24,140 --> 00:21:24,770 practices. 447 00:21:24,770 --> 00:21:28,400 In particular, things like responsive design, making sure your web page 448 00:21:28,400 --> 00:21:32,130 looks good both on desktop and on mobile devices, for example. 449 00:21:32,130 --> 00:21:35,042 So if this is what your website looks like on a desktop device, 450 00:21:35,042 --> 00:21:38,000 it might look a little something like this if you just squished it down 451 00:21:38,000 --> 00:21:39,560 into a mobile device. 452 00:21:39,560 --> 00:21:41,780 But that's probably not a great user experience 453 00:21:41,780 --> 00:21:44,720 in terms of what the person on the phone is going to see. 454 00:21:44,720 --> 00:21:46,490 Because the text is probably really small. 455 00:21:46,490 --> 00:21:49,280 And you've probably seen, if you use a mobile phone's web 456 00:21:49,280 --> 00:21:54,787 browser, some websites that aren't really optimized for mobile phones. 457 00:21:54,787 --> 00:21:56,870 Generally, websites are getting better about this. 458 00:21:56,870 --> 00:21:58,820 But we talk about strategies for doing that. 459 00:21:58,820 --> 00:22:02,510 How do you style your page so that it looks good on desktop devices 460 00:22:02,510 --> 00:22:05,820 but also looks good on mobile devices as well? 461 00:22:05,820 --> 00:22:08,750 And so we talk about strategies to make that work. 462 00:22:08,750 --> 00:22:11,540 And we also tell students about ways that they might not 463 00:22:11,540 --> 00:22:13,655 need to do all of this from scratch. 464 00:22:13,655 --> 00:22:16,280 But before I get to that, Joe, I see you have your hand raised. 465 00:22:16,280 --> 00:22:18,690 If you'd like to ask a question? 466 00:22:18,690 --> 00:22:19,190 JOE: Yes. 467 00:22:19,190 --> 00:22:24,650 Quick question as you start developing, because I notice some apps work better 468 00:22:24,650 --> 00:22:28,520 in Chrome or won't work at all in other browsers, 469 00:22:28,520 --> 00:22:35,120 is there any work you do to make it browser agnostic or browser specific? 470 00:22:35,120 --> 00:22:38,000 And then I have a second part question, do you 471 00:22:38,000 --> 00:22:43,640 do a session where you help us set up VS Code with, like, style50, 472 00:22:43,640 --> 00:22:49,277 even if it's available as a package and all those things in the text editor? 473 00:22:49,277 --> 00:22:49,860 BRIAN YU: Yes. 474 00:22:49,860 --> 00:22:50,860 So great questions. 475 00:22:50,860 --> 00:22:55,710 So first with regards to the style50, there was a session last week-- 476 00:22:55,710 --> 00:22:58,720 I think it was last Wednesday-- 477 00:22:58,720 --> 00:23:02,260 that was all about tools that you can install on your own computer. 478 00:23:02,260 --> 00:23:05,712 So how to install, like, check50 and style50 on your computer. 479 00:23:05,712 --> 00:23:08,170 And the recording for that is available on the notion page. 480 00:23:08,170 --> 00:23:11,790 So if you take a look at that, we go through how to install all of the tools 481 00:23:11,790 --> 00:23:14,400 in that session if you want to take a look at that. 482 00:23:14,400 --> 00:23:17,110 And then, as for-- 483 00:23:17,110 --> 00:23:17,610 sorry. 484 00:23:17,610 --> 00:23:20,640 Remind me what the other question was, the first one that you asked? 485 00:23:20,640 --> 00:23:22,680 JOE: Chrome versus other browsers. 486 00:23:22,680 --> 00:23:25,050 BRIAN YU: Oh, yes, web browser that you use. 487 00:23:25,050 --> 00:23:31,830 So different browser support, different features of HTML and CSS, for example. 488 00:23:31,830 --> 00:23:34,830 In the lectures, we try to demonstrate features 489 00:23:34,830 --> 00:23:38,040 that will work across all major browsers, at least 490 00:23:38,040 --> 00:23:40,650 in the latest versions of those browsers. 491 00:23:40,650 --> 00:23:45,660 But there are some things where the rules may vary from browser to browser, 492 00:23:45,660 --> 00:23:48,720 where you need might need to use slightly different CSS 493 00:23:48,720 --> 00:23:51,480 instructions to be able to style different pages 494 00:23:51,480 --> 00:23:53,740 correctly for different browsers. 495 00:23:53,740 --> 00:23:56,460 And we refer students to some pages like W3Schools 496 00:23:56,460 --> 00:23:58,720 is a website that has great documentation about this, 497 00:23:58,720 --> 00:24:01,500 about how do you make sure the style is going to work across all 498 00:24:01,500 --> 00:24:03,550 of these various different browsers. 499 00:24:03,550 --> 00:24:06,240 So we refer students to those resources as well. 500 00:24:06,240 --> 00:24:09,150 But in lecture, I'll predominantly use Google Chrome. 501 00:24:09,150 --> 00:24:12,600 But most of the styling we show should be fine on other browsers 502 00:24:12,600 --> 00:24:16,690 as well, at least the latest versions of those. 503 00:24:16,690 --> 00:24:19,380 Charlene, I see you have your hand raised if you'd like to ask. 504 00:24:19,380 --> 00:24:19,963 CHARLENE: Yes. 505 00:24:19,963 --> 00:24:25,870 Can I just clarify, so all submission, then, is going to be via [INAUDIBLE]?? 506 00:24:25,870 --> 00:24:29,080 BRIAN YU: So what we have students do is we have students 507 00:24:29,080 --> 00:24:31,420 upload their code directly to GitHub. 508 00:24:31,420 --> 00:24:33,050 They can do that in one of two ways. 509 00:24:33,050 --> 00:24:34,570 They can either push their code to GitHub. 510 00:24:34,570 --> 00:24:36,403 And I'm going to talk in a moment about what 511 00:24:36,403 --> 00:24:38,230 we teach students about Git and GitHub. 512 00:24:38,230 --> 00:24:40,930 Or they can just you submit50, which is the tool 513 00:24:40,930 --> 00:24:44,690 that I talked about last week that will upload code to GitHub directly. 514 00:24:44,690 --> 00:24:47,770 So if you want to, you can adopt that exact same submission format. 515 00:24:47,770 --> 00:24:51,160 Where you use submit50, you can use submit.CS50.io, 516 00:24:51,160 --> 00:24:54,830 which I introduced last week, to be able to collect submissions for the class. 517 00:24:54,830 --> 00:24:57,580 But if you want to have students upload their code directly to you 518 00:24:57,580 --> 00:25:01,460 or use a different system, that's absolutely OK as well. 519 00:25:01,460 --> 00:25:03,700 So we give you the option of using our tools. 520 00:25:03,700 --> 00:25:04,990 CHARLENE: So sorry. 521 00:25:04,990 --> 00:25:08,320 In the scratch module where you just upload to the file 522 00:25:08,320 --> 00:25:12,000 with a search in slug, I did find that easier. 523 00:25:12,000 --> 00:25:14,620 And I think students might find that easier. 524 00:25:14,620 --> 00:25:16,017 Is that an option? 525 00:25:16,017 --> 00:25:16,600 BRIAN YU: Yes. 526 00:25:16,600 --> 00:25:18,392 Also an option, so in the same way that you 527 00:25:18,392 --> 00:25:22,630 can upload to GitHub using submit.CS50.io's upload page, 528 00:25:22,630 --> 00:25:24,968 just by choosing the files you want to upload, 529 00:25:24,968 --> 00:25:27,010 you can do the same thing for this class as well. 530 00:25:27,010 --> 00:25:29,500 Just choose the files that you want to upload. 531 00:25:29,500 --> 00:25:32,470 Usually, you just zip them first into a compressed file 532 00:25:32,470 --> 00:25:34,240 to make it easier to upload. 533 00:25:34,240 --> 00:25:37,300 But you can use the exact same tool you use for uploading scratch 534 00:25:37,300 --> 00:25:40,160 projects to upload these projects, too. 535 00:25:40,160 --> 00:25:44,650 CHARLENE: And the slug, do I have to create that slug myself? 536 00:25:44,650 --> 00:25:47,240 Or will that be it? 537 00:25:47,240 --> 00:25:49,040 BRIAN YU: We have already created the slug. 538 00:25:49,040 --> 00:25:51,560 Now the projects for this course are not automatically 539 00:25:51,560 --> 00:25:55,190 graded, unlike CS50X, primarily because we give students 540 00:25:55,190 --> 00:25:58,400 a lot of freedom and flexibility in how they implement these projects. 541 00:25:58,400 --> 00:26:02,690 They can do it in so many ways that it would probably 542 00:26:02,690 --> 00:26:05,780 be difficult for us to define a very fixed set of things 543 00:26:05,780 --> 00:26:07,310 that we're checking for. 544 00:26:07,310 --> 00:26:10,350 But we do already have submission slugs that you can already use. 545 00:26:10,350 --> 00:26:12,553 And those are on the open courseware website 546 00:26:12,553 --> 00:26:15,470 that you can use if you'd like to have students submit those projects. 547 00:26:15,470 --> 00:26:17,150 CHARLENE: Thank you. 548 00:26:17,150 --> 00:26:18,552 BRIAN YU: Yeah, of course. 549 00:26:18,552 --> 00:26:20,780 Do students have a background in client and server 550 00:26:20,780 --> 00:26:23,280 knowledge, what the front end means, what the backend means? 551 00:26:23,280 --> 00:26:24,550 We explain that to students. 552 00:26:24,550 --> 00:26:28,080 And I'll have a slide upcoming about that, too. 553 00:26:28,080 --> 00:26:33,885 Question is could CS50W projects be completed locally on a Chromebook? 554 00:26:33,885 --> 00:26:34,760 It's a good question. 555 00:26:34,760 --> 00:26:38,100 556 00:26:38,100 --> 00:26:39,690 I'm not 100% sure on that. 557 00:26:39,690 --> 00:26:42,510 But my guess is it would be very challenging to do exclusively 558 00:26:42,510 --> 00:26:43,950 on a Chromebook. 559 00:26:43,950 --> 00:26:47,010 Because it would probably be difficult to get all the necessary command 560 00:26:47,010 --> 00:26:48,360 line tools installed. 561 00:26:48,360 --> 00:26:49,050 That's my guess. 562 00:26:49,050 --> 00:26:50,820 I haven't actually tried. 563 00:26:50,820 --> 00:26:53,460 But if you follow up, I can maybe do a little more digging 564 00:26:53,460 --> 00:26:56,290 to figure that out as well. 565 00:26:56,290 --> 00:26:59,530 Does the VS Code have a built in package for style50 566 00:26:59,530 --> 00:27:02,780 or should we use another style editor? 567 00:27:02,780 --> 00:27:05,810 VS Code-- style50 is a command line tool. 568 00:27:05,810 --> 00:27:08,920 So there is no style50 VS Code plug in. 569 00:27:08,920 --> 00:27:14,680 But there are other Python plug ins VS Code that do styling. 570 00:27:14,680 --> 00:27:17,020 I'm forgetting their exact names. 571 00:27:17,020 --> 00:27:20,080 And style50 is really checking for the same types of things. 572 00:27:20,080 --> 00:27:25,960 And so other tools should be available, they're just not CS50-specific tools. 573 00:27:25,960 --> 00:27:26,460 Oh, yeah. 574 00:27:26,460 --> 00:27:28,252 If you have something that's running Linux, 575 00:27:28,252 --> 00:27:33,480 that should absolutely be able to run all of the programs, all the software 576 00:27:33,480 --> 00:27:35,410 that we need for the course as well. 577 00:27:35,410 --> 00:27:39,420 If you're on Windows 10, you should also be able to run-- you can install Django 578 00:27:39,420 --> 00:27:42,060 and you can install Python on Windows 10 as well. 579 00:27:42,060 --> 00:27:43,920 The tricky part might be submitting. 580 00:27:43,920 --> 00:27:47,440 Running submit50 does not work natively on Windows 10. 581 00:27:47,440 --> 00:27:50,280 So you have to either upload via the web interface, 582 00:27:50,280 --> 00:27:53,730 the way I was just talking to Charlene about a moment ago, 583 00:27:53,730 --> 00:27:57,970 or you can install the Windows 10 Subsystem for Linux. 584 00:27:57,970 --> 00:28:00,570 There are instructions for that on Microsoft's website. 585 00:28:00,570 --> 00:28:03,240 But if you install the Windows 10 Subsystem for Linux, 586 00:28:03,240 --> 00:28:06,577 that will let you run submit50 on Windows as well. 587 00:28:06,577 --> 00:28:09,660 All of the course material, everything that I'm going to be talking about, 588 00:28:09,660 --> 00:28:12,720 all of that is available on the open courseware website. 589 00:28:12,720 --> 00:28:14,850 So the link is at the beginning of the chat 590 00:28:14,850 --> 00:28:17,700 and also on the slides that are coming up, too. 591 00:28:17,700 --> 00:28:21,270 All right, so just to wrap up a little bit about HTML, CSS. 592 00:28:21,270 --> 00:28:24,660 We introduce students to Bootstrap, which is basically 593 00:28:24,660 --> 00:28:31,500 a library that contains a whole bunch of already existing CSS code and HTML code 594 00:28:31,500 --> 00:28:33,960 and JavaScript code, just to make it easier 595 00:28:33,960 --> 00:28:37,170 to create a nice looking modern looking website very quickly so 596 00:28:37,170 --> 00:28:39,990 that students don't have to build everything from scratch. 597 00:28:39,990 --> 00:28:42,780 And Bootstrap is quite popular for styling pages on the web. 598 00:28:42,780 --> 00:28:45,830 You've probably seen this sort of styling before. 599 00:28:45,830 --> 00:28:49,590 And then finally, in this part of the course, we introduce students to Sass. 600 00:28:49,590 --> 00:28:54,070 Which is an extension to CSS that add some additional features to CSS 601 00:28:54,070 --> 00:28:54,570 as well. 602 00:28:54,570 --> 00:28:58,110 It adds things like variables to be able to factor out 603 00:28:58,110 --> 00:29:01,740 common code, so just teaching good design principles for style. 604 00:29:01,740 --> 00:29:04,020 That often, if you're building a big website that 605 00:29:04,020 --> 00:29:07,080 has a lot of different style sheets, using something 606 00:29:07,080 --> 00:29:11,670 like Sass to keep track of variables and to keep track of repeated code 607 00:29:11,670 --> 00:29:14,560 can often be quite helpful. 608 00:29:14,560 --> 00:29:18,000 So that's the beginning of the course, HTML and CSS. 609 00:29:18,000 --> 00:29:21,480 The next thing that we talk about is Git and GitHub. 610 00:29:21,480 --> 00:29:25,500 And so what it is is it is a piece of version control software 611 00:29:25,500 --> 00:29:27,570 that's useful for a number of things. 612 00:29:27,570 --> 00:29:30,810 So first, we don't assume any prior knowledge of Git before. 613 00:29:30,810 --> 00:29:34,400 But we start by talking about what it is that get can be used for. 614 00:29:34,400 --> 00:29:37,920 So it's useful for things like tracking different versions of your code, 615 00:29:37,920 --> 00:29:40,690 that if you're making updates to a web application, 616 00:29:40,690 --> 00:29:43,710 you're often going to want to keep track of every feature you add, 617 00:29:43,710 --> 00:29:46,560 keep track of every bug that you fix so that you can go back 618 00:29:46,560 --> 00:29:48,910 and see the entire history of this project. 619 00:29:48,910 --> 00:29:51,330 And this is useful not just for web applications, 620 00:29:51,330 --> 00:29:53,910 but for any time you're writing code more generally. 621 00:29:53,910 --> 00:29:56,490 But we introduce it primarily in the context 622 00:29:56,490 --> 00:30:01,770 of creating those web applications. so tracking code, one common use for Git. 623 00:30:01,770 --> 00:30:05,070 Also useful for collaborating on code, that if you're working on a team, 624 00:30:05,070 --> 00:30:07,145 you're not designing the web application alone, 625 00:30:07,145 --> 00:30:10,020 but you're working on some features and you have a collaborator who's 626 00:30:10,020 --> 00:30:13,100 working on other features, and you two want to work together, 627 00:30:13,100 --> 00:30:15,180 Git has a lot of features that make it much 628 00:30:15,180 --> 00:30:20,610 easier to be able to collaborate and work together on that same code base. 629 00:30:20,610 --> 00:30:23,430 And then finally, it's useful for experimenting. 630 00:30:23,430 --> 00:30:26,250 It's useful for being able to test changes 631 00:30:26,250 --> 00:30:29,820 to your code and experiment with it a little bit before deploying it, 632 00:30:29,820 --> 00:30:34,300 before saying, yes, this is final, to be able to experiment, get feedback. 633 00:30:34,300 --> 00:30:37,080 Try different things out separately before what we call 634 00:30:37,080 --> 00:30:41,558 merge these changes all back together. 635 00:30:41,558 --> 00:30:43,350 All right, so questions that are coming up, 636 00:30:43,350 --> 00:30:46,470 is it possible to use Django in Python for web development 637 00:30:46,470 --> 00:30:48,600 without needing any JavaScript? 638 00:30:48,600 --> 00:30:49,650 Yes, absolutely. 639 00:30:49,650 --> 00:30:52,110 In fact, the first couple of projects in this course 640 00:30:52,110 --> 00:30:56,490 exclusively just use Django and Python and don't use any JavaScript. 641 00:30:56,490 --> 00:30:58,920 JavaScript we primarily use on the front end 642 00:30:58,920 --> 00:31:01,920 for being able to create some more interactive user interfaces. 643 00:31:01,920 --> 00:31:04,980 But it's definitely possible to create a web application that 644 00:31:04,980 --> 00:31:08,010 works with just Python and Django. 645 00:31:08,010 --> 00:31:09,930 You might not be able to take advantage of all 646 00:31:09,930 --> 00:31:14,490 of the features of modern front end web development without JavaScript, 647 00:31:14,490 --> 00:31:16,497 but you can definitely still build applications. 648 00:31:16,497 --> 00:31:17,580 And that's where we begin. 649 00:31:17,580 --> 00:31:23,090 Before we introduce JavaScript, we start with just Django and Python. 650 00:31:23,090 --> 00:31:25,190 A couple of questions about GitLab. 651 00:31:25,190 --> 00:31:28,490 GitLab is just an alternative to GitHub. 652 00:31:28,490 --> 00:31:33,320 Both are services for storing Git repositories on the internet. 653 00:31:33,320 --> 00:31:37,610 We tend to use GitHub in this class primarily because it's more industry 654 00:31:37,610 --> 00:31:39,480 standard and a bit more popular. 655 00:31:39,480 --> 00:31:42,350 But if you learn one of these tools like GitHub, 656 00:31:42,350 --> 00:31:45,350 learning to use another tool like GitLab or Bitbucket 657 00:31:45,350 --> 00:31:49,550 or the various other different services for hosting repositories 658 00:31:49,550 --> 00:31:52,370 is not too challenging, because a lot of these tools 659 00:31:52,370 --> 00:31:57,560 are very similar in terms of the features that they offer. 660 00:31:57,560 --> 00:31:59,960 So we teach students how to use Git. 661 00:31:59,960 --> 00:32:03,020 We teach students how to make commits, which 662 00:32:03,020 --> 00:32:07,400 are effectively saving their code, saving a version of their code. 663 00:32:07,400 --> 00:32:10,160 And as I mentioned just now, we introduce students 664 00:32:10,160 --> 00:32:14,390 to GitHub, which is a website that allows the storage of Git repository 665 00:32:14,390 --> 00:32:17,060 so that you can see other people's code online, 666 00:32:17,060 --> 00:32:19,228 you can collaborate on code online. 667 00:32:19,228 --> 00:32:21,020 And it's just one of several tools that are 668 00:32:21,020 --> 00:32:23,690 available for making it easier for students 669 00:32:23,690 --> 00:32:27,560 to be able to collaborate together. 670 00:32:27,560 --> 00:32:31,340 Do CS50W projects require a local web server? 671 00:32:31,340 --> 00:32:32,840 We'll talk about Django in a moment. 672 00:32:32,840 --> 00:32:35,840 But in short, when you run Django, Django 673 00:32:35,840 --> 00:32:39,740 will start a local web server so that students 674 00:32:39,740 --> 00:32:44,840 can experiment with their code running locally on their own computer. 675 00:32:44,840 --> 00:32:48,690 Another question is will React include things like Redux and Native? 676 00:32:48,690 --> 00:32:51,190 So we'll talk about that a little more when we get to React. 677 00:32:51,190 --> 00:32:52,660 But in short, no. 678 00:32:52,660 --> 00:32:56,260 We introduce React just as one part of one of the lectures, just 679 00:32:56,260 --> 00:33:00,580 to briefly give students a sense for what the syntax of React is like 680 00:33:00,580 --> 00:33:02,660 and what components are and how to use them. 681 00:33:02,660 --> 00:33:04,550 I'll talk about that a little more later. 682 00:33:04,550 --> 00:33:07,870 But we don't dive into a lot of the other extensions that 683 00:33:07,870 --> 00:33:11,470 have been made to React, for things like React Native and Redux. 684 00:33:11,470 --> 00:33:15,190 Those are probably more apt for a full-fledged programming and React 685 00:33:15,190 --> 00:33:18,550 course, whereas this web programming course is designed more 686 00:33:18,550 --> 00:33:21,460 to give a high level overview of a lot of the tools 687 00:33:21,460 --> 00:33:24,670 that are available without going too much into the weeds 688 00:33:24,670 --> 00:33:27,220 into all of the details of React, for example. 689 00:33:27,220 --> 00:33:29,925 690 00:33:29,925 --> 00:33:32,050 All right, so other things about Git that we teach, 691 00:33:32,050 --> 00:33:35,530 we teach students how to push and pull from a Git repository, 692 00:33:35,530 --> 00:33:38,200 uploading code to GitHub, downloading code 693 00:33:38,200 --> 00:33:42,430 from GitHub as well, or any other Git server, for something like GitLab lab 694 00:33:42,430 --> 00:33:44,240 or Bitbucket, for example. 695 00:33:44,240 --> 00:33:47,230 And then, what happens if two people, for example, 696 00:33:47,230 --> 00:33:51,280 try to both push their code, but there is some conflict? 697 00:33:51,280 --> 00:33:55,480 Or I'm trying to push some change that I made and a colleague of mine 698 00:33:55,480 --> 00:33:57,640 has made a change to the same line of code. 699 00:33:57,640 --> 00:33:58,600 What's going to happen? 700 00:33:58,600 --> 00:34:01,320 Well, in that case, you've get something called a merge conflict. 701 00:34:01,320 --> 00:34:04,570 And we teach students what those are and how to fix them, what they look like, 702 00:34:04,570 --> 00:34:07,000 and how you can look at what changes you made, 703 00:34:07,000 --> 00:34:09,219 what changes some collaborator made, and how 704 00:34:09,219 --> 00:34:12,520 you go about figuring out how to get those pieces of code 705 00:34:12,520 --> 00:34:15,552 to resolve this conflict. 706 00:34:15,552 --> 00:34:17,969 And then we also introduce students to branching, as well. 707 00:34:17,969 --> 00:34:20,650 That this is a tool of Git that allows us 708 00:34:20,650 --> 00:34:25,699 to be able to work not just on one branch of a code base, for example, 709 00:34:25,699 --> 00:34:28,449 but to split off into various different branches 710 00:34:28,449 --> 00:34:32,480 so that we're running different versions of the web application, 711 00:34:32,480 --> 00:34:34,960 for example, experimenting with different features. 712 00:34:34,960 --> 00:34:37,429 And these branches can eventually merge together as well. 713 00:34:37,429 --> 00:34:41,230 So especially as web applications might grow with more features and more 714 00:34:41,230 --> 00:34:44,980 collaborators, the ability to have different branches, each of which 715 00:34:44,980 --> 00:34:48,260 is keeping track of different code can be quite helpful. 716 00:34:48,260 --> 00:34:52,000 So we introduce students to these tools in the hope that, for this course 717 00:34:52,000 --> 00:34:55,270 and for in the future, they'll be able to use tools like Git 718 00:34:55,270 --> 00:34:58,750 to be able to be better at managing their own code, 719 00:34:58,750 --> 00:35:01,660 to keep everything organized, to keep track of their changes, 720 00:35:01,660 --> 00:35:03,910 to be able to hunt down bugs more quickly. 721 00:35:03,910 --> 00:35:07,210 There's a great feature of Git called Git bisect, where 722 00:35:07,210 --> 00:35:09,940 if you have a bug in your application, and you're not sure 723 00:35:09,940 --> 00:35:15,160 where in your application, when in your commit history you introduced that bug, 724 00:35:15,160 --> 00:35:17,740 you can effectively run a Git command that will automatically 725 00:35:17,740 --> 00:35:20,200 do a binary search through your Git repository. 726 00:35:20,200 --> 00:35:22,750 It will check the middle commit and say, is the bug there? 727 00:35:22,750 --> 00:35:26,050 And if it's not, or if it is, we either jump forwards or jump back. 728 00:35:26,050 --> 00:35:28,150 And you can very quickly triangulate on where 729 00:35:28,150 --> 00:35:31,910 it is the bug was introduced in order to then go about fixing it. 730 00:35:31,910 --> 00:35:36,700 So a lot of great tools that Git lends itself to that students 731 00:35:36,700 --> 00:35:39,820 can take advantage of with just a little bit of familiarity 732 00:35:39,820 --> 00:35:42,700 with some of these basic commands. 733 00:35:42,700 --> 00:35:48,040 So those, then, are the first two topics of CS50W, HTML, CSS, and then Git. 734 00:35:48,040 --> 00:35:49,900 And let me take a look now and see if there 735 00:35:49,900 --> 00:35:54,190 are other questions that have come up. 736 00:35:54,190 --> 00:35:56,710 In terms of whether to use Amazon or Google in order 737 00:35:56,710 --> 00:36:01,967 to host web applications or store data, both are definitely quite popular. 738 00:36:01,967 --> 00:36:04,300 It's probably going to come down to personal preference, 739 00:36:04,300 --> 00:36:08,590 because both are very extensively used. 740 00:36:08,590 --> 00:36:10,990 Do we introduce web servers? 741 00:36:10,990 --> 00:36:15,430 So we introduce web servers in the context of just something 742 00:36:15,430 --> 00:36:19,840 like Django's web server, which is going to be running the-- 743 00:36:19,840 --> 00:36:23,350 process handling the requests, and then responding to those requests. 744 00:36:23,350 --> 00:36:26,890 And we talk a little bit about servers in the context of scalability. 745 00:36:26,890 --> 00:36:30,770 But a lot of the details about some of the lower level setup 746 00:36:30,770 --> 00:36:34,900 we don't talk about, just by introducing students 747 00:36:34,900 --> 00:36:37,480 to tools they can use to automate a lot of that process, 748 00:36:37,480 --> 00:36:39,760 to use tools like the Heroku tools I shared 749 00:36:39,760 --> 00:36:45,310 earlier that allows for very easily taking a web application 750 00:36:45,310 --> 00:36:47,560 and deploying it to the internet, for example. 751 00:36:47,560 --> 00:36:50,210 752 00:36:50,210 --> 00:36:54,710 All right, so moving on, the next topic we introduce students to is Python. 753 00:36:54,710 --> 00:36:57,170 We assume that students have some programming background. 754 00:36:57,170 --> 00:37:00,020 So we don't introduce everything from the ground up. 755 00:37:00,020 --> 00:37:03,950 But we do introduce students to the fundamentals of Python syntax, 756 00:37:03,950 --> 00:37:06,470 in case students might not have seen Python before 757 00:37:06,470 --> 00:37:09,140 but have seen other programming languages, 758 00:37:09,140 --> 00:37:11,930 or potentially have seen Python, but it's been a while 759 00:37:11,930 --> 00:37:13,910 since they programmed in Python, maybe. 760 00:37:13,910 --> 00:37:16,490 So we start by introducing variables and types, 761 00:37:16,490 --> 00:37:19,250 talking about the different types of values in Python can have, 762 00:37:19,250 --> 00:37:24,020 things like integers and floating point numbers, strings, Boolean values, 763 00:37:24,020 --> 00:37:26,450 the special None value that exists in Python 764 00:37:26,450 --> 00:37:29,070 that shows up in a lot of different contexts. 765 00:37:29,070 --> 00:37:31,820 So we introduce students to that, too. 766 00:37:31,820 --> 00:37:34,860 We also introduce students to object-oriented programming. 767 00:37:34,860 --> 00:37:39,620 So a common paradigm used in programming for dealing with objects 768 00:37:39,620 --> 00:37:42,170 and for dealing with actions, in other words, methods 769 00:37:42,170 --> 00:37:44,490 that you can perform on those objects. 770 00:37:44,490 --> 00:37:46,400 So we introduce students to that as well. 771 00:37:46,400 --> 00:37:49,460 In particular, because it's going to come up later in web program. 772 00:37:49,460 --> 00:37:52,970 That if you think about dealing with web applications that deal 773 00:37:52,970 --> 00:37:55,190 with a lot of data, for example, you're often 774 00:37:55,190 --> 00:37:57,930 going to work in an object-oriented paradigm. 775 00:37:57,930 --> 00:38:00,770 Where you have one class, for example, if you're 776 00:38:00,770 --> 00:38:02,870 familiar with object-oriented programming, 777 00:38:02,870 --> 00:38:05,930 that represents each of your different categories of data 778 00:38:05,930 --> 00:38:07,550 that your web application is storing. 779 00:38:07,550 --> 00:38:11,690 So we start in Python by introducing what object-oriented programming is 780 00:38:11,690 --> 00:38:15,230 and some of the basics of how it works so that students later 781 00:38:15,230 --> 00:38:20,450 can use these sorts of ideas inside of their web applications as well. 782 00:38:20,450 --> 00:38:23,040 We introduce students to Python data structures, 783 00:38:23,040 --> 00:38:26,900 things like dictionaries and tuples and lists and sets, all of the various, 784 00:38:26,900 --> 00:38:29,390 different, common, built in Python data structures 785 00:38:29,390 --> 00:38:32,790 that students are going to face that serve a lot of different purposes. 786 00:38:32,790 --> 00:38:36,470 And we use all of these in the context of web applications 787 00:38:36,470 --> 00:38:39,830 over the duration of the course. 788 00:38:39,830 --> 00:38:42,800 And then we introduce some of the more sophisticated features of Python 789 00:38:42,800 --> 00:38:48,890 that are not focused on as much in CS50X itself, for things like exception 790 00:38:48,890 --> 00:38:50,810 handling for dealing with errors. 791 00:38:50,810 --> 00:38:53,960 Web applications are inevitably going to come across some sort of error 792 00:38:53,960 --> 00:38:57,720 where someone tries to do something that the programmer didn't expect. 793 00:38:57,720 --> 00:39:01,610 And so being able to handle those errors and deal with them appropriately 794 00:39:01,610 --> 00:39:04,940 is something we first introduce just with command line Python, 795 00:39:04,940 --> 00:39:07,830 but then translate into the world of web applications as well, 796 00:39:07,830 --> 00:39:10,490 showing students how to deal with errors that 797 00:39:10,490 --> 00:39:13,100 might come up as they build their web applications 798 00:39:13,100 --> 00:39:17,160 and how to deal with that as a result. 799 00:39:17,160 --> 00:39:20,350 All right, so some questions that have come up, 800 00:39:20,350 --> 00:39:24,460 is it better to use TensorFlow or Python for the backend of websites 801 00:39:24,460 --> 00:39:26,610 with embedded machine learning? 802 00:39:26,610 --> 00:39:30,790 So TensorFlow, though you can use TensorFlow with a number of languages, 803 00:39:30,790 --> 00:39:35,350 TensorFlow has a Python library such that in Python you 804 00:39:35,350 --> 00:39:39,820 can install the TensorFlow Python package, such that from your Python 805 00:39:39,820 --> 00:39:42,730 code you can run TensorFlow code. 806 00:39:42,730 --> 00:39:44,630 So they're not mutually exclusive. 807 00:39:44,630 --> 00:39:46,343 They're often used together. 808 00:39:46,343 --> 00:39:48,760 I will talk a little more about TensorFlow, in particular, 809 00:39:48,760 --> 00:39:52,420 tomorrow when I talk about the artificial intelligence class that 810 00:39:52,420 --> 00:39:54,430 does introduce students to TensorFlow, which 811 00:39:54,430 --> 00:39:59,710 is a very popular machine learning tool that's used in modern machine learning. 812 00:39:59,710 --> 00:40:01,990 We don't introduce students to TensorFlow 813 00:40:01,990 --> 00:40:03,935 in the web programming class. 814 00:40:03,935 --> 00:40:07,060 But you could imagine that if students had this web programming background, 815 00:40:07,060 --> 00:40:10,390 understood how to build a web application in Python, 816 00:40:10,390 --> 00:40:14,472 and then had a little experience with using Python to do machine learning, 817 00:40:14,472 --> 00:40:16,930 that it's not too much of a leap to then be able to combine 818 00:40:16,930 --> 00:40:21,280 those things together, to be able to create a Python web application that 819 00:40:21,280 --> 00:40:23,780 also supports some sort of machine learning 820 00:40:23,780 --> 00:40:27,260 that's using a neural network, for example, or something like that. 821 00:40:27,260 --> 00:40:30,500 For the question about Docker, I'll talk about that a little bit 822 00:40:30,500 --> 00:40:34,070 at the end when we get to scalability and security. 823 00:40:34,070 --> 00:40:37,850 Can the code notebooks be downloaded into Jupiter notebooks? 824 00:40:37,850 --> 00:40:42,830 So we don't offer Jupiter notebooks for this Python part of the class. 825 00:40:42,830 --> 00:40:45,030 But we do make available all of the source code. 826 00:40:45,030 --> 00:40:47,678 So if you would like to create a Jupiter notebook out 827 00:40:47,678 --> 00:40:49,970 of all of the source code files that we provide to you, 828 00:40:49,970 --> 00:40:53,345 you're certainly more than welcome to do that. 829 00:40:53,345 --> 00:40:55,220 Can you please speak more about the use cases 830 00:40:55,220 --> 00:40:57,500 for using Python for web development? 831 00:40:57,500 --> 00:41:02,720 Is it used for querying, massaging data, or presenting information on websites? 832 00:41:02,720 --> 00:41:07,790 Python just happens to be a very popular language that's gaining a lot of usage, 833 00:41:07,790 --> 00:41:09,380 especially in web programming. 834 00:41:09,380 --> 00:41:13,070 But in particular, I find it useful because of the libraries 835 00:41:13,070 --> 00:41:15,230 that you can install into Python. 836 00:41:15,230 --> 00:41:18,260 So not only is it a relatively straightforward language 837 00:41:18,260 --> 00:41:21,020 in terms of the syntax, but there are so many, now, 838 00:41:21,020 --> 00:41:25,400 Python libraries that do so many things, in particular, for things like data 839 00:41:25,400 --> 00:41:29,870 analysis and machine learning, that all of the tools that you 840 00:41:29,870 --> 00:41:32,390 use for Python and data analysis, you can then 841 00:41:32,390 --> 00:41:34,280 translate to a web programming context. 842 00:41:34,280 --> 00:41:37,350 So that, I think, is one of the nice advantages. 843 00:41:37,350 --> 00:41:40,580 And I also just think that among the modern popular languages, 844 00:41:40,580 --> 00:41:45,980 I think Python is one of the easiest to pick up if you're just beginning. 845 00:41:45,980 --> 00:41:48,890 Certainly JavaScript is also popular for designing backends 846 00:41:48,890 --> 00:41:50,180 for web applications. 847 00:41:50,180 --> 00:41:55,040 But in my own personal experience, I found that beginners struggle more 848 00:41:55,040 --> 00:41:58,100 with trying to build applications in Node.js 849 00:41:58,100 --> 00:42:02,120 just because of some of the quirks of JavaScript syntax 850 00:42:02,120 --> 00:42:05,870 and some of the things that just aren't quite as intuitive, in my opinion. 851 00:42:05,870 --> 00:42:09,020 But reasonable people will disagree about that, too. 852 00:42:09,020 --> 00:42:11,750 And there are certainly ways to introduce students 853 00:42:11,750 --> 00:42:15,050 to web programming in a bunch of different languages. 854 00:42:15,050 --> 00:42:16,610 We just happened to use Python. 855 00:42:16,610 --> 00:42:19,490 856 00:42:19,490 --> 00:42:26,000 What's the name of the GitHub tool that detects where a conflict or a bug 857 00:42:26,000 --> 00:42:28,430 was-- what commit a bug was introduced in? 858 00:42:28,430 --> 00:42:30,170 It's called Git bisect. 859 00:42:30,170 --> 00:42:32,537 It's just a command in the latest version of Git 860 00:42:32,537 --> 00:42:33,620 that you can use for that. 861 00:42:33,620 --> 00:42:36,700 862 00:42:36,700 --> 00:42:39,400 What is a good way for students to learn Python 863 00:42:39,400 --> 00:42:42,940 to be able to fulfill the prerequisites for the class? 864 00:42:42,940 --> 00:42:47,350 One easy way is that CS50X itself has a Python lecture. 865 00:42:47,350 --> 00:42:49,990 So that Python lecture and the corresponding problem set 866 00:42:49,990 --> 00:42:53,380 introduces students to a lot of the fundamentals of Python syntax, 867 00:42:53,380 --> 00:42:57,950 gives students practice with creating programs in Python, for example. 868 00:42:57,950 --> 00:43:00,460 So getting that familiarity there and, in particular, 869 00:43:00,460 --> 00:43:03,730 maybe even taking the web track of CS50X to get 870 00:43:03,730 --> 00:43:06,820 experience using Python for web programming, all of that 871 00:43:06,820 --> 00:43:09,700 can potentially be good practice as well. 872 00:43:09,700 --> 00:43:15,222 873 00:43:15,222 --> 00:43:18,180 All right, so we've gotten a lot of questions about front end, backend. 874 00:43:18,180 --> 00:43:19,888 What exactly are we doing on the backend? 875 00:43:19,888 --> 00:43:22,230 So that gets us to the next part of the class. 876 00:43:22,230 --> 00:43:24,810 The next part of the class introduces Django. 877 00:43:24,810 --> 00:43:28,890 And what Django is is it is a web framework written in Python. 878 00:43:28,890 --> 00:43:33,660 If you're familiar with Flask from CS50X, Django is very, very similar. 879 00:43:33,660 --> 00:43:35,700 And a lot of the syntax will look similar. 880 00:43:35,700 --> 00:43:39,000 But it's far more full-featured. 881 00:43:39,000 --> 00:43:41,820 There's more capacity that Django has to be 882 00:43:41,820 --> 00:43:46,740 able to create more sophisticated web applications, especially 883 00:43:46,740 --> 00:43:50,070 web applications that interact and deal with a large amount of data, 884 00:43:50,070 --> 00:43:51,400 for example. 885 00:43:51,400 --> 00:43:55,590 So all of that comes with Django for free, in effect. 886 00:43:55,590 --> 00:43:58,260 And we explore some of the features that Django gives us 887 00:43:58,260 --> 00:44:04,370 just to make it easier to be able to set up a web application very quickly. 888 00:44:04,370 --> 00:44:06,910 So the first thing we introduce students to in this lecture 889 00:44:06,910 --> 00:44:09,910 is HTTP, the Hypertext Transfer Protocol, 890 00:44:09,910 --> 00:44:12,910 which is just the protocol that's used for communication 891 00:44:12,910 --> 00:44:15,820 over the internet, communication between a client, 892 00:44:15,820 --> 00:44:19,510 like the user's computer, and some web server, for example. 893 00:44:19,510 --> 00:44:24,880 As you might make requests to some web server and expect back some web page 894 00:44:24,880 --> 00:44:26,410 in response, for example. 895 00:44:26,410 --> 00:44:28,990 And you're probably familiar with HTTP, perhaps 896 00:44:28,990 --> 00:44:33,790 in the context of HTTP status codes, for things like 404, 897 00:44:33,790 --> 00:44:37,910 if something is not found, or 500 if there's an internal server error. 898 00:44:37,910 --> 00:44:40,450 So we introduce students to these sorts of status codes 899 00:44:40,450 --> 00:44:43,692 and what they mean in the context of web programming in addition to some 900 00:44:43,692 --> 00:44:45,400 that students might not have seen before, 901 00:44:45,400 --> 00:44:49,360 like 301 for if the user has been redirected, for example, 902 00:44:49,360 --> 00:44:54,425 or 200 if everything was OK and the page was loaded just fine. 903 00:44:54,425 --> 00:44:56,050 Ramon, I see you have your hand raised. 904 00:44:56,050 --> 00:44:57,513 I can pause now for a question. 905 00:44:57,513 --> 00:44:58,180 SPEAKER 4: Yeah. 906 00:44:58,180 --> 00:45:01,870 My question regards the drop of Flask in favor of Django 907 00:45:01,870 --> 00:45:03,730 as the backend language in the versions. 908 00:45:03,730 --> 00:45:05,800 But I would just like to say that the change 909 00:45:05,800 --> 00:45:10,180 I like the most between the versions was the fact that in the new version, 910 00:45:10,180 --> 00:45:15,060 the GitHub lecture comes after the HTML and CSS lecture. 911 00:45:15,060 --> 00:45:18,040 In the previous version, the GitHub lecture was the first one. 912 00:45:18,040 --> 00:45:19,777 But I thought that was kind of weird. 913 00:45:19,777 --> 00:45:22,360 Because the students didn't have code yet to make versions of. 914 00:45:22,360 --> 00:45:24,890 So I like this change in the new version. 915 00:45:24,890 --> 00:45:27,820 Anyways, my question regards Flask versus Django. 916 00:45:27,820 --> 00:45:31,930 I was wondering if in this new version, you guys 917 00:45:31,930 --> 00:45:37,340 wanted to make students able to create more complex projects in one framework, 918 00:45:37,340 --> 00:45:43,450 as opposed to be able to create intermediate level projects in two 919 00:45:43,450 --> 00:45:45,330 different frameworks? 920 00:45:45,330 --> 00:45:49,360 Was that one of the reasons for sticking to one framework this time? 921 00:45:49,360 --> 00:45:54,490 And if that reason is correct, why do you guys favor Django over Flask 922 00:45:54,490 --> 00:45:58,930 since both are still widely used in the industry? 923 00:45:58,930 --> 00:46:00,500 BRIAN YU: All great questions. 924 00:46:00,500 --> 00:46:03,760 So first, on the topic of the ordering of the lectures, 925 00:46:03,760 --> 00:46:09,865 yeah, we also found that it was better to first introduce HTML and CSS so 926 00:46:09,865 --> 00:46:12,653 that students could start building their web pages 927 00:46:12,653 --> 00:46:15,820 and then introduce the version control tools they could use then afterwards. 928 00:46:15,820 --> 00:46:19,990 So that is a switch between the 2018 version and the 2020 version. 929 00:46:19,990 --> 00:46:23,227 And we just found that that helped students to get started more quickly. 930 00:46:23,227 --> 00:46:24,560 So I'm glad you like the change. 931 00:46:24,560 --> 00:46:25,690 I like the change, too. 932 00:46:25,690 --> 00:46:29,530 I think the ordering makes a little bit more sense that way. 933 00:46:29,530 --> 00:46:33,550 As for the decision to just focus on one web framework instead of two, 934 00:46:33,550 --> 00:46:36,940 there are a couple of things that motivated that decision. 935 00:46:36,940 --> 00:46:41,500 One was just that having students write a bunch of programs in Flask 936 00:46:41,500 --> 00:46:46,720 and then translate to Django ultimately created a fair amount of confusion. 937 00:46:46,720 --> 00:46:51,230 Insofar as the frameworks themselves are fairly similar in the syntax, 938 00:46:51,230 --> 00:46:55,000 but there are slight nuances in how the templating works 939 00:46:55,000 --> 00:47:00,460 and how particular features of the URL routing worked, for example. 940 00:47:00,460 --> 00:47:02,950 That there was often some syntax confusion 941 00:47:02,950 --> 00:47:06,790 where students would try to then be writing Flask-like code that they knew 942 00:47:06,790 --> 00:47:08,890 that worked in Flask in Django, and they were 943 00:47:08,890 --> 00:47:12,980 having to relearn everything that they had just learned in Flask as well. 944 00:47:12,980 --> 00:47:15,900 So there was that element of confusion as well. 945 00:47:15,900 --> 00:47:20,110 And the other part of it is that by focusing on just one framework, 946 00:47:20,110 --> 00:47:23,065 we're able to introduce more features of that framework. 947 00:47:23,065 --> 00:47:25,690 And we just have more time to really get a better understanding 948 00:47:25,690 --> 00:47:28,630 for that framework than we did when we were splitting our attention 949 00:47:28,630 --> 00:47:30,610 between two different frameworks. 950 00:47:30,610 --> 00:47:33,550 So in the 2020 version, I've been able to talk more 951 00:47:33,550 --> 00:47:36,340 in the lectures about common features of Django. 952 00:47:36,340 --> 00:47:38,500 Things like automatically generating forums 953 00:47:38,500 --> 00:47:41,800 and automatically validating forums, which I saw a lot of students 954 00:47:41,800 --> 00:47:44,020 doing manually before, where they were manually 955 00:47:44,020 --> 00:47:48,310 checking to make sure that all the form fields had the correct types of values. 956 00:47:48,310 --> 00:47:51,160 Where Django can do this stuff automatically, but in the past, 957 00:47:51,160 --> 00:47:53,270 we didn't have time to really get into that. 958 00:47:53,270 --> 00:47:57,010 So the 2020 version tries to spend more time on these common features, 959 00:47:57,010 --> 00:47:59,710 now that we have that available to us. 960 00:47:59,710 --> 00:48:03,260 As for why we picked Django instead of Flask, in particular, 961 00:48:03,260 --> 00:48:08,020 it has to do with Django taking care of a lot 962 00:48:08,020 --> 00:48:11,020 of the more challenging parts of Flask. 963 00:48:11,020 --> 00:48:14,380 That flask doesn't have a built in way to do things 964 00:48:14,380 --> 00:48:19,300 like creating models for a SQL database or for updating that SQL database 965 00:48:19,300 --> 00:48:20,980 with what are known as migrations. 966 00:48:20,980 --> 00:48:23,920 You have to install third party packages to do that. 967 00:48:23,920 --> 00:48:26,470 Whereas Django comes with all of that built in. 968 00:48:26,470 --> 00:48:30,940 In Flask, if you want to be able to manage your database via the web, 969 00:48:30,940 --> 00:48:33,580 you have to build an entire part of your web application 970 00:48:33,580 --> 00:48:35,380 for managing all of that data. 971 00:48:35,380 --> 00:48:37,870 In Django, Django comes with a built-in admin 972 00:48:37,870 --> 00:48:40,900 interface that lets you modify all that data on your own. 973 00:48:40,900 --> 00:48:44,140 So it just made a little bit more sense to, from the beginning, 974 00:48:44,140 --> 00:48:47,350 use Django to be able to build these web applications. 975 00:48:47,350 --> 00:48:47,850 Yeah. 976 00:48:47,850 --> 00:48:50,830 Migrations-- someone's mentioning this in the chat-- 977 00:48:50,830 --> 00:48:52,780 are very tricky in Flask. 978 00:48:52,780 --> 00:48:56,500 And they don't work very consistently or reliably, in my experience. 979 00:48:56,500 --> 00:48:59,200 And Django handles migrations more cleanly. 980 00:48:59,200 --> 00:49:01,310 It's just built into Django itself. 981 00:49:01,310 --> 00:49:05,165 There's a lot of documentation and support available for it, too. 982 00:49:05,165 --> 00:49:08,060 Joe, your hand is raised, too. 983 00:49:08,060 --> 00:49:11,690 JOE: Because you mentioned object-oriented programming 984 00:49:11,690 --> 00:49:14,990 and classes, do we just need to understand them? 985 00:49:14,990 --> 00:49:19,560 Or will we need to build classes as part of this class? 986 00:49:19,560 --> 00:49:23,290 BRIAN YU: So the classes that students will build in the class 987 00:49:23,290 --> 00:49:26,780 are classes that basically define-- 988 00:49:26,780 --> 00:49:29,363 that represent tables inside of their database. 989 00:49:29,363 --> 00:49:31,280 So we'll give students some examples that they 990 00:49:31,280 --> 00:49:34,490 can model their own classes off of, and that's generally what students do. 991 00:49:34,490 --> 00:49:37,615 They're not the most complex of classes, because a lot of the functionality 992 00:49:37,615 --> 00:49:38,720 is built in already. 993 00:49:38,720 --> 00:49:41,060 But you do need to have, like, methods that 994 00:49:41,060 --> 00:49:45,317 are associated with those classes and some variables for storing that data. 995 00:49:45,317 --> 00:49:47,150 But we'll get to that when we get to talking 996 00:49:47,150 --> 00:49:50,807 a little more about SQL databases. 997 00:49:50,807 --> 00:49:53,140 So in terms of what Django looks like, I'll just briefly 998 00:49:53,140 --> 00:49:54,760 highlight some of these parts. 999 00:49:54,760 --> 00:49:56,710 We introduce students to routes. 1000 00:49:56,710 --> 00:50:01,200 So these are things, like, if you go to Google.com/images 1001 00:50:01,200 --> 00:50:05,890 or Google.com/translate, each of those slash somethings are different routes 1002 00:50:05,890 --> 00:50:07,600 that you can visit on a web application. 1003 00:50:07,600 --> 00:50:09,700 And a web application might have multiple routes. 1004 00:50:09,700 --> 00:50:11,920 So we show students how to build multiple routes 1005 00:50:11,920 --> 00:50:13,900 and connect them to their code. 1006 00:50:13,900 --> 00:50:18,220 And then, we show them how to build what are known in Django as views, which 1007 00:50:18,220 --> 00:50:20,980 are these functions that decide what it is 1008 00:50:20,980 --> 00:50:22,910 that's going to be shown to the user. 1009 00:50:22,910 --> 00:50:24,110 And we start simple. 1010 00:50:24,110 --> 00:50:27,970 We start with what I think is one of the simplest and silliest websites 1011 00:50:27,970 --> 00:50:30,220 on the internet, which is isitchristmas.com. 1012 00:50:30,220 --> 00:50:32,800 If you're not familiar, isitchristmas.com 1013 00:50:32,800 --> 00:50:35,770 is a website that tells you whether or not it's Christmas. 1014 00:50:35,770 --> 00:50:39,100 So if you go to isitchristmas.com-- you can actually try this right now-- 1015 00:50:39,100 --> 00:50:41,710 you will see a web page that says, "No." 1016 00:50:41,710 --> 00:50:44,460 So that is what the website does. 1017 00:50:44,460 --> 00:50:47,410 And this tends to be a simple web application that we can then 1018 00:50:47,410 --> 00:50:49,750 think about and try to ask and figure out, all right, 1019 00:50:49,750 --> 00:50:50,898 how exactly does it work? 1020 00:50:50,898 --> 00:50:52,690 How could we write our own version of this, 1021 00:50:52,690 --> 00:50:56,828 for example, for checking if it's New Year's, for example? 1022 00:50:56,828 --> 00:50:59,870 So we have students write a view that looks a little something like this. 1023 00:50:59,870 --> 00:51:04,570 If you look at the Python code, instead it's saying, what is the current date? 1024 00:51:04,570 --> 00:51:06,030 Is it January 1st? 1025 00:51:06,030 --> 00:51:07,780 And if it's January 1st, then that's going 1026 00:51:07,780 --> 00:51:10,270 to change the way that we're rendering the view. 1027 00:51:10,270 --> 00:51:12,760 And this is just to introduce students to the idea 1028 00:51:12,760 --> 00:51:14,290 that web applications change. 1029 00:51:14,290 --> 00:51:16,862 They're not always displaying the same content every time. 1030 00:51:16,862 --> 00:51:18,820 But different times you visit the page, they're 1031 00:51:18,820 --> 00:51:20,410 going to show you different content. 1032 00:51:20,410 --> 00:51:24,100 So it might be as simple as telling you whether or not it's Christmas. 1033 00:51:24,100 --> 00:51:26,870 It might be as complex as something like your news feed 1034 00:51:26,870 --> 00:51:31,720 that's showing you different posts based on who's posting things on your news 1035 00:51:31,720 --> 00:51:33,290 feed, for example. 1036 00:51:33,290 --> 00:51:36,520 So those views in Django are then connected to templates. 1037 00:51:36,520 --> 00:51:40,897 So here's a template, for example, that is going to either say, "yes" or "no," 1038 00:51:40,897 --> 00:51:42,730 depending on whether or not it's New Year's. 1039 00:51:42,730 --> 00:51:45,340 So it has this if then else syntax that's 1040 00:51:45,340 --> 00:51:49,600 sort of reminiscent of Python, but that lets us decide what it is the user 1041 00:51:49,600 --> 00:51:57,060 is going to see by specifying different HTML content for the application. 1042 00:51:57,060 --> 00:51:59,862 So that, then, is how Django templates work. 1043 00:51:59,862 --> 00:52:02,820 And then, as I mentioned, we introduce some more sophisticated features 1044 00:52:02,820 --> 00:52:07,690 of Django, too, like the ability to automatically generate forms, 1045 00:52:07,690 --> 00:52:11,160 for example, which is quite common in a lot of applications 1046 00:52:11,160 --> 00:52:17,170 that students develop in this class and then on their own in the future, too. 1047 00:52:17,170 --> 00:52:19,330 Questions, then, about Django before I move on? 1048 00:52:19,330 --> 00:52:21,970 1049 00:52:21,970 --> 00:52:26,850 I see Andrew posted ismycomputeron.com as well, another similar web site. 1050 00:52:26,850 --> 00:52:29,250 That one we thought was a little bit too simple. 1051 00:52:29,250 --> 00:52:33,900 Isitchristmas sort of struck the right balance for the first application 1052 00:52:33,900 --> 00:52:40,200 that we had students create that used views and templates. 1053 00:52:40,200 --> 00:52:41,710 But yes, that's a great one. 1054 00:52:41,710 --> 00:52:44,160 I appreciate that that website exists on the internet. 1055 00:52:44,160 --> 00:52:45,540 And there are a bunch of similar websites, 1056 00:52:45,540 --> 00:52:47,832 if you find yourself looking around for things like it. 1057 00:52:47,832 --> 00:52:51,105 1058 00:52:51,105 --> 00:52:53,730 All right, so we have a web application, a web application that 1059 00:52:53,730 --> 00:52:57,960 has some server that's running, that's sending some HTML to the user. 1060 00:52:57,960 --> 00:53:00,690 The next thing we introduce students to is how do you 1061 00:53:00,690 --> 00:53:02,190 store data in those applications? 1062 00:53:02,190 --> 00:53:05,440 Basically, every modern web application is storing some kind of data, 1063 00:53:05,440 --> 00:53:10,020 whether it's all the users in the application or any 1064 00:53:10,020 --> 00:53:12,760 of the information that's getting shown on the application. 1065 00:53:12,760 --> 00:53:16,170 So we introduce students next to SQL, a language for interacting 1066 00:53:16,170 --> 00:53:18,930 with data, models, which are a way of representing 1067 00:53:18,930 --> 00:53:24,870 that data inside of Python, and then migrations, which are a way of updating 1068 00:53:24,870 --> 00:53:28,093 our database anytime we make any changes to the type of data 1069 00:53:28,093 --> 00:53:29,010 that we want to store. 1070 00:53:29,010 --> 00:53:31,398 1071 00:53:31,398 --> 00:53:33,440 Question in the chat-- if I understand correctly, 1072 00:53:33,440 --> 00:53:36,470 Django helps us organize files using Python. 1073 00:53:36,470 --> 00:53:37,610 Is that correct? 1074 00:53:37,610 --> 00:53:38,360 Yes, that's true. 1075 00:53:38,360 --> 00:53:42,500 Django has a specific file structure that it tends to use. 1076 00:53:42,500 --> 00:53:47,810 In short, Django divides its projects into multiple applications or apps, 1077 00:53:47,810 --> 00:53:50,010 each of which has a separate folder. 1078 00:53:50,010 --> 00:53:52,460 And that's designed because Django was really 1079 00:53:52,460 --> 00:53:55,760 meant to allow for developing very sophisticated, very large web 1080 00:53:55,760 --> 00:53:56,820 applications. 1081 00:53:56,820 --> 00:54:01,677 And many web applications nowadays have multiple different mini-apps within it. 1082 00:54:01,677 --> 00:54:03,510 So if you think about something like Google, 1083 00:54:03,510 --> 00:54:06,650 for example, there is Google Search, but there's also Google Images, 1084 00:54:06,650 --> 00:54:09,470 and there's also Google Translate, and there's also Google Maps. 1085 00:54:09,470 --> 00:54:11,890 And if you think of something like Amazon, for example, 1086 00:54:11,890 --> 00:54:13,880 there is Amazon Search. 1087 00:54:13,880 --> 00:54:17,450 There's Amazon shopping interface, but there's also Amazon Video, 1088 00:54:17,450 --> 00:54:21,230 and there is Amazon's web services, for example. 1089 00:54:21,230 --> 00:54:22,940 And all of this is Amazon. 1090 00:54:22,940 --> 00:54:25,300 But it's, like, different applications inside of Amazon 1091 00:54:25,300 --> 00:54:28,550 that might communicate with each other, but they are separate from each other. 1092 00:54:28,550 --> 00:54:31,910 So Django is designed to allow us to divide our project 1093 00:54:31,910 --> 00:54:35,360 into those multiple different parts. 1094 00:54:35,360 --> 00:54:39,530 A couple of people are asking about the architecture that Django uses. 1095 00:54:39,530 --> 00:54:42,080 Technically, Django uses an architecture called 1096 00:54:42,080 --> 00:54:47,360 MVT, which stands for Model View Template, where model is the data, 1097 00:54:47,360 --> 00:54:49,940 views are those Python functions that I showed you, 1098 00:54:49,940 --> 00:54:54,110 and the template is what gets rendered to the user, like the HTML. 1099 00:54:54,110 --> 00:54:58,490 This is very similar to MVC, which is another popular architecture, Model 1100 00:54:58,490 --> 00:54:59,900 View Controller. 1101 00:54:59,900 --> 00:55:03,440 The main difference with an MVT architecture 1102 00:55:03,440 --> 00:55:07,400 is that in MVT, usually the framework itself 1103 00:55:07,400 --> 00:55:10,490 is dealing with a lot of the controller code. 1104 00:55:10,490 --> 00:55:13,280 Where the controller code is usually the code that's 1105 00:55:13,280 --> 00:55:17,780 interfacing between the database and with the application, 1106 00:55:17,780 --> 00:55:19,700 like the Python code, for example. 1107 00:55:19,700 --> 00:55:23,660 In this case, Django handles a lot of that code just inside of the framework 1108 00:55:23,660 --> 00:55:27,170 itself so that you don't need to be writing a lot of the code that 1109 00:55:27,170 --> 00:55:28,760 does that connection. 1110 00:55:28,760 --> 00:55:31,160 And that's one of the nice things about Django. 1111 00:55:31,160 --> 00:55:34,790 So very slight nuance between MVC and MVT. 1112 00:55:34,790 --> 00:55:37,550 We don't really expect students to understand all the nuances 1113 00:55:37,550 --> 00:55:39,050 and distinctions there. 1114 00:55:39,050 --> 00:55:42,080 But since people were asking about MVT versus MVC, 1115 00:55:42,080 --> 00:55:43,760 that technically is the distinction. 1116 00:55:43,760 --> 00:55:50,060 And Django would technically fall under an MVT framework instead of MVC. 1117 00:55:50,060 --> 00:55:54,540 Is it possible to use Python's pandas library instead of SQL? 1118 00:55:54,540 --> 00:56:00,420 Certainly possible-- pandas if great for doing data analysis. 1119 00:56:00,420 --> 00:56:04,440 And it's especially common for reading from a spreadsheet, for example. 1120 00:56:04,440 --> 00:56:07,110 As web applications scale, generally you're 1121 00:56:07,110 --> 00:56:12,060 going to want a full-fledged database to be able to do a lot of the data storage 1122 00:56:12,060 --> 00:56:15,000 and handling many users using it at the same time. 1123 00:56:15,000 --> 00:56:17,032 So we introduce SQL for that reason. 1124 00:56:17,032 --> 00:56:19,740 But again, these don't necessarily have to be mutually exclusive. 1125 00:56:19,740 --> 00:56:22,230 You could store data in a SQL database and then use 1126 00:56:22,230 --> 00:56:24,790 pandas to do some of the data analysis, for example. 1127 00:56:24,790 --> 00:56:27,190 And that's totally possible. 1128 00:56:27,190 --> 00:56:30,850 So ultimately in SQL, this data is being stored in tables, where 1129 00:56:30,850 --> 00:56:32,990 these tables have rows and columns. 1130 00:56:32,990 --> 00:56:35,320 So the example I introduce in lecture is imagine 1131 00:56:35,320 --> 00:56:39,230 you're creating a web application for an airline to keep track of flights, 1132 00:56:39,230 --> 00:56:39,960 for example. 1133 00:56:39,960 --> 00:56:42,580 So every flight has an origin, where it's going from, 1134 00:56:42,580 --> 00:56:45,850 some destination where it's going to, and then some duration, how 1135 00:56:45,850 --> 00:56:47,800 long the flight is, for example. 1136 00:56:47,800 --> 00:56:51,610 And these columns of the table each have different text. 1137 00:56:51,610 --> 00:56:55,270 So things like Binary Large Object, which is blob, 1138 00:56:55,270 --> 00:56:59,060 or integers, other numeric data, real number data, text data. 1139 00:56:59,060 --> 00:57:04,120 So we introduce students to these types that exist in SQL as well. 1140 00:57:04,120 --> 00:57:09,340 There are a bunch of different databases that use the SQL language in response 1141 00:57:09,340 --> 00:57:12,350 to a question, that they do have slight nuances. 1142 00:57:12,350 --> 00:57:14,560 So MySQL is one popular one. 1143 00:57:14,560 --> 00:57:16,810 PostgreSQL is another popular one. 1144 00:57:16,810 --> 00:57:19,690 SQLite is another popular one. 1145 00:57:19,690 --> 00:57:22,450 We, in this class, have standardized on just 1146 00:57:22,450 --> 00:57:24,830 using SQLite for a couple of reasons. 1147 00:57:24,830 --> 00:57:28,090 One, it is the easiest to set up locally. 1148 00:57:28,090 --> 00:57:29,890 Because it's just stored inside of a file. 1149 00:57:29,890 --> 00:57:32,230 You don't need to be running a separate database server 1150 00:57:32,230 --> 00:57:34,840 to be able to run the application. 1151 00:57:34,840 --> 00:57:37,660 And two, because it's the default database that Django uses. 1152 00:57:37,660 --> 00:57:40,690 When you create a new Django project by default, 1153 00:57:40,690 --> 00:57:43,570 it's by default going to use a SQLite database. 1154 00:57:43,570 --> 00:57:48,130 But also, Django makes it very easy to swap out one database for another. 1155 00:57:48,130 --> 00:57:50,710 That really just by changing a couple of lines of code 1156 00:57:50,710 --> 00:57:54,940 in the settings file of Django, you can swap out the SQLite database 1157 00:57:54,940 --> 00:57:57,670 for a MySQL database or a PostgreSQL database, 1158 00:57:57,670 --> 00:58:00,835 for example, if you're planning to really scale the application. 1159 00:58:00,835 --> 00:58:02,710 So that's yet another nice feature of Django, 1160 00:58:02,710 --> 00:58:06,190 just very easy ability to be able to switch what kind of database 1161 00:58:06,190 --> 00:58:08,038 you're using. 1162 00:58:08,038 --> 00:58:11,330 So we introduce students to the types of queries they can run on that database, 1163 00:58:11,330 --> 00:58:14,270 trying to select particular rows of that database. 1164 00:58:14,270 --> 00:58:16,490 We talk about how to design a database for thinking 1165 00:58:16,490 --> 00:58:20,300 about if you have multiple different tables, 1166 00:58:20,300 --> 00:58:22,970 how should those tables relate to each other. 1167 00:58:22,970 --> 00:58:25,280 We talk about how to join multiple tables together. 1168 00:58:25,280 --> 00:58:28,970 That if you store data across multiple tables in different places, 1169 00:58:28,970 --> 00:58:31,460 at some point in your application you're probably 1170 00:58:31,460 --> 00:58:34,010 going to want to integrate all of those tables 1171 00:58:34,010 --> 00:58:38,630 together to be able to access data that is on multiple different tables 1172 00:58:38,630 --> 00:58:41,790 simultaneously, for example. 1173 00:58:41,790 --> 00:58:47,170 So that's definitely something that you can do as well. 1174 00:58:47,170 --> 00:58:51,540 Are NoSQL databases supported by Django? 1175 00:58:51,540 --> 00:58:52,770 It's possible. 1176 00:58:52,770 --> 00:58:56,340 I've definitely heard of cases where you can use a NoSQL database, something 1177 00:58:56,340 --> 00:58:59,820 like MongoDB, for example, with Django. 1178 00:58:59,820 --> 00:59:03,000 It's generally not their recommended approach, 1179 00:59:03,000 --> 00:59:09,030 because a lot of the way that Django has really designed its whole model for how 1180 00:59:09,030 --> 00:59:13,260 data works and how to interact with data is that it's all very table based. 1181 00:59:13,260 --> 00:59:17,910 That it uses classes to represent each table and variables in those classes 1182 00:59:17,910 --> 00:59:20,590 to represent columns in those tables. 1183 00:59:20,590 --> 00:59:22,500 So you could use a NoSQL database. 1184 00:59:22,500 --> 00:59:25,620 But you'd be losing out on a lot of what Django was for 1185 00:59:25,620 --> 00:59:29,020 and what Django gives to you for free in the administrative interface 1186 00:59:29,020 --> 00:59:31,500 that Django offers. 1187 00:59:31,500 --> 00:59:36,320 So generally, a SQL database is going to be recommended here. 1188 00:59:36,320 --> 00:59:39,200 And so there, too, we talk about some of the security concerns 1189 00:59:39,200 --> 00:59:42,320 that come up with SQL, things like SQL injection attacks 1190 00:59:42,320 --> 00:59:46,460 and how a hacker might be able to inadvertently run 1191 00:59:46,460 --> 00:59:50,240 SQL code on your server when you don't intend for that code to be run, 1192 00:59:50,240 --> 00:59:54,770 and how Django defends against it by using its own ORM, which 1193 00:59:54,770 --> 00:59:59,360 is just a way of using classes to represent individual Django tables. 1194 00:59:59,360 --> 01:00:01,200 And we talk about race conditions as well, 1195 01:00:01,200 --> 01:00:05,300 which is brought up in CS50X, too, for dealing 1196 01:00:05,300 --> 01:00:07,550 with what's happening if multiple people are trying 1197 01:00:07,550 --> 01:00:11,290 to access your database at the same time and what potentially could go wrong 1198 01:00:11,290 --> 01:00:11,790 there. 1199 01:00:11,790 --> 01:00:13,850 So we talk about how to build your database, 1200 01:00:13,850 --> 01:00:16,310 but also what potentially could go wrong and how 1201 01:00:16,310 --> 01:00:20,000 you can guard your application against those potential threats 1202 01:00:20,000 --> 01:00:22,760 and vulnerabilities that might come up over the course 1203 01:00:22,760 --> 01:00:25,110 of the lifetime of your application. 1204 01:00:25,110 --> 01:00:27,320 All right, so this alone is enough for students 1205 01:00:27,320 --> 01:00:30,130 to really start to build a lot of interesting web applications. 1206 01:00:30,130 --> 01:00:32,600 They can build web applications that render each HTML 1207 01:00:32,600 --> 01:00:36,310 pages to the user, applications that have a database, 1208 01:00:36,310 --> 01:00:39,650 so that's storing data with complex administrative interfaces 1209 01:00:39,650 --> 01:00:41,480 for managing that data. 1210 01:00:41,480 --> 01:00:45,740 We can generate all sorts of interesting applications just using these tools. 1211 01:00:45,740 --> 01:00:49,310 And some of the early projects do just that. 1212 01:00:49,310 --> 01:00:52,640 But we eventually want to introduce students 1213 01:00:52,640 --> 01:00:57,500 to front end web design as well and some of the advantages and tools that 1214 01:00:57,500 --> 01:00:59,023 are available there, too. 1215 01:00:59,023 --> 01:01:01,190 Before we get there, there's a question in the chat. 1216 01:01:01,190 --> 01:01:05,090 When I upload my application to Heroku with a SQLite database, 1217 01:01:05,090 --> 01:01:08,090 all the data gets erased effectively. 1218 01:01:08,090 --> 01:01:09,260 That's to be expected. 1219 01:01:09,260 --> 01:01:12,980 Because SQLite stores its database in a file, 1220 01:01:12,980 --> 01:01:17,460 when you upload your application to Heroku with a SQLite database. 1221 01:01:17,460 --> 01:01:20,480 it's just going to replace the existing database with whatever 1222 01:01:20,480 --> 01:01:23,570 file you've just uploaded. 1223 01:01:23,570 --> 01:01:27,290 So in general, when you're uploading a web application for use 1224 01:01:27,290 --> 01:01:30,140 in production, something on a server like a Roku, 1225 01:01:30,140 --> 01:01:33,530 you don't want to be using SQLite as the database. 1226 01:01:33,530 --> 01:01:36,740 You'll instead want to be using a separate database server. 1227 01:01:36,740 --> 01:01:39,110 And the easiest way to do this with Heroku 1228 01:01:39,110 --> 01:01:42,770 is to use Heroku Postgres, which is an add on you 1229 01:01:42,770 --> 01:01:48,920 can add to your Heroku web application that gives you a Postgres database 1230 01:01:48,920 --> 01:01:50,810 that you can use instead of SQLite. 1231 01:01:50,810 --> 01:01:53,330 And it's a few, just like one or two lines 1232 01:01:53,330 --> 01:01:56,360 that have to change inside of your Django application 1233 01:01:56,360 --> 01:01:59,090 in order to make that shift to Postgres. 1234 01:01:59,090 --> 01:02:03,430 And Heroku will give you a Postgres database with 10,000 rows for free 1235 01:02:03,430 --> 01:02:05,370 that you can use with your web application. 1236 01:02:05,370 --> 01:02:07,162 So if you're deploying it, that's something 1237 01:02:07,162 --> 01:02:09,320 you have to think about as well. 1238 01:02:09,320 --> 01:02:11,780 Will we run SQL commands in Python? 1239 01:02:11,780 --> 01:02:14,100 Or do you need a separate application? 1240 01:02:14,100 --> 01:02:16,970 So you can run SQL commands directly in Python. 1241 01:02:16,970 --> 01:02:20,600 But in Django, Django has, again, what's called 1242 01:02:20,600 --> 01:02:24,830 an ORM, which is an Object Relational Mapper that basically 1243 01:02:24,830 --> 01:02:29,180 uses object-oriented programming instead of using raw SQL 1244 01:02:29,180 --> 01:02:30,740 queries from the user's perspective. 1245 01:02:30,740 --> 01:02:34,040 So you, instead of writing raw SQL queries, 1246 01:02:34,040 --> 01:02:38,600 just use Django's built in functions for querying models and adding data 1247 01:02:38,600 --> 01:02:40,490 and manipulating data, for example. 1248 01:02:40,490 --> 01:02:44,930 And Django just figures out what the actual SQL commands that should be run 1249 01:02:44,930 --> 01:02:45,900 are going to be. 1250 01:02:45,900 --> 01:02:49,910 And so that lets you much more easily create more complex queries 1251 01:02:49,910 --> 01:02:52,550 without having to write all of the SQL syntax. 1252 01:02:52,550 --> 01:02:57,408 Because Django is doing a lot of that for you, so another of the nice 1253 01:02:57,408 --> 01:02:58,700 features that Django gives you. 1254 01:02:58,700 --> 01:03:01,863 1255 01:03:01,863 --> 01:03:03,030 Someone's asking my opinion. 1256 01:03:03,030 --> 01:03:06,600 Do I think Python is going to become more used than JavaScript 1257 01:03:06,600 --> 01:03:08,310 in the future of web development? 1258 01:03:08,310 --> 01:03:11,580 I think it's difficult to predict trends in web development 1259 01:03:11,580 --> 01:03:14,820 aside from saying that in web development and development 1260 01:03:14,820 --> 01:03:19,030 more generally, like, the languages that are popular are always going to change, 1261 01:03:19,030 --> 01:03:21,120 that over time new languages are going to become 1262 01:03:21,120 --> 01:03:24,180 more popular for certain things and less popular for other things. 1263 01:03:24,180 --> 01:03:27,903 The one shift that I think is particularly interesting that-- 1264 01:03:27,903 --> 01:03:29,820 we don't talk about it in the course, per se-- 1265 01:03:29,820 --> 01:03:33,900 but I am very much liking that there are all 1266 01:03:33,900 --> 01:03:37,710 of these ways now to write code in languages that 1267 01:03:37,710 --> 01:03:40,650 aren't JavaScript itself, but are like JavaScript 1268 01:03:40,650 --> 01:03:43,410 and then compiled to JavaScript. 1269 01:03:43,410 --> 01:03:46,380 So my favorite among these is typescript, 1270 01:03:46,380 --> 01:03:50,850 which is a typed version of JavaScript that is also 1271 01:03:50,850 --> 01:03:52,950 gaining a lot of popularity now, too. 1272 01:03:52,950 --> 01:03:56,430 But it's more secure than JavaScript, because it's doing 1273 01:03:56,430 --> 01:03:58,470 a lot of this type checking for you. 1274 01:03:58,470 --> 01:04:01,680 And ultimately, it's making it easier and faster 1275 01:04:01,680 --> 01:04:04,102 to be able to develop JavaScript applications. 1276 01:04:04,102 --> 01:04:06,810 That's a bit of a tangent, because we don't talk about typescript 1277 01:04:06,810 --> 01:04:08,970 in the web programming course itself. 1278 01:04:08,970 --> 01:04:12,090 But if today I were to write a web application, 1279 01:04:12,090 --> 01:04:13,530 I would probably do it in Python. 1280 01:04:13,530 --> 01:04:15,280 But if I was going to do it in JavaScript, 1281 01:04:15,280 --> 01:04:19,234 I would probably use typescript instead and then compile it to JavaScript. 1282 01:04:19,234 --> 01:04:21,960 1283 01:04:21,960 --> 01:04:24,880 All right, yeah, there are other frameworks that are getting popular, 1284 01:04:24,880 --> 01:04:25,380 too. 1285 01:04:25,380 --> 01:04:28,540 So there's no one framework that everyone is using. 1286 01:04:28,540 --> 01:04:30,190 There are a lot of possible options. 1287 01:04:30,190 --> 01:04:34,182 And oftentimes, once you learn one, it's easier to learn the next one. 1288 01:04:34,182 --> 01:04:36,640 So we introduce students to some of the possible frameworks 1289 01:04:36,640 --> 01:04:38,380 and tools in this class. 1290 01:04:38,380 --> 01:04:43,307 But students are more than welcome to go and explore their own, too. 1291 01:04:43,307 --> 01:04:45,390 All right, so that then takes us to the front end. 1292 01:04:45,390 --> 01:04:48,920 So we talked about Python on the backend, using a Django server. 1293 01:04:48,920 --> 01:04:51,570 And now we turn to JavaScript, which is the language that we're 1294 01:04:51,570 --> 01:04:56,070 going to be using on the front end to be able to run code on the client side, 1295 01:04:56,070 --> 01:04:57,870 inside of users' browsers. 1296 01:04:57,870 --> 01:05:00,390 So we talk about some of the basics of JavaScript syntax 1297 01:05:00,390 --> 01:05:04,200 for students who haven't necessarily seen that syntax before. 1298 01:05:04,200 --> 01:05:07,290 And then we introduce students to a great feature 1299 01:05:07,290 --> 01:05:11,460 of using JavaScript for client side programming, which is event handling. 1300 01:05:11,460 --> 01:05:15,660 That oftentimes we use JavaScript as an event-based language, where we're 1301 01:05:15,660 --> 01:05:20,218 running code not just right away, but in response to particular events, 1302 01:05:20,218 --> 01:05:22,260 when the user clicks on a button, when they mouse 1303 01:05:22,260 --> 01:05:26,040 over a region of the page, when they press a key, when the page loads, 1304 01:05:26,040 --> 01:05:30,790 or when some element loses focus and you focus on another thing in the web page. 1305 01:05:30,790 --> 01:05:34,590 And so all of these features then are events 1306 01:05:34,590 --> 01:05:37,680 that you can have JavaScript code listening for and handling. 1307 01:05:37,680 --> 01:05:40,730 Such that when a particular thing happens on the page, 1308 01:05:40,730 --> 01:05:42,690 you are then running some JavaScript code. 1309 01:05:42,690 --> 01:05:44,790 And so that opens up a lot of possibilities 1310 01:05:44,790 --> 01:05:49,690 for creating really interactive web pages. 1311 01:05:49,690 --> 01:05:52,980 So using JavaScript, we can then also manipulate the DOM. 1312 01:05:52,980 --> 01:05:56,280 So we talked about the DOM a little bit when we were talking about HTML. 1313 01:05:56,280 --> 01:05:58,770 But it represents this structure of this web page, 1314 01:05:58,770 --> 01:06:03,690 where I can now use JavaScript to, say, get access to this part of the web page 1315 01:06:03,690 --> 01:06:04,590 and manipulate it. 1316 01:06:04,590 --> 01:06:08,730 So that you can change the web page without needing to refresh the page 1317 01:06:08,730 --> 01:06:10,520 or visit a different page, for example. 1318 01:06:10,520 --> 01:06:12,450 And a lot of modern web applications are now 1319 01:06:12,450 --> 01:06:17,760 doing this, that you don't need to refresh social network websites. 1320 01:06:17,760 --> 01:06:22,860 You don't need to refresh even some news feeds, for example, news websites. 1321 01:06:22,860 --> 01:06:25,780 You don't have to refresh your email, for example. 1322 01:06:25,780 --> 01:06:28,780 New emails just show up when those new emails arrive. 1323 01:06:28,780 --> 01:06:31,410 And that's in large part thanks to the ability of JavaScript 1324 01:06:31,410 --> 01:06:34,170 to manipulate the DOM, to change what it is 1325 01:06:34,170 --> 01:06:39,150 that the user sees on the page in response to particular events, 1326 01:06:39,150 --> 01:06:40,490 for example. 1327 01:06:40,490 --> 01:06:43,770 So we show students how they can go about doing that DOM manipulation, 1328 01:06:43,770 --> 01:06:46,680 building simple web applications that are manipulating 1329 01:06:46,680 --> 01:06:48,813 what happens to be present on the page. 1330 01:06:48,813 --> 01:06:51,480 And then introduce students to some other features of JavaScript 1331 01:06:51,480 --> 01:06:54,570 as well, things like localStorage, which you can use in order 1332 01:06:54,570 --> 01:06:58,500 to store data inside of the user's web browser so 1333 01:06:58,500 --> 01:07:01,920 that when the user revisits the page the next time, their progress 1334 01:07:01,920 --> 01:07:05,080 or whatever they've been doing is saved in the page. 1335 01:07:05,080 --> 01:07:09,690 So you can reuse data that you saved from the last time 1336 01:07:09,690 --> 01:07:12,390 that a user visited that page. 1337 01:07:12,390 --> 01:07:15,120 We also introduce students to how to use JavaScript 1338 01:07:15,120 --> 01:07:18,120 to talk to API, to talk to other services 1339 01:07:18,120 --> 01:07:20,970 on the internet that are going to provide information 1340 01:07:20,970 --> 01:07:23,370 or data or other services, for example. 1341 01:07:23,370 --> 01:07:26,760 And the one we introduce in lecture is something like a currency converter. 1342 01:07:26,760 --> 01:07:29,520 Such that, for example, they can type in a currency 1343 01:07:29,520 --> 01:07:33,480 and get back what the exchange rate of that currency is with the US dollar 1344 01:07:33,480 --> 01:07:35,880 immediately, based on the latest exchange rate. 1345 01:07:35,880 --> 01:07:39,840 So it's not just that the application is storing some outdated exchange 1346 01:07:39,840 --> 01:07:42,450 rate that's never going to change, but that we're 1347 01:07:42,450 --> 01:07:46,410 accessing what is the latest exchange rate between the euro and the dollar 1348 01:07:46,410 --> 01:07:48,490 and then can we display that to the user. 1349 01:07:48,490 --> 01:07:52,170 So we show students how to use JavaScript to talk to those APIs, 1350 01:07:52,170 --> 01:07:55,830 get back some data, and then incorporate that data into their own web 1351 01:07:55,830 --> 01:07:57,180 application. 1352 01:07:57,180 --> 01:08:00,120 And that's something they can use with their own applications as well. 1353 01:08:00,120 --> 01:08:02,220 That they could build their own API. 1354 01:08:02,220 --> 01:08:04,380 And we have students do a little bit of this, too, 1355 01:08:04,380 --> 01:08:07,320 such that their front end is then talking to the API, 1356 01:08:07,320 --> 01:08:15,170 getting back some data, and then showing the results of that data 1357 01:08:15,170 --> 01:08:17,120 analysis on the page, too. 1358 01:08:17,120 --> 01:08:20,899 1359 01:08:20,899 --> 01:08:24,620 Someone's asking about TensorFlow.js versus TensorFlow in Python. 1360 01:08:24,620 --> 01:08:26,930 I don't have too much experience with TensorFlow.js. 1361 01:08:26,930 --> 01:08:30,890 I've primarily used TensorFlow in the context of Python. 1362 01:08:30,890 --> 01:08:33,888 And I've shown some of that in the artificial intelligence class 1363 01:08:33,888 --> 01:08:35,930 that we'll talk a little bit more about tomorrow. 1364 01:08:35,930 --> 01:08:39,410 But TensorFlow is gaining incredible popularity 1365 01:08:39,410 --> 01:08:43,100 across a number of different languages and a number of different places 1366 01:08:43,100 --> 01:08:47,270 just for being one of the easiest tools to very quickly do 1367 01:08:47,270 --> 01:08:48,830 machine learning work. 1368 01:08:48,830 --> 01:08:51,840 So I think either is going to be fine, depending on your use case. 1369 01:08:51,840 --> 01:08:54,970 1370 01:08:54,970 --> 01:08:55,990 What about Jinja? 1371 01:08:55,990 --> 01:08:58,810 Is it introduced to students? 1372 01:08:58,810 --> 01:09:03,090 Django uses a different templating language that is very similar to Jinja 1373 01:09:03,090 --> 01:09:07,000 but has some slight differences syntactically in terms of how it works. 1374 01:09:07,000 --> 01:09:10,689 That was another motivation for just focusing on one framework rather than 1375 01:09:10,689 --> 01:09:12,490 both Django and Flask. 1376 01:09:12,490 --> 01:09:15,490 Because now, instead of having to learn two different templating 1377 01:09:15,490 --> 01:09:18,700 languages, the Jinja templating language which Flask uses 1378 01:09:18,700 --> 01:09:22,899 and then Django's own templating language, we can just focus on one 1379 01:09:22,899 --> 01:09:26,229 and avoid some of that potential confusion. 1380 01:09:26,229 --> 01:09:28,977 Django does let you create your own commands. 1381 01:09:28,977 --> 01:09:31,810 That if you want to run particular commands on your web application, 1382 01:09:31,810 --> 01:09:33,968 Django supports those as well. 1383 01:09:33,968 --> 01:09:36,760 They're known as management commands, if you want to look for that. 1384 01:09:36,760 --> 01:09:39,290 1385 01:09:39,290 --> 01:09:43,729 We don't introduce xml as a format for representing data. 1386 01:09:43,729 --> 01:09:48,890 We primarily introduce json, J-S-O-N, as the data representation format. 1387 01:09:48,890 --> 01:09:53,660 Just because most of the REST APIs, especially REST APIs 1388 01:09:53,660 --> 01:09:56,990 nowadays, are returning data in that format. 1389 01:09:56,990 --> 01:09:59,810 And the built in Python and JavaScript libraries 1390 01:09:59,810 --> 01:10:03,890 for dealing with requesting data have a lot of nice features 1391 01:10:03,890 --> 01:10:06,140 for dealing with data in that format, for example. 1392 01:10:06,140 --> 01:10:09,920 1393 01:10:09,920 --> 01:10:14,260 All right, so once we've introduced students to the syntax of JavaScript, 1394 01:10:14,260 --> 01:10:18,700 we can then use JavaScript to build interactive and custom user 1395 01:10:18,700 --> 01:10:22,270 interfaces, to be able to create more interesting interfaces 1396 01:10:22,270 --> 01:10:24,020 that users can engage with. 1397 01:10:24,020 --> 01:10:26,440 So the first of those things that we talk about 1398 01:10:26,440 --> 01:10:30,160 is better understanding data that we get about the window. 1399 01:10:30,160 --> 01:10:33,610 It turns out that in JavaScript, you can access a whole bunch of information 1400 01:10:33,610 --> 01:10:37,540 about the user's current window, like how wide it is, how tall it is, 1401 01:10:37,540 --> 01:10:39,850 how far down on the page the user has scrolled, 1402 01:10:39,850 --> 01:10:42,880 and get access to all this information in code. 1403 01:10:42,880 --> 01:10:45,490 And there are a lot of user interface implications for this. 1404 01:10:45,490 --> 01:10:48,760 Because you want your application to do something different based 1405 01:10:48,760 --> 01:10:52,210 on the size of the window, based on where the user has 1406 01:10:52,210 --> 01:10:54,470 scrolled to on that page, for example. 1407 01:10:54,470 --> 01:10:58,930 If you've ever seen a web page where things are really changing on the page 1408 01:10:58,930 --> 01:11:01,300 as you scroll through it, they're probably 1409 01:11:01,300 --> 01:11:04,730 using some of this window information in order to do that. 1410 01:11:04,730 --> 01:11:08,950 And one of the most common examples is something like infinite scroll. 1411 01:11:08,950 --> 01:11:13,003 That if you use a social networking website like Twitter, for example, 1412 01:11:13,003 --> 01:11:14,920 you notice that you scroll down to the bottom, 1413 01:11:14,920 --> 01:11:18,230 and you can just immediately start loading more posts, for example. 1414 01:11:18,230 --> 01:11:22,690 So here, for instance, is what infinite scroll might look like. 1415 01:11:22,690 --> 01:11:25,420 We show students how you might have a whole bunch of posts. 1416 01:11:25,420 --> 01:11:28,870 And as you scroll through the page, as soon as you hit the bottom of the page, 1417 01:11:28,870 --> 01:11:31,130 new posts load automatically. 1418 01:11:31,130 --> 01:11:34,030 And so this is a common feature in many modern user interfaces 1419 01:11:34,030 --> 01:11:35,620 that use a whole bunch of data. 1420 01:11:35,620 --> 01:11:39,610 Rather than force the user to click a next button and next and next and next 1421 01:11:39,610 --> 01:11:43,120 again and again, just when the user gets down to the bottom of the page, 1422 01:11:43,120 --> 01:11:48,900 load the next page worth of information and show that to the user right away. 1423 01:11:48,900 --> 01:11:51,870 Parallax scrolling is another instance of things changing 1424 01:11:51,870 --> 01:11:54,497 when you're scrolling, for example. 1425 01:11:54,497 --> 01:11:55,830 You can do that with JavaScript. 1426 01:11:55,830 --> 01:11:58,163 I think there are also ways of just doing that with CSS. 1427 01:11:58,163 --> 01:12:01,170 So you might not necessarily need JavaScript in order 1428 01:12:01,170 --> 01:12:03,540 to do something like that. 1429 01:12:03,540 --> 01:12:05,880 I did mention REST. 1430 01:12:05,880 --> 01:12:11,490 REST is a particular way of constructing an API, like a service that web 1431 01:12:11,490 --> 01:12:15,210 applications are interacting with to get back to request information 1432 01:12:15,210 --> 01:12:17,970 or requests to make some sort of change on an application 1433 01:12:17,970 --> 01:12:20,580 and get back some kind of response. 1434 01:12:20,580 --> 01:12:23,280 That's something that we talk to students about in the course. 1435 01:12:23,280 --> 01:12:26,750 1436 01:12:26,750 --> 01:12:28,880 And then, in addition with user interfaces, 1437 01:12:28,880 --> 01:12:31,290 we introduce students to animation. 1438 01:12:31,290 --> 01:12:33,560 I'm personally a big fan of using animation 1439 01:12:33,560 --> 01:12:35,420 across a whole bunch of domains. 1440 01:12:35,420 --> 01:12:37,250 And JavaScript does a great job of making 1441 01:12:37,250 --> 01:12:39,230 it easy to be able to create animation. 1442 01:12:39,230 --> 01:12:43,660 So that if you want things that are moving in your application, 1443 01:12:43,660 --> 01:12:45,410 whether it's shapes that are moving around 1444 01:12:45,410 --> 01:12:49,010 or things that are changing in shape or size or color or other features 1445 01:12:49,010 --> 01:12:51,410 and moving seamlessly between those things, 1446 01:12:51,410 --> 01:12:54,920 we show students how to animate their web pages using JavaScript as well. 1447 01:12:54,920 --> 01:12:57,590 And that leaves open a lot of fun possibilities. 1448 01:12:57,590 --> 01:13:01,470 We show both CSS animation and JavaScript animation. 1449 01:13:01,470 --> 01:13:04,110 So they're both things that you can do with-- 1450 01:13:04,110 --> 01:13:10,280 CSS animation is the one that we focus a little bit more 1451 01:13:10,280 --> 01:13:12,567 on, just because it's a bit simpler to set up. 1452 01:13:12,567 --> 01:13:14,900 And you just say what should the CSS be at the beginning 1453 01:13:14,900 --> 01:13:16,820 and what should the CSS be at the end. 1454 01:13:16,820 --> 01:13:20,542 But you can absolutely do animation in JavaScript as well. 1455 01:13:20,542 --> 01:13:22,250 And that becomes especially powerful when 1456 01:13:22,250 --> 01:13:24,200 you add it to something like React. 1457 01:13:24,200 --> 01:13:27,680 So React is a front end web framework that's 1458 01:13:27,680 --> 01:13:32,000 designed to make it very easy to build interactive user interfaces so 1459 01:13:32,000 --> 01:13:38,012 that the interface is reacting to things that are happening inside 1460 01:13:38,012 --> 01:13:38,970 of the web application. 1461 01:13:38,970 --> 01:13:41,510 So if one thing happens in one part of the application, 1462 01:13:41,510 --> 01:13:44,780 some other part of the application can automatically update. 1463 01:13:44,780 --> 01:13:47,750 And it's a different way of writing your front end code, just 1464 01:13:47,750 --> 01:13:50,490 to make it a little bit easier in order to do so. 1465 01:13:50,490 --> 01:13:52,040 And React as a big library. 1466 01:13:52,040 --> 01:13:53,390 There's a lot of features in it. 1467 01:13:53,390 --> 01:13:57,380 There's a lot of extensions to it, as were mentioned in the chat, too. 1468 01:13:57,380 --> 01:13:59,000 We don't talk about all of that. 1469 01:13:59,000 --> 01:14:02,960 But we do just introduce students to the fundamentals of React, 1470 01:14:02,960 --> 01:14:06,110 how to create what are known as React components, which are just 1471 01:14:06,110 --> 01:14:11,420 pieces inside of the React application that 1472 01:14:11,420 --> 01:14:14,870 can be reused in other parts of the application, for example. 1473 01:14:14,870 --> 01:14:18,950 And then we allow students to be able to use React in their web applications 1474 01:14:18,950 --> 01:14:19,910 if they want to. 1475 01:14:19,910 --> 01:14:23,450 It's effectively a substitute for just writing plain JavaScript 1476 01:14:23,450 --> 01:14:25,400 to be able to design your user interface. 1477 01:14:25,400 --> 01:14:27,850 You can use React instead. 1478 01:14:27,850 --> 01:14:31,070 And as was mentioned in the chat, one of the nice things about React 1479 01:14:31,070 --> 01:14:34,640 is that it can connect to any backend web server. 1480 01:14:34,640 --> 01:14:37,080 Because it's just meant to be used on the front end. 1481 01:14:37,080 --> 01:14:38,480 So you can use it with Django. 1482 01:14:38,480 --> 01:14:39,890 You can use it with Node.js. 1483 01:14:39,890 --> 01:14:43,400 You can use it with frameworks like Laravel, or Ruby On Rails, 1484 01:14:43,400 --> 01:14:45,740 or other popular web frameworks, too. 1485 01:14:45,740 --> 01:14:50,630 So a lot of those are possibilities, too. 1486 01:14:50,630 --> 01:14:55,580 Questions, then, about the JavaScript portion of the course? 1487 01:14:55,580 --> 01:14:58,902 We don't introduce students to pixi.js specifically. 1488 01:14:58,902 --> 01:15:01,610 But hopefully, we give students enough of the resources and tools 1489 01:15:01,610 --> 01:15:05,270 for how to use JavaScript libraries and tools that they should 1490 01:15:05,270 --> 01:15:07,550 be able to pick up on a lot of that syntax, 1491 01:15:07,550 --> 01:15:12,240 because they'll have seen a lot of similar types of syntax before. 1492 01:15:12,240 --> 01:15:12,860 Yeah, Ramon. 1493 01:15:12,860 --> 01:15:14,450 Go ahead. 1494 01:15:14,450 --> 01:15:20,240 SPEAKER 4: I would like to ask if, in the JavaScript world since 2018, 1495 01:15:20,240 --> 01:15:26,660 has any change happened that influenced the topics thought in the JavaScript 1496 01:15:26,660 --> 01:15:30,610 lecture and the front end lecture? 1497 01:15:30,610 --> 01:15:34,420 BRIAN YU: The main change in the front end lecture and responses is React. 1498 01:15:34,420 --> 01:15:36,580 React was already popular in 2018. 1499 01:15:36,580 --> 01:15:39,580 But it's only gotten more popular in recent years. 1500 01:15:39,580 --> 01:15:43,060 And so when I was going through some of the examples for the 2020 version, 1501 01:15:43,060 --> 01:15:47,170 there were a lot of examples that are a lot of sort of tedious JavaScript code 1502 01:15:47,170 --> 01:15:49,390 that React just makes a lot simpler. 1503 01:15:49,390 --> 01:15:51,550 And so I figured the better choice in this case 1504 01:15:51,550 --> 01:15:55,330 was probably to introduce students to the way that things are done now 1505 01:15:55,330 --> 01:15:58,660 and just some of really the fundamentals of React syntax 1506 01:15:58,660 --> 01:16:01,525 so that students get exposure to that. 1507 01:16:01,525 --> 01:16:04,150 Because if they go into the world of front end web development, 1508 01:16:04,150 --> 01:16:08,090 or want to design applications of their own, React will save a lot of time. 1509 01:16:08,090 --> 01:16:12,060 And it's also quite popular in the industry, too. 1510 01:16:12,060 --> 01:16:14,820 Someone's asking about React versus Angular. 1511 01:16:14,820 --> 01:16:20,910 So React and Angular are both popular frameworks for using-- 1512 01:16:20,910 --> 01:16:25,680 for basically creating interactive applications. 1513 01:16:25,680 --> 01:16:27,660 People will disagree about this. 1514 01:16:27,660 --> 01:16:31,470 My opinion, after having tried both, and looked at tutorials for both, 1515 01:16:31,470 --> 01:16:34,470 and tried to approach both from a pedagogical lens, 1516 01:16:34,470 --> 01:16:38,260 is that React is a little bit easier to learn as a beginner, 1517 01:16:38,260 --> 01:16:40,080 just for getting things set up. 1518 01:16:40,080 --> 01:16:43,050 In particular, because you don't need the object-oriented syntax. 1519 01:16:43,050 --> 01:16:44,940 You can just use a function in React to be 1520 01:16:44,940 --> 01:16:49,770 able to create a component, for example, just to start things, for instance. 1521 01:16:49,770 --> 01:16:52,300 But Angular is going to be very similar. 1522 01:16:52,300 --> 01:16:54,690 They have their differences in how the frameworks work. 1523 01:16:54,690 --> 01:16:58,830 But you could certainly teach students how to write code in Angular as well. 1524 01:16:58,830 --> 01:17:02,290 1525 01:17:02,290 --> 01:17:06,503 Angular happens to use the language that I mentioned a little while back 1526 01:17:06,503 --> 01:17:07,170 in this session. 1527 01:17:07,170 --> 01:17:09,313 Typescript, that's the programming language 1528 01:17:09,313 --> 01:17:11,230 that it uses for programming in Angular, which 1529 01:17:11,230 --> 01:17:16,200 is an extension to JavaScript that adds some additional features to JavaScript. 1530 01:17:16,200 --> 01:17:17,950 And I quite like typescript as a language. 1531 01:17:17,950 --> 01:17:20,370 I think it's a great choice for Angular to use it. 1532 01:17:20,370 --> 01:17:22,120 But I thought it would probably especially 1533 01:17:22,120 --> 01:17:24,700 be too much for this class to not only introduce here's 1534 01:17:24,700 --> 01:17:28,600 how you program in typescript, but then here's Angular on top of that, too. 1535 01:17:28,600 --> 01:17:33,380 So we decided to just stick with React for the purpose of this class. 1536 01:17:33,380 --> 01:17:35,950 What is native in React Native? 1537 01:17:35,950 --> 01:17:39,520 So React Native is a way of using React code, 1538 01:17:39,520 --> 01:17:44,620 using the React library to be able to create native mobile applications, 1539 01:17:44,620 --> 01:17:49,160 to create applications that are running on mobile devices, in particular. 1540 01:17:49,160 --> 01:17:51,250 So we don't use React Native in this class 1541 01:17:51,250 --> 01:17:56,020 because we're focused on building web applications that really just use React 1542 01:17:56,020 --> 01:18:00,070 and what's known as ReactDOM, which is React library for rendering 1543 01:18:00,070 --> 01:18:03,555 React information into a web page. 1544 01:18:03,555 --> 01:18:04,930 Ramon, your hand is still raised. 1545 01:18:04,930 --> 01:18:06,283 Did you have another question? 1546 01:18:06,283 --> 01:18:06,950 SPEAKER 4: Yeah. 1547 01:18:06,950 --> 01:18:12,950 You just talked about trying to approach the course with a pedagogical lens in. 1548 01:18:12,950 --> 01:18:15,440 I realized that not much has changed when it comes 1549 01:18:15,440 --> 01:18:17,270 to the content between the versions. 1550 01:18:17,270 --> 01:18:19,130 You introduced React and a new Java class. 1551 01:18:19,130 --> 01:18:22,540 But on the overall scheme, the content remained the same. 1552 01:18:22,540 --> 01:18:28,010 But I would like to ask if, with that first experience in the other two years 1553 01:18:28,010 --> 01:18:32,670 that have passed by, is there something you 1554 01:18:32,670 --> 01:18:36,580 learned in terms of lecturing the content 1555 01:18:36,580 --> 01:18:39,840 that you tried to apply this time? 1556 01:18:39,840 --> 01:18:43,390 BRIAN YU: Yeah, so there are some smaller differences. 1557 01:18:43,390 --> 01:18:45,540 A lot of the big ideas in web programming 1558 01:18:45,540 --> 01:18:48,630 haven't changed all that much in the last two years. 1559 01:18:48,630 --> 01:18:52,470 A lot of the same ideas about requests and responses and views 1560 01:18:52,470 --> 01:18:56,160 and the separation of controller code from the model, from the template, 1561 01:18:56,160 --> 01:18:58,380 a lot of that has remained very similar. 1562 01:18:58,380 --> 01:19:02,340 So a lot of the core material of the course has remained very similar. 1563 01:19:02,340 --> 01:19:05,250 But we've made these adjustments in terms 1564 01:19:05,250 --> 01:19:09,242 of what we focus on to allow ourselves to go a little bit deeper into things. 1565 01:19:09,242 --> 01:19:11,700 And the big place where things have changed, in my opinion, 1566 01:19:11,700 --> 01:19:14,460 is also the projects, which I'll talk a little bit more 1567 01:19:14,460 --> 01:19:18,210 about after we get through the syllabus of the materials. 1568 01:19:18,210 --> 01:19:21,540 Because we really found with the projects 1569 01:19:21,540 --> 01:19:26,490 that students wanted to better understand 1570 01:19:26,490 --> 01:19:30,090 how the web applications that they interacted with work. 1571 01:19:30,090 --> 01:19:34,440 That I got a lot of questions, people coming to office hours and asking how 1572 01:19:34,440 --> 01:19:36,600 does Amazon's website work? 1573 01:19:36,600 --> 01:19:37,860 How does eBay's website work? 1574 01:19:37,860 --> 01:19:39,420 How does Google's website work? 1575 01:19:39,420 --> 01:19:41,730 And so using the projects as an opportunity 1576 01:19:41,730 --> 01:19:46,020 to apply the lecture topics to the types of applications 1577 01:19:46,020 --> 01:19:49,730 that students are seeing everyday was one of the big goals of the project. 1578 01:19:49,730 --> 01:19:53,640 So each of the projects is inspired by a popular web 1579 01:19:53,640 --> 01:19:56,260 application that's already out there. 1580 01:19:56,260 --> 01:19:56,760 Joe? 1581 01:19:56,760 --> 01:19:57,730 Go ahead. 1582 01:19:57,730 --> 01:19:58,230 JOE: Yes. 1583 01:19:58,230 --> 01:20:04,890 So does Django support anything besides web development 1584 01:20:04,890 --> 01:20:06,130 like, building a new website? 1585 01:20:06,130 --> 01:20:08,700 Can you use it to do automation? 1586 01:20:08,700 --> 01:20:13,710 Or just take an existing website, build additional functionality, for example? 1587 01:20:13,710 --> 01:20:16,320 1588 01:20:16,320 --> 01:20:19,560 BRIAN YU: I mean, Django is a web application framework. 1589 01:20:19,560 --> 01:20:24,390 So you could add, potentially, one app that is a small piece of a larger web 1590 01:20:24,390 --> 01:20:26,070 application separately using Django. 1591 01:20:26,070 --> 01:20:27,960 That's certainly a possible thing you can do. 1592 01:20:27,960 --> 01:20:30,360 We don't talk specifically about that in the class. 1593 01:20:30,360 --> 01:20:32,388 But it's an option available. 1594 01:20:32,388 --> 01:20:34,905 1595 01:20:34,905 --> 01:20:36,280 And I see a question in the chat. 1596 01:20:36,280 --> 01:20:39,880 Does Django support scaffold like Ruby On Rails? 1597 01:20:39,880 --> 01:20:43,150 If you mean that in the sense of creating the structure 1598 01:20:43,150 --> 01:20:45,800 for the beginning of the project, yes. 1599 01:20:45,800 --> 01:20:49,750 There is a command in Django called start project that will basically 1600 01:20:49,750 --> 01:20:52,720 create, will automatically generate all of the files 1601 01:20:52,720 --> 01:20:55,870 that you need to start working on the Django project. 1602 01:20:55,870 --> 01:20:58,330 And then you can just add to that all of the details 1603 01:20:58,330 --> 01:21:01,277 that you want to add for your particular application. 1604 01:21:01,277 --> 01:21:05,390 1605 01:21:05,390 --> 01:21:08,560 All right, so we introduce students to programming in Python with Django, 1606 01:21:08,560 --> 01:21:10,930 then in JavaScript for the front end. 1607 01:21:10,930 --> 01:21:13,390 The last part of the course focuses on some 1608 01:21:13,390 --> 01:21:16,840 of the best practices for developing web applications 1609 01:21:16,840 --> 01:21:21,620 and for thinking about how they scale and how we make them secure. 1610 01:21:21,620 --> 01:21:24,580 So we talk first about things like testing, so different ways 1611 01:21:24,580 --> 01:21:26,140 that you can test your code. 1612 01:21:26,140 --> 01:21:28,420 There is unittest, which is a Python framework 1613 01:21:28,420 --> 01:21:31,510 that you can use to automatically test individual functions. 1614 01:21:31,510 --> 01:21:34,390 That if you want to test small components of your code, 1615 01:21:34,390 --> 01:21:36,700 unittest is quite good for that. 1616 01:21:36,700 --> 01:21:39,580 Django has a bunch of built-in testing features 1617 01:21:39,580 --> 01:21:43,290 that make it easy for testing your Django application. 1618 01:21:43,290 --> 01:21:45,040 And this is especially helpful when you're 1619 01:21:45,040 --> 01:21:49,100 dealing with applications that work with big databases, for example. 1620 01:21:49,100 --> 01:21:52,960 That if you have an application and you want to test the ways 1621 01:21:52,960 --> 01:21:55,630 you interact with the database, Django's testing framework 1622 01:21:55,630 --> 01:21:59,650 will automatically create a fresh database just for your tests 1623 01:21:59,650 --> 01:22:03,190 so that you can run a whole bunch of tests on that testing database 1624 01:22:03,190 --> 01:22:06,080 without affecting your actual database, for example, 1625 01:22:06,080 --> 01:22:08,830 which happens to be quite nice. 1626 01:22:08,830 --> 01:22:10,810 And then Selenium is an example of a tool 1627 01:22:10,810 --> 01:22:12,980 that's used for browser-based testing. 1628 01:22:12,980 --> 01:22:16,780 That if you want to test users' interaction with a web page 1629 01:22:16,780 --> 01:22:20,440 as by checking what happens when a user clicks on something on a page, 1630 01:22:20,440 --> 01:22:23,650 for example, Selenium happens to be really great for that. 1631 01:22:23,650 --> 01:22:27,823 1632 01:22:27,823 --> 01:22:29,740 Automation with Selenium, someone's mentioning 1633 01:22:29,740 --> 01:22:31,510 in the chat-- it's very, very cool. 1634 01:22:31,510 --> 01:22:34,640 You basically just watch your computer take over the testing. 1635 01:22:34,640 --> 01:22:37,700 And you can see in the browser exactly what's being tested. 1636 01:22:37,700 --> 01:22:40,270 So it's a lot of fun to see and useful for being 1637 01:22:40,270 --> 01:22:43,360 able to test how user interaction works. 1638 01:22:43,360 --> 01:22:47,050 We then talk to students a little bit about continuous integration 1639 01:22:47,050 --> 01:22:50,740 and continuous delivery, which are tools that are commonly-- 1640 01:22:50,740 --> 01:22:55,600 patterns of work that are commonly used for making sure that code is always 1641 01:22:55,600 --> 01:22:56,870 being integrated together. 1642 01:22:56,870 --> 01:22:58,340 It's always being tested. 1643 01:22:58,340 --> 01:23:02,170 Making sure that you're able to deploy small changes to code 1644 01:23:02,170 --> 01:23:04,600 instead of waiting months or years before you 1645 01:23:04,600 --> 01:23:06,430 release big versions of code. 1646 01:23:06,430 --> 01:23:08,230 That especially with web applications, it's 1647 01:23:08,230 --> 01:23:11,830 fairly easy to set it up such that you fix a bug and now 1648 01:23:11,830 --> 01:23:13,630 immediately that bug fix is deployed. 1649 01:23:13,630 --> 01:23:16,030 You don't have to wait for the next release cycle, 1650 01:23:16,030 --> 01:23:20,090 for example, before that change takes effect. 1651 01:23:20,090 --> 01:23:23,910 And there are a number of tools out there for doing CI/CD types of things. 1652 01:23:23,910 --> 01:23:27,930 In the 2018 version of the course, we spent 1653 01:23:27,930 --> 01:23:30,430 a fair amount of time talking about Travis, one of the tools 1654 01:23:30,430 --> 01:23:31,690 for doing that. 1655 01:23:31,690 --> 01:23:34,960 In the in between years, GitHub has released its own tool 1656 01:23:34,960 --> 01:23:37,392 for doing this kind of thing called GitHub Actions. 1657 01:23:37,392 --> 01:23:39,850 So that's what we show the students now, so that everything 1658 01:23:39,850 --> 01:23:42,550 stays right inside of GitHub as the tool for being 1659 01:23:42,550 --> 01:23:44,290 able to do this kind of thing. 1660 01:23:44,290 --> 01:23:47,050 And then, in answer to one of the questions from earlier before, 1661 01:23:47,050 --> 01:23:48,820 we also talk about Docker as well. 1662 01:23:48,820 --> 01:23:53,380 And Docker is a way of effectively creating containers 1663 01:23:53,380 --> 01:23:57,010 in this context in which your web application is going to run. 1664 01:23:57,010 --> 01:24:00,880 And those containers have pre-installed software, pre-installed packages. 1665 01:24:00,880 --> 01:24:04,030 And the advantage here is that you can guarantee a consistency 1666 01:24:04,030 --> 01:24:04,960 across environments. 1667 01:24:04,960 --> 01:24:10,692 That you can test your code inside of a Docker container on your own computer, 1668 01:24:10,692 --> 01:24:12,400 and then you can run your web application 1669 01:24:12,400 --> 01:24:18,520 in a Docker container that's based off of what's called a Docker image. 1670 01:24:18,520 --> 01:24:23,050 Such that students can make sure that when the web application is running 1671 01:24:23,050 --> 01:24:26,200 on the server, it's going to be using the same environment, same version 1672 01:24:26,200 --> 01:24:31,810 of all the software as the version that's running on their own computer. 1673 01:24:31,810 --> 01:24:35,260 Why isn't Travis featured in the new version of the course? 1674 01:24:35,260 --> 01:24:37,780 In particular, we just wanted to pick one tool 1675 01:24:37,780 --> 01:24:43,030 to show to students for what types of CI and automated testing we could use. 1676 01:24:43,030 --> 01:24:45,940 In 2018, the tool we used was Travis. 1677 01:24:45,940 --> 01:24:50,710 Travis is certainly still a popular tool that's very much used in the CI world. 1678 01:24:50,710 --> 01:24:53,500 But we decided just to stick with GitHub Actions so 1679 01:24:53,500 --> 01:24:56,380 as not to introduce yet another service that students 1680 01:24:56,380 --> 01:24:57,730 would have to sign up for. 1681 01:24:57,730 --> 01:25:00,040 So that students who already have GitHub accounts 1682 01:25:00,040 --> 01:25:03,850 can just use GitHub Actions to be able to do that kind of work. 1683 01:25:03,850 --> 01:25:08,140 But a lot of the CI tools will behave in similar ways, such 1684 01:25:08,140 --> 01:25:10,100 that you could do the same sorts of things. 1685 01:25:10,100 --> 01:25:14,560 And Travis CI, or Circle CI, or a number of other of these types of services do. 1686 01:25:14,560 --> 01:25:18,330 1687 01:25:18,330 --> 01:25:20,850 And then finally, the last topic we talk about with students 1688 01:25:20,850 --> 01:25:22,590 is scalability and security. 1689 01:25:22,590 --> 01:25:24,690 So thinking about as students' applications 1690 01:25:24,690 --> 01:25:27,510 grow bigger, what are the types of things they have to think about. 1691 01:25:27,510 --> 01:25:30,170 And even if they're not the person writing the web application, 1692 01:25:30,170 --> 01:25:32,700 if they're the person managing the web application, what 1693 01:25:32,700 --> 01:25:35,970 do you need to think about as more users start to use the application? 1694 01:25:35,970 --> 01:25:37,650 What vulnerabilities come up? 1695 01:25:37,650 --> 01:25:40,440 So a lot of these are topics that we also 1696 01:25:40,440 --> 01:25:44,280 talk about in classes like CS50B or CS50T or CS50L, 1697 01:25:44,280 --> 01:25:46,440 if you were at Monday's session with David. 1698 01:25:46,440 --> 01:25:49,500 But these are things like scaling your database, so vertical scaling, 1699 01:25:49,500 --> 01:25:52,410 taking a server and just using a bigger server in order 1700 01:25:52,410 --> 01:25:54,510 to be able to handle more users. 1701 01:25:54,510 --> 01:25:57,390 Or things like horizontal scaling, where you have a server, 1702 01:25:57,390 --> 01:25:59,475 and instead, you just add multiple servers. 1703 01:25:59,475 --> 01:26:01,350 So we ask students questions like, all right, 1704 01:26:01,350 --> 01:26:04,740 when you add multiple servers, what do you then need to do? 1705 01:26:04,740 --> 01:26:09,000 Well, now you need to have some sort of load balancer 1706 01:26:09,000 --> 01:26:11,910 that's balancing between both of these servers, 1707 01:26:11,910 --> 01:26:15,878 and put some users to one server and some users to another server. 1708 01:26:15,878 --> 01:26:17,670 And you have to answer questions, questions 1709 01:26:17,670 --> 01:26:20,280 like how do you decide which server to send to a user 1710 01:26:20,280 --> 01:26:24,450 to in a way that's consistent and in a way that's going to try and balance 1711 01:26:24,450 --> 01:26:26,190 between them as well. 1712 01:26:26,190 --> 01:26:29,100 And so those are the questions that we start to answer and look 1713 01:26:29,100 --> 01:26:32,340 at in this part of the class. 1714 01:26:32,340 --> 01:26:33,735 We talk about autoscaling. 1715 01:26:33,735 --> 01:26:36,610 So what might happen is your application is growing bigger and bigger 1716 01:26:36,610 --> 01:26:39,930 and you have more users of certain types of times of day than others. 1717 01:26:39,930 --> 01:26:42,510 You can have your application automatically scale up, 1718 01:26:42,510 --> 01:26:45,130 automatically add more servers. 1719 01:26:45,130 --> 01:26:47,807 And in addition to scaling up your web server, 1720 01:26:47,807 --> 01:26:49,390 you might also scale up your database. 1721 01:26:49,390 --> 01:26:53,130 If one database isn't enough, you might have multiple databases. 1722 01:26:53,130 --> 01:26:56,490 But then the question is how is it that you keep these databases in sync? 1723 01:26:56,490 --> 01:26:58,710 If you've replicated all these databases, 1724 01:26:58,710 --> 01:27:01,530 you need some way of having one of these databases 1725 01:27:01,530 --> 01:27:04,140 tell the other databases about any changes that 1726 01:27:04,140 --> 01:27:06,180 have been made, for example. 1727 01:27:06,180 --> 01:27:09,540 So we talk about a couple of models that can be used for that as well 1728 01:27:09,540 --> 01:27:13,120 to be sure to keep databases in sync. 1729 01:27:13,120 --> 01:27:15,170 And we talk about caching data, so that we 1730 01:27:15,170 --> 01:27:19,700 have some version that is faster to access which is very helpful as more 1731 01:27:19,700 --> 01:27:23,240 users start to use the application and things start to take a little bit more 1732 01:27:23,240 --> 01:27:24,770 time. 1733 01:27:24,770 --> 01:27:27,410 And we talk about the security problems that might come up 1734 01:27:27,410 --> 01:27:29,680 as you use an application. 1735 01:27:29,680 --> 01:27:32,800 So some of those are things like phishing, where one URL might 1736 01:27:32,800 --> 01:27:34,310 think you're going to one place. 1737 01:27:34,310 --> 01:27:36,393 You might think you're being taken to one website. 1738 01:27:36,393 --> 01:27:39,600 But you're actually being taken somewhere else. 1739 01:27:39,600 --> 01:27:41,610 We talk about public key cryptography, which 1740 01:27:41,610 --> 01:27:45,390 is at the heart of how secure communication over the internet works. 1741 01:27:45,390 --> 01:27:48,660 How is it that two computers, who have never talked to each other before, 1742 01:27:48,660 --> 01:27:51,000 can send a secret message over the internet 1743 01:27:51,000 --> 01:27:54,970 without anyone in between being able to intercept it? 1744 01:27:54,970 --> 01:27:57,970 We talk about hashing, how to store data in such a way 1745 01:27:57,970 --> 01:28:00,010 that we're not storing literal passwords, 1746 01:28:00,010 --> 01:28:03,250 but we're storing, ideally, hashed versions of those passwords 1747 01:28:03,250 --> 01:28:06,790 so that if there's ever a breach on the database or someone gets access 1748 01:28:06,790 --> 01:28:11,910 to the database, no one's able to actually see what those passwords are. 1749 01:28:11,910 --> 01:28:13,810 And we talk about other security concerns 1750 01:28:13,810 --> 01:28:19,780 as well, things like cross-site request forgery, which is a potential security 1751 01:28:19,780 --> 01:28:22,930 vulnerability that might happen where someone might be tricked 1752 01:28:22,930 --> 01:28:26,140 into sending a request to some website when they didn't intend to, 1753 01:28:26,140 --> 01:28:28,740 for example. 1754 01:28:28,740 --> 01:28:31,590 So questions then about anything in the syllabus? 1755 01:28:31,590 --> 01:28:35,060 1756 01:28:35,060 --> 01:28:36,400 [INAUDIBLE], yeah, go ahead. 1757 01:28:36,400 --> 01:28:36,983 SPEAKER 5: OK. 1758 01:28:36,983 --> 01:28:38,870 Thank you very much, Brian. 1759 01:28:38,870 --> 01:28:40,110 I have two questions. 1760 01:28:40,110 --> 01:28:43,580 The first one is which programming language offers the best tools 1761 01:28:43,580 --> 01:28:47,650 to transpose a project to another language for any different reason? 1762 01:28:47,650 --> 01:28:50,275 BRIAN YU: I'm not sure I understand exactly what you're asking. 1763 01:28:50,275 --> 01:28:53,210 Like, if you're translating on that project from one language to another? 1764 01:28:53,210 --> 01:28:55,085 SPEAKER 5: Translate, transpose, for example, 1765 01:28:55,085 --> 01:29:00,190 I have developed the project in JavaScript or in React. 1766 01:29:00,190 --> 01:29:06,020 And I want to use to another project or to another web developing prior, 1767 01:29:06,020 --> 01:29:08,660 but not in Java, but in another language. 1768 01:29:08,660 --> 01:29:12,590 And so which from them offers the best tool 1769 01:29:12,590 --> 01:29:17,090 that I can transpose it to another language, just from Java to React, 1770 01:29:17,090 --> 01:29:19,795 from React to next one? 1771 01:29:19,795 --> 01:29:20,420 BRIAN YU: Yeah. 1772 01:29:20,420 --> 01:29:25,630 So I don't know if there is a best tool that's objectively the best. 1773 01:29:25,630 --> 01:29:28,270 What I will say about tools like React, and this is also 1774 01:29:28,270 --> 01:29:31,570 true of Angular and a lot of the other libraries, 1775 01:29:31,570 --> 01:29:36,000 is that they're designed to allow you to build your entire application in React 1776 01:29:36,000 --> 01:29:41,290 if you want to, or only to build a small portion of your application in React. 1777 01:29:41,290 --> 01:29:44,830 And so a lot of web applications that transition to React 1778 01:29:44,830 --> 01:29:46,490 will do so little by little. 1779 01:29:46,490 --> 01:29:53,200 So that they'll start by just replacing one page or one part of one page 1780 01:29:53,200 --> 01:29:54,550 with a React component. 1781 01:29:54,550 --> 01:29:58,660 And then over time, start to build more and more React into the website, 1782 01:29:58,660 --> 01:30:00,970 replacing more and more of the existing code. 1783 01:30:00,970 --> 01:30:04,560 And that's a nice way of transitioning an existing project to React. 1784 01:30:04,560 --> 01:30:07,750 It's not an all or nothing, like the whole website must be React 1785 01:30:07,750 --> 01:30:09,380 or it is not. 1786 01:30:09,380 --> 01:30:13,480 React in a lot of similar frameworks will let you move things over slowly. 1787 01:30:13,480 --> 01:30:15,820 And some of the components we show in the lecture, 1788 01:30:15,820 --> 01:30:17,355 we'll talk about that, too. 1789 01:30:17,355 --> 01:30:18,230 SPEAKER 5: Thank you. 1790 01:30:18,230 --> 01:30:21,580 And the second, which offers the most suitable tools 1791 01:30:21,580 --> 01:30:27,640 to guarantee, or for configuring, or offering a high level of security? 1792 01:30:27,640 --> 01:30:29,710 BRIAN YU: For security, I think it's largely 1793 01:30:29,710 --> 01:30:33,250 going to depend on what framework you're using. 1794 01:30:33,250 --> 01:30:37,670 A lot of times the web framework itself is going to build in security tools. 1795 01:30:37,670 --> 01:30:40,630 So for example with Python and Django, Django 1796 01:30:40,630 --> 01:30:43,480 has built in cross-site request forgery protection. 1797 01:30:43,480 --> 01:30:46,210 So you don't need to write any of your own code 1798 01:30:46,210 --> 01:30:48,850 to be able to protect against this kind of vulnerability 1799 01:30:48,850 --> 01:30:51,580 because Django already has written the code that 1800 01:30:51,580 --> 01:30:53,560 is looking for this kind of vulnerability 1801 01:30:53,560 --> 01:30:55,340 and is trying to safeguard you against it. 1802 01:30:55,340 --> 01:30:58,090 So I think it's, in large part, going to depend on the frameworks. 1803 01:30:58,090 --> 01:31:00,820 Django is known for being a fairly secure framework. 1804 01:31:00,820 --> 01:31:04,180 But there are definitely other secure web frameworks that are out there. 1805 01:31:04,180 --> 01:31:06,220 Certainly, no framework is perfect. 1806 01:31:06,220 --> 01:31:08,410 There are always bugs that people are working on. 1807 01:31:08,410 --> 01:31:11,800 SPEAKER 5: In general, regarding confidentiality, availability, 1808 01:31:11,800 --> 01:31:14,265 and integrity? 1809 01:31:14,265 --> 01:31:14,890 BRIAN YU: Yeah. 1810 01:31:14,890 --> 01:31:17,700 Again, I think I don't want to definitively say 1811 01:31:17,700 --> 01:31:21,810 there is a single best framework for all of everything. 1812 01:31:21,810 --> 01:31:28,410 But I think a lot of the modern popular web frameworks, things like Express.js 1813 01:31:28,410 --> 01:31:33,450 for doing things in Node or Django for Python, they've given a lot of thought 1814 01:31:33,450 --> 01:31:34,110 to security. 1815 01:31:34,110 --> 01:31:37,260 And while they might not be perfect, certainly they handle a lot of things 1816 01:31:37,260 --> 01:31:41,117 that a user building a web application from scratch might forget about. 1817 01:31:41,117 --> 01:31:41,700 SPEAKER 5: OK. 1818 01:31:41,700 --> 01:31:43,210 Thank you very much. 1819 01:31:43,210 --> 01:31:44,618 BRIAN YU: Yeah, of course. 1820 01:31:44,618 --> 01:31:46,410 We do talk about cross-site scripting, too. 1821 01:31:46,410 --> 01:31:47,702 I didn't have a slide about it. 1822 01:31:47,702 --> 01:31:48,720 It came up in the chat. 1823 01:31:48,720 --> 01:31:52,620 Cross-site scripting is a way of sort of injecting JavaScript code 1824 01:31:52,620 --> 01:31:56,880 into the user's browser and getting them to run code they didn't mean to run. 1825 01:31:56,880 --> 01:31:59,390 But that is something we talk about, too. 1826 01:31:59,390 --> 01:32:00,557 Ramon, go ahead. 1827 01:32:00,557 --> 01:32:01,140 SPEAKER 4: OK. 1828 01:32:01,140 --> 01:32:06,840 So yesterday, Colton, he was talking about a game development course. 1829 01:32:06,840 --> 01:32:11,190 And he said that the number one rule or principle in game development 1830 01:32:11,190 --> 01:32:15,840 means to create your game in such a way that it gives the player the perception 1831 01:32:15,840 --> 01:32:21,180 that there is more to that virtual world than there really is. 1832 01:32:21,180 --> 01:32:27,210 I would like to ask you what is the rule or principle in your opinion for web 1833 01:32:27,210 --> 01:32:32,550 development that the instructor should have in mind when delivering the course 1834 01:32:32,550 --> 01:32:36,530 and also the developers should have in mind? 1835 01:32:36,530 --> 01:32:38,080 BRIAN YU: It's a good question. 1836 01:32:38,080 --> 01:32:40,582 So yeah, it is a common mantra in game development, 1837 01:32:40,582 --> 01:32:43,290 which is, like, every game is an illusion or something like that. 1838 01:32:43,290 --> 01:32:47,130 Where the things you don't see are oftentimes not there at all, 1839 01:32:47,130 --> 01:32:48,650 for instance. 1840 01:32:48,650 --> 01:32:53,250 I don't have a quippy, one sentence mantra for web programming. 1841 01:32:53,250 --> 01:32:56,160 But what I would say is a big theme of the course 1842 01:32:56,160 --> 01:33:02,430 is thinking about a web application is not just a single big thing. 1843 01:33:02,430 --> 01:33:05,500 It is composed of many different pieces. 1844 01:33:05,500 --> 01:33:08,490 And so a big part of what web application development is about 1845 01:33:08,490 --> 01:33:12,480 is A, deciding what pieces are going to be in your web application, 1846 01:33:12,480 --> 01:33:15,690 do you need a database, do you need a cache, what is your web server like, 1847 01:33:15,690 --> 01:33:17,970 what are the pieces on the front end, for example. 1848 01:33:17,970 --> 01:33:21,220 And then, how do those pieces communicate with each other? 1849 01:33:21,220 --> 01:33:24,450 How does the front end use an API, for example, to talk to the backend? 1850 01:33:24,450 --> 01:33:26,340 How is the backend talking to the database? 1851 01:33:26,340 --> 01:33:27,600 Is it using SQL queries? 1852 01:33:27,600 --> 01:33:29,490 Are we using an ORM? 1853 01:33:29,490 --> 01:33:31,870 What is the means of communication there? 1854 01:33:31,870 --> 01:33:34,980 So if I had to boil down this course into a theme, the theme of the course 1855 01:33:34,980 --> 01:33:38,550 is understanding what the pieces of a web application are 1856 01:33:38,550 --> 01:33:41,220 and understanding how those pieces communicate with each other. 1857 01:33:41,220 --> 01:33:43,990 1858 01:33:43,990 --> 01:33:45,540 Joe, go ahead. 1859 01:33:45,540 --> 01:33:48,200 JOE: Quick question about your Python skills, 1860 01:33:48,200 --> 01:33:55,070 how did you get from basic CS50X Intro to Python to, 1861 01:33:55,070 --> 01:33:58,580 I don't know how you would describe your level, but I'd say advanced level? 1862 01:33:58,580 --> 01:33:59,450 Look at books? 1863 01:33:59,450 --> 01:34:03,260 Or did you take different courses? 1864 01:34:03,260 --> 01:34:05,210 BRIAN YU: I definitely took other courses. 1865 01:34:05,210 --> 01:34:08,690 So CS50 was sort of the first class, computer science class at Harvard 1866 01:34:08,690 --> 01:34:09,210 that I took. 1867 01:34:09,210 --> 01:34:12,410 And I took other computer science courses later, some of which 1868 01:34:12,410 --> 01:34:14,180 spent some time in Python. 1869 01:34:14,180 --> 01:34:18,530 But I think in large part it was from learning on my own 1870 01:34:18,530 --> 01:34:20,210 through creating my own projects. 1871 01:34:20,210 --> 01:34:23,730 That I would have a project I was interested in working on. 1872 01:34:23,730 --> 01:34:26,970 And then, in the process of working on that project, 1873 01:34:26,970 --> 01:34:30,860 I would be forced to learn the necessary Python skills I needed in order 1874 01:34:30,860 --> 01:34:32,737 to work on that project. 1875 01:34:32,737 --> 01:34:34,820 And I think that's a good way to learn a language, 1876 01:34:34,820 --> 01:34:39,020 is not to learn the language in a vacuum and just learn all the syntax at once. 1877 01:34:39,020 --> 01:34:43,300 But to try to build something, and in the process of building, 1878 01:34:43,300 --> 01:34:47,260 realize what you'll need to add in order to do so, 1879 01:34:47,260 --> 01:34:49,010 what skills you'll need to learn, and what 1880 01:34:49,010 --> 01:34:54,400 syntax you'll need to learn in order to get that experience. 1881 01:34:54,400 --> 01:34:56,090 So that's personally what worked for me. 1882 01:34:56,090 --> 01:34:57,572 But I think it's going to vary. 1883 01:34:57,572 --> 01:34:59,530 I'll talk about projects in a moment, Charlene. 1884 01:34:59,530 --> 01:35:02,890 I'll just briefly show you what the projects are and what they're based on. 1885 01:35:02,890 --> 01:35:07,330 How is Heroku different from hosting from something like GoDaddy, 1886 01:35:07,330 --> 01:35:09,440 for example? 1887 01:35:09,440 --> 01:35:15,610 So GoDaddy is an example of a domain name provider. 1888 01:35:15,610 --> 01:35:19,990 It's primarily used if you want something.com or something.net, 1889 01:35:19,990 --> 01:35:21,115 if you want a domain name. 1890 01:35:21,115 --> 01:35:22,990 And there are a whole bunch of providers that 1891 01:35:22,990 --> 01:35:25,060 will sell you domain names, that usually you 1892 01:35:25,060 --> 01:35:29,110 have to pay for, for a certain price every year, for example. 1893 01:35:29,110 --> 01:35:31,870 Hosting the website is separate from that. 1894 01:35:31,870 --> 01:35:33,910 Once you have the domain name, you then need 1895 01:35:33,910 --> 01:35:37,300 to connect that domain to the actual server that 1896 01:35:37,300 --> 01:35:39,560 is hosting the application itself. 1897 01:35:39,560 --> 01:35:43,210 And so Heroku and GoDaddy are not mutually exclusive tools. 1898 01:35:43,210 --> 01:35:45,730 In fact, if you purchase a domain with GoDaddy, 1899 01:35:45,730 --> 01:35:48,460 you can connect it to your application on Heroku. 1900 01:35:48,460 --> 01:35:50,560 Such that when you go to the domain name that you 1901 01:35:50,560 --> 01:35:53,320 bought on GoDaddy or some other domain name provider, 1902 01:35:53,320 --> 01:35:55,990 you'll be taken to your Heroku web application. 1903 01:35:55,990 --> 01:35:58,270 So you can definitely use that, too. 1904 01:35:58,270 --> 01:36:00,498 1905 01:36:00,498 --> 01:36:03,290 Just to briefly talk about the projects, because a couple of people 1906 01:36:03,290 --> 01:36:05,090 have asked about the projects. 1907 01:36:05,090 --> 01:36:08,537 Each one is based on an existing web application. 1908 01:36:08,537 --> 01:36:11,120 We ask students to think about how that application might work 1909 01:36:11,120 --> 01:36:12,770 and how they not recreate it. 1910 01:36:12,770 --> 01:36:16,490 So first with just HTML and CSS, we ask students 1911 01:36:16,490 --> 01:36:19,760 to reimplement Google, reimplementing things like Google Search and Google 1912 01:36:19,760 --> 01:36:22,400 Image Search and even the Advanced Search that lets you 1913 01:36:22,400 --> 01:36:24,170 search for various different fields. 1914 01:36:24,170 --> 01:36:27,710 Because all this is really some CSS to center everything, 1915 01:36:27,710 --> 01:36:31,820 some HTML to describe the structure of the page, and then some HTML forms, 1916 01:36:31,820 --> 01:36:33,800 to be able to submit them. 1917 01:36:33,800 --> 01:36:38,270 Once we introduce students to Django, we have students build, effectively, 1918 01:36:38,270 --> 01:36:42,800 their own version of Wikipedia that lets them create pages, edit those pages, 1919 01:36:42,800 --> 01:36:45,590 generate, look at random pages, for example. 1920 01:36:45,590 --> 01:36:48,620 And this is just an experiment with different views 1921 01:36:48,620 --> 01:36:51,320 and being able to render different views and creating 1922 01:36:51,320 --> 01:36:54,030 places where people can type text into those views, 1923 01:36:54,030 --> 01:36:57,110 for example, creating forms within Django. 1924 01:36:57,110 --> 01:36:59,930 Once we introduce students to databases in Django, 1925 01:36:59,930 --> 01:37:02,270 we then have students implement an e-commerce site, 1926 01:37:02,270 --> 01:37:06,110 something equivalent to something like eBay or Amazon, for example. 1927 01:37:06,110 --> 01:37:08,270 eBay in particular being, like, an auction site 1928 01:37:08,270 --> 01:37:11,360 where students can create listings for products 1929 01:37:11,360 --> 01:37:14,790 they want to sell and then let people bid on those individual listings. 1930 01:37:14,790 --> 01:37:17,770 And you have to update your database with all of the latest listings 1931 01:37:17,770 --> 01:37:19,520 and what the latest price is, and you have 1932 01:37:19,520 --> 01:37:21,710 to calculate who the highest bidder is. 1933 01:37:21,710 --> 01:37:25,610 And all of this is using Python code that's interacting with the database 1934 01:37:25,610 --> 01:37:28,100 and then displaying it to the user. 1935 01:37:28,100 --> 01:37:31,490 Once we introduce students to JavaScript and building things on the front end, 1936 01:37:31,490 --> 01:37:35,150 we then introduce students to have them build their own mail client, something 1937 01:37:35,150 --> 01:37:36,888 like Gmail or Outlook, for example. 1938 01:37:36,888 --> 01:37:39,680 Where they're able to get new mail, they're able to click on things 1939 01:37:39,680 --> 01:37:40,790 and see new mail. 1940 01:37:40,790 --> 01:37:42,590 And this is all happening on one page. 1941 01:37:42,590 --> 01:37:45,530 Where it's not reloading new pages, it's JavaScript 1942 01:37:45,530 --> 01:37:49,970 manipulating the DOM to change what it is that the user is seeing. 1943 01:37:49,970 --> 01:37:52,700 And then finally, we have students put this all together 1944 01:37:52,700 --> 01:37:55,910 and build a big social networking website that basically is something 1945 01:37:55,910 --> 01:37:59,810 effectively kind of like Twitter or Facebook, where users can make posts, 1946 01:37:59,810 --> 01:38:03,130 they can comment on other posts, they can heart other posts, 1947 01:38:03,130 --> 01:38:06,200 they can follow other friends of theirs that are on the social networking 1948 01:38:06,200 --> 01:38:09,740 website as well, just to give students an idea for how all these pieces fit 1949 01:38:09,740 --> 01:38:10,553 together. 1950 01:38:10,553 --> 01:38:13,220 At the end, we have students create a final project of their own 1951 01:38:13,220 --> 01:38:17,270 that uses these features and more to create something of their own choosing. 1952 01:38:17,270 --> 01:38:21,080 But these are the projects that we have students work on, in particular, 1953 01:38:21,080 --> 01:38:24,590 to give students a sense for how you can use the tools learned in this class 1954 01:38:24,590 --> 01:38:27,470 and apply them to better understand or even create 1955 01:38:27,470 --> 01:38:31,600 the kinds of web applications that students interact with. 1956 01:38:31,600 --> 01:38:36,070 So these, then, are the topics we talk about in the web programming class. 1957 01:38:36,070 --> 01:38:39,220 We start with HTML, CSS, talk about Git. 1958 01:38:39,220 --> 01:38:43,990 We use Python to then introduce Django and use Django to introduce databases. 1959 01:38:43,990 --> 01:38:46,060 We use JavaScript to build front ends. 1960 01:38:46,060 --> 01:38:49,440 And then we talk about continuous integration and testing 1961 01:38:49,440 --> 01:38:51,190 and how you make sure your web application 1962 01:38:51,190 --> 01:38:54,940 can scale and hopefully can do so securely as well. 1963 01:38:54,940 --> 01:38:55,970 We are at 2 o'clock. 1964 01:38:55,970 --> 01:38:57,738 So we are just about wrapped up. 1965 01:38:57,738 --> 01:38:58,780 So thank you all so much. 1966 01:38:58,780 --> 01:39:02,200 And tomorrow we'll reconvene for the final session of this educator 1967 01:39:02,200 --> 01:39:05,530 workshop, where we'll be talking about our course on an introduction 1968 01:39:05,530 --> 01:39:07,120 to artificial intelligence. 1969 01:39:07,120 --> 01:39:08,410 So I hope to see you all then. 1970 01:39:08,410 --> 01:39:10,160 And enjoy the rest of your day. 1971 01:39:10,160 --> 01:39:12,120 Thanks, everyone.