1 00:00:00,000 --> 00:00:00,150 2 00:00:00,150 --> 00:00:01,330 JARED POCHTAR: Hi, everyone. 3 00:00:01,330 --> 00:00:02,070 I'm Jared. 4 00:00:02,070 --> 00:00:02,940 And this is Gabriel. 5 00:00:02,940 --> 00:00:04,230 GABRIEL GUIMARAES: Hello everybody. 6 00:00:04,230 --> 00:00:06,330 JARED POCHTAR: And we're here to talk about hate 7 00:00:06,330 --> 00:00:09,185 Pagedraw today for the first time. 8 00:00:09,185 --> 00:00:11,310 We're really excited to talk about this, because we 9 00:00:11,310 --> 00:00:15,717 think this is the future of how web apps will be developed. 10 00:00:15,717 --> 00:00:18,300 I've been working on web apps for a long time, so has Gabriel. 11 00:00:18,300 --> 00:00:21,510 And there's always this really annoying pain point 12 00:00:21,510 --> 00:00:23,710 of dealing with HTML and CSS. 13 00:00:23,710 --> 00:00:26,530 And it's something that everyone thought was inevitable, 14 00:00:26,530 --> 00:00:29,837 that it's a fundamental building block of the web, 15 00:00:29,837 --> 00:00:31,545 you're always going to have deal with it, 16 00:00:31,545 --> 00:00:35,400 and you're always going to have to worry, and fuss, and get 17 00:00:35,400 --> 00:00:38,210 around the fact that browsers are a little annoying. 18 00:00:38,210 --> 00:00:42,950 We could come up with a way to add a layer of indirection. 19 00:00:42,950 --> 00:00:44,900 So you could just do what you want to do. 20 00:00:44,900 --> 00:00:48,060 You just wanted to draw what you want your web apps look, what 21 00:00:48,060 --> 00:00:51,810 you want your interfaces to look like, hook them up to data, 22 00:00:51,810 --> 00:00:54,340 and have it automatically be coded so you don't have 23 00:00:54,340 --> 00:00:57,750 to spend that time dealing with the fussiness of whatever CSS 24 00:00:57,750 --> 00:00:59,034 is doing these days. 25 00:00:59,034 --> 00:00:59,950 We are really excited. 26 00:00:59,950 --> 00:01:04,830 This is the first time we're showing it to anyone outside of our team. 27 00:01:04,830 --> 00:01:07,230 This is technology that's a sneak preview. 28 00:01:07,230 --> 00:01:08,830 It's not ready for release yet. 29 00:01:08,830 --> 00:01:11,930 But CS50 has been a really big part of both of our lives. 30 00:01:11,930 --> 00:01:15,420 And we wanted to make sure that CS50 students for their final projects 31 00:01:15,420 --> 00:01:21,360 this year got access to this preview of what the future of software development 32 00:01:21,360 --> 00:01:22,650 is. 33 00:01:22,650 --> 00:01:26,910 It's open through December to anyone with an @college.harvard.edu email 34 00:01:26,910 --> 00:01:29,840 address so that everyone who is at Harvard College 35 00:01:29,840 --> 00:01:32,450 can use Pagedraw to make their final projects. 36 00:01:32,450 --> 00:01:36,630 We can't wait to see what you do with it. 37 00:01:36,630 --> 00:01:39,010 So without further ado, I'll hand it off to Gabriel, 38 00:01:39,010 --> 00:01:41,090 who used to be head TF of CS50 at one point. 39 00:01:41,090 --> 00:01:42,540 So this is kind of his show. 40 00:01:42,540 --> 00:01:43,640 Gabriel, take it away. 41 00:01:43,640 --> 00:01:44,640 GABRIEL GUIMARAES: Cool. 42 00:01:44,640 --> 00:01:46,620 Thank you very much, Jared. 43 00:01:46,620 --> 00:01:51,600 Yeah, we're very excited to be here, and again, Jared said it. 44 00:01:51,600 --> 00:01:54,420 It is already open as of, I think, a couple of days 45 00:01:54,420 --> 00:01:58,110 ago to all @college.harvard.edu email addresses. 46 00:01:58,110 --> 00:02:01,320 Now, in case you're wondering, you're at Yale, 47 00:02:01,320 --> 00:02:04,080 or you're taking CS50 from a distance, and you 48 00:02:04,080 --> 00:02:07,890 don't have an @college.harvard.edu-- the reason why 49 00:02:07,890 --> 00:02:10,199 we're opening just for Harvard students right now 50 00:02:10,199 --> 00:02:13,950 is because it's not a full release yet. 51 00:02:13,950 --> 00:02:16,080 We want to make sure that we're on campus here 52 00:02:16,080 --> 00:02:17,970 to give everyone the full support that people 53 00:02:17,970 --> 00:02:19,844 need to use Pagedraw for their final product. 54 00:02:19,844 --> 00:02:21,640 If you really want to use it, that's fine. 55 00:02:21,640 --> 00:02:24,350 You can e-mail us at team@pagedraw.io. 56 00:02:24,350 --> 00:02:28,350 And we can probably get you set up an account too, OK? 57 00:02:28,350 --> 00:02:29,070 Cool. 58 00:02:29,070 --> 00:02:32,390 So first of all, Pagedraw lives at pagedraw.io, 59 00:02:32,390 --> 00:02:34,650 so go there if you want to check it out. 60 00:02:34,650 --> 00:02:37,394 And again, I want to talk a little bit about what we're doing. 61 00:02:37,394 --> 00:02:39,810 What we're tyring to do is automate front-end development. 62 00:02:39,810 --> 00:02:40,410 OK? 63 00:02:40,410 --> 00:02:45,390 Front-end development has always been done in companies and by developers 64 00:02:45,390 --> 00:02:47,140 usually where there are two steps. 65 00:02:47,140 --> 00:02:49,440 The first step is the design step, the design process, 66 00:02:49,440 --> 00:02:51,864 where you think what is my app, let's say Snapchat. 67 00:02:51,864 --> 00:02:53,280 What is my app going to look like? 68 00:02:53,280 --> 00:02:54,660 Oh, he's going to have a ghost. 69 00:02:54,660 --> 00:02:57,720 I'm going to use this particular color of yellow and everything. 70 00:02:57,720 --> 00:03:02,580 And then once the design is conceptualized, you have to code it up. 71 00:03:02,580 --> 00:03:04,230 You have to make the app live. 72 00:03:04,230 --> 00:03:09,360 And basically, this coding it up, we can't fully automate 100% of that, 73 00:03:09,360 --> 00:03:12,210 because there's a lot of cool stuff that's happening in the back end 74 00:03:12,210 --> 00:03:13,469 that humans still have to do. 75 00:03:13,469 --> 00:03:16,260 But what we do is we automate the front-end development part of it. 76 00:03:16,260 --> 00:03:19,230 So we take the designs, the design conceptualization, 77 00:03:19,230 --> 00:03:21,580 and we turn it into code. 78 00:03:21,580 --> 00:03:28,890 On our particular example that we like is Facebook. 79 00:03:28,890 --> 00:03:33,450 So this is Pagedraw. 80 00:03:33,450 --> 00:03:36,930 It should be very similar if you use some GUI 81 00:03:36,930 --> 00:03:41,430 graphical interface to basically draw and drag blocks around. 82 00:03:41,430 --> 00:03:45,630 And basically, what we can do is you can just take any of these blocks 83 00:03:45,630 --> 00:03:52,050 and place wherever you want, even multiple of them. 84 00:03:52,050 --> 00:03:55,050 But then the magic happens when you click Export, 85 00:03:55,050 --> 00:03:59,850 and we essentially generate all the HTML and the CSS 86 00:03:59,850 --> 00:04:02,970 that's going to make this page live. 87 00:04:02,970 --> 00:04:05,220 And this works across multiple screen sizes. 88 00:04:05,220 --> 00:04:07,680 It works with data coming from a back end. 89 00:04:07,680 --> 00:04:11,630 It works with all sorts of stuff that you would expect for a modern web app. 90 00:04:11,630 --> 00:04:12,130 OK? 91 00:04:12,130 --> 00:04:15,180 92 00:04:15,180 --> 00:04:22,680 So most of you are probably familiar with this, CS50 Finance. 93 00:04:22,680 --> 00:04:27,690 We went on, and we did CS50 Finance using Pagedraw as well, 94 00:04:27,690 --> 00:04:31,170 the reason being that we want to make sure that Pagedraw works very 95 00:04:31,170 --> 00:04:35,170 well with this CS50 framework, basically like the Python framework 96 00:04:35,170 --> 00:04:41,640 that you guys get for [AUDIO OUT], the Flask server and everything. 97 00:04:41,640 --> 00:04:45,687 So basically what we did is we prepared a CS50 bundle of Pagedraw 98 00:04:45,687 --> 00:04:47,520 that's going to be very helpful for everyone 99 00:04:47,520 --> 00:04:49,311 who wants to make a CS50 final project that 100 00:04:49,311 --> 00:04:54,060 uses both Pagedraw and the skeleton code that we provide-- 101 00:04:54,060 --> 00:04:56,250 that CS50 provides in problem set 7. 102 00:04:56,250 --> 00:04:57,710 OK? 103 00:04:57,710 --> 00:05:00,980 And again, this is just to show the code. 104 00:05:00,980 --> 00:05:07,250 And I want to draw the attention if you ignore the class names, which honestly 105 00:05:07,250 --> 00:05:12,650 do look kind of ugly, most of the rest, like using those nested in this manner, 106 00:05:12,650 --> 00:05:16,730 is the way that I as a developer would write this HTML code. 107 00:05:16,730 --> 00:05:19,250 So this is kind of like our little magic. 108 00:05:19,250 --> 00:05:23,204 The HTML code that we generate is not some hackish thing 109 00:05:23,204 --> 00:05:24,870 with like position absolute or whatever. 110 00:05:24,870 --> 00:05:26,720 It is the code that a developer would write 111 00:05:26,720 --> 00:05:29,510 by hand, which means that we can save you a lot of time 112 00:05:29,510 --> 00:05:31,600 by not having to write that code at all. 113 00:05:31,600 --> 00:05:34,740 OK, so let's get down to business. 114 00:05:34,740 --> 00:05:37,220 Basically, what we're going to have is that, 115 00:05:37,220 --> 00:05:39,540 again, we're automating front-end development, 116 00:05:39,540 --> 00:05:41,520 which means that we're not automating back-end development. 117 00:05:41,520 --> 00:05:44,561 So you still have to do all the back-end development in just the same way 118 00:05:44,561 --> 00:05:46,850 that you did, for example, for problem set 7 of CS50. 119 00:05:46,850 --> 00:05:52,040 So this is what we were considering back-end development, which 120 00:05:52,040 --> 00:05:55,255 is the routes of your application, the controller, 121 00:05:55,255 --> 00:05:56,630 and the model of your controller. 122 00:05:56,630 --> 00:05:59,120 So the routes of your application, in this case, 123 00:05:59,120 --> 00:06:03,375 hello, for example, if a user goes through yourapp/hello, 124 00:06:03,375 --> 00:06:05,000 it's going to be handled by this route. 125 00:06:05,000 --> 00:06:07,120 And then this route is going to do some stuff. 126 00:06:07,120 --> 00:06:09,080 In this case, it does basically nothing, but it 127 00:06:09,080 --> 00:06:10,788 could do more and more interesting stuff, 128 00:06:10,788 --> 00:06:13,190 and then render a template called Hello to HTML. 129 00:06:13,190 --> 00:06:14,940 This template is the front end. 130 00:06:14,940 --> 00:06:18,080 This template is the file that Pagedraw is going to generate, OK? 131 00:06:18,080 --> 00:06:22,310 So the idea is that Pagedraw generates all 132 00:06:22,310 --> 00:06:26,660 of these files-- apology.html, hello.html, and so on. 133 00:06:26,660 --> 00:06:29,370 And you're still responsible for writing all the code 134 00:06:29,370 --> 00:06:32,255 and files like application.pi and helpers.pi. 135 00:06:32,255 --> 00:06:35,330 136 00:06:35,330 --> 00:06:39,020 Now. a little word about compilers, because at heart Pagedraw 137 00:06:39,020 --> 00:06:40,460 is a compiler. 138 00:06:40,460 --> 00:06:44,660 So we're taking in as input designs. 139 00:06:44,660 --> 00:06:48,350 So it's not a compiler that compiles code into assembly like GCC, 140 00:06:48,350 --> 00:06:52,070 but it's a compiler that compiles designs into HTML and CSS. 141 00:06:52,070 --> 00:06:55,670 And because we're a compiler, we can do all sorts of cool stuff 142 00:06:55,670 --> 00:07:00,440 like optimizing your code to make sure that it runs across multiple screen 143 00:07:00,440 --> 00:07:02,790 sizes, but also with multiple browsers. 144 00:07:02,790 --> 00:07:06,030 And we can basically do things that ensure 145 00:07:06,030 --> 00:07:09,896 that everyone gets these cool benefits without having to worry about them. 146 00:07:09,896 --> 00:07:14,490 147 00:07:14,490 --> 00:07:17,120 And I didn't mention the model view controller idea. 148 00:07:17,120 --> 00:07:20,530 I just wanted to talk a little bit briefly about this. 149 00:07:20,530 --> 00:07:23,610 If you recall, model view controller is just this idea 150 00:07:23,610 --> 00:07:25,920 of separating things in your mind. 151 00:07:25,920 --> 00:07:27,210 OK? 152 00:07:27,210 --> 00:07:33,690 Usually when you make an application, you can have one huge file 153 00:07:33,690 --> 00:07:36,760 and just have all of the logic, as well as all the HTML, 154 00:07:36,760 --> 00:07:39,220 as well as all of the CSS in that one big file. 155 00:07:39,220 --> 00:07:42,280 It's just not really nice, because then your code gets really unwieldy, 156 00:07:42,280 --> 00:07:44,140 and it's hard to maintain later on. 157 00:07:44,140 --> 00:07:46,530 And basically model view controller is not a new model. 158 00:07:46,530 --> 00:07:49,800 It's a model that people have invented decades 159 00:07:49,800 --> 00:07:53,530 ago I think that just makes this separation a little bit simpler 160 00:07:53,530 --> 00:07:54,512 and easier to maintain. 161 00:07:54,512 --> 00:07:56,970 So the idea is that we have three parts of the application, 162 00:07:56,970 --> 00:08:00,060 and that basically entails that you are going to make different folders 163 00:08:00,060 --> 00:08:03,400 and place different files into each of these parts. 164 00:08:03,400 --> 00:08:06,620 And the model is the database. 165 00:08:06,620 --> 00:08:12,300 So for example, you guys for P Set 7, you had a SQL Lite database I believe. 166 00:08:12,300 --> 00:08:15,930 And that's just where your data lives-- so where are all of your posts are, 167 00:08:15,930 --> 00:08:20,550 and social network, or where are all of your stocks are in problem set 7. 168 00:08:20,550 --> 00:08:24,840 The controller is kind of where all of the interesting action happens. 169 00:08:24,840 --> 00:08:25,470 OK. 170 00:08:25,470 --> 00:08:29,820 For the sake of CS50 problem set 7, the controller 171 00:08:29,820 --> 00:08:33,480 was application.pi where you define all of the routes, 172 00:08:33,480 --> 00:08:39,010 and then you basically talk to the model to get the data from the database. 173 00:08:39,010 --> 00:08:42,240 You sometimes insert new data into the database. 174 00:08:42,240 --> 00:08:45,640 But at the end of the day, what you do is you grab this data, 175 00:08:45,640 --> 00:08:47,120 and you render a view. 176 00:08:47,120 --> 00:08:48,060 OK? 177 00:08:48,060 --> 00:08:50,400 And the view is just the way to display the data. 178 00:08:50,400 --> 00:08:50,900 OK? 179 00:08:50,900 --> 00:08:56,020 And you did this through HTML, CSS, and Jinja template files. 180 00:08:56,020 --> 00:09:00,520 Those are basically like those For loops that you can place into an HTML file 181 00:09:00,520 --> 00:09:01,980 to render multiple things. 182 00:09:01,980 --> 00:09:09,650 And this separation between controller and view 183 00:09:09,650 --> 00:09:13,650 has been something that's been basically consolidated by a lot of frameworks 184 00:09:13,650 --> 00:09:17,190 like React and Angular also, not only in this back-end 185 00:09:17,190 --> 00:09:20,860 versus front-end separation type of thing, but also even in the front end, 186 00:09:20,860 --> 00:09:25,450 now there is a front end of the front end with React or Angular, 187 00:09:25,450 --> 00:09:28,680 or there's a model view controller within the front end. 188 00:09:28,680 --> 00:09:30,910 I won't go too much into detail about this, 189 00:09:30,910 --> 00:09:35,700 but it's worth mentioning that Pagedraw works very well of all this stuff. 190 00:09:35,700 --> 00:09:38,650 And basically, the idea is that what we're automating is the view. 191 00:09:38,650 --> 00:09:41,230 We don't try to touch any of the controller or the model. 192 00:09:41,230 --> 00:09:44,820 In fact, your applications of pi should not care at all 193 00:09:44,820 --> 00:09:46,500 that you're using Pagedraw, OK? 194 00:09:46,500 --> 00:09:50,075 So if you're using Pagedraw or not, the back-end code 195 00:09:50,075 --> 00:09:52,410 that you're going to write is exactly the same. 196 00:09:52,410 --> 00:09:53,620 OK? 197 00:09:53,620 --> 00:09:55,898 And it's just a view that we're automating. 198 00:09:55,898 --> 00:09:58,770 199 00:09:58,770 --> 00:10:01,481 OK, so Pagedraw plus CS50 IDE. 200 00:10:01,481 --> 00:10:02,980 I already talked about some of this. 201 00:10:02,980 --> 00:10:10,140 But again, the idea is that we have all of these template files. 202 00:10:10,140 --> 00:10:12,090 And Pagedraw is going to generate them. 203 00:10:12,090 --> 00:10:14,030 So that means you should not touch them. 204 00:10:14,030 --> 00:10:16,650 And I'm going to show you in a second how to do that. 205 00:10:16,650 --> 00:10:20,100 And then all of your work should just go inside application.pi 206 00:10:20,100 --> 00:10:24,427 and inside Pagedraw to make those two basically work together. 207 00:10:24,427 --> 00:10:28,460 208 00:10:28,460 --> 00:10:35,320 OK, so for the sake of explaining what I just said, 209 00:10:35,320 --> 00:10:39,740 we're going to build a myFace hamster social network. 210 00:10:39,740 --> 00:10:43,550 And if you guys go to the pagedraw.io, you 211 00:10:43,550 --> 00:10:46,210 can find that we have some documentation here. 212 00:10:46,210 --> 00:10:50,180 And one of the most important guides is this CS50 final project 213 00:10:50,180 --> 00:10:55,760 in Pagedraw aptly named guide, which basically is a step-by-step guide that 214 00:10:55,760 --> 00:11:02,099 shows you how to make this app, which is hamster social network. 215 00:11:02,099 --> 00:11:04,640 So we're going to create a very simple hamster social network 216 00:11:04,640 --> 00:11:08,030 with a couple of pages that lets you add posts with images 217 00:11:08,030 --> 00:11:10,370 and then shows the posts, just so you get 218 00:11:10,370 --> 00:11:12,770 a feeling for how it is to use Pagedraw to create an app 219 00:11:12,770 --> 00:11:16,780 and how it integrates with the back end and everything. 220 00:11:16,780 --> 00:11:23,060 So again, the first thing we have to do is download the distribution code, 221 00:11:23,060 --> 00:11:27,940 which is almost the same as the P Set 7 code that you had, 222 00:11:27,940 --> 00:11:32,570 which is just giving you an application.pi with some simple stuff. 223 00:11:32,570 --> 00:11:36,640 So I'm going to do that here. 224 00:11:36,640 --> 00:11:42,600 225 00:11:42,600 --> 00:11:49,230 OK so what happened is I now have a project folder with templates. 226 00:11:49,230 --> 00:11:52,970 And templates, it only has a readme.md. 227 00:11:52,970 --> 00:11:54,580 I don't know if you guys can see that. 228 00:11:54,580 --> 00:11:55,170 There you go. 229 00:11:55,170 --> 00:11:58,170 It only has to readme.md, which basically 230 00:11:58,170 --> 00:12:01,610 says that files in this folder should be automatically created by Pagedraw. 231 00:12:01,610 --> 00:12:04,440 So again, this folder shouldn't be touched as much by this, 232 00:12:04,440 --> 00:12:07,950 but it does come with an application.pi, which doesn't have any routes yet. 233 00:12:07,950 --> 00:12:10,850 We're going to create all the routes in this guide. 234 00:12:10,850 --> 00:12:12,470 OK, so let's go ahead. 235 00:12:12,470 --> 00:12:15,800 The first part is that we need to install the Pagedraw Cloud9 integration 236 00:12:15,800 --> 00:12:16,470 plugin. 237 00:12:16,470 --> 00:12:19,120 Thanks to Jared, we have an awesome plugin that live 238 00:12:19,120 --> 00:12:21,230 syncs Pagedraw and Cloud9. 239 00:12:21,230 --> 00:12:30,120 So the way we're going to do this is click here, and then click here. 240 00:12:30,120 --> 00:12:35,240 So it's pagedraw.io/cloud9/install, and you just click this blue big button. 241 00:12:35,240 --> 00:12:37,260 It says this may take around 10 seconds. 242 00:12:37,260 --> 00:12:43,460 It's going to open a different page, and then this might take a while again. 243 00:12:43,460 --> 00:12:45,390 Bare with us. 244 00:12:45,390 --> 00:12:48,150 But then eventually this page is going to say, installed Pagedraw. 245 00:12:48,150 --> 00:12:51,540 246 00:12:51,540 --> 00:12:56,180 And then when it does, I promise this is not a big. 247 00:12:56,180 --> 00:12:57,210 It does take a while. 248 00:12:57,210 --> 00:13:02,000 249 00:13:02,000 --> 00:13:04,060 Yep, Pagedraw is installed in Cloud9. 250 00:13:04,060 --> 00:13:04,750 Cool. 251 00:13:04,750 --> 00:13:05,474 Thanks, Jared. 252 00:13:05,474 --> 00:13:08,440 253 00:13:08,440 --> 00:13:13,630 So now, basically, we have to refresh the CS50 IDE to make sure 254 00:13:13,630 --> 00:13:18,040 that there is this pop up that appears on the top right-hand side that 255 00:13:18,040 --> 00:13:20,789 says here Pagedraw sync active. 256 00:13:20,789 --> 00:13:22,330 Once you see that, you're good to go. 257 00:13:22,330 --> 00:13:24,970 And basically what this does is that now we're 258 00:13:24,970 --> 00:13:27,130 going to create our first page in Pagedraw. 259 00:13:27,130 --> 00:13:28,900 So this is the Pagedraw dashboard. 260 00:13:28,900 --> 00:13:30,970 We already have some pages like the Facebook page 261 00:13:30,970 --> 00:13:32,760 as an example that we give you. 262 00:13:32,760 --> 00:13:36,240 And then we're going to create a page called Index. 263 00:13:36,240 --> 00:13:39,640 Cool, this is our very first page. 264 00:13:39,640 --> 00:13:44,510 And here, basically there is this file path. 265 00:13:44,510 --> 00:13:46,540 I want to make this a little bit bigger. 266 00:13:46,540 --> 00:13:51,325 There is this file path, which I'm going to put in here /workspace/projects/ 267 00:13:51,325 --> 00:13:52,580 templates/index.html. 268 00:13:52,580 --> 00:13:55,260 269 00:13:55,260 --> 00:13:59,890 This is basically saying that Pagedraw is going to take this path, 270 00:13:59,890 --> 00:14:02,500 automatically compile whatever you have here, 271 00:14:02,500 --> 00:14:08,290 place it in this path in this CS50 IDE automatically for you, as you go, OK? 272 00:14:08,290 --> 00:14:09,560 So this is quite important. 273 00:14:09,560 --> 00:14:10,630 So I just did this. 274 00:14:10,630 --> 00:14:13,350 Let's now go to the CS50 IDE to see-- let 275 00:14:13,350 --> 00:14:17,100 me refresh this and see if we're actually going to have a new file 276 00:14:17,100 --> 00:14:20,010 there, which we should, and we do. 277 00:14:20,010 --> 00:14:23,570 So you see index.html was just automatically created here. 278 00:14:23,570 --> 00:14:24,070 Cool. 279 00:14:24,070 --> 00:14:26,730 Everything seems to be working. 280 00:14:26,730 --> 00:14:31,400 Now, what we're going to do is create the very first page. 281 00:14:31,400 --> 00:14:34,740 And the first thing I have to create is an artboard block. 282 00:14:34,740 --> 00:14:37,230 So to draw a block, just do Shift plus Drag, 283 00:14:37,230 --> 00:14:41,520 and you can do pinch to zoom in and out, OK? 284 00:14:41,520 --> 00:14:43,370 And then which is the block type here? 285 00:14:43,370 --> 00:14:44,620 There are various block types. 286 00:14:44,620 --> 00:14:46,036 We're going to create an artboard. 287 00:14:46,036 --> 00:14:48,520 Basically what this says is that everything we place inside 288 00:14:48,520 --> 00:14:50,950 of the artboard is going to be automatically compiled to code. 289 00:14:50,950 --> 00:14:52,950 Everything that we place outside of the artboard 290 00:14:52,950 --> 00:14:55,060 is not going to be compiled code. 291 00:14:55,060 --> 00:14:59,090 So I'm going to make my artboard have a size of like 700, 292 00:14:59,090 --> 00:15:02,380 because I did this yesterday, and I know it is a good size. 293 00:15:02,380 --> 00:15:04,810 And I'm going to click here. 294 00:15:04,810 --> 00:15:06,961 There's a little lock button that just basically 295 00:15:06,961 --> 00:15:10,210 doesn't let me move the artboard around just to make this a little bit easier. 296 00:15:10,210 --> 00:15:11,190 OK, cool. 297 00:15:11,190 --> 00:15:15,990 Now, we're going to make a page that looks 298 00:15:15,990 --> 00:15:18,270 like this one on the left-hand side. 299 00:15:18,270 --> 00:15:20,660 Let's just do it. 300 00:15:20,660 --> 00:15:23,230 I remember that I have some background that has this color. 301 00:15:23,230 --> 00:15:24,432 Let me copy it. 302 00:15:24,432 --> 00:15:25,890 So, again, I'm just drawing blocks. 303 00:15:25,890 --> 00:15:31,811 304 00:15:31,811 --> 00:15:33,435 And then I'm going to change the color. 305 00:15:33,435 --> 00:15:38,910 306 00:15:38,910 --> 00:15:41,220 I'm going to make a very thin line here as well. 307 00:15:41,220 --> 00:15:45,117 308 00:15:45,117 --> 00:15:46,825 Let's make this look a little bit better. 309 00:15:46,825 --> 00:15:50,740 310 00:15:50,740 --> 00:15:52,690 Cool. 311 00:15:52,690 --> 00:15:56,920 Now, I'm going to add those images that you see here like the myFace. 312 00:15:56,920 --> 00:16:00,070 313 00:16:00,070 --> 00:16:04,210 And then you just choose Image Block. 314 00:16:04,210 --> 00:16:08,698 And then-- oh, I need-- can someone give me a charger? 315 00:16:08,698 --> 00:16:09,198 Thanks. 316 00:16:09,198 --> 00:16:12,010 317 00:16:12,010 --> 00:16:13,630 So I'm just going to copy this link. 318 00:16:13,630 --> 00:16:14,800 I created an image block. 319 00:16:14,800 --> 00:16:17,320 320 00:16:17,320 --> 00:16:21,190 I'm just going to put this in the image source URL here. 321 00:16:21,190 --> 00:16:23,580 And then, ta da, we have the smiley image. 322 00:16:23,580 --> 00:16:27,580 323 00:16:27,580 --> 00:16:28,940 Cool. 324 00:16:28,940 --> 00:16:31,030 And I'm going to create a text block. 325 00:16:31,030 --> 00:16:33,820 326 00:16:33,820 --> 00:16:36,400 Text. 327 00:16:36,400 --> 00:16:43,720 And I'm using a font Candara with, I believe-- I'm going to say myFace. 328 00:16:43,720 --> 00:16:46,390 That's the logo over app. 329 00:16:46,390 --> 00:16:50,350 The font I can choose here-- Candara. 330 00:16:50,350 --> 00:16:53,170 And the font size, I believe, should be 24. 331 00:16:53,170 --> 00:16:54,790 There you go. 332 00:16:54,790 --> 00:16:55,510 Cool. 333 00:16:55,510 --> 00:16:59,230 I'm going to copy paste this block just to make another image 334 00:16:59,230 --> 00:17:02,705 block on this size. 335 00:17:02,705 --> 00:17:06,453 336 00:17:06,453 --> 00:17:08,369 But this one is not going to be a smiley face. 337 00:17:08,369 --> 00:17:10,217 It's going to be a pen. 338 00:17:10,217 --> 00:17:14,589 339 00:17:14,589 --> 00:17:15,089 Cool. 340 00:17:15,089 --> 00:17:17,210 Thank you very much. 341 00:17:17,210 --> 00:17:20,520 Not this one. 342 00:17:20,520 --> 00:17:21,240 There you go. 343 00:17:21,240 --> 00:17:22,050 Cool. 344 00:17:22,050 --> 00:17:25,619 Now, we have this-- basically, the simple skeleton of an app 345 00:17:25,619 --> 00:17:30,000 here, which, again, if we do Export, we're 346 00:17:30,000 --> 00:17:31,820 already going to see some HTML and CSS. 347 00:17:31,820 --> 00:17:35,401 And this already, , again live synced with the code in CS50 IDE. 348 00:17:35,401 --> 00:17:36,900 OK, but let's keep going and finish. 349 00:17:36,900 --> 00:17:40,230 Now, we have to create our posts. 350 00:17:40,230 --> 00:17:43,110 So let's create one post, which I'm going 351 00:17:43,110 --> 00:17:47,760 to do as a white background block. 352 00:17:47,760 --> 00:17:50,700 I'm going to add some corner around this to it, 353 00:17:50,700 --> 00:18:01,150 and I'm going to add a border with something like this, cool. 354 00:18:01,150 --> 00:18:02,030 And center it. 355 00:18:02,030 --> 00:18:04,174 And I want to place images inside of it. 356 00:18:04,174 --> 00:18:06,090 So I'm just going to make another image block. 357 00:18:06,090 --> 00:18:10,770 358 00:18:10,770 --> 00:18:11,970 Image. 359 00:18:11,970 --> 00:18:13,650 And I'm going to take this hamster. 360 00:18:13,650 --> 00:18:16,470 361 00:18:16,470 --> 00:18:18,500 Copy, . 362 00:18:18,500 --> 00:18:23,000 And, again, put this in an image source URL so that we have the hamster there. 363 00:18:23,000 --> 00:18:25,530 Cool. 364 00:18:25,530 --> 00:18:27,590 Now, we also have some text here. 365 00:18:27,590 --> 00:18:30,190 366 00:18:30,190 --> 00:18:31,870 So I'm going to add another text block. 367 00:18:31,870 --> 00:18:35,979 368 00:18:35,979 --> 00:18:37,395 The name of the hamsters is Simon. 369 00:18:37,395 --> 00:18:40,070 370 00:18:40,070 --> 00:18:48,830 I'm using a slightly more grayish and bold font. 371 00:18:48,830 --> 00:18:51,320 Cool. 372 00:18:51,320 --> 00:18:56,435 And I'm going to put here the time when this post was made-- 18 minutes. 373 00:18:56,435 --> 00:18:59,179 374 00:18:59,179 --> 00:18:59,720 There you go. 375 00:18:59,720 --> 00:19:01,070 When you have a text block, you can just double 376 00:19:01,070 --> 00:19:02,930 click on it to add the text inside. 377 00:19:02,930 --> 00:19:06,140 378 00:19:06,140 --> 00:19:07,800 And it can align those on the right. 379 00:19:07,800 --> 00:19:08,690 Cool. 380 00:19:08,690 --> 00:19:10,030 I'm going to make this not bold. 381 00:19:10,030 --> 00:19:13,160 382 00:19:13,160 --> 00:19:13,820 Sweet. 383 00:19:13,820 --> 00:19:16,040 So, again, this is just like styling, and now I'm 384 00:19:16,040 --> 00:19:22,697 going to create another text block here, which is going to be the text. 385 00:19:22,697 --> 00:19:25,280 I'm actually going to copy the one up here, because it already 386 00:19:25,280 --> 00:19:27,700 has the color that I want. 387 00:19:27,700 --> 00:19:32,618 388 00:19:32,618 --> 00:19:35,206 Cool. 389 00:19:35,206 --> 00:19:37,445 Hello. 390 00:19:37,445 --> 00:19:37,944 CS50. 391 00:19:37,944 --> 00:19:41,937 392 00:19:41,937 --> 00:19:42,437 Yeah. 393 00:19:42,437 --> 00:19:45,180 394 00:19:45,180 --> 00:19:47,520 OK, so we just reached a problem. 395 00:19:47,520 --> 00:19:50,910 You see that there is this red dashed line here? 396 00:19:50,910 --> 00:19:53,700 This is basically because right now, Pagedraw does not fully 397 00:19:53,700 --> 00:19:55,520 support overlapping blocks. 398 00:19:55,520 --> 00:19:59,550 By overlapping, I mean if this block is like this. 399 00:19:59,550 --> 00:20:01,220 We don't support that yet. 400 00:20:01,220 --> 00:20:04,710 We basically will generate some code that kind of does it, 401 00:20:04,710 --> 00:20:08,380 but it isn't, in many occasions, what you would expect. 402 00:20:08,380 --> 00:20:10,770 So our stance on this now is that you should 403 00:20:10,770 --> 00:20:12,570 try to avoid any overlapping blocks, which 404 00:20:12,570 --> 00:20:16,860 is why we show this red dashed line. 405 00:20:16,860 --> 00:20:22,170 So I can see here that this thing is overlapping. 406 00:20:22,170 --> 00:20:24,380 And there you go, and moved it around. 407 00:20:24,380 --> 00:20:29,340 408 00:20:29,340 --> 00:20:31,168 CS50. 409 00:20:31,168 --> 00:20:33,780 Cool. 410 00:20:33,780 --> 00:20:37,080 Now, we're basically ready, OK? 411 00:20:37,080 --> 00:20:38,070 Very cool. 412 00:20:38,070 --> 00:20:42,030 Now, we can actually go to our app and create a route here. 413 00:20:42,030 --> 00:20:43,450 It says, routes go here. 414 00:20:43,450 --> 00:20:50,737 So let's create a route that says-- let me-- I have an example. 415 00:20:50,737 --> 00:20:56,790 416 00:20:56,790 --> 00:20:58,230 This. 417 00:20:58,230 --> 00:21:01,024 This is a very simple route that just renders a template. 418 00:21:01,024 --> 00:21:01,523 OK? 419 00:21:01,523 --> 00:21:05,320 420 00:21:05,320 --> 00:21:08,470 So now, we can just, again, just like in P s 7, 421 00:21:08,470 --> 00:21:12,380 you can do flask run, which is going to run the Flask server. 422 00:21:12,380 --> 00:21:14,850 You can click on CS50 IDE and go to web server. 423 00:21:14,850 --> 00:21:17,769 And you're going to see, bam bam, it is there. 424 00:21:17,769 --> 00:21:20,060 You can see that there are a couple of things right now 425 00:21:20,060 --> 00:21:22,976 that we haven't quite done yet, and that's what we're going to do now. 426 00:21:22,976 --> 00:21:27,140 One of them is it didn't really resize to the full screen 427 00:21:27,140 --> 00:21:30,650 size, which we will fix. 428 00:21:30,650 --> 00:21:36,080 The second thing is that this is just like static content. 429 00:21:36,080 --> 00:21:40,060 We actually want this to be coming from a database. 430 00:21:40,060 --> 00:21:41,190 OK, so this post. 431 00:21:41,190 --> 00:21:46,160 We're going to fix the static content problem first. 432 00:21:46,160 --> 00:21:47,870 Cool. 433 00:21:47,870 --> 00:21:50,799 So the idea here is that I just wrote Simon here, 434 00:21:50,799 --> 00:21:53,090 but I don't actually want Simon to be there every time. 435 00:21:53,090 --> 00:21:56,190 I want some user name coming from a back end. 436 00:21:56,190 --> 00:21:59,650 So what I do is I come on Pagedraw, and I see this dynamic content. 437 00:21:59,650 --> 00:22:00,380 OK? 438 00:22:00,380 --> 00:22:06,200 And basically, whenever I do double curly braces like this, 439 00:22:06,200 --> 00:22:09,520 it tells Pagedraw to go into back-end mode. 440 00:22:09,520 --> 00:22:11,710 So in back-end mode, you can call any variables that 441 00:22:11,710 --> 00:22:13,961 would be available to a Jinja template. 442 00:22:13,961 --> 00:22:16,710 And again, these variables have to be passed by rendered template. 443 00:22:16,710 --> 00:22:18,543 We're going to show you how to do that soon. 444 00:22:18,543 --> 00:22:21,680 But for now, let's just say dynamic content is username. 445 00:22:21,680 --> 00:22:24,810 So actually, instead of Simon, what we're going to have there is username. 446 00:22:24,810 --> 00:22:29,020 And here the dynamic content is-- so this one is a little bit trickier, 447 00:22:29,020 --> 00:22:32,660 because this is just like the username. 448 00:22:32,660 --> 00:22:36,642 But we actually need to make this post repeat. 449 00:22:36,642 --> 00:22:38,850 So we need to have multiple of these posts happening. 450 00:22:38,850 --> 00:22:43,090 So what we do is we have the repeat on posts, which is an array 451 00:22:43,090 --> 00:22:44,590 that my back end is going to create. 452 00:22:44,590 --> 00:22:46,147 Label one of them post. 453 00:22:46,147 --> 00:22:47,980 And this is just going to create a For loop. 454 00:22:47,980 --> 00:22:49,250 And then ask space between. 455 00:22:49,250 --> 00:22:52,720 Let's actually add some space between 10 pixels 456 00:22:52,720 --> 00:22:56,040 to make them be stacked in a nice way. 457 00:22:56,040 --> 00:22:56,610 OK. 458 00:22:56,610 --> 00:22:59,960 And now, the cool thing is that within this post here, 459 00:22:59,960 --> 00:23:05,630 we can access the post variable and do post , name or post description, 460 00:23:05,630 --> 00:23:07,070 or whatever. 461 00:23:07,070 --> 00:23:11,390 So what we do is in dynamic content, we can go into back-end mode, 462 00:23:11,390 --> 00:23:15,750 and we do post time. 463 00:23:15,750 --> 00:23:17,970 That happens to be the name of my variable. 464 00:23:17,970 --> 00:23:23,890 And then in Hello CS50, it is going to be post description. 465 00:23:23,890 --> 00:23:27,030 And again, I need the double curly braces. 466 00:23:27,030 --> 00:23:28,700 And I think I actually got this wrong. 467 00:23:28,700 --> 00:23:31,020 This should also be post username. 468 00:23:31,020 --> 00:23:34,952 469 00:23:34,952 --> 00:23:36,910 Now, if you do look at the code that we export, 470 00:23:36,910 --> 00:23:40,630 you're going to see that there is a For loop here, 471 00:23:40,630 --> 00:23:43,250 and there's also a problem-- just a second. 472 00:23:43,250 --> 00:23:49,110 473 00:23:49,110 --> 00:23:51,800 See if I fixed it-- yeah, there you go. 474 00:23:51,800 --> 00:23:53,510 OK, so there is a For loop. 475 00:23:53,510 --> 00:23:56,570 And then inside of the For loop, you're calling post user name and so on. 476 00:23:56,570 --> 00:23:58,403 This is, again, just the code that you would 477 00:23:58,403 --> 00:24:00,010 write if you're to do this by hand. 478 00:24:00,010 --> 00:24:00,800 Cool. 479 00:24:00,800 --> 00:24:04,390 And one last thing, we need an image to actually be dynamic. 480 00:24:04,390 --> 00:24:07,515 So there is a dynamic source URL link. 481 00:24:07,515 --> 00:24:08,890 We can do exactly the same thing. 482 00:24:08,890 --> 00:24:17,240 We just go into back-end mode, post image source, bam. 483 00:24:17,240 --> 00:24:18,300 Cool. 484 00:24:18,300 --> 00:24:30,530 And now, I actually have a route that goes into the database. 485 00:24:30,530 --> 00:24:33,360 The database that comes with this distribution code 486 00:24:33,360 --> 00:24:39,680 already has a table called Posts with a couple of pre-populated rows. 487 00:24:39,680 --> 00:24:42,090 And this is a route-- let's walk through this-- OK, 488 00:24:42,090 --> 00:24:45,870 this is a route that just is, again, a route on slash. 489 00:24:45,870 --> 00:24:51,530 So if you go to whatever your website is slash, it runs this function. 490 00:24:51,530 --> 00:24:53,720 It just defines current_user=Gabe. 491 00:24:53,720 --> 00:24:56,610 For simplicity, the only user in our app right now is Gabe. 492 00:24:56,610 --> 00:25:01,219 And then it fetches a post from the database-- post=SELECT all FROM posts. 493 00:25:01,219 --> 00:25:03,510 This is exactly the stuff that you guys did in P set 7. 494 00:25:03,510 --> 00:25:06,470 This is to drive home the point that, again, this type of code 495 00:25:06,470 --> 00:25:10,260 is back-end code, exactly the same thing you did in P Set 7. 496 00:25:10,260 --> 00:25:12,480 Now, I'm doing something a little bit more 497 00:25:12,480 --> 00:25:14,597 involved here where I go through all the posts. 498 00:25:14,597 --> 00:25:17,180 I actually add the username to the post, because those are not 499 00:25:17,180 --> 00:25:20,100 in the database, this username, Gabe. 500 00:25:20,100 --> 00:25:25,350 And then I change the time to make it display in a nicer format, 501 00:25:25,350 --> 00:25:30,510 using this Minutes Elapsed function that just changed the to something more 502 00:25:30,510 --> 00:25:31,400 and nice to look at. 503 00:25:31,400 --> 00:25:33,950 And finally, I reverse the post list, which 504 00:25:33,950 --> 00:25:40,430 is just going to make the newest post appear first, OK? 505 00:25:40,430 --> 00:25:44,630 And finally, I rendered a template, which was narrated by Pagedraw with 506 00:25:44,630 --> 00:25:47,210 posts=posts, which is this variable. 507 00:25:47,210 --> 00:25:48,060 OK? 508 00:25:48,060 --> 00:25:51,900 Now, if we save, and our Flask app is already running-- so 509 00:25:51,900 --> 00:25:54,110 we can again go to web server. 510 00:25:54,110 --> 00:25:55,775 Da dam! 511 00:25:55,775 --> 00:25:59,490 So we have Pagedraw working with dynamic content. 512 00:25:59,490 --> 00:26:01,480 Isn't this exciting? 513 00:26:01,480 --> 00:26:04,140 These posts, oh, yeah, they were from yesterday. 514 00:26:04,140 --> 00:26:07,210 So they say 2,082 minutes ago. 515 00:26:07,210 --> 00:26:08,170 Cool. 516 00:26:08,170 --> 00:26:13,000 And very nice, so this is all coming from the back-end, which is exciting. 517 00:26:13,000 --> 00:26:16,020 But we still have to make this resized to multiple screen sizes. 518 00:26:16,020 --> 00:26:18,010 In Pagedraw, this is very easy. 519 00:26:18,010 --> 00:26:21,040 What we do is we have to specify constraints. 520 00:26:21,040 --> 00:26:25,210 Basically, the constraint that everything has in the beginning 521 00:26:25,210 --> 00:26:26,680 is that everything is fixed size. 522 00:26:26,680 --> 00:26:29,710 We just have to specify who is flexible, what things should 523 00:26:29,710 --> 00:26:33,130 be flexible to make our page resize. 524 00:26:33,130 --> 00:26:36,970 So for example, what we do is we click on this post block here, 525 00:26:36,970 --> 00:26:40,676 and we say down here, there is a flexible left margin 526 00:26:40,676 --> 00:26:41,800 or a flexible right margin. 527 00:26:41,800 --> 00:26:44,160 I want to click both. 528 00:26:44,160 --> 00:26:47,440 And again, this is live synced, so I can just go here, refresh, 529 00:26:47,440 --> 00:26:52,255 and you see that both of them are now-- if we make the two margins flexible, 530 00:26:52,255 --> 00:26:54,130 that means that they're going to be centered, 531 00:26:54,130 --> 00:26:59,920 because the two margins have the same size, and they're going to be flexible. 532 00:26:59,920 --> 00:27:05,350 Also, I'm going to click on this gray-ish background, 533 00:27:05,350 --> 00:27:09,580 and I'm going to make it its full window height, which 534 00:27:09,580 --> 00:27:13,070 is going to make it full window height. 535 00:27:13,070 --> 00:27:14,440 Nice. 536 00:27:14,440 --> 00:27:19,270 There's also this line here that I want to have flexible with to make 537 00:27:19,270 --> 00:27:20,650 it have the full screen size. 538 00:27:20,650 --> 00:27:22,649 And then there is one very common question here, 539 00:27:22,649 --> 00:27:24,790 which is I kind of want this to be pinned 540 00:27:24,790 --> 00:27:26,260 to the right-hand side of the page. 541 00:27:26,260 --> 00:27:27,920 How do I do that? 542 00:27:27,920 --> 00:27:31,120 So the idea is if you want this to be pinned to the right-hand side, what 543 00:27:31,120 --> 00:27:32,920 needs to be flexible? 544 00:27:32,920 --> 00:27:36,877 Well, this wide area needs to be flexible. 545 00:27:36,877 --> 00:27:38,710 Therefore, you can click on this guy and say 546 00:27:38,710 --> 00:27:42,520 that my flexible left margin is active. 547 00:27:42,520 --> 00:27:45,390 And then that's going to make the white area be flexible as well. 548 00:27:45,390 --> 00:27:52,780 So bam, if we now go here-- let me make this bigger a little bit. 549 00:27:52,780 --> 00:27:53,541 There you go. 550 00:27:53,541 --> 00:27:54,040 Cool. 551 00:27:54,040 --> 00:27:57,082 You see that is was pinned indeed to the right-hand side. 552 00:27:57,082 --> 00:27:59,670 553 00:27:59,670 --> 00:28:05,574 And OK, now that we have-- 554 00:28:05,574 --> 00:28:07,799 JARED POCHTAR: Resize the window. 555 00:28:07,799 --> 00:28:09,340 GABRIEL GUIMARAES: Resize the window? 556 00:28:09,340 --> 00:28:13,210 Oh, yeah, sure. 557 00:28:13,210 --> 00:28:17,830 So just to make sure that this is not only working for that screen size, 558 00:28:17,830 --> 00:28:20,050 you can resize the window and see that it is indeed 559 00:28:20,050 --> 00:28:23,190 centered for all of the window sizes. 560 00:28:23,190 --> 00:28:25,060 Cool. 561 00:28:25,060 --> 00:28:29,590 So now, let's make this even cooler with adding a second page, and adding links, 562 00:28:29,590 --> 00:28:30,160 and whatnot. 563 00:28:30,160 --> 00:28:34,000 So basically, what I want to do is I want to add some links. 564 00:28:34,000 --> 00:28:37,679 565 00:28:37,679 --> 00:28:40,720 Actually, before we go into that, just to finish on the constraint stuff, 566 00:28:40,720 --> 00:28:42,011 this is also a common question. 567 00:28:42,011 --> 00:28:45,707 So if you click on this guy, the hamster, and you go down here, 568 00:28:45,707 --> 00:28:48,040 you can see flexible left margin, flexible right margin, 569 00:28:48,040 --> 00:28:49,040 and flexible width. 570 00:28:49,040 --> 00:28:49,540 OK? 571 00:28:49,540 --> 00:28:52,000 But if you click on its parent, you're not 572 00:28:52,000 --> 00:28:53,590 going to see any flexible width here. 573 00:28:53,590 --> 00:28:55,030 OK, why is that? 574 00:28:55,030 --> 00:28:59,110 The idea here is that a parent has a flexible width if 575 00:28:59,110 --> 00:29:02,510 and only if the children have something flexible in there. 576 00:29:02,510 --> 00:29:05,140 OK, so basically, if you have children inside of you, 577 00:29:05,140 --> 00:29:08,260 you have to define what in my children should be flexible. 578 00:29:08,260 --> 00:29:11,559 Therefore, you can't just say, ah, you're flexible if you're a parent. 579 00:29:11,559 --> 00:29:12,850 If you're a child, that's fine. 580 00:29:12,850 --> 00:29:15,020 You can just say, you have flexible width. 581 00:29:15,020 --> 00:29:16,558 I hope that makes sense. 582 00:29:16,558 --> 00:29:18,240 Cool. 583 00:29:18,240 --> 00:29:20,470 OK, so let's create some links. 584 00:29:20,470 --> 00:29:24,590 First, let's make this myFace thing be a link to slash, 585 00:29:24,590 --> 00:29:26,420 which is, again, this very same page. 586 00:29:26,420 --> 00:29:31,270 Let's make the smiley be a link to slash. 587 00:29:31,270 --> 00:29:35,830 This is very similar to adding links and what you would otherwise with HTML. 588 00:29:35,830 --> 00:29:39,040 And this is going to be a link to /newpost, 589 00:29:39,040 --> 00:29:41,840 which is going to be our second page that we haven't created yet. 590 00:29:41,840 --> 00:29:42,340 Cool. 591 00:29:42,340 --> 00:29:43,970 I think now we're done with this page. 592 00:29:43,970 --> 00:29:46,870 So let's go into creating our second page. 593 00:29:46,870 --> 00:29:49,600 I'm going to click on this little icon here 594 00:29:49,600 --> 00:29:52,600 that is just going to create a copy of that page to serve as a template. 595 00:29:52,600 --> 00:29:54,700 So it says Index Copy. 596 00:29:54,700 --> 00:29:57,736 I'm going to change the doc name to New Post. 597 00:29:57,736 --> 00:29:58,860 And this is very important. 598 00:29:58,860 --> 00:30:05,682 I'm going to change the file path to also newpost.html. 599 00:30:05,682 --> 00:30:08,890 Otherwise, both of them will be trying to write to the same index of the HTML 600 00:30:08,890 --> 00:30:10,660 file, which wouldn't be nice. 601 00:30:10,660 --> 00:30:11,770 OK. 602 00:30:11,770 --> 00:30:16,122 And now, I don't really want to have all this here. 603 00:30:16,122 --> 00:30:19,300 604 00:30:19,300 --> 00:30:20,469 I'm going to delete this. 605 00:30:20,469 --> 00:30:22,510 JARED POCHTAR: How do you select multiple blocks? 606 00:30:22,510 --> 00:30:23,885 GABRIEL GUIMARAES: Good question. 607 00:30:23,885 --> 00:30:25,510 How did I select multiple blocks? 608 00:30:25,510 --> 00:30:28,420 I'm pressing Command Z to undo. 609 00:30:28,420 --> 00:30:33,729 I selected multiple blocks by just doing Command, and then selecting 610 00:30:33,729 --> 00:30:36,145 basically an area, and then whatever is inside of the area 611 00:30:36,145 --> 00:30:41,080 is going to be selected and delete blocks. 612 00:30:41,080 --> 00:30:50,740 Now, I'm just going to draw another block that is white, add a border, 613 00:30:50,740 --> 00:30:51,980 something similar. 614 00:30:51,980 --> 00:30:59,256 What we want to do is this form that lets you add a new post. 615 00:30:59,256 --> 00:31:01,130 So here I'm going to add a new type of block, 616 00:31:01,130 --> 00:31:04,859 which is called a text input block. 617 00:31:04,859 --> 00:31:07,400 This has a placeholder, which I'm going to say, in this case, 618 00:31:07,400 --> 00:31:09,440 is Image Source URL. 619 00:31:09,440 --> 00:31:15,400 And I'm going to create a copy of it, put it here, 620 00:31:15,400 --> 00:31:17,430 and the second one says Description. 621 00:31:17,430 --> 00:31:19,100 The end of this app is very simple. 622 00:31:19,100 --> 00:31:20,667 And finally, I need a button. 623 00:31:20,667 --> 00:31:21,875 I'm going to create a button. 624 00:31:21,875 --> 00:31:24,590 625 00:31:24,590 --> 00:31:29,626 And I'm going to do this color for the button. 626 00:31:29,626 --> 00:31:35,677 627 00:31:35,677 --> 00:31:36,176 Cool. 628 00:31:36,176 --> 00:31:40,292 629 00:31:40,292 --> 00:31:41,958 I want to make this a little bit bigger. 630 00:31:41,958 --> 00:31:47,650 631 00:31:47,650 --> 00:31:54,140 If you want to center your stuff, you can also just click on an element 632 00:31:54,140 --> 00:31:57,020 and click on Center up here, which is going to center 633 00:31:57,020 --> 00:31:59,920 it within its parent element. 634 00:31:59,920 --> 00:32:02,432 This is not going to center it always just like 635 00:32:02,432 --> 00:32:03,890 the constraints that we set before. 636 00:32:03,890 --> 00:32:07,139 You still have to go here and click on Flexible Left Margin and Flexible Right 637 00:32:07,139 --> 00:32:10,070 Margin to make it always centered for all screen sizes. 638 00:32:10,070 --> 00:32:10,760 OK? 639 00:32:10,760 --> 00:32:13,802 And also, if you do specify these things, but it is not centered, 640 00:32:13,802 --> 00:32:15,260 you can't expect it to be centered. 641 00:32:15,260 --> 00:32:20,875 It is going to be flexible proportionally to what you see here. 642 00:32:20,875 --> 00:32:21,620 Cool. 643 00:32:21,620 --> 00:32:26,840 Now, we have to basically add a ref to image source URL called 644 00:32:26,840 --> 00:32:29,330 Image Source, which is essentially going to allow 645 00:32:29,330 --> 00:32:34,850 us to access this in the back end when the user submits the form and a ref 646 00:32:34,850 --> 00:32:37,820 called Description. 647 00:32:37,820 --> 00:32:39,930 This is very similar to the name tag if you're 648 00:32:39,930 --> 00:32:44,090 familiar in HTML forms, which is the same thing. 649 00:32:44,090 --> 00:32:46,690 And then we have to make this block a form 650 00:32:46,690 --> 00:32:50,150 and tell it where it is going to submit to. 651 00:32:50,150 --> 00:32:54,290 We can just click on it and do form action is going to be to new post. 652 00:32:54,290 --> 00:32:57,110 So we're sending it to ourselves, which is this various websites. 653 00:32:57,110 --> 00:32:59,570 But we're sending it with a Post method. 654 00:32:59,570 --> 00:33:03,050 So this is all going to make a lot more sense now when we look at the back end 655 00:33:03,050 --> 00:33:09,940 that we're going to add, which is here. 656 00:33:09,940 --> 00:33:11,253 This is our second route. 657 00:33:11,253 --> 00:33:15,130 658 00:33:15,130 --> 00:33:16,270 Let's walk through this. 659 00:33:16,270 --> 00:33:17,650 I just added the second route. 660 00:33:17,650 --> 00:33:22,257 This is, again, this exact same stuff that you guys did for P Set 7 in CS50. 661 00:33:22,257 --> 00:33:23,590 We have a route called New Post. 662 00:33:23,590 --> 00:33:25,710 It can have multiple methods Get and Post. 663 00:33:25,710 --> 00:33:29,560 If the method that the user is accessing that is Get, 664 00:33:29,560 --> 00:33:31,985 we're just going to render the template that Pagedraw 665 00:33:31,985 --> 00:33:34,150 is generating, newpost.html. 666 00:33:34,150 --> 00:33:37,360 If it is Post, the method, that means that the user is actually 667 00:33:37,360 --> 00:33:38,570 submitting the form. 668 00:33:38,570 --> 00:33:39,070 OK? 669 00:33:39,070 --> 00:33:40,410 If the user is actually submitting the form, 670 00:33:40,410 --> 00:33:42,243 we're going to go into this code here, which 671 00:33:42,243 --> 00:33:45,000 is just going to execute an insertion into the database. 672 00:33:45,000 --> 00:33:46,650 It's going to insert the post. 673 00:33:46,650 --> 00:33:48,820 And where is it going to get the post from? 674 00:33:48,820 --> 00:33:53,050 Well, from request.form.get image source description. 675 00:33:53,050 --> 00:33:58,300 Those two are the refs that we just specified in the Pagedraw. 676 00:33:58,300 --> 00:34:02,710 And then we're going to redirect to index, back to the beginning. 677 00:34:02,710 --> 00:34:03,950 Cool? 678 00:34:03,950 --> 00:34:05,650 So now I believe we should be all set. 679 00:34:05,650 --> 00:34:06,650 I just saved this. 680 00:34:06,650 --> 00:34:09,199 Again, I'm going to go to web server. 681 00:34:09,199 --> 00:34:13,600 Now we can click on this, which is going to take us to Template Not Found. 682 00:34:13,600 --> 00:34:17,860 If you look here, yeah, indeed templates doesn't have the newpost.html. 683 00:34:17,860 --> 00:34:21,659 We have to refresh, because we just created a new page. 684 00:34:21,659 --> 00:34:23,560 It's going to say Pagedraw Sync Active. 685 00:34:23,560 --> 00:34:25,770 Now, you see newpost.html here. 686 00:34:25,770 --> 00:34:26,800 Cool. 687 00:34:26,800 --> 00:34:29,080 And if we refresh, there you go. 688 00:34:29,080 --> 00:34:31,290 Let's try to add an image. 689 00:34:31,290 --> 00:34:36,404 Let's look for, I don't know, hamsters. 690 00:34:36,404 --> 00:34:40,139 691 00:34:40,139 --> 00:34:40,810 This one. 692 00:34:40,810 --> 00:34:42,690 This one looks cute. 693 00:34:42,690 --> 00:34:48,350 So I'm just going to use this image source, or is it here. 694 00:34:48,350 --> 00:34:50,954 And the description is going to be "cute hamster, yay!" 695 00:34:50,954 --> 00:34:53,120 And I'm actually going to make this really long just 696 00:34:53,120 --> 00:34:55,210 to show that's it's going to work. 697 00:34:55,210 --> 00:34:56,600 Click Me. 698 00:34:56,600 --> 00:34:58,090 There you go. 699 00:34:58,090 --> 00:35:00,554 And you see that as expected, even if the text is longer, 700 00:35:00,554 --> 00:35:03,220 everything is going to refill properly, because this is the code 701 00:35:03,220 --> 00:35:04,761 that a developer would write by hand. 702 00:35:04,761 --> 00:35:06,680 It's not like some package code. 703 00:35:06,680 --> 00:35:07,730 Cool. 704 00:35:07,730 --> 00:35:12,220 And now, I just want to show you the code that Pagedraw is generating 705 00:35:12,220 --> 00:35:15,590 to explain what's going on here. 706 00:35:15,590 --> 00:35:22,580 So Pagedraw generates this code that has style and, again, some divs here. 707 00:35:22,580 --> 00:35:26,750 So in this particular example, Pagedraw is basically saving you from writing, 708 00:35:26,750 --> 00:35:32,000 I don't know, 300 for this plus some 200-something. 709 00:35:32,000 --> 00:35:35,140 You could refactor this style and make this into a little bit less. 710 00:35:35,140 --> 00:35:39,520 You can see that Pagedraw is saving you a lot of the work that's 711 00:35:39,520 --> 00:35:41,020 how do you center this thing? 712 00:35:41,020 --> 00:35:45,100 How do you put different images, and colors, and whatever? 713 00:35:45,100 --> 00:35:50,930 All of this work, we fundamentally believe, is not really programming. 714 00:35:50,930 --> 00:35:54,699 We think that programming is what is happening in the data level. 715 00:35:54,699 --> 00:35:57,740 And we really believe that developers should be working on the data level 716 00:35:57,740 --> 00:35:59,060 to create some data. 717 00:35:59,060 --> 00:36:02,270 And then the view is a design. 718 00:36:02,270 --> 00:36:03,100 OK? 719 00:36:03,100 --> 00:36:06,200 Right now, there are two-- often in the industry, 720 00:36:06,200 --> 00:36:08,960 you can find two different files, they are completely separate, 721 00:36:08,960 --> 00:36:11,620 that have exactly the same content. 722 00:36:11,620 --> 00:36:15,100 One of the files is an image file like a sketch or a Photoshop file. 723 00:36:15,100 --> 00:36:16,390 And the other is an HTML file. 724 00:36:16,390 --> 00:36:19,306 Both of them have the same thing, but in completely different formats. 725 00:36:19,306 --> 00:36:22,960 What Pagedraw is trying to do is just creating one authoritative source 726 00:36:22,960 --> 00:36:30,750 for that, which is the Pagedraw document here-- very cool. 727 00:36:30,750 --> 00:36:35,180 Does anybody have any questions so far before we move on? 728 00:36:35,180 --> 00:36:35,776 All good? 729 00:36:35,776 --> 00:36:38,770 730 00:36:38,770 --> 00:36:39,730 Cool. 731 00:36:39,730 --> 00:36:41,800 Now we're done with our example, I just want 732 00:36:41,800 --> 00:36:45,380 to show you some other cool things that Pagedraw has. 733 00:36:45,380 --> 00:36:49,450 The first one is this live data preview. 734 00:36:49,450 --> 00:36:56,420 So the idea here is since we're creating the code that a developer write, 735 00:36:56,420 --> 00:37:00,520 and we can compile that, we can also compile it on the fly 736 00:37:00,520 --> 00:37:05,804 here in the Pagedraw editor and create this data preview block. 737 00:37:05,804 --> 00:37:07,720 So what this data preview block is going to do 738 00:37:07,720 --> 00:37:13,330 is going to take data plus a design. 739 00:37:13,330 --> 00:37:16,480 It's going to merge them and show you what happens with that design 740 00:37:16,480 --> 00:37:18,394 if this data is coming from the back end. 741 00:37:18,394 --> 00:37:21,310 Right now, you see what happens is error while trying to run template. 742 00:37:21,310 --> 00:37:21,810 Why? 743 00:37:21,810 --> 00:37:26,170 Because there isn't any data. 744 00:37:26,170 --> 00:37:30,460 I happened to have a-- where is it here? 745 00:37:30,460 --> 00:37:32,000 JSON string. 746 00:37:32,000 --> 00:37:36,980 And you can use YAML for this too, which looks a lot nicer, which if I 747 00:37:36,980 --> 00:37:39,790 put here, yay!, you're going to see. 748 00:37:39,790 --> 00:37:43,930 This is basically like posts, which has description time and image 749 00:37:43,930 --> 00:37:45,460 source, two of them. 750 00:37:45,460 --> 00:37:48,160 And you can see the data preview is basically 751 00:37:48,160 --> 00:37:49,990 the production version of your app. 752 00:37:49,990 --> 00:37:51,970 And you can test this with multiple Copy Pastes 753 00:37:51,970 --> 00:37:57,650 and test it with multiple types of data, with multiple screen sizes, and so on. 754 00:37:57,650 --> 00:38:01,500 So this is just a nice feature to see what your app is going to look like. 755 00:38:01,500 --> 00:38:04,840 Although with the Cloud9 syncer, it is just easier 756 00:38:04,840 --> 00:38:09,670 to actually just refresh the actual thing many-- often. 757 00:38:09,670 --> 00:38:10,750 Cool. 758 00:38:10,750 --> 00:38:14,050 But there's another thing that's cool that I want to show you 759 00:38:14,050 --> 00:38:17,860 guys, which is mobile versus desktop. 760 00:38:17,860 --> 00:38:18,550 OK? 761 00:38:18,550 --> 00:38:22,800 So a lot of people ask, how can I support a mobile version of my website? 762 00:38:22,800 --> 00:38:25,600 So remember those artboards that we talked about? 763 00:38:25,600 --> 00:38:30,890 Pagedraw has-- basically you can have multiple artboards inside of a Pagedraw 764 00:38:30,890 --> 00:38:31,390 document. 765 00:38:31,390 --> 00:38:35,860 So let's draw a second artboard-- this. 766 00:38:35,860 --> 00:38:41,440 And I say that my hamster, myFace page in mobile-- I 767 00:38:41,440 --> 00:38:43,566 want to make it just blue background. 768 00:38:43,566 --> 00:38:49,030 769 00:38:49,030 --> 00:38:49,870 That looks good. 770 00:38:49,870 --> 00:38:53,170 And then I just wanted to have a hamster. 771 00:38:53,170 --> 00:38:56,020 It's pretty big. 772 00:38:56,020 --> 00:38:59,291 And I'm going to give it flexible width just so it resizes with the page. 773 00:38:59,291 --> 00:39:02,744 774 00:39:02,744 --> 00:39:04,660 Oops, I'm going to delete this dynamic source. 775 00:39:04,660 --> 00:39:05,560 There you go. 776 00:39:05,560 --> 00:39:06,130 Cool. 777 00:39:06,130 --> 00:39:10,330 So what Pagedraw is doing here is it's compiling both this and this artboard 778 00:39:10,330 --> 00:39:11,830 into two separate codes. 779 00:39:11,830 --> 00:39:18,150 And then it just toggles between the two when the data preview 780 00:39:18,150 --> 00:39:20,980 changes size, not only the data preview, but the view 781 00:39:20,980 --> 00:39:23,750 that you're using to see this. 782 00:39:23,750 --> 00:39:26,170 So you can see that you could make this into a much nicer 783 00:39:26,170 --> 00:39:28,690 looking mobile version of your website. 784 00:39:28,690 --> 00:39:32,450 And then Pagedraw is automatically going to make that happen. 785 00:39:32,450 --> 00:39:40,470 If we do the same with this screen, oh, it's not this-- let me refresh. 786 00:39:40,470 --> 00:39:41,180 There you go. 787 00:39:41,180 --> 00:39:44,860 788 00:39:44,860 --> 00:39:45,452 Very cute. 789 00:39:45,452 --> 00:39:49,680 790 00:39:49,680 --> 00:39:50,430 Cool. 791 00:39:50,430 --> 00:39:54,600 Interactive block-- there's another thing that a lot of people ask, 792 00:39:54,600 --> 00:39:58,500 which is what if I want to make something 793 00:39:58,500 --> 00:40:00,810 that's a little bit more interactive? 794 00:40:00,810 --> 00:40:03,720 And one of the things that we're currently very actively working on 795 00:40:03,720 --> 00:40:05,730 is adding interactivity to Pagedraw. 796 00:40:05,730 --> 00:40:08,760 So when you click a button, a lama comes on the screen 797 00:40:08,760 --> 00:40:11,060 and does something like-- that kind of stuff. 798 00:40:11,060 --> 00:40:14,790 We admittedly don't support a lot of that stuff yet, 799 00:40:14,790 --> 00:40:19,290 but we do support some of it whereby you can draw a block 800 00:40:19,290 --> 00:40:22,510 and make an interactive block. 801 00:40:22,510 --> 00:40:25,560 Interactive block is very similar to layout block-- 802 00:40:25,560 --> 00:40:33,930 the only difference being that you have these Hover Color, Hover Border, Active 803 00:40:33,930 --> 00:40:35,100 Color, and Active Border. 804 00:40:35,100 --> 00:40:38,490 So just to make the point, I'm going to make this hover color, I don't know, 805 00:40:38,490 --> 00:40:42,270 purple and the active color very blue. 806 00:40:42,270 --> 00:40:47,680 And now, if we go here, is that it right there? 807 00:40:47,680 --> 00:40:49,860 Oops, that's the other one, sorry. 808 00:40:49,860 --> 00:40:54,450 If we go here, when I hover over it, it changes to purple. 809 00:40:54,450 --> 00:40:56,532 When I click on it, it changes to blue. 810 00:40:56,532 --> 00:40:58,740 So that's just if you want to make some nicer buttons 811 00:40:58,740 --> 00:41:01,656 or things that are a little bit more interactive, which is interesting 812 00:41:01,656 --> 00:41:02,418 these days. 813 00:41:02,418 --> 00:41:02,918 Cool. 814 00:41:02,918 --> 00:41:05,730 815 00:41:05,730 --> 00:41:08,310 Now we have some very common asked questions 816 00:41:08,310 --> 00:41:11,550 that we would like to address-- the first one being, 817 00:41:11,550 --> 00:41:14,274 what if Pagedraw doesn't support something that I want to do? 818 00:41:14,274 --> 00:41:15,190 So I'm using Pagedraw. 819 00:41:15,190 --> 00:41:18,190 I think it's awesome, and I am creating all of this stuff. 820 00:41:18,190 --> 00:41:21,120 But then there's this one detail in my page 821 00:41:21,120 --> 00:41:24,150 that I really want to make happen this particular way that Pagedraw 822 00:41:24,150 --> 00:41:25,710 doesn't quite support it. 823 00:41:25,710 --> 00:41:29,790 Well, we're very hard at work to make sure that you can do 100% of things 824 00:41:29,790 --> 00:41:32,160 that you can do with HTML and CSS with Pagedraw. 825 00:41:32,160 --> 00:41:33,810 And we're close to that. 826 00:41:33,810 --> 00:41:36,180 But still, there are some things that you can't do. 827 00:41:36,180 --> 00:41:41,410 In that case, you can always add your own code to any part of your app 828 00:41:41,410 --> 00:41:41,940 basically. 829 00:41:41,940 --> 00:41:44,790 So one very good example is have you guys 830 00:41:44,790 --> 00:41:48,630 seen-- I guess not since you've never seen Pagedraw before, 831 00:41:48,630 --> 00:41:52,004 but have you guys seen this page, which is basically our landing page? 832 00:41:52,004 --> 00:41:53,670 There is one thing which is really cute. 833 00:41:53,670 --> 00:41:57,910 When you hover over this block, it goes like this. 834 00:41:57,910 --> 00:41:59,670 It tilts its head. 835 00:41:59,670 --> 00:42:03,687 And this is not supported by-- this type of animation 836 00:42:03,687 --> 00:42:05,270 isn't supported by Pagedraw right now. 837 00:42:05,270 --> 00:42:06,710 So Jared did this. 838 00:42:06,710 --> 00:42:11,040 And what Jared did was-- I have this page here. 839 00:42:11,040 --> 00:42:16,910 So the cool thing is-- where is it? 840 00:42:16,910 --> 00:42:18,210 There you go. 841 00:42:18,210 --> 00:42:20,330 All of Pagedraw is made in Pagedraw actually. 842 00:42:20,330 --> 00:42:23,487 So you can see those later. 843 00:42:23,487 --> 00:42:26,070 And of course, the landing page has definitely made it bigger. 844 00:42:26,070 --> 00:42:28,080 So Jared made this in Pagedraw. 845 00:42:28,080 --> 00:42:29,840 And then he clicked on here. 846 00:42:29,840 --> 00:42:34,790 And he clicked on Use Custom Code down at the bottom. 847 00:42:34,790 --> 00:42:38,540 And then he just added his own style image 848 00:42:38,540 --> 00:42:40,310 that makes this transition happen. 849 00:42:40,310 --> 00:42:41,980 And that's all that is. 850 00:42:41,980 --> 00:42:42,544 OK? 851 00:42:42,544 --> 00:42:44,460 And then basically what we're going to do here 852 00:42:44,460 --> 00:42:46,668 is we're going to say this block has custom code set. 853 00:42:46,668 --> 00:42:49,980 It and its children will be replaced by the specified code at compile time 854 00:42:49,980 --> 00:42:52,122 just to give you basically full flexibility. 855 00:42:52,122 --> 00:42:55,080 So there is no need to be worried, oh, I won't be able to do something, 856 00:42:55,080 --> 00:42:57,500 because you always will be able to do something. 857 00:42:57,500 --> 00:43:02,350 Worst case scenario, you replace your entire page by HTML [INAUDIBLE] 858 00:43:02,350 --> 00:43:05,270 you write, but hopefully, you won't have to do that. 859 00:43:05,270 --> 00:43:07,640 Cool. 860 00:43:07,640 --> 00:43:12,560 Second question, "Can I manually edit the code that Pagdedraw exports?" 861 00:43:12,560 --> 00:43:16,564 So it should be clear by now that the answer to this is no. 862 00:43:16,564 --> 00:43:18,980 You cannot manually edited the code that Pagedraw exports, 863 00:43:18,980 --> 00:43:24,220 because if I go on the CS50 IDE, and-- what's going on? 864 00:43:24,220 --> 00:43:25,345 I am just going to refresh. 865 00:43:25,345 --> 00:43:29,960 866 00:43:29,960 --> 00:43:31,090 Sure. 867 00:43:31,090 --> 00:43:34,420 Yeah, this is exactly what-- this is exactly my point. 868 00:43:34,420 --> 00:43:38,172 Because I have this index.html open and Pagedraw is changing it constantly, 869 00:43:38,172 --> 00:43:39,880 it's saying, this thing reloaded on disk. 870 00:43:39,880 --> 00:43:43,030 And if I try to change-- let's say I want to change some code here-- delete 871 00:43:43,030 --> 00:43:46,420 this-- it's going to delete it, but then Pagedraw 872 00:43:46,420 --> 00:43:48,400 is going to go and write over it again. 873 00:43:48,400 --> 00:43:51,060 So it doesn't really make sense to do it. 874 00:43:51,060 --> 00:43:53,182 That said, if you've been using Pagedraw, 875 00:43:53,182 --> 00:43:55,390 and you really, really don't like it for some reason, 876 00:43:55,390 --> 00:43:58,320 you can always take that code, because it is fully functional code 877 00:43:58,320 --> 00:44:00,630 and then edit it yourself. 878 00:44:00,630 --> 00:44:06,046 But then you have to stop using Pagedraw, which we don't like. 879 00:44:06,046 --> 00:44:08,920 Third question, which is really important for the CS50 final project, 880 00:44:08,920 --> 00:44:11,246 "Can I collaborate with friends on the same project?" 881 00:44:11,246 --> 00:44:12,120 And of course you do. 882 00:44:12,120 --> 00:44:14,870 Yeah, collaboration is really important for us. 883 00:44:14,870 --> 00:44:18,130 Basically, what we have to do is, again, for to back end, 884 00:44:18,130 --> 00:44:21,270 you're going to do exactly the same stuff that you do otherwise-- 885 00:44:21,270 --> 00:44:23,010 doesn't care that Pagedraw is there. 886 00:44:23,010 --> 00:44:27,000 For the front end, both you and your friend, or friends, 887 00:44:27,000 --> 00:44:28,500 have to have an account in Pagedraw. 888 00:44:28,500 --> 00:44:31,982 You have to go and click here on this settings of the project. 889 00:44:31,982 --> 00:44:35,190 And hearing collaborators, you have to add new collaborator by email address. 890 00:44:35,190 --> 00:44:39,942 I'm going to add jpochtar@gmail.com as a collaborator, Jared. 891 00:44:39,942 --> 00:44:40,650 And there you go. 892 00:44:40,650 --> 00:44:41,899 Now we have two collaborators. 893 00:44:41,899 --> 00:44:43,830 And both of them have access to the same app. 894 00:44:43,830 --> 00:44:46,651 And you can both edit the same files. 895 00:44:46,651 --> 00:44:47,150 Cool? 896 00:44:47,150 --> 00:44:51,070 897 00:44:51,070 --> 00:44:54,980 Now, would you like support for other frameworks, languages, 898 00:44:54,980 --> 00:44:57,470 and some cool not-so-tested features? 899 00:44:57,470 --> 00:45:03,442 Yeah, we do support React, Ruby, and Rails-- what else? 900 00:45:03,442 --> 00:45:04,150 What is the name? 901 00:45:04,150 --> 00:45:05,610 Jade. 902 00:45:05,610 --> 00:45:09,020 We support probably 10 to 15 different languages in the frameworks. 903 00:45:09,020 --> 00:45:13,290 For the CS50 launch, we're basically just enabling 904 00:45:13,290 --> 00:45:16,650 Jinja, which is the one that problem set 7 uses. 905 00:45:16,650 --> 00:45:21,089 But if you like support for that kind of stuff, you can email team@pagedraw.io. 906 00:45:21,089 --> 00:45:22,880 And we're going to give you access to this, 907 00:45:22,880 --> 00:45:27,200 and we also have some other untested features like components, 908 00:45:27,200 --> 00:45:31,300 and a lot of other stuff that if you want to come talk to us, 909 00:45:31,300 --> 00:45:34,130 we can give you access to it. 910 00:45:34,130 --> 00:45:35,070 Getting help. 911 00:45:35,070 --> 00:45:36,700 Getting help is really important. 912 00:45:36,700 --> 00:45:37,700 for every final project. 913 00:45:37,700 --> 00:45:42,300 Jared and I are going to be doing office hours for Pagedraw 914 00:45:42,300 --> 00:45:45,410 if you're using Pagedraw to make your CS50 final project. 915 00:45:45,410 --> 00:45:47,920 And there's also a Facebook group. 916 00:45:47,920 --> 00:45:49,680 You can check on the slides later. 917 00:45:49,680 --> 00:45:52,320 And please join the group where people can post 918 00:45:52,320 --> 00:45:54,750 questions, and we can answer them as soon as possible. 919 00:45:54,750 --> 00:45:57,240 And then, again, team@pagedraw.io, we're always going 920 00:45:57,240 --> 00:45:59,047 to answer all of your questions there. 921 00:45:59,047 --> 00:46:01,770 922 00:46:01,770 --> 00:46:03,810 One last thing is that we are also hiring. 923 00:46:03,810 --> 00:46:08,340 So if you're interested in working on this sort of problem, 924 00:46:08,340 --> 00:46:11,150 do shoot an email to jobs@pagedraw.io. 925 00:46:11,150 --> 00:46:14,010 We are looking for awesome engineers who have experience 926 00:46:14,010 --> 00:46:18,410 in this kind of development tool idea and who want to work on hard problems 927 00:46:18,410 --> 00:46:20,420 with us. 928 00:46:20,420 --> 00:46:21,020 Awesome. 929 00:46:21,020 --> 00:46:21,964 Questions? 930 00:46:21,964 --> 00:46:26,240 931 00:46:26,240 --> 00:46:27,240 Yes ? 932 00:46:27,240 --> 00:46:30,810 AUDIENCE: So we've seen tools a bit like this in the past-- Dreamweaver 933 00:46:30,810 --> 00:46:32,289 and things like that. 934 00:46:32,289 --> 00:46:35,132 How would you separate yourself from these? 935 00:46:35,132 --> 00:46:36,090 GABRIEL GUIMARAES: Yes. 936 00:46:36,090 --> 00:46:38,720 So we've seen some tools like this in the past. 937 00:46:38,720 --> 00:46:41,980 How are we separating Pagedraw from these tools like Dreamweaver, 938 00:46:41,980 --> 00:46:42,580 for example? 939 00:46:42,580 --> 00:46:43,579 That's a great question. 940 00:46:43,579 --> 00:46:46,740 There have been many tools like this in the past. 941 00:46:46,740 --> 00:46:51,131 And for Dreamweaver specifically, do you want to take it, Jared? 942 00:46:51,131 --> 00:46:51,630 Yeah. 943 00:46:51,630 --> 00:46:53,546 Jared is coming up just to take that question. 944 00:46:53,546 --> 00:46:55,290 He likes that question. 945 00:46:55,290 --> 00:46:58,180 JARED POCHTAR: Hey, guys, I'm really, really excited 946 00:46:58,180 --> 00:47:00,820 about everything Gabriel just showed. 947 00:47:00,820 --> 00:47:02,540 So I hope you guys are too. 948 00:47:02,540 --> 00:47:05,680 So that's probably one of our biggest questions that we get a lot, right? 949 00:47:05,680 --> 00:47:09,262 People have been trying to do this since at least the '90s. 950 00:47:09,262 --> 00:47:10,470 It's been a really long time. 951 00:47:10,470 --> 00:47:14,700 And actually, if you look at things like iOS development or Android development, 952 00:47:14,700 --> 00:47:17,790 we see some kind of similar tools on those fronts 953 00:47:17,790 --> 00:47:19,080 that work pretty differently. 954 00:47:19,080 --> 00:47:24,887 The challenge is that HTML and CSS are kind of atrocious. 955 00:47:24,887 --> 00:47:26,470 I don't think that's bombastic to say. 956 00:47:26,470 --> 00:47:28,800 They are really kind of truly atrocious. 957 00:47:28,800 --> 00:47:32,260 And so if you look at what something like Dreamweaver used to do is it 958 00:47:32,260 --> 00:47:34,181 would generate pretty bad code. 959 00:47:34,181 --> 00:47:36,180 And so don't see anyone using Dreamweaver today. 960 00:47:36,180 --> 00:47:39,745 It's kind of laughed on, actually, because you're not really professional 961 00:47:39,745 --> 00:47:41,120 if you're using Dreamweaver code. 962 00:47:41,120 --> 00:47:43,680 You can't do all sorts of nice things. 963 00:47:43,680 --> 00:47:45,140 It just won't work right. 964 00:47:45,140 --> 00:47:49,590 So a couple little things is Gabriel had that really long line when he had 965 00:47:49,590 --> 00:47:51,410 for description for one of the images. 966 00:47:51,410 --> 00:47:53,559 And it pushed down all the things underneath it. 967 00:47:53,559 --> 00:47:55,350 If you're using something like Dreamweaver, 968 00:47:55,350 --> 00:47:56,950 there's two versions it can take. 969 00:47:56,950 --> 00:48:01,560 Either it can let you edit the issue on CSS sort of directly 970 00:48:01,560 --> 00:48:05,790 where you have an interactive way of touching what the code will be, 971 00:48:05,790 --> 00:48:07,390 even though you're not typing it out. 972 00:48:07,390 --> 00:48:10,620 And that's really horrible to work with, because you end up basically 973 00:48:10,620 --> 00:48:12,540 having to do HTML and CSS anyway. 974 00:48:12,540 --> 00:48:17,030 Or you have this sort of-- I'm going to draw the image way of doing it 975 00:48:17,030 --> 00:48:20,280 where you can draw everything you want the way that we let you draw everything 976 00:48:20,280 --> 00:48:20,910 you want. 977 00:48:20,910 --> 00:48:24,120 But if you say it's just an image, everything is fixed in space, 978 00:48:24,120 --> 00:48:26,180 you can't do the flexibility that we have 979 00:48:26,180 --> 00:48:29,930 when we do resizing across different screen sizes, or again, like push down 980 00:48:29,930 --> 00:48:31,300 things like. 981 00:48:31,300 --> 00:48:34,450 Basically, just the code quality has been never 982 00:48:34,450 --> 00:48:37,240 very high for the tools that have tried to do this in the past. 983 00:48:37,240 --> 00:48:40,870 Our secret sauce, the core technology for us, is that we're a compiler. 984 00:48:40,870 --> 00:48:44,200 So just like GCC takes C code and advanced assembly 985 00:48:44,200 --> 00:48:48,510 code that can run on your computer, what we will do is take your drawings 986 00:48:48,510 --> 00:48:52,380 and translate them in a meaningful semantic way into code 987 00:48:52,380 --> 00:48:55,780 that your web browser can handle in the way 988 00:48:55,780 --> 00:48:58,565 that you intend for it to be handled, not just a one-to-one, 989 00:48:58,565 --> 00:49:00,690 we're going to get this right on the surface level, 990 00:49:00,690 --> 00:49:03,370 and if you change something, it'll kind of be fussy. 991 00:49:03,370 --> 00:49:06,660 GABRIEL GUIMARAES: Yeah, the short answer is that no other tool before us 992 00:49:06,660 --> 00:49:11,260 has been able to make something as complicated as Facebook. 993 00:49:11,260 --> 00:49:16,580 Whereas with Pagedraw, you can do that kind of stuff. 994 00:49:16,580 --> 00:49:17,470 Cool. 995 00:49:17,470 --> 00:49:18,695 Any other questions? 996 00:49:18,695 --> 00:49:21,970 997 00:49:21,970 --> 00:49:22,530 Awesome. 998 00:49:22,530 --> 00:49:23,140 JARED POCHTAR: This has been really fun. 999 00:49:23,140 --> 00:49:23,974 It's super exciting. 1000 00:49:23,974 --> 00:49:25,681 For me, this is one of the greatest parts 1001 00:49:25,681 --> 00:49:28,570 of computer science about programming is that you can use programming 1002 00:49:28,570 --> 00:49:30,820 to change the way we do programming. 1003 00:49:30,820 --> 00:49:32,176 Tell me that's not exciting. 1004 00:49:32,176 --> 00:49:33,300 Tell me that's not awesome. 1005 00:49:33,300 --> 00:49:33,820 GABRIEL GUIMARAES: Yeah. 1006 00:49:33,820 --> 00:49:34,320 JARED POCHTAR: All right. 1007 00:49:34,320 --> 00:49:34,890 GABRIEL GUIMARAES: It's cool. 1008 00:49:34,890 --> 00:49:36,130 Thank you very much, everybody. 1009 00:49:36,130 --> 00:49:36,550 JARED POCHTAR: Thank you. 1010 00:49:36,550 --> 00:49:39,758 GABRIEL GUIMARAES: I hope you guys use Pagedraw for your CS50 final projects. 1011 00:49:39,758 --> 00:49:41,440 Take care. 1012 00:49:41,440 --> 00:49:42,439