1 00:00:00,000 --> 00:00:00,040 2 00:00:00,040 --> 00:00:01,240 DAVID MALAN: We're back and today we'll end 3 00:00:01,240 --> 00:00:02,770 with a little bit of web development. 4 00:00:02,770 --> 00:00:04,120 So based on everyone's experience, sounds 5 00:00:04,120 --> 00:00:06,200 like some folks have a little bit of experience with this. 6 00:00:06,200 --> 00:00:09,040 So we'll try to fill it in some gaps and go in any number of directions 7 00:00:09,040 --> 00:00:09,873 that you might like. 8 00:00:09,873 --> 00:00:15,080 But ultimately give you a sense of exactly the next layering on top 9 00:00:15,080 --> 00:00:18,310 of platform-as-a-service, infrastructure-as-a-service, 10 00:00:18,310 --> 00:00:20,560 platform-as-a-service, and now software-as-a-service. 11 00:00:20,560 --> 00:00:22,510 So a very common thing for engineers to use 12 00:00:22,510 --> 00:00:25,649 is an IDE, integrated development environment. 13 00:00:25,649 --> 00:00:27,940 This is a piece of software with which they write code. 14 00:00:27,940 --> 00:00:30,220 Now, technically speaking, as we'll see tomorrow, 15 00:00:30,220 --> 00:00:32,740 you don't need anything more than Notepad or TextEdit 16 00:00:32,740 --> 00:00:33,850 to actually write code. 17 00:00:33,850 --> 00:00:36,880 Because most every coding language these days is text-based. 18 00:00:36,880 --> 00:00:40,320 So all you need generally is a program with which to write it 19 00:00:40,320 --> 00:00:42,620 and then a program with which to run it. 20 00:00:42,620 --> 00:00:46,750 Cloud9 and in turn CS50 IDE, which is the web-based tool 21 00:00:46,750 --> 00:00:49,890 we use in the class I teach during the year, 22 00:00:49,890 --> 00:00:51,790 is a web-based programming environment that 23 00:00:51,790 --> 00:00:53,610 gives us all of the requisite tools that we 24 00:00:53,610 --> 00:00:55,660 might need for any number of languages. 25 00:00:55,660 --> 00:00:58,980 It also gives us a built-in web server, it will give us a built-in database 26 00:00:58,980 --> 00:01:00,855 server, although we won't use that today, 27 00:01:00,855 --> 00:01:02,980 and it gives us the ability to actually write code, 28 00:01:02,980 --> 00:01:04,890 all within the confines of a web browser. 29 00:01:04,890 --> 00:01:07,360 The alternative to this would be for me to write 30 00:01:07,360 --> 00:01:10,020 all of a whole bunch of instructions for how everyone here 31 00:01:10,020 --> 00:01:11,950 can install their own web server, whether it's 32 00:01:11,950 --> 00:01:14,542 Apache or IIS, on their own Mac or PC. 33 00:01:14,542 --> 00:01:17,500 And then we're going to run into different issues of Windows and Mac OS 34 00:01:17,500 --> 00:01:19,850 and all of the litany of headaches that might happen. 35 00:01:19,850 --> 00:01:24,310 With the web, now, we're just already up and running and ready to go. 36 00:01:24,310 --> 00:01:30,532 So what you'll see before you is a screen that looks like this. 37 00:01:30,532 --> 00:01:32,990 I've maximized mine, so you might just see a few more icons 38 00:01:32,990 --> 00:01:34,212 and buttons around the way. 39 00:01:34,212 --> 00:01:36,420 If you don't see this, call me over in just a moment. 40 00:01:36,420 --> 00:01:38,560 And let me orient you to what's going on here. 41 00:01:38,560 --> 00:01:44,810 So in the top left-hand corner is your so-called workspace or file browser. 42 00:01:44,810 --> 00:01:47,580 So as we start to create files, just like in Windows and Mac OS, 43 00:01:47,580 --> 00:01:49,720 they'll start to appear there on the left. 44 00:01:49,720 --> 00:01:52,680 In the top right, you'll see a window where 45 00:01:52,680 --> 00:01:54,740 we can actually write code ultimately. 46 00:01:54,740 --> 00:01:57,550 And I noticed some of you might have clicked and dragged 47 00:01:57,550 --> 00:02:00,490 and pulled something like this up, notice that the workspace windows 48 00:02:00,490 --> 00:02:03,190 can be moved like common software. 49 00:02:03,190 --> 00:02:07,530 But go ahead, and in the window above, see this little plus up here? 50 00:02:07,530 --> 00:02:08,850 Go ahead and click that. 51 00:02:08,850 --> 00:02:12,560 And you'll see at least two options, New File and New Terminal. 52 00:02:12,560 --> 00:02:17,990 Click New File and you'll get a little tab, like a typical editing program. 53 00:02:17,990 --> 00:02:20,450 And that's where we're going to write ultimately some code, 54 00:02:20,450 --> 00:02:22,000 but more on that in just a moment. 55 00:02:22,000 --> 00:02:25,540 In the bottom right-hand corner, where you ran update 50 a moment ago, 56 00:02:25,540 --> 00:02:27,990 update 50 is a command that we, for the course I teach, 57 00:02:27,990 --> 00:02:30,180 wrote that sort of automatically updates students 58 00:02:30,180 --> 00:02:32,700 workspaces to have the very latest versions of software. 59 00:02:32,700 --> 00:02:37,060 But even though this thing is positioned as CS50 IDE, at the end of the day, 60 00:02:37,060 --> 00:02:40,479 this is designed to be and is actually representative of a real world 61 00:02:40,479 --> 00:02:42,520 development environment complete with the ability 62 00:02:42,520 --> 00:02:45,040 to browse your file system or files and directories, 63 00:02:45,040 --> 00:02:47,580 complete with the ability to write code in multiple tabs, 64 00:02:47,580 --> 00:02:50,130 and complete with the ability to run your own server. 65 00:02:50,130 --> 00:02:53,570 Indeed, this blue window here is what's called a terminal window. 66 00:02:53,570 --> 00:02:57,090 And it's giving you command-line access-- text-based access 67 00:02:57,090 --> 00:02:59,720 to the underlying operating system, which in this case 68 00:02:59,720 --> 00:03:04,170 is Linux called Ubuntu 14.04, which is the version number, 69 00:03:04,170 --> 00:03:08,320 it's a very popular distribution of a free operating system called Ubuntu. 70 00:03:08,320 --> 00:03:12,030 Moreover, in this environment, you have what are called super user privileges. 71 00:03:12,030 --> 00:03:15,310 So you can write commands like sudo, which is substitute user do, 72 00:03:15,310 --> 00:03:18,030 and actually run commands as though you're administrator. 73 00:03:18,030 --> 00:03:21,260 We won't do that and try not to do that, lest we break things right now. 74 00:03:21,260 --> 00:03:24,580 But what's powerful about this is that it gives you and in turn students 75 00:03:24,580 --> 00:03:26,290 more generally the ability to do anything 76 00:03:26,290 --> 00:03:29,490 they want in a nice sort of sandbox environment 77 00:03:29,490 --> 00:03:30,940 that's nonetheless representative. 78 00:03:30,940 --> 00:03:35,350 Now you wouldn't typically use Cloud9 in this context with our free accounts 79 00:03:35,350 --> 00:03:37,240 to run your web server, because the way they 80 00:03:37,240 --> 00:03:40,810 achieve free accounts is that the service, when you're not using it, 81 00:03:40,810 --> 00:03:43,200 automatically turns off your container. 82 00:03:43,200 --> 00:03:45,810 What you have access to, here, is a container. 83 00:03:45,810 --> 00:03:48,220 So you couldn't run a website 24/7 on it, 84 00:03:48,220 --> 00:03:52,930 but you could if you actually paid for the sort of monthly plans as well. 85 00:03:52,930 --> 00:03:54,160 Thank you. 86 00:03:54,160 --> 00:03:58,440 So what are we now going to do with this? 87 00:03:58,440 --> 00:04:00,140 So we're not going to type this up here. 88 00:04:00,140 --> 00:04:03,670 Let me go ahead and propose the following. 89 00:04:03,670 --> 00:04:05,140 Go ahead and first do this. 90 00:04:05,140 --> 00:04:09,150 Back on your own computer's desktop, whether it's Mac OS or Windows, 91 00:04:09,150 --> 00:04:12,590 go ahead and open up TextEdit if you're on a Mac 92 00:04:12,590 --> 00:04:16,071 or open up Notepad.exe if you're on Windows. 93 00:04:16,071 --> 00:04:17,820 If you're not sure how to find those, just 94 00:04:17,820 --> 00:04:21,120 call me over or ask someone near you. 95 00:04:21,120 --> 00:04:23,450 But just the simplest stupidest text editing 96 00:04:23,450 --> 00:04:26,290 programs on both operating systems. 97 00:04:26,290 --> 00:04:30,400 And they're simple insofar as they really don't do all that much. 98 00:04:30,400 --> 00:04:33,930 Now just as an aside, odds are if you're using TextEdit on a Mac, 99 00:04:33,930 --> 00:04:36,050 it's actually not as simple as would be ideal. 100 00:04:36,050 --> 00:04:42,240 Odds are by default, you are seeing a window 101 00:04:42,240 --> 00:04:46,440 that looks like this with a whole font thing up top. 102 00:04:46,440 --> 00:04:50,520 This is bad, this is going to create not a simple text file for us. 103 00:04:50,520 --> 00:04:54,160 This is going to create RTF or rich rich text format, which 104 00:04:54,160 --> 00:04:55,600 is actually formatted text. 105 00:04:55,600 --> 00:05:04,330 So Mac users only, if you wouldn't mind going to TextEdit Preferences 106 00:05:04,330 --> 00:05:09,279 and then change the default format from Rich Text to Plain Text. 107 00:05:09,279 --> 00:05:11,820 Otherwise you'll be saving the file in the wrong file format. 108 00:05:11,820 --> 00:05:14,070 And we won't use this for very long it's meant to just 109 00:05:14,070 --> 00:05:16,490 be demonstrative of the relative simplicity with which we 110 00:05:16,490 --> 00:05:18,720 can start writing web pages. 111 00:05:18,720 --> 00:05:19,690 So what is a web page? 112 00:05:19,690 --> 00:05:23,212 A web page is written in a language called HTML, HyperText Markup Language. 113 00:05:23,212 --> 00:05:24,670 This is not a programming language. 114 00:05:24,670 --> 00:05:28,640 As you'll see tomorrow, you can't use HTML to make the computer do something. 115 00:05:28,640 --> 00:05:31,750 You can only use HTML to make the computer show something, really. 116 00:05:31,750 --> 00:05:35,200 And we'll see what distinguishes the two by tomorrow. 117 00:05:35,200 --> 00:05:39,330 And HTML is this markup language that works essentially as follows. 118 00:05:39,330 --> 00:05:42,890 This is perhaps the simplest web page that you could write. 119 00:05:42,890 --> 00:05:48,110 And by that I mean it has only the minimally required elements for a page. 120 00:05:48,110 --> 00:05:50,410 So this is a page that apparently is just 121 00:05:50,410 --> 00:05:52,320 going to tell the user hello, world. 122 00:05:52,320 --> 00:05:53,470 But how does it do that? 123 00:05:53,470 --> 00:05:57,952 Well, up top, there is just this declaration called the document type 124 00:05:57,952 --> 00:06:00,660 declaration that frankly you just kind of have to copy and paste. 125 00:06:00,660 --> 00:06:03,030 It's anomalous, it doesn't look like anything else exactly. 126 00:06:03,030 --> 00:06:05,300 So you just copy and paste this to the start of your document. 127 00:06:05,300 --> 00:06:08,830 And this signifies to the browser that's going to read this file top to bottom, 128 00:06:08,830 --> 00:06:12,590 left to right, hey browser, this is an HTML page 129 00:06:12,590 --> 00:06:14,890 written in version 5 of the language. 130 00:06:14,890 --> 00:06:18,070 That's just the symbol for 5, it's not as intuitive as would be ideal. 131 00:06:18,070 --> 00:06:22,510 But they're after-- what's nice about HTML, is everything follows a pattern. 132 00:06:22,510 --> 00:06:25,680 So you'll notice, and I'll point to this one as it's closer, 133 00:06:25,680 --> 00:06:28,670 notice the parallelism between open bracket, 134 00:06:28,670 --> 00:06:31,550 this is the angle bracket HTML close bracket, 135 00:06:31,550 --> 00:06:34,760 and then notice the opposite of it, so to speak here at the bottom. 136 00:06:34,760 --> 00:06:37,730 And by opposite I mean if this is an open tag or a start tag 137 00:06:37,730 --> 00:06:42,060 as we'll call it, this would be the close tag or the end tag here. 138 00:06:42,060 --> 00:06:45,690 Different only insofar as there are this forward slash 139 00:06:45,690 --> 00:06:47,980 in front of the same word HTML. 140 00:06:47,980 --> 00:06:52,399 Now, up here is a division of the page into two sections, the head of the page 141 00:06:52,399 --> 00:06:53,440 and the body of the page. 142 00:06:53,440 --> 00:06:55,860 These are the only two sections inside of a web page. 143 00:06:55,860 --> 00:06:58,300 The head is really just the top menu bar space 144 00:06:58,300 --> 00:07:01,800 and the body is 99% of the page, the so-called viewport. 145 00:07:01,800 --> 00:07:05,180 Big rectangular region where actual information is presented. 146 00:07:05,180 --> 00:07:10,060 The head of the page, open bracket head close bracket head, here, for now 147 00:07:10,060 --> 00:07:12,960 contains only one child element, a title element. 148 00:07:12,960 --> 00:07:16,270 And you might have guessed, this is how I specify what the title of my page 149 00:07:16,270 --> 00:07:19,320 should be in the menu bar or in the tab that you see on the page. 150 00:07:19,320 --> 00:07:21,430 Meanwhile, the body of the page is, again, 151 00:07:21,430 --> 00:07:24,100 the big rectangular region with which we're all familiar. 152 00:07:24,100 --> 00:07:28,060 The only words there are going to be apparently hello, world. 153 00:07:28,060 --> 00:07:31,560 So notice that this is kind of like a tree structure if you will. 154 00:07:31,560 --> 00:07:35,150 It's kind of like a family tree, whereby if the roots or the patriarch 155 00:07:35,150 --> 00:07:37,850 or matriarch of the family is this HTML element, 156 00:07:37,850 --> 00:07:40,170 everything else kind of descends from that. 157 00:07:40,170 --> 00:07:42,724 And we can see that. 158 00:07:42,724 --> 00:07:43,390 Can we see that? 159 00:07:43,390 --> 00:07:44,600 No, can't see that here. 160 00:07:44,600 --> 00:07:46,720 We can see that if I draw it. 161 00:07:46,720 --> 00:07:50,070 We can see that we have an HTML elements that I'll 162 00:07:50,070 --> 00:07:52,140 draw as the root of this family tree. 163 00:07:52,140 --> 00:07:54,370 It has two children so to speak. 164 00:07:54,370 --> 00:07:56,910 So it has the head on the left, because it came first. 165 00:07:56,910 --> 00:07:59,640 And the body on the right, because it came second. 166 00:07:59,640 --> 00:08:03,210 Then the head, meanwhile, has a title child. 167 00:08:03,210 --> 00:08:08,950 And then the title child has literally the words hello comma world. 168 00:08:08,950 --> 00:08:13,030 The body, now, has how many children? 169 00:08:13,030 --> 00:08:14,420 Seems like just one. 170 00:08:14,420 --> 00:08:16,970 So I'll draw it in quotes because it's different. 171 00:08:16,970 --> 00:08:20,110 Hello comma world. 172 00:08:20,110 --> 00:08:23,380 So I offer this just as kind of a different way of thinking about things. 173 00:08:23,380 --> 00:08:27,340 There's this whole hierarchy or tree structure to a web page. 174 00:08:27,340 --> 00:08:30,310 And that's why we have the nice pretty indentation. 175 00:08:30,310 --> 00:08:32,900 And how every tag that's opened is simultaneously closed. 176 00:08:32,900 --> 00:08:35,140 But notice the order, the first tag to be opened 177 00:08:35,140 --> 00:08:39,070 was HTML, ergo the last tag to be closed should be a HTML. 178 00:08:39,070 --> 00:08:41,289 There should be the symmetry built in. 179 00:08:41,289 --> 00:08:42,582 So what does this do for us? 180 00:08:42,582 --> 00:08:45,540 I'm going to go ahead and cut a corner and just copy this for a moment. 181 00:08:45,540 --> 00:08:49,080 And I'm going to go into TextEdit on my Mac. 182 00:08:49,080 --> 00:08:50,900 And I'll slow down in just a moment. 183 00:08:50,900 --> 00:08:52,790 But let me just show you the revelation here. 184 00:08:52,790 --> 00:08:55,160 Let me go ahead and save this. 185 00:08:55,160 --> 00:08:58,830 And on my Mac, I'm going to arbitrarily call it hello.HTML, 186 00:08:58,830 --> 00:09:02,850 where dot HTML is just a convention that humans use for web pages typically. 187 00:09:02,850 --> 00:09:04,380 And I'm going to click Save. 188 00:09:04,380 --> 00:09:06,450 Mac OS is going to be minorly annoying and yell 189 00:09:06,450 --> 00:09:09,366 at me because it wants me to save it as a text file because it's text. 190 00:09:09,366 --> 00:09:12,190 But no, I know better, it's HTML. 191 00:09:12,190 --> 00:09:18,070 And now let me go to my actual desktop, where I see this file here. 192 00:09:18,070 --> 00:09:21,650 Today's slides, a screenshot, and now hello.HTML. 193 00:09:21,650 --> 00:09:26,050 And if I double-click on this, I'm on the internet it would seem. 194 00:09:26,050 --> 00:09:27,660 But not quite, well let's see. 195 00:09:27,660 --> 00:09:30,940 Let me zoom in and what did I mean by the head of the page? 196 00:09:30,940 --> 00:09:34,400 Well, notice where the title is, it's up there in the tab. 197 00:09:34,400 --> 00:09:36,920 The body of the page happens to be identically worded, 198 00:09:36,920 --> 00:09:38,770 but that's the body of the page. 199 00:09:38,770 --> 00:09:40,920 But I'm not really on the internet yet. 200 00:09:40,920 --> 00:09:42,750 I have not made a website. 201 00:09:42,750 --> 00:09:45,410 I've made a web page, but it's not on the web. 202 00:09:45,410 --> 00:09:48,270 Where is it? 203 00:09:48,270 --> 00:09:49,270 It's on my desktop. 204 00:09:49,270 --> 00:09:54,380 So if I told you all-- hey everyone, go to File colon slash slash slash users 205 00:09:54,380 --> 00:09:56,320 jharvard desktop, none of you are going to be 206 00:09:56,320 --> 00:09:58,870 able to see that because it's only running on my computer. 207 00:09:58,870 --> 00:10:02,860 Now I could run a web server on my Mac or on your PC, 208 00:10:02,860 --> 00:10:05,540 then we could via it's private IP address, 209 00:10:05,540 --> 00:10:06,874 share the files here internally. 210 00:10:06,874 --> 00:10:09,956 But then, frankly, firewalls on my computer or yours might get in the way. 211 00:10:09,956 --> 00:10:11,300 So it's just generally annoying. 212 00:10:11,300 --> 00:10:13,980 So ironically, going way outside the bounds of Harvard 213 00:10:13,980 --> 00:10:16,190 and using the cloud, Cloud9 in this case, 214 00:10:16,190 --> 00:10:19,550 or CS50 IDE, which is just our customisation thereof, 215 00:10:19,550 --> 00:10:23,210 allows us to actually do everything publicly instead. 216 00:10:23,210 --> 00:10:24,700 So let me go ahead and pause here. 217 00:10:24,700 --> 00:10:27,533 And just as a proof of concept and to get everyone on the same page, 218 00:10:27,533 --> 00:10:31,650 go ahead and in Notepad or in TextEdit on a PC or Mac, 219 00:10:31,650 --> 00:10:34,740 respectively, go ahead and just copy and paste that example 220 00:10:34,740 --> 00:10:37,840 or whip it up yourself or some variant thereof. 221 00:10:37,840 --> 00:10:40,780 Save it and double-click it and make sure it's working for you. 222 00:10:40,780 --> 00:10:42,855 If you haven't already, just do File, Save. 223 00:10:42,855 --> 00:10:45,940 224 00:10:45,940 --> 00:10:52,569 And save it there, too, as hello.HTML or some such file name. 225 00:10:52,569 --> 00:10:54,360 So even if you've never used an IDE before, 226 00:10:54,360 --> 00:10:59,540 you should find it fairly similar to most any editing program. 227 00:10:59,540 --> 00:11:02,150 And then there is one step that we'll need 228 00:11:02,150 --> 00:11:05,880 to do together to get this to work. 229 00:11:05,880 --> 00:11:09,370 Stop me if going too fast, but at this point in the story, 230 00:11:09,370 --> 00:11:12,220 if you're following along, you should have 231 00:11:12,220 --> 00:11:15,710 hello.HTML in a tab, saved as such. 232 00:11:15,710 --> 00:11:18,970 And on the top left, now, you should see hello.HTML 233 00:11:18,970 --> 00:11:21,110 having suddenly appeared in your file browser. 234 00:11:21,110 --> 00:11:24,760 So even though we are sort of paradoxically on the web 235 00:11:24,760 --> 00:11:28,220 right now and using a web-based app, the web server 236 00:11:28,220 --> 00:11:30,210 is not running-- our web server. 237 00:11:30,210 --> 00:11:33,610 Cloud9's web server is running, but not our personal web server. 238 00:11:33,610 --> 00:11:36,730 So to make this work, in the little terminal window, the blue window 239 00:11:36,730 --> 00:11:40,580 down below, go ahead and run a command, it's 240 00:11:40,580 --> 00:11:43,060 a slightly custom command called apache50. 241 00:11:43,060 --> 00:11:47,530 Recall that Apache is the very popular open-source software, for Linux 242 00:11:47,530 --> 00:11:50,670 especially, that runs many websites out there. 243 00:11:50,670 --> 00:11:53,810 In fact, it's still, I think, the most popular web server out there. 244 00:11:53,810 --> 00:11:56,850 Run apache50, which is our own customisation of it 245 00:11:56,850 --> 00:11:59,480 so that it's easier to start. 246 00:11:59,480 --> 00:12:04,630 And do apache50 space start space period. 247 00:12:04,630 --> 00:12:08,170 And what this command does is it says, hey Apache, hey web server, 248 00:12:08,170 --> 00:12:11,390 start yourself using the current directory. 249 00:12:11,390 --> 00:12:14,980 Dot means the current directory as the root of the web server. 250 00:12:14,980 --> 00:12:16,980 And that's important because the hello.HTML 251 00:12:16,980 --> 00:12:19,150 file we just created is in this folder. 252 00:12:19,150 --> 00:12:22,290 And insofar as that's the file we want to serve up to the internet, 253 00:12:22,290 --> 00:12:25,042 we need to go ahead and start the web server in this folder. 254 00:12:25,042 --> 00:12:26,750 So if you hit Enter, you should hopefully 255 00:12:26,750 --> 00:12:32,910 see a successful message followed by a URL, which you can hover over. 256 00:12:32,910 --> 00:12:35,820 And then click and Open. 257 00:12:35,820 --> 00:12:38,320 And you should see something that looks like my screen here. 258 00:12:38,320 --> 00:12:42,780 259 00:12:42,780 --> 00:12:44,960 So these are the contents of the directory 260 00:12:44,960 --> 00:12:46,980 in which we started our web server. 261 00:12:46,980 --> 00:12:52,900 And so now, if you click on hello.HTML, you should see an error message. 262 00:12:52,900 --> 00:12:55,470 So what's-- yes? 263 00:12:55,470 --> 00:12:56,730 No? 264 00:12:56,730 --> 00:12:58,680 You see your file? 265 00:12:58,680 --> 00:12:59,180 OK. 266 00:12:59,180 --> 00:13:03,490 Let me-- does anyone else see forbidden? 267 00:13:03,490 --> 00:13:04,330 You see forbidden. 268 00:13:04,330 --> 00:13:04,830 All right. 269 00:13:04,830 --> 00:13:07,250 So let me do this. 270 00:13:07,250 --> 00:13:08,423 Let me go back here. 271 00:13:08,423 --> 00:13:14,050 272 00:13:14,050 --> 00:13:15,350 Oh, I know what that-- OK. 273 00:13:15,350 --> 00:13:19,480 That's curious that you didn't see this, but let's go ahead and do this. 274 00:13:19,480 --> 00:13:21,810 Go ahead and do-- in your terminal window, 275 00:13:21,810 --> 00:13:28,152 the blue window, chmod for change mode plus or sorry-- 276 00:13:28,152 --> 00:13:30,920 a plus r for all plus read. 277 00:13:30,920 --> 00:13:34,130 So let everyone read this file, which is by design 278 00:13:34,130 --> 00:13:36,270 since we want it to be on the internet. 279 00:13:36,270 --> 00:13:38,140 And then hello.HTML. 280 00:13:38,140 --> 00:13:40,034 So again, we're mixing a graphical interface, 281 00:13:40,034 --> 00:13:42,950 which is the tabs and the menu options and the things with which we're 282 00:13:42,950 --> 00:13:46,020 all familiar and comfortable with a command-line interface, which 283 00:13:46,020 --> 00:13:49,710 is purely text-based, which is older school but more powerful and versatile 284 00:13:49,710 --> 00:13:52,780 and still very much in vogue for software development. 285 00:13:52,780 --> 00:13:54,980 Nothing should happen when you run that command 286 00:13:54,980 --> 00:13:57,980 unless you see an error message, in which case it's probably a typo. 287 00:13:57,980 --> 00:14:02,710 But then if you go back to that other window and click Reload now, 288 00:14:02,710 --> 00:14:05,970 you should see it, albeit somewhat small. 289 00:14:05,970 --> 00:14:06,470 OK. 290 00:14:06,470 --> 00:14:10,670 And what we've done, to be clear, is we've given read permission to all, 291 00:14:10,670 --> 00:14:12,100 to everyone in the world. 292 00:14:12,100 --> 00:14:16,780 And that now allows our file to be publicly accessible on the internet. 293 00:14:16,780 --> 00:14:18,520 So incredibly underwhelming. 294 00:14:18,520 --> 00:14:21,380 So let's now actually do something that's a bit more 295 00:14:21,380 --> 00:14:23,330 interesting in the following ways. 296 00:14:23,330 --> 00:14:27,710 But before I forge ahead, I know we have a few folks who just need to catch up. 297 00:14:27,710 --> 00:14:30,260 But just call me over during the next lull if you'd like. 298 00:14:30,260 --> 00:14:31,080 Any questions? 299 00:14:31,080 --> 00:14:34,780 So that we don't lose folks. 300 00:14:34,780 --> 00:14:36,270 Yeah? 301 00:14:36,270 --> 00:14:38,930 You are. 302 00:14:38,930 --> 00:14:40,450 OK. 303 00:14:40,450 --> 00:14:42,140 Where did this get you? 304 00:14:42,140 --> 00:14:43,000 STUDENT: [INAUDIBLE] 305 00:14:43,000 --> 00:14:43,666 DAVID MALAN: OK. 306 00:14:43,666 --> 00:14:45,210 So click Private. 307 00:14:45,210 --> 00:14:47,730 And then CS50 Harvard University. 308 00:14:47,730 --> 00:14:51,757 And then Create Workspace, the green button down below. 309 00:14:51,757 --> 00:14:54,840 And let me come back in a moment again, this will take a moment to create. 310 00:14:54,840 --> 00:14:55,570 All right. 311 00:14:55,570 --> 00:14:59,301 So this is all very underwhelming, but let's do a couple of different things 312 00:14:59,301 --> 00:14:59,800 here. 313 00:14:59,800 --> 00:15:03,980 Let me go ahead and go into my web page-- the editor, here. 314 00:15:03,980 --> 00:15:06,610 And suppose I want to do the following, let 315 00:15:06,610 --> 00:15:12,400 me grab some sample Latin text for just a moment. 316 00:15:12,400 --> 00:15:15,710 I'll get myself five paragraphs-- just three paragraphs is fine. 317 00:15:15,710 --> 00:15:18,290 So this is sort of nonsensical text and I'm going to ahead 318 00:15:18,290 --> 00:15:20,970 and paste it into my page like this. 319 00:15:20,970 --> 00:15:23,660 And you can see it's not wrapping because it's quite long. 320 00:15:23,660 --> 00:15:25,580 Can I wrap that? 321 00:15:25,580 --> 00:15:27,080 I won't worry about that for now. 322 00:15:27,080 --> 00:15:27,580 OK. 323 00:15:27,580 --> 00:15:30,720 So I have three long paragraphs. 324 00:15:30,720 --> 00:15:34,280 And I'm going to go ahead and reload my page. 325 00:15:34,280 --> 00:15:38,400 And it looks like one bigger paragraph. 326 00:15:38,400 --> 00:15:39,650 What is going on? 327 00:15:39,650 --> 00:15:41,840 Well, it turns out HTML is a markup language. 328 00:15:41,840 --> 00:15:43,910 And it's only going to do what you tell it to do. 329 00:15:43,910 --> 00:15:48,400 And what I have not told it to do is to give me line breaks or paragraph 330 00:15:48,400 --> 00:15:49,120 breaks. 331 00:15:49,120 --> 00:15:51,980 So if I actually want these three things to be paragraphs, 332 00:15:51,980 --> 00:15:57,940 it turns out in HTML there's a Paragraph tag or p tag to be succinct. 333 00:15:57,940 --> 00:16:01,850 And if I open the Paragraph tag like this, here. 334 00:16:01,850 --> 00:16:04,660 And I then close it, here. 335 00:16:04,660 --> 00:16:05,960 And then I open it again, here. 336 00:16:05,960 --> 00:16:08,834 Notice that the editor is actually trying to be a little too helpful. 337 00:16:08,834 --> 00:16:12,130 The moment it notices that I have opened a tag so to speak, 338 00:16:12,130 --> 00:16:14,550 it tries to be helpful by closing it for me. 339 00:16:14,550 --> 00:16:19,390 But of course, I need to now move that to be actually below the text 340 00:16:19,390 --> 00:16:23,400 so that I keep everything nicely hierarchical as intended. 341 00:16:23,400 --> 00:16:26,810 So now it's gotten more verbose, but HTML kind of like, 342 00:16:26,810 --> 00:16:29,590 if you remember many, many years ago, Word Perfect, 343 00:16:29,590 --> 00:16:33,217 before there was a way to make things bold and italics and WYSIWYG editors, 344 00:16:33,217 --> 00:16:36,050 What You See Is What You Get, you would actually have to be emphatic 345 00:16:36,050 --> 00:16:38,850 and say make this bold, make this underline, make this italics. 346 00:16:38,850 --> 00:16:42,220 So now that I've done that, if I save and reload, 347 00:16:42,220 --> 00:16:45,290 still pretty ugly but at least now I have the semblance 348 00:16:45,290 --> 00:16:48,290 of three actual paragraphs. 349 00:16:48,290 --> 00:16:52,050 So let me go ahead and rewind for just a moment, that's all fine and good. 350 00:16:52,050 --> 00:16:55,310 What about something like a list of my three favorite things? 351 00:16:55,310 --> 00:16:59,280 So I'm going to give myself an ordered list with ol. 352 00:16:59,280 --> 00:17:01,860 So you can tell the authors of HTML tried to be 353 00:17:01,860 --> 00:17:04,490 very succinct if cryptic sometimes. 354 00:17:04,490 --> 00:17:09,300 Then I want to list item and I will say my favorite things 355 00:17:09,300 --> 00:17:17,430 are-- I don't know, like movies, and then li TV, and then how 356 00:17:17,430 --> 00:17:19,680 about books, number three. 357 00:17:19,680 --> 00:17:21,520 So if I save that, how do you think this is 358 00:17:21,520 --> 00:17:26,149 going to render, based on other things you've seen on the internet already? 359 00:17:26,149 --> 00:17:27,520 STUDENT: [INAUDIBLE] 360 00:17:27,520 --> 00:17:30,950 DAVID MALAN: Yeah, numerical list of things, let me reload. 361 00:17:30,950 --> 00:17:32,710 And indeed I get this automatically. 362 00:17:32,710 --> 00:17:36,280 Still pretty simple, but it's sort of adding the logical structure 363 00:17:36,280 --> 00:17:37,330 of numbering for me. 364 00:17:37,330 --> 00:17:39,300 If I didn't like that and I actually love 365 00:17:39,300 --> 00:17:41,830 reading equally with everything else, and reload, 366 00:17:41,830 --> 00:17:43,372 now I get the familiar bulleted list. 367 00:17:43,372 --> 00:17:45,955 And there's other ways to stylize this that we'll come back to 368 00:17:45,955 --> 00:17:46,860 in just a moment. 369 00:17:46,860 --> 00:17:50,410 This, of course, is not really what the web is great for-- static text, 370 00:17:50,410 --> 00:17:54,120 but the whole point of the web in HyperText Markup Language 371 00:17:54,120 --> 00:17:57,350 was to have hypertext, text that links elsewhere. 372 00:17:57,350 --> 00:18:05,160 So why don't I greet the user with my favorite website is say a href-- 373 00:18:05,160 --> 00:18:06,720 and what am I doing here? 374 00:18:06,720 --> 00:18:10,080 So notice the following. 375 00:18:10,080 --> 00:18:11,150 Actually, let me do this. 376 00:18:11,150 --> 00:18:14,990 I got ahead of myself-- www.harvard.edu. 377 00:18:14,990 --> 00:18:18,850 So all of us have been very acclimated by websites-- to any time 378 00:18:18,850 --> 00:18:22,070 you type a URL in certain websites, they automatically become clickable. 379 00:18:22,070 --> 00:18:24,590 And this is a feature of modern browsers or really 380 00:18:24,590 --> 00:18:27,740 of modern websites using language called JavaScript, more on that tomorrow. 381 00:18:27,740 --> 00:18:30,230 But this, of course, is not a link. 382 00:18:30,230 --> 00:18:32,820 Like nothing is actually happening here. 383 00:18:32,820 --> 00:18:35,760 I need to, again, tell the browser to be emphatic. 384 00:18:35,760 --> 00:18:39,580 So I want to say a for anchor, which means link. 385 00:18:39,580 --> 00:18:43,930 href, which means Hyper reference or what is the URL I want to link to. 386 00:18:43,930 --> 00:18:47,070 And now I want to go to harvard.edu. 387 00:18:47,070 --> 00:18:54,000 Close quote, close bracket, and now Harvard's website. 388 00:18:54,000 --> 00:18:57,020 So notice here, there's some fundamentally new syntax. 389 00:18:57,020 --> 00:19:02,200 The open bracket a says give me a link, href modifies the behavior of this tag. 390 00:19:02,200 --> 00:19:06,897 So it turns out that whereas a is a tag, href is an attribute. 391 00:19:06,897 --> 00:19:09,230 And an attribute just modifies the behavior of that tag. 392 00:19:09,230 --> 00:19:10,660 And in this case, and you would only know this 393 00:19:10,660 --> 00:19:13,480 from having been told by someone or by reading the documentation. 394 00:19:13,480 --> 00:19:16,420 href controls the destination of that hyperlink. 395 00:19:16,420 --> 00:19:20,420 And then notice, here, that I'm still closing the tag. 396 00:19:20,420 --> 00:19:25,680 So what is this going to look like visually on a web page once I reload? 397 00:19:25,680 --> 00:19:29,230 What am I going to see, literally? 398 00:19:29,230 --> 00:19:29,730 OK. 399 00:19:29,730 --> 00:19:30,820 Yeah, Harvard's website. 400 00:19:30,820 --> 00:19:32,710 My favorite website is Harvard's website. 401 00:19:32,710 --> 00:19:34,430 I'm not going to see the URL. 402 00:19:34,430 --> 00:19:37,120 But it's going to work-- reload. 403 00:19:37,120 --> 00:19:41,350 And now we get the old school but familiar blue underlined hyperlink. 404 00:19:41,350 --> 00:19:43,367 And if I scroll down-- if I hover over it, 405 00:19:43,367 --> 00:19:45,200 it's really small, especially on the screen. 406 00:19:45,200 --> 00:19:49,260 What do you see in the bottom left-hand corner of either screen? 407 00:19:49,260 --> 00:19:50,940 The actual destination. 408 00:19:50,940 --> 00:19:54,770 So this is kind of a juicy moment to mention a potential security concern. 409 00:19:54,770 --> 00:19:57,110 How many of you have ever been phished before? 410 00:19:57,110 --> 00:20:02,230 P-H-I-S-H-E-D, which means you've received an email purporting to be from 411 00:20:02,230 --> 00:20:06,090 usually like Paypal or eBay or your bank or something like that, 412 00:20:06,090 --> 00:20:09,587 that's actually just trying to phish for your username and password. 413 00:20:09,587 --> 00:20:12,170 Most everyone-- I mean it probably ends up in your spam folder 414 00:20:12,170 --> 00:20:15,610 these days, because the mail providers have gotten pretty good about this. 415 00:20:15,610 --> 00:20:19,050 But what feature of HTML do these phishers take advantage of? 416 00:20:19,050 --> 00:20:21,890 Well, they might actually do something like this. 417 00:20:21,890 --> 00:20:34,339 They could have this be-- let's call it HTTP bad guy website phish-- 418 00:20:34,339 --> 00:20:37,630 I'm trying to pick a domain that doesn't actually exist and creep everyone out. 419 00:20:37,630 --> 00:20:41,100 So bad guy phishing website-- OK. 420 00:20:41,100 --> 00:20:44,960 That probably doesn't exist, but don't visit it just in case. 421 00:20:44,960 --> 00:20:47,850 And if I reload, the text, of course, still seems the same. 422 00:20:47,850 --> 00:20:51,220 And if you hover over it, of course, you see the malicious destination. 423 00:20:51,220 --> 00:20:56,980 But more maliciously, as is the case in a lot of these phishing attacks, what 424 00:20:56,980 --> 00:20:59,060 if I do this? 425 00:20:59,060 --> 00:21:03,590 And deliberately type it to be dichotomous with the actual URL. 426 00:21:03,590 --> 00:21:07,860 And if I reload now, most of us are probably, 427 00:21:07,860 --> 00:21:09,890 given a link like this, going to click it. 428 00:21:09,890 --> 00:21:14,725 I mean most of us are not so uptight as to first hover over every link we're 429 00:21:14,725 --> 00:21:17,560 about to visit look at what it is in the bottom left-hand corner, 430 00:21:17,560 --> 00:21:19,850 and then proceed to click. 431 00:21:19,850 --> 00:21:22,490 So how do these phishing attacks work? 432 00:21:22,490 --> 00:21:25,150 What are they trying to get you to do? 433 00:21:25,150 --> 00:21:26,230 This is the how? 434 00:21:26,230 --> 00:21:29,152 What's the why? 435 00:21:29,152 --> 00:21:29,985 Go to their website. 436 00:21:29,985 --> 00:21:32,990 But why is that useful? 437 00:21:32,990 --> 00:21:33,939 So you log in. 438 00:21:33,939 --> 00:21:35,980 And in fact, you know what, let me try something. 439 00:21:35,980 --> 00:21:40,290 Let me go to-- let's say a bank that's in Harvard Square, BankofAmerica.com. 440 00:21:40,290 --> 00:21:43,440 Here's their website. 441 00:21:43,440 --> 00:21:47,970 Recall from earlier that you can go in Chrome to View, Developer, View Source, 442 00:21:47,970 --> 00:21:50,220 and I.E. and Firefox all have the same. 443 00:21:50,220 --> 00:21:52,820 Here is their HTML, it's a little cryptic, 444 00:21:52,820 --> 00:21:54,760 it's longer certainly than the pages we ran. 445 00:21:54,760 --> 00:21:55,970 That's crazy long. 446 00:21:55,970 --> 00:22:01,040 I'm just going to go ahead and copy it and paste it into Cloud9, 447 00:22:01,040 --> 00:22:04,220 it's all 1,390 lines of it. 448 00:22:04,220 --> 00:22:07,880 Save that in hello.HTML. 449 00:22:07,880 --> 00:22:09,070 And now reload the page. 450 00:22:09,070 --> 00:22:12,140 And notice my URL, I'm on Cloud c9users.io. 451 00:22:12,140 --> 00:22:15,800 So this is not certainly Bank of America's site. 452 00:22:15,800 --> 00:22:17,370 Let me go ahead and reload. 453 00:22:17,370 --> 00:22:18,770 Woo. 454 00:22:18,770 --> 00:22:22,730 I have re implemented Bank of America's website. 455 00:22:22,730 --> 00:22:26,590 But fortunately, you know, actually I'm stealing material from tomorrow now. 456 00:22:26,590 --> 00:22:30,840 You know it's secure, because look at that padlock icon there. 457 00:22:30,840 --> 00:22:31,890 But what does that mean? 458 00:22:31,890 --> 00:22:35,530 459 00:22:35,530 --> 00:22:37,240 Notice my URL. 460 00:22:37,240 --> 00:22:39,430 Actually, ironically, it is secure. 461 00:22:39,430 --> 00:22:43,880 But my-- connection is secure, it's a c9users.io, not Bank of America. 462 00:22:43,880 --> 00:22:44,930 So what does this mean? 463 00:22:44,930 --> 00:22:47,479 464 00:22:47,479 --> 00:22:49,770 No, it just means someone who works for Bank of America 465 00:22:49,770 --> 00:22:51,810 knows how to make icons that look like padlocks. 466 00:22:51,810 --> 00:22:53,540 I mean, it literally is simple as that. 467 00:22:53,540 --> 00:22:55,373 So there's this whole can of worms, I'll try 468 00:22:55,373 --> 00:22:59,520 to defer this till tomorrow because it's kind of a rabbit 469 00:22:59,520 --> 00:23:01,605 hole of interesting frightening topics. 470 00:23:01,605 --> 00:23:02,480 But it means nothing. 471 00:23:02,480 --> 00:23:04,854 And a phishing attack, really is someone, who spent what? 472 00:23:04,854 --> 00:23:07,360 All of 30 seconds copying someone else's website, 473 00:23:07,360 --> 00:23:08,950 trying to trick you into going to it. 474 00:23:08,950 --> 00:23:12,370 But the takeaway here isn't so much that specific example, 475 00:23:12,370 --> 00:23:14,280 but just how HTML works. 476 00:23:14,280 --> 00:23:17,160 And how you can so quickly, after like 5 minutes of the language, 477 00:23:17,160 --> 00:23:19,380 start to abuse it in a way that leverages 478 00:23:19,380 --> 00:23:20,772 what we call social engineering. 479 00:23:20,772 --> 00:23:22,480 These aren't technological attacks really 480 00:23:22,480 --> 00:23:24,880 as they are human social attacks. 481 00:23:24,880 --> 00:23:26,520 All right, so let's do something else. 482 00:23:26,520 --> 00:23:28,394 The internet, of course, is filled with cats. 483 00:23:28,394 --> 00:23:32,450 So if we Google for a cat, let's just grab-- that's cute, 484 00:23:32,450 --> 00:23:34,540 a little image like this. 485 00:23:34,540 --> 00:23:38,810 And now, notice, this file, by nature of being on the internet, has a URL. 486 00:23:38,810 --> 00:23:42,980 And so let me go ahead and if this were my own cats URL on my own web server 487 00:23:42,980 --> 00:23:45,500 and I want to embed it, let me go ahead and do this. 488 00:23:45,500 --> 00:23:50,060 Instead of my favorite website, my favorite cat 489 00:23:50,060 --> 00:23:56,380 is image source equals quote unquote that URL. 490 00:23:56,380 --> 00:24:00,050 And then, here, I'm going to do alt picture of a cat. 491 00:24:00,050 --> 00:24:03,520 An underappreciated feature of HTML that more website's should 492 00:24:03,520 --> 00:24:07,850 be sensitive to is alternative text for folks who are without sight 493 00:24:07,850 --> 00:24:11,751 or rely on screen readers for recitation of what a site is. 494 00:24:11,751 --> 00:24:14,250 Of course, if someone's blind and they can't see this image, 495 00:24:14,250 --> 00:24:16,310 it would be nice, certainly, if the computer could tell them what it is. 496 00:24:16,310 --> 00:24:19,640 And so simply by providing alternative text, a picture of a cat, 497 00:24:19,640 --> 00:24:24,040 you can go part way toward actually helping the user follow along 498 00:24:24,040 --> 00:24:25,330 with what's on your page. 499 00:24:25,330 --> 00:24:30,450 And if I now hit reload, here, my favorite cat is this thing here. 500 00:24:30,450 --> 00:24:33,720 And it turns out there are going to be mechanisms that allow us to scale this 501 00:24:33,720 --> 00:24:35,310 appropriately, although we could just open it 502 00:24:35,310 --> 00:24:38,101 in Photoshop or some other program and actually integrate it better 503 00:24:38,101 --> 00:24:38,820 into the website. 504 00:24:38,820 --> 00:24:42,130 But the point is, it's these very simple building blocks with which 505 00:24:42,130 --> 00:24:45,150 the entirety of the web is made. 506 00:24:45,150 --> 00:24:47,510 We can do other things like if for whatever reason 507 00:24:47,510 --> 00:24:52,320 I want to emphasize cat, we can style that and other text differently. 508 00:24:52,320 --> 00:24:55,520 And actually is there-- let's see. 509 00:24:55,520 --> 00:24:57,250 Let's start to do exactly that. 510 00:24:57,250 --> 00:25:02,110 Let me go ahead and grab some Latin text again, 511 00:25:02,110 --> 00:25:07,100 just so we have some actual text to play with. 512 00:25:07,100 --> 00:25:10,700 And grab two paragraphs of this again. 513 00:25:10,700 --> 00:25:14,660 This is just a popular way of generating sample text with which to play. 514 00:25:14,660 --> 00:25:16,490 Let me go ahead and paste it into the site, 515 00:25:16,490 --> 00:25:18,960 give myself a couple of paragraphs. 516 00:25:18,960 --> 00:25:22,110 Let me go ahead and fix this real fast. 517 00:25:22,110 --> 00:25:23,330 Close the paragraph. 518 00:25:23,330 --> 00:25:23,830 Whoops. 519 00:25:23,830 --> 00:25:25,140 Close the paragraph. 520 00:25:25,140 --> 00:25:26,960 Open the Paragraph. 521 00:25:26,960 --> 00:25:27,700 Delete this. 522 00:25:27,700 --> 00:25:31,200 523 00:25:31,200 --> 00:25:32,242 OK. 524 00:25:32,242 --> 00:25:33,450 So here's where we're at now. 525 00:25:33,450 --> 00:25:35,880 We're back to just a couple of simple paragraphs. 526 00:25:35,880 --> 00:25:38,120 And let's suppose I want to change the font of this. 527 00:25:38,120 --> 00:25:41,870 As best I can tell, this is like Times New Roman in 14 points or something 528 00:25:41,870 --> 00:25:44,160 like that, whatever the website's default is. 529 00:25:44,160 --> 00:25:46,610 Well, turns out that back in the day, you 530 00:25:46,610 --> 00:25:50,310 would actually do something like color equals red or something like that. 531 00:25:50,310 --> 00:25:54,960 But the world eventually realized that mixing your data with metadata, 532 00:25:54,960 --> 00:25:57,700 specifically mixing your data with the presentation thereof, 533 00:25:57,700 --> 00:25:59,130 is generally bad practice. 534 00:25:59,130 --> 00:26:02,712 Certainly these days, because it makes it much harder to maintain your website 535 00:26:02,712 --> 00:26:04,045 and in turn your data long-term. 536 00:26:04,045 --> 00:26:06,800 It makes it much harder to change the aesthetics of your website 537 00:26:06,800 --> 00:26:09,750 over time, if you want to do a refresh, change the colors, 538 00:26:09,750 --> 00:26:11,020 change the iconography. 539 00:26:11,020 --> 00:26:14,450 And so the world has gotten a lot better at factoring out 540 00:26:14,450 --> 00:26:18,280 anything related to aesthetics to a separate language called not 541 00:26:18,280 --> 00:26:21,680 HTML, but CSS, cascading style sheets. 542 00:26:21,680 --> 00:26:24,950 And unfortunately, the syntax for this is a little different. 543 00:26:24,950 --> 00:26:27,200 But it still follows some simple patterns. 544 00:26:27,200 --> 00:26:31,510 If I go into the head of my web page and introduce a style tag, 545 00:26:31,510 --> 00:26:33,840 notice that I can do the following. 546 00:26:33,840 --> 00:26:39,340 I can specify that you know what, I want every paragraph in my page 547 00:26:39,340 --> 00:26:41,200 to have the following properties. 548 00:26:41,200 --> 00:26:46,090 And notice the new syntax, here, where we have curly braces like this. 549 00:26:46,090 --> 00:26:48,280 And I want to go ahead and say, you know what, 550 00:26:48,280 --> 00:26:51,480 make the font size-- oh, it's too big. 551 00:26:51,480 --> 00:26:53,570 Let's make it 11 point. 552 00:26:53,570 --> 00:26:55,990 And the color is just a little annoying. 553 00:26:55,990 --> 00:27:00,480 Let's go ahead and make it a nice shade of blue. 554 00:27:00,480 --> 00:27:05,070 So CSS, if you've kind of seen the entirety of its grammar so to speak, 555 00:27:05,070 --> 00:27:08,550 although there are some few other features, you have key-value pairs. 556 00:27:08,550 --> 00:27:11,880 The key is a word like color or font size, the value of those 557 00:27:11,880 --> 00:27:13,910 respectively is blue or 11 point. 558 00:27:13,910 --> 00:27:16,140 You would only know what the valid keys and values 559 00:27:16,140 --> 00:27:18,270 are by reading the documentation or taking a class 560 00:27:18,270 --> 00:27:19,640 or reading a book or whatnot. 561 00:27:19,640 --> 00:27:21,640 But if I now reload this, the effect is going 562 00:27:21,640 --> 00:27:27,110 to be make all paragraph tags content match these properties. 563 00:27:27,110 --> 00:27:30,900 So if I go to Hello World and click Reload, it's not very pretty 564 00:27:30,900 --> 00:27:33,970 but the text is indeed a little smaller and it's much bluer. 565 00:27:33,970 --> 00:27:36,240 And so I've achieved that effect. 566 00:27:36,240 --> 00:27:44,560 If instead I want to do something different, suppose that font family, 567 00:27:44,560 --> 00:27:47,776 I really don't like the old school serif approach, 568 00:27:47,776 --> 00:27:50,400 here, I want it to look a little more modern, a little fresher, 569 00:27:50,400 --> 00:27:52,108 I can change the family to be sans serif. 570 00:27:52,108 --> 00:27:55,110 And if you notice, this is the before, after, 571 00:27:55,110 --> 00:27:57,530 and now we've changed the font entirely. 572 00:27:57,530 --> 00:28:00,167 And we've just scratched the surface, here, of what we can do. 573 00:28:00,167 --> 00:28:02,750 But ultimately, the paradigm, now, is that we have the ability 574 00:28:02,750 --> 00:28:05,900 to separate the aesthetics of our page, the stylistic decisions 575 00:28:05,900 --> 00:28:09,060 from the content, but there's still a problem. 576 00:28:09,060 --> 00:28:13,700 So notice that we're still inside the same file, hello.HTML. 577 00:28:13,700 --> 00:28:18,590 And it turns out that even though yes, there is this style tag right here-- 578 00:28:18,590 --> 00:28:20,940 it turns out that's not best practice. 579 00:28:20,940 --> 00:28:24,170 Best practice would have us put it not up here, 580 00:28:24,170 --> 00:28:26,890 but instead use the tag as follows. 581 00:28:26,890 --> 00:28:30,680 A link tag, which annoyingly named is not a hyperlink, 582 00:28:30,680 --> 00:28:32,960 it just links to another resource. 583 00:28:32,960 --> 00:28:37,022 That resource, in this case, is a file called styles.CSS, which I'll stipulate 584 00:28:37,022 --> 00:28:39,480 is just a file containing a whole bunch of key-value pairs, 585 00:28:39,480 --> 00:28:41,540 a bunch of properties as we just saw. 586 00:28:41,540 --> 00:28:44,664 And then the relationship, here, is that it's a style sheet, which you just 587 00:28:44,664 --> 00:28:46,390 have to copy and paste. 588 00:28:46,390 --> 00:28:49,210 So I've removed from the file, apparently, 589 00:28:49,210 --> 00:28:52,030 per this yellow highlight, all of the properties 590 00:28:52,030 --> 00:28:53,560 and moved them into a separate file. 591 00:28:53,560 --> 00:28:56,277 Why might it be good to do that? 592 00:28:56,277 --> 00:28:57,110 STUDENT: [INAUDIBLE] 593 00:28:57,110 --> 00:28:58,987 DAVID MALAN: Or was that just a stretch? 594 00:28:58,987 --> 00:28:59,820 STUDENT: [INAUDIBLE] 595 00:28:59,820 --> 00:29:07,220 596 00:29:07,220 --> 00:29:07,960 DAVID MALAN: OK. 597 00:29:07,960 --> 00:29:09,959 Exactly, you can factor out the different job's. 598 00:29:09,959 --> 00:29:13,180 So one of you can focus on the actual content 599 00:29:13,180 --> 00:29:16,510 that you want to display, the images, the text, the sort of business 600 00:29:16,510 --> 00:29:18,170 or the products you're trying to sell. 601 00:29:18,170 --> 00:29:21,280 And then someone else, who's perhaps more artistic, and better 602 00:29:21,280 --> 00:29:23,520 than you at that can actually do the refinements. 603 00:29:23,520 --> 00:29:24,490 What does the text look like? 604 00:29:24,490 --> 00:29:25,281 Where is it placed? 605 00:29:25,281 --> 00:29:26,800 Where to get all the aesthetics? 606 00:29:26,800 --> 00:29:27,940 So that makes sense. 607 00:29:27,940 --> 00:29:33,380 What else might be compelling about factoring out CSS from the style tag 608 00:29:33,380 --> 00:29:35,460 in the page to a separate file like this? 609 00:29:35,460 --> 00:29:36,627 Yeah, Vanessa. 610 00:29:36,627 --> 00:29:37,460 STUDENT: [INAUDIBLE] 611 00:29:37,460 --> 00:29:45,347 612 00:29:45,347 --> 00:29:47,180 DAVID MALAN: Exactly, if you're-- right now, 613 00:29:47,180 --> 00:29:50,590 we're assuming naively we have just one page, hello.HTML. 614 00:29:50,590 --> 00:29:53,290 If you have 2 pages, 10 pages, 1,000 pages-- 615 00:29:53,290 --> 00:29:56,340 how else are you going to make all of the text blue or all of the text 616 00:29:56,340 --> 00:29:56,840 sans serif? 617 00:29:56,840 --> 00:29:59,270 You don't want to have to copy and paste that same block 618 00:29:59,270 --> 00:30:01,830 in every one of those files, if only because, God forbid, 619 00:30:01,830 --> 00:30:05,130 you want to change the aesthetics of the site tomorrow or in a year, 620 00:30:05,130 --> 00:30:08,840 now you have to go through and change 2 or 10 or 1,000 pages separately. 621 00:30:08,840 --> 00:30:12,370 Much better to factor that out, put it in one central place. 622 00:30:12,370 --> 00:30:13,740 What about more technically? 623 00:30:13,740 --> 00:30:19,660 If you were a browser, why might you prefer, too-- or even a user, 624 00:30:19,660 --> 00:30:23,211 why might you, too, prefer that the CSS be factored out into the separate file 625 00:30:23,211 --> 00:30:23,710 styles.CSS? 626 00:30:23,710 --> 00:30:27,930 627 00:30:27,930 --> 00:30:28,430 Vanessa? 628 00:30:28,430 --> 00:30:31,680 629 00:30:31,680 --> 00:30:32,370 Easier to read. 630 00:30:32,370 --> 00:30:33,599 A little bit. 631 00:30:33,599 --> 00:30:34,432 STUDENT: [INAUDIBLE] 632 00:30:34,432 --> 00:30:42,339 633 00:30:42,339 --> 00:30:43,380 DAVID MALAN: That's fair. 634 00:30:43,380 --> 00:30:45,310 So the browser definitely won't care, because it's just 635 00:30:45,310 --> 00:30:47,370 going to read it as text, top to bottom, left to right, no matter 636 00:30:47,370 --> 00:30:48,390 how messy it is. 637 00:30:48,390 --> 00:30:49,970 And a user, yeah, that's nice. 638 00:30:49,970 --> 00:30:52,990 But I don't really care as the business owner 639 00:30:52,990 --> 00:30:56,820 about making my source code so to speak easier for humans to read. 640 00:30:56,820 --> 00:30:58,890 After all, I don't want them copying and pasting 641 00:30:58,890 --> 00:31:01,490 it even easier like Bank of America. 642 00:31:01,490 --> 00:31:02,010 Oh, OK. 643 00:31:02,010 --> 00:31:03,220 Sure, then that's fair. 644 00:31:03,220 --> 00:31:05,720 Factoring out into some central, more readable place. 645 00:31:05,720 --> 00:31:08,740 Why might a browser or an end user actually benefit 646 00:31:08,740 --> 00:31:14,295 from factoring out your CSS into a file like this? 647 00:31:14,295 --> 00:31:15,720 STUDENT: [INAUDIBLE] 648 00:31:15,720 --> 00:31:18,880 DAVID MALAN: Runs it one time or more specifically downloads it one time. 649 00:31:18,880 --> 00:31:22,907 If you have a user visiting this page and that page and that page, 650 00:31:22,907 --> 00:31:24,990 and the content is, of course, changing, after all 651 00:31:24,990 --> 00:31:28,031 that's why they're visiting different web pages, to see different things. 652 00:31:28,031 --> 00:31:31,850 But the stylization is global in the sense that all of those pages 653 00:31:31,850 --> 00:31:33,870 are including this same file. 654 00:31:33,870 --> 00:31:36,560 The upside of that is that especially if it's a really big file, 655 00:31:36,560 --> 00:31:42,370 the website browser only has to download it once and do what with it? 656 00:31:42,370 --> 00:31:43,370 It's a book. 657 00:31:43,370 --> 00:31:44,020 Copy. 658 00:31:44,020 --> 00:31:48,790 Or just to borrow the more technical term from earlier, to actually cache it 659 00:31:48,790 --> 00:31:49,801 for some amount of time. 660 00:31:49,801 --> 00:31:51,550 Now, caching, we know can work against you 661 00:31:51,550 --> 00:31:53,410 because if then the browser remembers it longer than you 662 00:31:53,410 --> 00:31:55,170 intend it might actually backfire. 663 00:31:55,170 --> 00:31:57,420 But at least if you're not changing the CSS that often 664 00:31:57,420 --> 00:31:59,920 or if the browser only caches it for a few minutes or hours, 665 00:31:59,920 --> 00:32:02,705 it can certainly help, especially on devices like this. 666 00:32:02,705 --> 00:32:05,580 What's frightening these days-- let's go ahead and do this real fast. 667 00:32:05,580 --> 00:32:11,630 If I go to Chrome and go to View Developer, but not Source, 668 00:32:11,630 --> 00:32:13,510 but Developer Tools. 669 00:32:13,510 --> 00:32:16,980 Most browsers these days have fairly arcane features like this 670 00:32:16,980 --> 00:32:19,820 built in, whereby if I click on the Network tab, 671 00:32:19,820 --> 00:32:25,660 I can actually see all of the HTTP requests that Chrome is about to make. 672 00:32:25,660 --> 00:32:28,970 So let me go somewhere-- whoops. 673 00:32:28,970 --> 00:32:34,180 Let's see, let's go somewhere like CNN by moving this up. 674 00:32:34,180 --> 00:32:35,650 Come on, come on. 675 00:32:35,650 --> 00:32:36,830 No, come on. 676 00:32:36,830 --> 00:32:37,330 OK. 677 00:32:37,330 --> 00:32:39,940 Let me move this all the way up. 678 00:32:39,940 --> 00:32:44,220 Let me go to CNN.com, Enter. 679 00:32:44,220 --> 00:32:50,690 And notice that just visiting CNN's web page-- dear God. 680 00:32:50,690 --> 00:32:53,580 OK, it's even worse than the last time I did this. 681 00:32:53,580 --> 00:32:58,456 How many HTTP requests did my browser just make in order to visit CNN.com? 682 00:32:58,456 --> 00:33:01,640 683 00:33:01,640 --> 00:33:06,490 300-- atrociously 24 requests. 684 00:33:06,490 --> 00:33:08,940 Each of which-- oh, now it's up to 325. 685 00:33:08,940 --> 00:33:12,470 Each of which represents apparently a JPEG or PNG, 686 00:33:12,470 --> 00:33:16,630 which are image file formats, which is not unreasonable for like a new site. 687 00:33:16,630 --> 00:33:19,790 Some of these are script files, JavaScript, which we discussed. 688 00:33:19,790 --> 00:33:21,900 GIF, which is an image format. 689 00:33:21,900 --> 00:33:23,150 GIF, GIF, GIF, GIF. 690 00:33:23,150 --> 00:33:24,780 Script, Script, Script, Script. 691 00:33:24,780 --> 00:33:30,990 I mean-- my God, this is actually just remarkable. 692 00:33:30,990 --> 00:33:31,490 Wow! 693 00:33:31,490 --> 00:33:35,470 A lot of this frankly is advertising, too. 694 00:33:35,470 --> 00:33:35,970 Wow! 695 00:33:35,970 --> 00:33:36,470 All right. 696 00:33:36,470 --> 00:33:37,940 So, OK. 697 00:33:37,940 --> 00:33:41,090 Why is this bad? 698 00:33:41,090 --> 00:33:46,420 Never mind the content from CNN, but why is this technologically bad? 699 00:33:46,420 --> 00:33:47,105 Yeah. 700 00:33:47,105 --> 00:33:48,260 STUDENT: [INAUDIBLE] 701 00:33:48,260 --> 00:33:50,759 DAVID MALAN: Consumer bandwidth, and it's not just bandwidth 702 00:33:50,759 --> 00:33:53,850 because at the end of the day-- well, it's pretty big, it's 3.8 megabytes. 703 00:33:53,850 --> 00:33:58,310 But it turns out downloading one 3.8 megabyte image would probably 704 00:33:58,310 --> 00:34:03,240 reach me faster than 332, now, files that individually 705 00:34:03,240 --> 00:34:06,420 represent 3.8 megabytes. 706 00:34:06,420 --> 00:34:08,650 So it's not so much the bandwidth that's concerning, 707 00:34:08,650 --> 00:34:14,514 but it's another measure of sort of speed that users experience. 708 00:34:14,514 --> 00:34:16,389 And the words come up a couple times already. 709 00:34:16,389 --> 00:34:19,966 710 00:34:19,966 --> 00:34:20,466 Late-- 711 00:34:20,466 --> 00:34:21,300 Latency. 712 00:34:21,300 --> 00:34:22,330 OK, good. 713 00:34:22,330 --> 00:34:24,580 OK, latency, which is different. 714 00:34:24,580 --> 00:34:27,880 Bandwidth-- often latency, especially if you've ever 715 00:34:27,880 --> 00:34:32,310 used like YouTube or Netflix or Hulu or the like, 716 00:34:32,310 --> 00:34:35,080 latency is that delay from when you visit a video 717 00:34:35,080 --> 00:34:37,739 and it takes like a second or five seconds to start playing. 718 00:34:37,739 --> 00:34:41,810 But then it looks beautiful because you have a good bandwidth but bad latency. 719 00:34:41,810 --> 00:34:44,800 By contrast, if you had good latency, the video 720 00:34:44,800 --> 00:34:48,081 might start streaming instantly but very suddenly get very pixelated 721 00:34:48,081 --> 00:34:50,580 or hang or buffer and that's because you have bad bandwidth. 722 00:34:50,580 --> 00:34:53,100 So latency describes the amount of time it takes. 723 00:34:53,100 --> 00:34:56,179 And for the browser to be doing this, what's happening? 724 00:34:56,179 --> 00:34:58,990 Well, recall from my simple example earlier of the cat, 725 00:34:58,990 --> 00:35:03,700 that an HTML file can, inside of it, reference other files or other URLs. 726 00:35:03,700 --> 00:35:07,140 A browser is defined upon reading a web page, to look inside of it, 727 00:35:07,140 --> 00:35:11,750 looking for all of the images, all of the movie files, 728 00:35:11,750 --> 00:35:13,960 audio files, anything that's mentioned inside of it, 729 00:35:13,960 --> 00:35:19,030 it's designed to go fetch all of those URLs as well one at a time or a few 730 00:35:19,030 --> 00:35:19,990 at a time. 731 00:35:19,990 --> 00:35:25,000 So the result is that CNN's web page, index.HTML as it might be called, 732 00:35:25,000 --> 00:35:27,890 itself mentions all of these other darn files. 733 00:35:27,890 --> 00:35:33,260 So we are inducing, by visiting CNN.com, 335 separate HTTP 734 00:35:33,260 --> 00:35:36,700 requests, some of which might be parallelized to be fair, 735 00:35:36,700 --> 00:35:38,130 but that's 300 requests. 736 00:35:38,130 --> 00:35:40,830 Each of which might have 200 milliseconds of latency 737 00:35:40,830 --> 00:35:44,560 and actually you can see how long each one of these takes. 738 00:35:44,560 --> 00:35:49,010 It's all between 0 milliseconds and 150 or 200. 739 00:35:49,010 --> 00:35:51,860 And imagine doing the same on your phone. 740 00:35:51,860 --> 00:35:55,450 So phones have even less bandwidth and it's often higher latency, 741 00:35:55,450 --> 00:35:58,940 so this is not necessarily a great user experience on the phone. 742 00:35:58,940 --> 00:36:03,760 So how might websites mitigate this concern? 743 00:36:03,760 --> 00:36:06,680 Like I feel like having my phone downloaded 335 files 744 00:36:06,680 --> 00:36:11,670 is not very good for business for making me want to come back. 745 00:36:11,670 --> 00:36:12,840 They have a mobile version. 746 00:36:12,840 --> 00:36:15,399 So you can detect with high probability if a user 747 00:36:15,399 --> 00:36:16,690 is coming from a mobile device. 748 00:36:16,690 --> 00:36:17,650 How is that? 749 00:36:17,650 --> 00:36:18,830 How would you know? 750 00:36:18,830 --> 00:36:24,870 751 00:36:24,870 --> 00:36:25,640 Oh. 752 00:36:25,640 --> 00:36:27,371 STUDENT: [INAUDIBLE] 753 00:36:27,371 --> 00:36:29,620 DAVID MALAN: Yeah, the browser should tell the website 754 00:36:29,620 --> 00:36:31,400 and indeed all browsers do. 755 00:36:31,400 --> 00:36:33,920 In fact, if I scroll back up in time and go 756 00:36:33,920 --> 00:36:38,520 to the very first request for www.CNN.com and I click on headers, 757 00:36:38,520 --> 00:36:40,590 this is fairly arcane information that would now 758 00:36:40,590 --> 00:36:43,390 be found inside of those virtual envelopes we 759 00:36:43,390 --> 00:36:44,990 were discussing this morning. 760 00:36:44,990 --> 00:36:51,140 And if I zoom in on this, notice here, these 761 00:36:51,140 --> 00:36:56,310 are exactly the headers so to speak, the text that my browser put inside 762 00:36:56,310 --> 00:36:57,750 of that virtual envelope. 763 00:36:57,750 --> 00:37:00,890 Odds are the first two lines look familiar based on my quick example 764 00:37:00,890 --> 00:37:03,040 earlier, when I manually typed it in. 765 00:37:03,040 --> 00:37:06,350 But what is minorly revealing about yourself? 766 00:37:06,350 --> 00:37:13,600 767 00:37:13,600 --> 00:37:16,830 What's the takeaway here, in terms of privacy perhaps? 768 00:37:16,830 --> 00:37:18,027 Or curiosity? 769 00:37:18,027 --> 00:37:20,770 770 00:37:20,770 --> 00:37:24,630 What else is my browser presumptuously telling CNN? 771 00:37:24,630 --> 00:37:31,100 Yeah, it's telling CNN that I own a Mac running version Mac OS 10.11.2 no less, 772 00:37:31,100 --> 00:37:32,610 which is oddly precise. 773 00:37:32,610 --> 00:37:35,620 What browser-- actually this is historically confusing. 774 00:37:35,620 --> 00:37:39,300 But what browser am I apparently using? 775 00:37:39,300 --> 00:37:40,230 Chrome. 776 00:37:40,230 --> 00:37:42,829 So that's mildly interesting information, 777 00:37:42,829 --> 00:37:45,870 especially since it turns out web development is still kind of a headache 778 00:37:45,870 --> 00:37:48,630 even all these years later after it's inception since so many 779 00:37:48,630 --> 00:37:52,040 of the manufacturers Google and Microsoft and Mozilla all 780 00:37:52,040 --> 00:37:54,242 can't re agree on all of the implementation details. 781 00:37:54,242 --> 00:37:56,450 So one of the frustrations in fact of web development 782 00:37:56,450 --> 00:37:59,720 is you might design something on Chrome, looks amazing on your Mac, 783 00:37:59,720 --> 00:38:05,420 looks awful or broken or somehow other on a PC or on Firefox or on safari 784 00:38:05,420 --> 00:38:08,280 or on IE or Edge or any-- I mean it's the biggest 785 00:38:08,280 --> 00:38:11,700 nightmare that libraries, more on those tomorrow, are helping with. 786 00:38:11,700 --> 00:38:14,590 Because you have other people figure out all these headaches 787 00:38:14,590 --> 00:38:16,390 and you build on top of their software. 788 00:38:16,390 --> 00:38:17,780 So that's mildly disconcerting. 789 00:38:17,780 --> 00:38:20,347 I also told CNN, already, my IP address, because that 790 00:38:20,347 --> 00:38:22,680 had to be on the envelope for the response to come back. 791 00:38:22,680 --> 00:38:25,420 So there's a decent amount of information being leaked here 792 00:38:25,420 --> 00:38:27,210 that CNN is inferring. 793 00:38:27,210 --> 00:38:30,670 But they can at least use that as a feature to realize oh, 794 00:38:30,670 --> 00:38:34,710 by way of a different user agent, that's what this header is called, 795 00:38:34,710 --> 00:38:37,590 they can infer if I'm on a mobile device or an Android device 796 00:38:37,590 --> 00:38:41,360 or an iPhone device, which can either be used for statistical purposes 797 00:38:41,360 --> 00:38:43,790 or to actually decide what kind of data to send 798 00:38:43,790 --> 00:38:47,140 or to request once you visit that first web page. 799 00:38:47,140 --> 00:38:47,640 All right. 800 00:38:47,640 --> 00:38:54,800 So with that said, what does this allow us to do ultimately 801 00:38:54,800 --> 00:38:56,430 when we have tags like this? 802 00:38:56,430 --> 00:39:00,060 So ultimately, we're going to be able to do things a little more efficiently 803 00:39:00,060 --> 00:39:00,920 by factoring out. 804 00:39:00,920 --> 00:39:03,830 This would be an example of best practices so to speak. 805 00:39:03,830 --> 00:39:07,020 But we've really only just scratched the surface of HTML. 806 00:39:07,020 --> 00:39:10,420 But I think it's the kind of language, frankly, 807 00:39:10,420 --> 00:39:12,960 where if that's the extent of our formal instruction, 808 00:39:12,960 --> 00:39:16,124 here is our-- here's a tag, here's what an attribute is, 809 00:39:16,124 --> 00:39:17,790 and here's how to find more information. 810 00:39:17,790 --> 00:39:20,840 What I thought I'd propose, so that we can get everyone back on the same page, 811 00:39:20,840 --> 00:39:23,215 give you an opportunity to get your hands a little dirty, 812 00:39:23,215 --> 00:39:24,940 is propose a few different problems. 813 00:39:24,940 --> 00:39:27,490 Almost all of which can be solved with Google or Bing 814 00:39:27,490 --> 00:39:30,110 or your favorite search engine. 815 00:39:30,110 --> 00:39:33,350 Or by me whispering in your ear or offering a little bit of tips. 816 00:39:33,350 --> 00:39:36,150 So I wanted to propose, I'll turn on some music, I'll wander about. 817 00:39:36,150 --> 00:39:40,450 And let me propose that you tackle one or two of these problems, 818 00:39:40,450 --> 00:39:45,810 trying to bring to bear the very basic conceptual ingredients we provided 819 00:39:45,810 --> 00:39:46,600 but also Google. 820 00:39:46,600 --> 00:39:50,100 So literally, it is totally acceptable to type in web page 821 00:39:50,100 --> 00:39:55,180 how make text bigger or CSS change color of text or the like totally fine. 822 00:39:55,180 --> 00:39:57,580 And indeed, you'll find that this is how many developers 823 00:39:57,580 --> 00:39:59,614 early on are self-taught. 824 00:39:59,614 --> 00:40:01,530 Once they understand the conceptual framework, 825 00:40:01,530 --> 00:40:05,250 it's so much easier to bootstrap yourself to understanding and applying 826 00:40:05,250 --> 00:40:06,140 yet new techniques. 827 00:40:06,140 --> 00:40:08,210 So I'll turn on some music, tackle one or two of these, 828 00:40:08,210 --> 00:40:10,010 I'll wander around fielding some questions. 829 00:40:10,010 --> 00:40:12,142 Yeah, Griff. 830 00:40:12,142 --> 00:40:15,010 STUDENT: When you're creating a separate style sheet, 831 00:40:15,010 --> 00:40:17,878 are you just creating a new tab at the top of the file? 832 00:40:17,878 --> 00:40:19,010 DAVID MALAN: Ah, yes. 833 00:40:19,010 --> 00:40:19,510 Correct. 834 00:40:19,510 --> 00:40:20,420 I did omit that part. 835 00:40:20,420 --> 00:40:24,500 But yes, you would simply in the IDE, create a new tab and new file. 836 00:40:24,500 --> 00:40:28,960 And essentially repeat the steps from before but call this something.CSS, 837 00:40:28,960 --> 00:40:30,170 styles.CSS. 838 00:40:30,170 --> 00:40:33,230 And do remember that chmod command again. 839 00:40:33,230 --> 00:40:35,180 This time for this filename, where again, 840 00:40:35,180 --> 00:40:44,479 you're changing the mode of the file to give all read permission of styles.CSS 841 00:40:44,479 --> 00:40:45,020 for instance. 842 00:40:45,020 --> 00:40:46,311 You only have to run that once. 843 00:40:46,311 --> 00:40:49,160 Because by default for security sake, when you create files, 844 00:40:49,160 --> 00:40:52,280 they are typically viewable only by you. 845 00:40:52,280 --> 00:40:54,260 All right, feel free to continue tinkering. 846 00:40:54,260 --> 00:41:01,220 But I thought I'd try to tie everything together for our final segment here. 847 00:41:01,220 --> 00:41:02,640 This is, of course, Google. 848 00:41:02,640 --> 00:41:06,660 And let me go ahead and see. 849 00:41:06,660 --> 00:41:09,900 Google is constantly changing some of this stuff-- even more from Google. 850 00:41:09,900 --> 00:41:11,320 Is this going to work? 851 00:41:11,320 --> 00:41:12,010 OK. 852 00:41:12,010 --> 00:41:14,080 Let me go ahead and do the following in Google. 853 00:41:14,080 --> 00:41:17,180 I'm going to go ahead and search for cats again. 854 00:41:17,180 --> 00:41:19,970 Come on, search for cat. 855 00:41:19,970 --> 00:41:20,980 Oh. 856 00:41:20,980 --> 00:41:21,630 Oh, here we go. 857 00:41:21,630 --> 00:41:28,080 Google.com and cats. 858 00:41:28,080 --> 00:41:29,240 Enter. 859 00:41:29,240 --> 00:41:31,770 And now notice what happens when I search for cats. 860 00:41:31,770 --> 00:41:35,550 So the URL changes from just www.google.com to slash 861 00:41:35,550 --> 00:41:40,270 search questionmark num equals 20 site equals something source equals 862 00:41:40,270 --> 00:41:43,700 something-- oh, q equals cats. 863 00:41:43,700 --> 00:41:47,630 And in fact, let me go ahead and just delete all of the visual clutter here. 864 00:41:47,630 --> 00:41:52,070 And whittle this URL down to just this canonical form, if you will. 865 00:41:52,070 --> 00:41:55,670 And hit Enter, and there's apparently no difference. 866 00:41:55,670 --> 00:41:59,450 Which is to say, it seems that we can distill Google's functionality down 867 00:41:59,450 --> 00:42:03,520 to its essence in terms of its URL and kind of tie 868 00:42:03,520 --> 00:42:06,670 this morning's conversation together with this afternoon's and now 869 00:42:06,670 --> 00:42:10,350 our HTML focus to figure out how this exactly works. 870 00:42:10,350 --> 00:42:13,860 So let's go ahead and use this tool that developers 871 00:42:13,860 --> 00:42:16,300 would super often use these days. 872 00:42:16,300 --> 00:42:19,810 Going to Developer Tools, down here going for instance, 873 00:42:19,810 --> 00:42:21,370 to the Network tab as I did before. 874 00:42:21,370 --> 00:42:22,737 I'm going to click Preserve Log. 875 00:42:22,737 --> 00:42:24,820 And I'm going to go ahead and hit Reload because I 876 00:42:24,820 --> 00:42:29,330 want to see exactly what happens when I visit or search for cats on Google. 877 00:42:29,330 --> 00:42:32,230 So a little more modestly that results in 57 878 00:42:32,230 --> 00:42:36,680 HTTP requests, which at least is decently fewer than earlier. 879 00:42:36,680 --> 00:42:40,700 But let me look at the headers here. 880 00:42:40,700 --> 00:42:46,710 Rather, let me look at this top part. 881 00:42:46,710 --> 00:42:50,770 So this is the URL that I just requested and the request method is something 882 00:42:50,770 --> 00:42:54,190 we didn't really talk about explicitly before, but I used this keyword get. 883 00:42:54,190 --> 00:42:57,810 So get being the operative verb when I made that verbal request 884 00:42:57,810 --> 00:43:00,730 earlier for something of Google. 885 00:43:00,730 --> 00:43:04,812 Status code is 200 and this is a code you don't often see. 886 00:43:04,812 --> 00:43:06,520 But it turns out, when you visit websites 887 00:43:06,520 --> 00:43:11,905 there is a number that you perhaps annoyingly occasionally see. 888 00:43:11,905 --> 00:43:14,240 Yeah, 404, perhaps the biggest. 889 00:43:14,240 --> 00:43:16,900 404 is what? 890 00:43:16,900 --> 00:43:19,530 Error more specifically, file not found. 891 00:43:19,530 --> 00:43:22,270 And indeed, there's this whole laundry list, 892 00:43:22,270 --> 00:43:31,560 HTTP status codes that the official list is-- not on Wikipedia-- is here. 893 00:43:31,560 --> 00:43:37,020 And let me scroll down, it turns out that you rarely hear about 200 894 00:43:37,020 --> 00:43:38,740 because it means everything is OK. 895 00:43:38,740 --> 00:43:41,621 But, indeed, when you visit a web page by default, if all is well, 896 00:43:41,621 --> 00:43:44,120 you're getting back in the virtual envelope from the server, 897 00:43:44,120 --> 00:43:47,890 as, say, Sean did for me with the cat, a 200 message saying OK, 898 00:43:47,890 --> 00:43:50,760 here is the satisfaction of your request. 899 00:43:50,760 --> 00:43:53,390 Less common would be to 201, 202. 900 00:43:53,390 --> 00:43:58,550 But if I scroll down here to the 400s, 400s are bad. 901 00:43:58,550 --> 00:44:03,640 Literally, bad request, if the browser or client has malformed its request. 902 00:44:03,640 --> 00:44:06,980 Unauthorized would mean there's some kind of authentication required. 903 00:44:06,980 --> 00:44:09,540 402, you don't really see payment required. 904 00:44:09,540 --> 00:44:12,610 Apparently future use has been ongoing for some time. 905 00:44:12,610 --> 00:44:17,430 Forbidden means, like some of you saw, like me, you had to chmod your files 906 00:44:17,430 --> 00:44:19,010 to make them world viewable. 907 00:44:19,010 --> 00:44:21,420 And then here's the famous 404 not found. 908 00:44:21,420 --> 00:44:23,800 So just years ago, people decided somewhat 909 00:44:23,800 --> 00:44:26,030 arbitrarily that 404 shall henceforth mean 910 00:44:26,030 --> 00:44:27,680 the file is not found on the server. 911 00:44:27,680 --> 00:44:31,700 And thus was born millions of mistakes that we all see later. 912 00:44:31,700 --> 00:44:34,880 Worse is-- well this one's kind of funny, gone. 913 00:44:34,880 --> 00:44:37,120 Like the page you're looking for is gone, 914 00:44:37,120 --> 00:44:39,130 although you won't typically see that. 915 00:44:39,130 --> 00:44:41,560 500, internal server error, you might see 916 00:44:41,560 --> 00:44:43,280 if you're developing a web-based business 917 00:44:43,280 --> 00:44:46,359 and you or your engineering team is prone to mistakes. 918 00:44:46,359 --> 00:44:48,650 Sometimes this means there's a particularly bad problem 919 00:44:48,650 --> 00:44:51,590 with the code on the backend, with load balancers these days. 920 00:44:51,590 --> 00:44:55,080 Not uncommon is to occasionally see 503 service unavailable, 921 00:44:55,080 --> 00:44:57,990 which typically means the load balancer is responding to you 922 00:44:57,990 --> 00:45:00,210 but no back servers are actually available, 923 00:45:00,210 --> 00:45:03,170 they're overloaded or offline or broken for some reason. 924 00:45:03,170 --> 00:45:06,900 And then another juicy one, that's worth noting now because it ties together 925 00:45:06,900 --> 00:45:10,880 our chat earlier, is moved permanently. 926 00:45:10,880 --> 00:45:12,610 This web page has moved permanently. 927 00:45:12,610 --> 00:45:15,470 Or found, the implication of which is that it actually 928 00:45:15,470 --> 00:45:17,250 wants you to go elsewhere. 929 00:45:17,250 --> 00:45:18,390 So let me do this. 930 00:45:18,390 --> 00:45:22,610 Let me go to this little text-based program, Telnet, 931 00:45:22,610 --> 00:45:26,460 and let me try going to Google.com port 80. 932 00:45:26,460 --> 00:45:30,010 Let me get their home page using version 1.1 933 00:45:30,010 --> 00:45:32,670 of HTTP, which I'm pretending to speak. 934 00:45:32,670 --> 00:45:35,640 And the host shall be Google.com. 935 00:45:35,640 --> 00:45:37,100 Enter. 936 00:45:37,100 --> 00:45:41,830 Notice what actually comes back if I visit not www.Google.com, which I did 937 00:45:41,830 --> 00:45:44,206 do earlier but just Google.com. 938 00:45:44,206 --> 00:45:50,120 A very, very small web page that literally says the document has moved. 939 00:45:50,120 --> 00:45:53,350 And most humans don't even see that because their browsers understand 940 00:45:53,350 --> 00:45:55,980 HTTP, specifically status codes. 941 00:45:55,980 --> 00:45:59,260 And what's the status code apparently that came back here? 942 00:45:59,260 --> 00:46:01,920 It's 301, moved permanently. 943 00:46:01,920 --> 00:46:02,800 What does that mean? 944 00:46:02,800 --> 00:46:06,060 Well, if you look a little lower, it includes a location header, 945 00:46:06,060 --> 00:46:09,430 which we've not seen before even though we've been experiencing it 946 00:46:09,430 --> 00:46:11,030 with some of today's demos. 947 00:46:11,030 --> 00:46:15,040 Google wants me to go to which URL instead? 948 00:46:15,040 --> 00:46:18,290 Yeah, so they apparently want me to go to www instead. 949 00:46:18,290 --> 00:46:20,080 So let me try that. 950 00:46:20,080 --> 00:46:25,100 Let me instead go to-- sorry, let me do this again. 951 00:46:25,100 --> 00:46:37,370 To www Enter, get slash HTTP 1.1 host www.Google.com Enter. 952 00:46:37,370 --> 00:46:39,700 And now it actually comes back. 953 00:46:39,700 --> 00:46:42,640 So Google wants me to go to www.Google.com. 954 00:46:42,640 --> 00:46:45,720 But both work apparently, it's not like the site is unresponsive 955 00:46:45,720 --> 00:46:48,240 like Harvard's was years ago as I mentioned. 956 00:46:48,240 --> 00:46:54,512 So why does Google want me to standardize on www.Google.com? 957 00:46:54,512 --> 00:46:55,958 STUDENT: [INAUDIBLE] 958 00:46:55,958 --> 00:46:58,250 DAVID MALAN: Yeah, force me to go to one central place 959 00:46:58,250 --> 00:46:59,615 so that they don't have to maintain two websites. 960 00:46:59,615 --> 00:47:00,577 Sure, why else? 961 00:47:00,577 --> 00:47:04,490 962 00:47:04,490 --> 00:47:11,350 Why did I tell you to go to CS50.io as opposed to www.CS50.io? 963 00:47:11,350 --> 00:47:18,980 Or why do you go to bit.ly instead of www.bit.ly for URL shortening? 964 00:47:18,980 --> 00:47:21,640 It's a popular URL shortening service. 965 00:47:21,640 --> 00:47:24,430 Easier and more to the point there. 966 00:47:24,430 --> 00:47:26,477 Shorter, not to have to type it. 967 00:47:26,477 --> 00:47:29,560 And so indeed, it's just this human convention that we have long had these 968 00:47:29,560 --> 00:47:33,590 subdomain's so to speak of, www--- or not even subdomains, host names, 969 00:47:33,590 --> 00:47:38,520 www.something.com, it was all the more of a visual cue that the user should be 970 00:47:38,520 --> 00:47:39,200 going there. 971 00:47:39,200 --> 00:47:41,550 It's a web page, but it's slightly more verbose. 972 00:47:41,550 --> 00:47:43,290 And also for technical reasons, turns out 973 00:47:43,290 --> 00:47:45,870 there's these things called cookies-- more on those tomorrow. 974 00:47:45,870 --> 00:47:50,169 And cookies are actually scoped to the domain name in question. 975 00:47:50,169 --> 00:47:52,210 So it turns out, especially for bigger companies, 976 00:47:52,210 --> 00:47:54,626 if you want to have multiple web applications, all of them 977 00:47:54,626 --> 00:47:58,660 in something.com, you can give them each their own cookies based 978 00:47:58,660 --> 00:48:00,550 on what that initial host name is. 979 00:48:00,550 --> 00:48:04,710 So you want to force your user to go to some host name, not just 980 00:48:04,710 --> 00:48:06,460 your root domain name so that you actually 981 00:48:06,460 --> 00:48:09,220 have a bit more control over what they're actually receiving. 982 00:48:09,220 --> 00:48:11,560 But we started this conversation by looking at Google, 983 00:48:11,560 --> 00:48:15,650 here, whose queries ended up looking like this. 984 00:48:15,650 --> 00:48:19,530 So it turns out, you know what, I bet we could re implement Google. 985 00:48:19,530 --> 00:48:23,200 And we don't even have to do it with Cloud9, but I'll do it over here. 986 00:48:23,200 --> 00:48:26,700 You could do this on your desktop as well. 987 00:48:26,700 --> 00:48:33,810 Let me go ahead and whittle this down to be called my version of Google. 988 00:48:33,810 --> 00:48:36,640 And then down here, let me get rid of the fake Latin text. 989 00:48:36,640 --> 00:48:40,800 And then here, let me introduce a new technique, a form tag, 990 00:48:40,800 --> 00:48:44,490 the action of which-- we'll come back to that actually. 991 00:48:44,490 --> 00:48:51,790 Form tag that has an input whose type shall equal text. 992 00:48:51,790 --> 00:48:55,506 And whose name is going to be oh, say, q. 993 00:48:55,506 --> 00:48:59,760 And then another input, whose type is submit, whose 994 00:48:59,760 --> 00:49:06,480 value is use my version of Google. 995 00:49:06,480 --> 00:49:09,320 Close quote, close tag, Save. 996 00:49:09,320 --> 00:49:11,140 Excuse me, it's not complete yet. 997 00:49:11,140 --> 00:49:13,770 But let me reload this page. 998 00:49:13,770 --> 00:49:14,400 Interesting. 999 00:49:14,400 --> 00:49:16,590 It's not all that sexy, either. 1000 00:49:16,590 --> 00:49:19,000 So let me add a logo here. 1001 00:49:19,000 --> 00:49:23,530 My version of Google, which notice is using an H1 tag, 1002 00:49:23,530 --> 00:49:25,520 heading one, which just means big and bold. 1003 00:49:25,520 --> 00:49:26,370 Reload. 1004 00:49:26,370 --> 00:49:26,870 OK. 1005 00:49:26,870 --> 00:49:28,078 It's getting a little better. 1006 00:49:28,078 --> 00:49:32,980 And frankly, Google 1999, it's not all that far off 1007 00:49:32,980 --> 00:49:37,492 now from what Google was if you want to relive the 1990s there. 1008 00:49:37,492 --> 00:49:39,200 All right, we need a little bit of color, 1009 00:49:39,200 --> 00:49:44,370 but it's not all that dissimilar to what it is now ironically or remarkably. 1010 00:49:44,370 --> 00:49:47,550 So let's just keep it here, we won't worry about aesthetics. 1011 00:49:47,550 --> 00:49:49,681 I want to go ahead and search for cats. 1012 00:49:49,681 --> 00:49:50,180 Whoops! 1013 00:49:50,180 --> 00:49:52,870 Not cats, but cats. 1014 00:49:52,870 --> 00:49:53,590 Huh. 1015 00:49:53,590 --> 00:49:59,200 It doesn't work, but notice here, it did automatically append a question mark 1016 00:49:59,200 --> 00:50:01,474 and a q equals cats as soon as I search. 1017 00:50:01,474 --> 00:50:04,390 But I don't want the user to go to my page because I have no database, 1018 00:50:04,390 --> 00:50:05,810 I have no search results. 1019 00:50:05,810 --> 00:50:06,750 What could I do? 1020 00:50:06,750 --> 00:50:13,120 It turns out that I could go in here and add an action whose value is https 1021 00:50:13,120 --> 00:50:18,130 www.Google.com/search and just to be clear, 1022 00:50:18,130 --> 00:50:22,070 I'm going to use a method of Get as opposed to something else, 1023 00:50:22,070 --> 00:50:24,020 which we'll come back to called Post. 1024 00:50:24,020 --> 00:50:28,180 Get, now, if I save this, reload my page. 1025 00:50:28,180 --> 00:50:35,080 And type cats, notice the URL from which I go and to which I go. 1026 00:50:35,080 --> 00:50:37,020 I seem to have re-implemented Google. 1027 00:50:37,020 --> 00:50:39,840 I'm sort of-- I've implemented the front-end so to speak, 1028 00:50:39,840 --> 00:50:42,230 Google has implemented a much harder backend. 1029 00:50:42,230 --> 00:50:46,260 But notice, it even works for dogs. 1030 00:50:46,260 --> 00:50:49,200 And notice it's pre-populating this field up here. 1031 00:50:49,200 --> 00:50:50,640 So what's actually going on? 1032 00:50:50,640 --> 00:50:53,310 Well, if we actually look at this HTTP request, 1033 00:50:53,310 --> 00:50:56,100 let me go to search for cats again. 1034 00:50:56,100 --> 00:50:59,340 But let me go ahead and open up that same developer toolbar 1035 00:50:59,340 --> 00:51:00,800 that I showed earlier. 1036 00:51:00,800 --> 00:51:03,500 And preserve the logs so we can see everything that happens. 1037 00:51:03,500 --> 00:51:06,600 And now I'm going to click Use my version of Google. 1038 00:51:06,600 --> 00:51:08,340 Let's see what actually goes through. 1039 00:51:08,340 --> 00:51:13,880 Here, in Google's case, notice that I'm requesting this URL, q equals cats. 1040 00:51:13,880 --> 00:51:17,000 Method is get 200, but where did that request come from? 1041 00:51:17,000 --> 00:51:19,210 Whereas before it came from Google's own server. 1042 00:51:19,210 --> 00:51:21,090 Well, their server was just a web page that I 1043 00:51:21,090 --> 00:51:24,820 happened to visit at www.Google.com, so I filled it out and submitted it. 1044 00:51:24,820 --> 00:51:28,432 But there's nothing stopping me from filling out or creating my own web 1045 00:51:28,432 --> 00:51:32,780 form whose action, so to speak, goes elsewhere for fulfillment. 1046 00:51:32,780 --> 00:51:35,390 That's not typically the common case but it does rather 1047 00:51:35,390 --> 00:51:39,610 tie all of these various ingredients together. 1048 00:51:39,610 --> 00:51:43,330 So what does this mean now for the alternatives? 1049 00:51:43,330 --> 00:51:47,060 There's Get and then lastly, there's this thing called Post. 1050 00:51:47,060 --> 00:51:51,620 When might you not want to use Get, and why, based only on the example 1051 00:51:51,620 --> 00:51:52,500 we've seen here. 1052 00:51:52,500 --> 00:51:58,176 1053 00:51:58,176 --> 00:51:59,754 STUDENT: [INAUDIBLE] 1054 00:51:59,754 --> 00:52:00,420 DAVID MALAN: OK. 1055 00:52:00,420 --> 00:52:02,690 So if you just want one result, you might not use Get. 1056 00:52:02,690 --> 00:52:05,010 You could still use Get for that. 1057 00:52:05,010 --> 00:52:10,710 And in fact, actually we can-- let's see, if we can distill this. 1058 00:52:10,710 --> 00:52:16,830 If we go to google.com, you've reminded me of the I'm feeling lucky button. 1059 00:52:16,830 --> 00:52:20,020 If you do search, click on I'm feeling lucky. 1060 00:52:20,020 --> 00:52:23,670 Let me inspect this so we can sniff our own network traffic so to speak. 1061 00:52:23,670 --> 00:52:25,470 Click I'm feeling lucky. 1062 00:52:25,470 --> 00:52:26,970 Let's see what's slightly different. 1063 00:52:26,970 --> 00:52:29,820 We went to the top hit, which apparently is Wikipedia. 1064 00:52:29,820 --> 00:52:33,040 And notice the one thing that's different here 1065 00:52:33,040 --> 00:52:41,250 besides all of this nonsense is site source-- is it this? 1066 00:52:41,250 --> 00:52:42,870 No. 1067 00:52:42,870 --> 00:52:45,622 What is the I'm feeling lucky icon? 1068 00:52:45,622 --> 00:52:46,930 Ah. 1069 00:52:46,930 --> 00:52:49,850 Let's see if we can figure this out real fast. 1070 00:52:49,850 --> 00:52:52,760 Button L. OK, I think it might be this. 1071 00:52:52,760 --> 00:52:55,310 Let me secretly make a one quick change-- or not so 1072 00:52:55,310 --> 00:52:57,170 secretly, while everyone watches. 1073 00:52:57,170 --> 00:53:04,900 Input, type equals hidden, value equals 1. 1074 00:53:04,900 --> 00:53:09,950 And then the name of that field shall equal this. 1075 00:53:09,950 --> 00:53:11,950 So I'm guessing this could backfire. 1076 00:53:11,950 --> 00:53:15,450 I'm guessing that the means by which Google has implemented 1077 00:53:15,450 --> 00:53:17,890 their I'm feeling lucky button is so long 1078 00:53:17,890 --> 00:53:23,760 as the web form submits a name of button i or button 1 with a value of 1. 1079 00:53:23,760 --> 00:53:27,050 My hunch is that's going to take us immediately to the first search result. 1080 00:53:27,050 --> 00:53:27,800 So let's try that. 1081 00:53:27,800 --> 00:53:31,010 Let me go back to my version of this. 1082 00:53:31,010 --> 00:53:37,934 Click Reload, to refresh the form and search this time for giraffes. 1083 00:53:37,934 --> 00:53:39,100 Whoops, that's not giraffes. 1084 00:53:39,100 --> 00:53:41,310 Giraffes, just to prove that this is different. 1085 00:53:41,310 --> 00:53:43,506 Enter. 1086 00:53:43,506 --> 00:53:46,649 Yeah, this is the top hit for giraffes on google.com. 1087 00:53:46,649 --> 00:53:47,940 So what am I playing with here? 1088 00:53:47,940 --> 00:53:51,315 I'm playing with HTTP parameters. 1089 00:53:51,315 --> 00:53:53,440 And indeed, this is what ultimately drives the web. 1090 00:53:53,440 --> 00:53:55,540 There's all the silly aesthetics of HTML, 1091 00:53:55,540 --> 00:53:58,720 of hyperlinks and images and bold facing and blue text and sans 1092 00:53:58,720 --> 00:53:59,940 serif and the like. 1093 00:53:59,940 --> 00:54:03,090 But none of that is functional per se, it's all aesthetic, a markup. 1094 00:54:03,090 --> 00:54:06,460 With HTTP though, the protocol that web browsers and server's speak, 1095 00:54:06,460 --> 00:54:11,830 we have the ability to pass input from browser, and in turn human, to server. 1096 00:54:11,830 --> 00:54:14,530 And the simplest of schemes is used to do that. 1097 00:54:14,530 --> 00:54:17,590 Literally, what a browser does to send input 1098 00:54:17,590 --> 00:54:23,570 is to send a value like-- a name like q with a value like cat. 1099 00:54:23,570 --> 00:54:27,070 And if there is a second argument or input to provide, 1100 00:54:27,070 --> 00:54:31,120 there is literally an ampersand and then you say and-- what was it? 1101 00:54:31,120 --> 00:54:34,710 btnI equals 1. 1102 00:54:34,710 --> 00:54:38,810 And then another ampersand if you have a third key-value pair or HTTP parameter, 1103 00:54:38,810 --> 00:54:42,250 and that is how the entire web works with web forms. 1104 00:54:42,250 --> 00:54:45,360 If you are using Facebook Messenger and you fill out the little box 1105 00:54:45,360 --> 00:54:47,720 to send a message and hit Enter, what are you doing? 1106 00:54:47,720 --> 00:54:49,690 You are sending the equivalent of a message 1107 00:54:49,690 --> 00:54:52,440 like this, that probably has not cats for q, 1108 00:54:52,440 --> 00:54:53,970 but whatever message you typed in. 1109 00:54:53,970 --> 00:54:55,980 And it's probably not called q for query, 1110 00:54:55,980 --> 00:54:57,940 it's probably called m for message or whatever 1111 00:54:57,940 --> 00:54:59,460 Facebook has decided to call it. 1112 00:54:59,460 --> 00:55:02,210 But these very simple basic paradigms are 1113 00:55:02,210 --> 00:55:06,640 the entirety of what drive the web and these basic interactions. 1114 00:55:06,640 --> 00:55:10,970 But sometimes you might not want to see this in the URL. 1115 00:55:10,970 --> 00:55:16,720 So to come back to the earlier question, when might you not want to use Get, 1116 00:55:16,720 --> 00:55:21,400 whereby Get means that this kind of stuff ends up in the URL? 1117 00:55:21,400 --> 00:55:24,950 Indeed, I keep showing in the browser, precisely the results 1118 00:55:24,950 --> 00:55:26,210 of clicking Submit. 1119 00:55:26,210 --> 00:55:30,750 When would you not want your query or your human input to appear in the URL, 1120 00:55:30,750 --> 00:55:31,950 would you say? 1121 00:55:31,950 --> 00:55:33,610 Yeah. 1122 00:55:33,610 --> 00:55:34,530 Typing in a password. 1123 00:55:34,530 --> 00:55:36,690 Don't want it to be there, why, to be clear? 1124 00:55:36,690 --> 00:55:37,523 STUDENT: [INAUDIBLE] 1125 00:55:37,523 --> 00:55:39,394 1126 00:55:39,394 --> 00:55:42,310 DAVID MALAN: But I mean suppose it was just you in from your computer. 1127 00:55:42,310 --> 00:55:44,522 Let me push back harder, still bad, why? 1128 00:55:44,522 --> 00:55:47,604 1129 00:55:47,604 --> 00:55:49,000 STUDENT: [INAUDIBLE] 1130 00:55:49,000 --> 00:55:50,750 DAVID MALAN: Yeah, very reasonable, right? 1131 00:55:50,750 --> 00:55:54,070 Especially since these days there's always this notion of auto complete 1132 00:55:54,070 --> 00:55:55,760 or a history in your browser. 1133 00:55:55,760 --> 00:55:57,690 And when it gets stored in the URL it's being 1134 00:55:57,690 --> 00:56:00,240 saved for your later convenience presumably 1135 00:56:00,240 --> 00:56:04,770 or for your sibling or significant other or parents or kids or whoever, 1136 00:56:04,770 --> 00:56:05,856 prying eyes as well. 1137 00:56:05,856 --> 00:56:07,230 So you might not want to do that. 1138 00:56:07,230 --> 00:56:09,188 What else besides passwords might be sensitive? 1139 00:56:09,188 --> 00:56:13,800 1140 00:56:13,800 --> 00:56:14,750 Usernames. 1141 00:56:14,750 --> 00:56:15,540 Usernames. 1142 00:56:15,540 --> 00:56:17,748 Yeah, a little less sensitive but maybe not something 1143 00:56:17,748 --> 00:56:21,070 you want to reveal for your accounts. 1144 00:56:21,070 --> 00:56:24,330 Credit card information, I mean anything that mildly personal, 1145 00:56:24,330 --> 00:56:27,090 you probably don't want it appearing in the URL insofar 1146 00:56:27,090 --> 00:56:32,150 as it ends up in the browser's cache and history and autocomplete and so forth. 1147 00:56:32,150 --> 00:56:36,086 In fact, why do some people use-- well, let's be more technical. 1148 00:56:36,086 --> 00:56:40,010 Technically, why do people use incognito mode or private mode browsing? 1149 00:56:40,010 --> 00:56:43,100 Well, what does it not do? 1150 00:56:43,100 --> 00:56:44,050 No caches. 1151 00:56:44,050 --> 00:56:46,950 Yeah, no caching, no cookies and more on cookies tomorrow. 1152 00:56:46,950 --> 00:56:50,910 So by using incognito mode or private mode in your browser, among the things 1153 00:56:50,910 --> 00:56:54,010 it does is it doesn't save the autocomplete and the history. 1154 00:56:54,010 --> 00:56:57,592 So if you did have the misfortune of going to a website that foolishly 1155 00:56:57,592 --> 00:57:00,050 is putting your credit card and email address and user name 1156 00:57:00,050 --> 00:57:04,970 and such in the URL such that it gets saved, at least in cognito mode, 1157 00:57:04,970 --> 00:57:07,684 when you close it, throws that information away. 1158 00:57:07,684 --> 00:57:10,850 Now in practice, most people use it not for that defense because this is not 1159 00:57:10,850 --> 00:57:12,558 a common problem, but really because they 1160 00:57:12,558 --> 00:57:15,420 don't want websites they're visiting and other such things to end up 1161 00:57:15,420 --> 00:57:17,340 at all in their history as well. 1162 00:57:17,340 --> 00:57:20,640 But the same would go true for credit card numbers or the like. 1163 00:57:20,640 --> 00:57:23,890 So I can think of at least a few other things like YouTube, 1164 00:57:23,890 --> 00:57:26,080 like you upload videos to YouTube. 1165 00:57:26,080 --> 00:57:29,480 How in the world do you put a video in the URL? 1166 00:57:29,480 --> 00:57:32,850 Or how do you put a picture in a URL? 1167 00:57:32,850 --> 00:57:37,500 All right, so there is kind of some non-obvious problems 1168 00:57:37,500 --> 00:57:40,135 to with non-obvious solutions that arise if we're using Get 1169 00:57:40,135 --> 00:57:41,940 and in turn the URL alone. 1170 00:57:41,940 --> 00:57:44,260 And so that too might kind of bite us. 1171 00:57:44,260 --> 00:57:47,550 And indeed, there's no official limit on the length of URLs. 1172 00:57:47,550 --> 00:57:52,090 But there is sort of realistic limit of like 1,000 characters, 2,000 1173 00:57:52,090 --> 00:57:55,300 characters, unfortunately it totally differs by browser. 1174 00:57:55,300 --> 00:57:58,080 So thankfully, there exists an alternative to Get 1175 00:57:58,080 --> 00:58:02,680 called not Get but Post that functionally 1176 00:58:02,680 --> 00:58:05,570 does the same kind of thing, it still has key-values and pairs 1177 00:58:05,570 --> 00:58:07,040 and equal signs and ampersands. 1178 00:58:07,040 --> 00:58:09,630 But it doesn't put it in the URL, it instead so to speak 1179 00:58:09,630 --> 00:58:11,670 puts it deeper into the virtual envelope. 1180 00:58:11,670 --> 00:58:14,900 So it's still there, but it's not exposed to the browser in this way. 1181 00:58:14,900 --> 00:58:19,590 And it lets us upload gigabyte video files, megabyte image files, 1182 00:58:19,590 --> 00:58:21,860 not to mention our email addresses and passwords 1183 00:58:21,860 --> 00:58:23,810 and credit card numbers and the like. 1184 00:58:23,810 --> 00:58:28,750 And to enable that you simply do this, change it to Post. 1185 00:58:28,750 --> 00:58:33,170 Unfortunately the server has to support it. 1186 00:58:33,170 --> 00:58:36,620 So if I now search for cats, again, using Post, 1187 00:58:36,620 --> 00:58:39,000 unfortunately Google just doesn't cooperate 1188 00:58:39,000 --> 00:58:42,530 because for whatever technical or policy reason they don't want to support Post. 1189 00:58:42,530 --> 00:58:45,740 And it's probably just because it's an unnecessary feature on their servers. 1190 00:58:45,740 --> 00:58:47,760 And in the case of search results, they probably 1191 00:58:47,760 --> 00:58:50,390 want people linking to them for advertising reasons, 1192 00:58:50,390 --> 00:58:51,850 for deep linking reasons. 1193 00:58:51,850 --> 00:58:55,320 So in fact, one of the most compelling reasons to use Get 1194 00:58:55,320 --> 00:58:58,040 is when you do want stuff to end up in the URL. 1195 00:58:58,040 --> 00:59:01,580 If I highlight this URL and paste it into an email, 1196 00:59:01,580 --> 00:59:03,807 I want you to see the exact same search results. 1197 00:59:03,807 --> 00:59:05,640 And there's nothing more annoying-- and this 1198 00:59:05,640 --> 00:59:08,920 is common to big business, who have pretty shoddy websites, where 1199 00:59:08,920 --> 00:59:11,540 there's no state maintained in the URL. 1200 00:59:11,540 --> 00:59:15,450 So if you're shopping on some website trying to buy something and the state, 1201 00:59:15,450 --> 00:59:17,810 the unique product identifier is not in the URL 1202 00:59:17,810 --> 00:59:21,190 simply because the website has been using Post or some other mechanism, 1203 00:59:21,190 --> 00:59:24,700 there's no way to deep link to that page that you're seeing. 1204 00:59:24,700 --> 00:59:26,700 And so the effect of this is you copy something, 1205 00:59:26,700 --> 00:59:29,600 you paste it into an email or instant message, someone clicks on it, 1206 00:59:29,600 --> 00:59:32,183 I just see the home page or I'm not seeing what you're seeing. 1207 00:59:32,183 --> 00:59:34,440 And this is all too common with big e-commerce sites, 1208 00:59:34,440 --> 00:59:37,250 not Amazon, but sort of less trendy ones that haven't really 1209 00:59:37,250 --> 00:59:41,620 given this much thought or care. 1210 00:59:41,620 --> 00:59:42,430 Woo! 1211 00:59:42,430 --> 00:59:44,800 That was a lot. 1212 00:59:44,800 --> 00:59:45,415 Any questions? 1213 00:59:45,415 --> 00:59:47,931 1214 00:59:47,931 --> 00:59:48,430 No? 1215 00:59:48,430 --> 00:59:48,930 All right. 1216 00:59:48,930 --> 00:59:51,620 So where are we going with all of this? 1217 00:59:51,620 --> 00:59:55,480 So today was meant to start-- well, we started pretty low so 1218 00:59:55,480 --> 00:59:58,230 to speak with binary and we sort of built our way back up. 1219 00:59:58,230 --> 01:00:00,630 And then we reset ourselves looking at how the web works 1220 01:00:00,630 --> 01:00:03,500 and incarnation of all of these ideas that 1221 01:00:03,500 --> 01:00:07,620 have been-- on top of which we've built to get to this point. 1222 01:00:07,620 --> 01:00:08,780 Where do we go tomorrow? 1223 01:00:08,780 --> 01:00:11,750 So in the morning, we'll take a look at the general notion of privacy, 1224 01:00:11,750 --> 01:00:13,810 security, and as it relates to society. 1225 01:00:13,810 --> 01:00:16,480 Drawing upon a couple of current events from a few months 1226 01:00:16,480 --> 01:00:20,210 ago like the FBI issues with Apple and how that played out 1227 01:00:20,210 --> 01:00:23,180 and what the underlying questions were, the general idea of encryption 1228 01:00:23,180 --> 01:00:26,540 and how that works and what it's good for and what risks it still 1229 01:00:26,540 --> 01:00:27,350 presents to you. 1230 01:00:27,350 --> 01:00:31,950 A case study like something like Dropbox or SkyDrive or one drive or any number 1231 01:00:31,950 --> 01:00:35,230 of incarnations of web-based storage for consumers. 1232 01:00:35,230 --> 01:00:38,140 Looking then a little bit about programming. 1233 01:00:38,140 --> 01:00:42,200 Talking about some of the basic building blocks, some of the most common data 1234 01:00:42,200 --> 01:00:44,235 structures and algorithms that people use 1235 01:00:44,235 --> 01:00:47,360 that you might typically learn in an instructor or computer science course. 1236 01:00:47,360 --> 01:00:49,776 And the kinds of ingredients you bring in a design meeting 1237 01:00:49,776 --> 01:00:52,810 when you're trying to design some piece of software thinking through, 1238 01:00:52,810 --> 01:00:55,240 say on a white board, how is it we're going to build this 1239 01:00:55,240 --> 01:00:57,323 or how are we going to build this efficiently, how 1240 01:00:57,323 --> 01:00:59,780 are we going to do our analytics in a more efficient way 1241 01:00:59,780 --> 01:01:03,690 than just throwing it all in a database and just searching in an obvious way, 1242 01:01:03,690 --> 01:01:06,160 actually engineering non-obvious solutions. 1243 01:01:06,160 --> 01:01:10,190 Technology stacks, which is just kind of a generic way of describing types 1244 01:01:10,190 --> 01:01:14,270 of software and work flows and design patterns so to speak, 1245 01:01:14,270 --> 01:01:18,170 with which you can build something sort of a general methodologies. 1246 01:01:18,170 --> 01:01:19,960 And then finally, web programming, looking 1247 01:01:19,960 --> 01:01:23,280 not at HTML and CSS and the aesthetics of today's focus, 1248 01:01:23,280 --> 01:01:26,670 but rather on some of the technologies that 1249 01:01:26,670 --> 01:01:28,851 underlie the most dynamic of websites. 1250 01:01:28,851 --> 01:01:31,350 For instance, when you click and drag on Google Maps and you 1251 01:01:31,350 --> 01:01:34,500 suddenly see an infinite number of squares 1252 01:01:34,500 --> 01:01:36,750 from around the world, tiles that represent that map-- 1253 01:01:36,750 --> 01:01:38,090 how is something like that working? 1254 01:01:38,090 --> 01:01:41,339 When you're using Facebook Messenger and all of a sudden a new message pops up 1255 01:01:41,339 --> 01:01:44,967 without the whole web page reloading or without you needing to reload the page, 1256 01:01:44,967 --> 01:01:46,050 how does all of that work? 1257 01:01:46,050 --> 01:01:47,966 It's ultimately driven by this language called 1258 01:01:47,966 --> 01:01:52,150 JavaScript, which has no relationship to Java, another programming language 1259 01:01:52,150 --> 01:01:52,920 altogether. 1260 01:01:52,920 --> 01:01:55,400 But as part of our technology stacks discussion tomorrow, 1261 01:01:55,400 --> 01:01:59,730 we'll start sort of a laundry list of yet more words of jargon and product 1262 01:01:59,730 --> 01:02:03,490 names and the like just so that you're not necessarily comfy with all 1263 01:02:03,490 --> 01:02:06,890 of those topics, but at least have seen them and can kind of roughly mentally 1264 01:02:06,890 --> 01:02:08,020 categorize them all. 1265 01:02:08,020 --> 01:02:12,870 So as to look more effectively up that additional information. 1266 01:02:12,870 --> 01:02:14,950 Any questions? 1267 01:02:14,950 --> 01:02:15,450 All right. 1268 01:02:15,450 --> 01:02:17,196 Well, why don't we officially wrap here. 1269 01:02:17,196 --> 01:02:19,570 I'll turn on some music, I'll spend some one-on-one time. 1270 01:02:19,570 --> 01:02:21,090 If you have any questions you want me to rewind 1271 01:02:21,090 --> 01:02:23,090 with any of today's topics or hands on material, 1272 01:02:23,090 --> 01:02:25,637 I believe there are some snacks and drinks outside. 1273 01:02:25,637 --> 01:02:28,720 There's a reception officially til 6, I'll stick around for any questions. 1274 01:02:28,720 --> 01:02:30,000 But otherwise we'll see you in the morning 1275 01:02:30,000 --> 01:02:32,530 and I'll send around an e-mail tonight with maybe some URLs from today 1276 01:02:32,530 --> 01:02:34,155 that you might want to look at to play. 1277 01:02:34,155 --> 01:02:35,900 So enjoy. 1278 01:02:35,900 --> 01:02:38,589