00:00:00,150 --> 00:00:01,330 JARED POCHTAR: Hi, everyone. I'm Jared. And this is Gabriel. GABRIEL GUIMARAES: Hello everybody. JARED POCHTAR: And we're here to talk about hate Pagedraw today for the first time. We're really excited to talk about this, because we think this is the future of how web apps will be developed. I've been working on web apps for a long time, so has Gabriel. And there's always this really annoying pain point of dealing with HTML and CSS. And it's something that everyone thought was inevitable, that it's a fundamental building block of the web, you're always going to have deal with it, and you're always going to have to worry, and fuss, and get around the fact that browsers are a little annoying. We could come up with a way to add a layer of indirection. So you could just do what you want to do. You just wanted to draw what you want your web apps look, what you want your interfaces to look like, hook them up to data, and have it automatically be coded so you don't have to spend that time dealing with the fussiness of whatever CSS is doing these days. We are really excited. This is the first time we're showing it to anyone outside of our team. This is technology that's a sneak preview. It's not ready for release yet. But CS50 has been a really big part of both of our lives. And we wanted to make sure that CS50 students for their final projects this year got access to this preview of what the future of software development is. It's open through December to anyone with an @college.harvard.edu email address so that everyone who is at Harvard College can use Pagedraw to make their final projects. We can't wait to see what you do with it. So without further ado, I'll hand it off to Gabriel, who used to be head TF of CS50 at one point. So this is kind of his show. Gabriel, take it away. GABRIEL GUIMARAES: Cool. Thank you very much, Jared. Yeah, we're very excited to be here, and again, Jared said it. It is already open as of, I think, a couple of days ago to all @college.harvard.edu email addresses. Now, in case you're wondering, you're at Yale, or you're taking CS50 from a distance, and you don't have an @college.harvard.edu-- the reason why we're opening just for Harvard students right now is because it's not a full release yet. We want to make sure that we're on campus here to give everyone the full support that people need to use Pagedraw for their final product. If you really want to use it, that's fine. You can e-mail us at team@pagedraw.io. And we can probably get you set up an account too, OK? Cool. So first of all, Pagedraw lives at pagedraw.io, so go there if you want to check it out. And again, I want to talk a little bit about what we're doing. What we're tyring to do is automate front-end development. OK? Front-end development has always been done in companies and by developers usually where there are two steps. The first step is the design step, the design process, where you think what is my app, let's say Snapchat. What is my app going to look like? Oh, he's going to have a ghost. I'm going to use this particular color of yellow and everything. And then once the design is conceptualized, you have to code it up. You have to make the app live. And basically, this coding it up, we can't fully automate 100% of that, because there's a lot of cool stuff that's happening in the back end that humans still have to do. But what we do is we automate the front-end development part of it. So we take the designs, the design conceptualization, and we turn it into code. On our particular example that we like is Facebook. So this is Pagedraw. It should be very similar if you use some GUI graphical interface to basically draw and drag blocks around. And basically, what we can do is you can just take any of these blocks and place wherever you want, even multiple of them. But then the magic happens when you click Export, and we essentially generate all the HTML and the CSS that's going to make this page live. And this works across multiple screen sizes. It works with data coming from a back end. It works with all sorts of stuff that you would expect for a modern web app. OK? 00:04:15,180 --> 00:04:22,680 So most of you are probably familiar with this, CS50 Finance. We went on, and we did CS50 Finance using Pagedraw as well, the reason being that we want to make sure that Pagedraw works very well with this CS50 framework, basically like the Python framework that you guys get for [AUDIO OUT], the Flask server and everything. So basically what we did is we prepared a CS50 bundle of Pagedraw that's going to be very helpful for everyone who wants to make a CS50 final project that uses both Pagedraw and the skeleton code that we provide-- that CS50 provides in problem set 7. OK? And again, this is just to show the code. And I want to draw the attention if you ignore the class names, which honestly do look kind of ugly, most of the rest, like using those nested in this manner, is the way that I as a developer would write this HTML code. So this is kind of like our little magic. The HTML code that we generate is not some hackish thing with like position absolute or whatever. It is the code that a developer would write by hand, which means that we can save you a lot of time by not having to write that code at all. OK, so let's get down to business. Basically, what we're going to have is that, again, we're automating front-end development, which means that we're not automating back-end development. So you still have to do all the back-end development in just the same way that you did, for example, for problem set 7 of CS50. So this is what we were considering back-end development, which is the routes of your application, the controller, and the model of your controller. So the routes of your application, in this case, hello, for example, if a user goes through yourapp/hello, it's going to be handled by this route. And then this route is going to do some stuff. In this case, it does basically nothing, but it could do more and more interesting stuff, and then render a template called Hello to HTML. This template is the front end. This template is the file that Pagedraw is going to generate, OK? So the idea is that Pagedraw generates all of these files-- apology.html, hello.html, and so on. And you're still responsible for writing all the code and files like application.pi and helpers.pi. 00:06:35,330 --> 00:06:39,020 Now. a little word about compilers, because at heart Pagedraw is a compiler. So we're taking in as input designs. So it's not a compiler that compiles code into assembly like GCC, but it's a compiler that compiles designs into HTML and CSS. And because we're a compiler, we can do all sorts of cool stuff like optimizing your code to make sure that it runs across multiple screen sizes, but also with multiple browsers. And we can basically do things that ensure that everyone gets these cool benefits without having to worry about them. 00:07:14,490 --> 00:07:17,120 And I didn't mention the model view controller idea. I just wanted to talk a little bit briefly about this. If you recall, model view controller is just this idea of separating things in your mind. OK? Usually when you make an application, you can have one huge file and just have all of the logic, as well as all the HTML, as well as all of the CSS in that one big file. It's just not really nice, because then your code gets really unwieldy, and it's hard to maintain later on. And basically model view controller is not a new model. It's a model that people have invented decades ago I think that just makes this separation a little bit simpler and easier to maintain. So the idea is that we have three parts of the application, and that basically entails that you are going to make different folders and place different files into each of these parts. And the model is the database. So for example, you guys for P Set 7, you had a SQL Lite database I believe. And that's just where your data lives-- so where are all of your posts are, and social network, or where are all of your stocks are in problem set 7. The controller is kind of where all of the interesting action happens. OK. For the sake of CS50 problem set 7, the controller was application.pi where you define all of the routes, and then you basically talk to the model to get the data from the database. You sometimes insert new data into the database. But at the end of the day, what you do is you grab this data, and you render a view. OK? And the view is just the way to display the data. OK? And you did this through HTML, CSS, and Jinja template files. Those are basically like those For loops that you can place into an HTML file to render multiple things. And this separation between controller and view has been something that's been basically consolidated by a lot of frameworks like React and Angular also, not only in this back-end versus front-end separation type of thing, but also even in the front end, now there is a front end of the front end with React or Angular, or there's a model view controller within the front end. I won't go too much into detail about this, but it's worth mentioning that Pagedraw works very well of all this stuff. And basically, the idea is that what we're automating is the view. We don't try to touch any of the controller or the model. In fact, your applications of pi should not care at all that you're using Pagedraw, OK? So if you're using Pagedraw or not, the back-end code that you're going to write is exactly the same. OK? And it's just a view that we're automating. 00:09:58,770 --> 00:10:01,481 OK, so Pagedraw plus CS50 IDE. I already talked about some of this. But again, the idea is that we have all of these template files. And Pagedraw is going to generate them. So that means you should not touch them. And I'm going to show you in a second how to do that. And then all of your work should just go inside application.pi and inside Pagedraw to make those two basically work together. 00:10:28,460 --> 00:10:35,320 OK, so for the sake of explaining what I just said, we're going to build a myFace hamster social network. And if you guys go to the pagedraw.io, you can find that we have some documentation here. And one of the most important guides is this CS50 final project in Pagedraw aptly named guide, which basically is a step-by-step guide that shows you how to make this app, which is hamster social network. So we're going to create a very simple hamster social network with a couple of pages that lets you add posts with images and then shows the posts, just so you get a feeling for how it is to use Pagedraw to create an app and how it integrates with the back end and everything. So again, the first thing we have to do is download the distribution code, which is almost the same as the P Set 7 code that you had, which is just giving you an application.pi with some simple stuff. So I'm going to do that here. 00:11:42,600 --> 00:11:49,230 OK so what happened is I now have a project folder with templates. And templates, it only has a readme.md. I don't know if you guys can see that. There you go. It only has to readme.md, which basically says that files in this folder should be automatically created by Pagedraw. So again, this folder shouldn't be touched as much by this, but it does come with an application.pi, which doesn't have any routes yet. We're going to create all the routes in this guide. OK, so let's go ahead. The first part is that we need to install the Pagedraw Cloud9 integration plugin. Thanks to Jared, we have an awesome plugin that live syncs Pagedraw and Cloud9. So the way we're going to do this is click here, and then click here. So it's pagedraw.io/cloud9/install, and you just click this blue big button. It says this may take around 10 seconds. It's going to open a different page, and then this might take a while again. Bare with us. But then eventually this page is going to say, installed Pagedraw. 00:12:51,540 --> 00:12:56,180 And then when it does, I promise this is not a big. It does take a while. 00:13:02,000 --> 00:13:04,060 Yep, Pagedraw is installed in Cloud9. Cool. Thanks, Jared. 00:13:08,440 --> 00:13:13,630 So now, basically, we have to refresh the CS50 IDE to make sure that there is this pop up that appears on the top right-hand side that says here Pagedraw sync active. Once you see that, you're good to go. And basically what this does is that now we're going to create our first page in Pagedraw. So this is the Pagedraw dashboard. We already have some pages like the Facebook page as an example that we give you. And then we're going to create a page called Index. Cool, this is our very first page. And here, basically there is this file path. I want to make this a little bit bigger. There is this file path, which I'm going to put in here /workspace/projects/ templates/index.html. 00:13:55,260 --> 00:13:59,890 This is basically saying that Pagedraw is going to take this path, automatically compile whatever you have here, place it in this path in this CS50 IDE automatically for you, as you go, OK? So this is quite important. So I just did this. Let's now go to the CS50 IDE to see-- let me refresh this and see if we're actually going to have a new file there, which we should, and we do. So you see index.html was just automatically created here. Cool. Everything seems to be working. Now, what we're going to do is create the very first page. And the first thing I have to create is an artboard block. So to draw a block, just do Shift plus Drag, and you can do pinch to zoom in and out, OK? And then which is the block type here? There are various block types. We're going to create an artboard. Basically what this says is that everything we place inside of the artboard is going to be automatically compiled to code. Everything that we place outside of the artboard is not going to be compiled code. So I'm going to make my artboard have a size of like 700, because I did this yesterday, and I know it is a good size. And I'm going to click here. There's a little lock button that just basically doesn't let me move the artboard around just to make this a little bit easier. OK, cool. Now, we're going to make a page that looks like this one on the left-hand side. Let's just do it. I remember that I have some background that has this color. Let me copy it. So, again, I'm just drawing blocks. 00:15:31,811 --> 00:15:33,435 And then I'm going to change the color. 00:15:38,910 --> 00:15:41,220 I'm going to make a very thin line here as well. 00:15:45,117 --> 00:15:46,825 Let's make this look a little bit better. 00:15:50,740 --> 00:15:52,690 Cool. Now, I'm going to add those images that you see here like the myFace. 00:16:00,070 --> 00:16:04,210 And then you just choose Image Block. And then-- oh, I need-- can someone give me a charger? Thanks. 00:16:12,010 --> 00:16:13,630 So I'm just going to copy this link. I created an image block. 00:16:17,320 --> 00:16:21,190 I'm just going to put this in the image source URL here. And then, ta da, we have the smiley image. 00:16:27,580 --> 00:16:28,940 Cool. And I'm going to create a text block. 00:16:33,820 --> 00:16:36,400 Text. And I'm using a font Candara with, I believe-- I'm going to say myFace. That's the logo over app. The font I can choose here-- Candara. And the font size, I believe, should be 24. There you go. Cool. I'm going to copy paste this block just to make another image block on this size. 00:17:06,453 --> 00:17:08,369 But this one is not going to be a smiley face. It's going to be a pen. 00:17:14,589 --> 00:17:15,089 Cool. Thank you very much. Not this one. There you go. Cool. Now, we have this-- basically, the simple skeleton of an app here, which, again, if we do Export, we're already going to see some HTML and CSS. And this already, , again live synced with the code in CS50 IDE. OK, but let's keep going and finish. Now, we have to create our posts. So let's create one post, which I'm going to do as a white background block. I'm going to add some corner around this to it, and I'm going to add a border with something like this, cool. And center it. And I want to place images inside of it. So I'm just going to make another image block. 00:18:10,770 --> 00:18:11,970 Image. And I'm going to take this hamster. 00:18:16,470 --> 00:18:18,500 Copy, . And, again, put this in an image source URL so that we have the hamster there. Cool. Now, we also have some text here. 00:18:30,190 --> 00:18:31,870 So I'm going to add another text block. 00:18:35,979 --> 00:18:37,395 The name of the hamsters is Simon. 00:18:40,070 --> 00:18:48,830 I'm using a slightly more grayish and bold font. Cool. And I'm going to put here the time when this post was made-- 18 minutes. 00:18:59,179 --> 00:18:59,720 There you go. When you have a text block, you can just double click on it to add the text inside. 00:19:06,140 --> 00:19:07,800 And it can align those on the right. Cool. I'm going to make this not bold. 00:19:13,160 --> 00:19:13,820 Sweet. So, again, this is just like styling, and now I'm going to create another text block here, which is going to be the text. I'm actually going to copy the one up here, because it already has the color that I want. 00:19:32,618 --> 00:19:35,206 Cool. Hello. CS50. 00:19:41,937 --> 00:19:42,437 Yeah. 00:19:45,180 --> 00:19:47,520 OK, so we just reached a problem. You see that there is this red dashed line here? This is basically because right now, Pagedraw does not fully support overlapping blocks. By overlapping, I mean if this block is like this. We don't support that yet. We basically will generate some code that kind of does it, but it isn't, in many occasions, what you would expect. So our stance on this now is that you should try to avoid any overlapping blocks, which is why we show this red dashed line. So I can see here that this thing is overlapping. And there you go, and moved it around. 00:20:29,340 --> 00:20:31,168 CS50. Cool. Now, we're basically ready, OK? Very cool. Now, we can actually go to our app and create a route here. It says, routes go here. So let's create a route that says-- let me-- I have an example. 00:20:56,790 --> 00:20:58,230 This. This is a very simple route that just renders a template. OK? 00:21:05,320 --> 00:21:08,470 So now, we can just, again, just like in P s 7, you can do flask run, which is going to run the Flask server. You can click on CS50 IDE and go to web server. And you're going to see, bam bam, it is there. You can see that there are a couple of things right now that we haven't quite done yet, and that's what we're going to do now. One of them is it didn't really resize to the full screen size, which we will fix. The second thing is that this is just like static content. We actually want this to be coming from a database. OK, so this post. We're going to fix the static content problem first. Cool. So the idea here is that I just wrote Simon here, but I don't actually want Simon to be there every time. I want some user name coming from a back end. So what I do is I come on Pagedraw, and I see this dynamic content. OK? And basically, whenever I do double curly braces like this, it tells Pagedraw to go into back-end mode. So in back-end mode, you can call any variables that would be available to a Jinja template. And again, these variables have to be passed by rendered template. We're going to show you how to do that soon. But for now, let's just say dynamic content is username. So actually, instead of Simon, what we're going to have there is username. And here the dynamic content is-- so this one is a little bit trickier, because this is just like the username. But we actually need to make this post repeat. So we need to have multiple of these posts happening. So what we do is we have the repeat on posts, which is an array that my back end is going to create. Label one of them post. And this is just going to create a For loop. And then ask space between. Let's actually add some space between 10 pixels to make them be stacked in a nice way. OK. And now, the cool thing is that within this post here, we can access the post variable and do post , name or post description, or whatever. So what we do is in dynamic content, we can go into back-end mode, and we do post time. That happens to be the name of my variable. And then in Hello CS50, it is going to be post description. And again, I need the double curly braces. And I think I actually got this wrong. This should also be post username. 00:23:34,952 --> 00:23:36,910 Now, if you do look at the code that we export, you're going to see that there is a For loop here, and there's also a problem-- just a second. 00:23:49,110 --> 00:23:51,800 See if I fixed it-- yeah, there you go. OK, so there is a For loop. And then inside of the For loop, you're calling post user name and so on. This is, again, just the code that you would write if you're to do this by hand. Cool. And one last thing, we need an image to actually be dynamic. So there is a dynamic source URL link. We can do exactly the same thing. We just go into back-end mode, post image source, bam. Cool. And now, I actually have a route that goes into the database. The database that comes with this distribution code already has a table called Posts with a couple of pre-populated rows. And this is a route-- let's walk through this-- OK, this is a route that just is, again, a route on slash. So if you go to whatever your website is slash, it runs this function. It just defines current_user=Gabe. For simplicity, the only user in our app right now is Gabe. And then it fetches a post from the database-- post=SELECT all FROM posts. This is exactly the stuff that you guys did in P set 7. This is to drive home the point that, again, this type of code is back-end code, exactly the same thing you did in P Set 7. Now, I'm doing something a little bit more involved here where I go through all the posts. I actually add the username to the post, because those are not in the database, this username, Gabe. And then I change the time to make it display in a nicer format, using this Minutes Elapsed function that just changed the to something more and nice to look at. And finally, I reverse the post list, which is just going to make the newest post appear first, OK? And finally, I rendered a template, which was narrated by Pagedraw with posts=posts, which is this variable. OK? Now, if we save, and our Flask app is already running-- so we can again go to web server. Da dam! So we have Pagedraw working with dynamic content. Isn't this exciting? These posts, oh, yeah, they were from yesterday. So they say 2,082 minutes ago. Cool. And very nice, so this is all coming from the back-end, which is exciting. But we still have to make this resized to multiple screen sizes. In Pagedraw, this is very easy. What we do is we have to specify constraints. Basically, the constraint that everything has in the beginning is that everything is fixed size. We just have to specify who is flexible, what things should be flexible to make our page resize. So for example, what we do is we click on this post block here, and we say down here, there is a flexible left margin or a flexible right margin. I want to click both. And again, this is live synced, so I can just go here, refresh, and you see that both of them are now-- if we make the two margins flexible, that means that they're going to be centered, because the two margins have the same size, and they're going to be flexible. Also, I'm going to click on this gray-ish background, and I'm going to make it its full window height, which is going to make it full window height. Nice. There's also this line here that I want to have flexible with to make it have the full screen size. And then there is one very common question here, which is I kind of want this to be pinned to the right-hand side of the page. How do I do that? So the idea is if you want this to be pinned to the right-hand side, what needs to be flexible? Well, this wide area needs to be flexible. Therefore, you can click on this guy and say that my flexible left margin is active. And then that's going to make the white area be flexible as well. So bam, if we now go here-- let me make this bigger a little bit. There you go. Cool. You see that is was pinned indeed to the right-hand side. 00:27:59,670 --> 00:28:05,574 And OK, now that we have-- JARED POCHTAR: Resize the window. GABRIEL GUIMARAES: Resize the window? Oh, yeah, sure. So just to make sure that this is not only working for that screen size, you can resize the window and see that it is indeed centered for all of the window sizes. Cool. So now, let's make this even cooler with adding a second page, and adding links, and whatnot. So basically, what I want to do is I want to add some links. 00:28:37,679 --> 00:28:40,720 Actually, before we go into that, just to finish on the constraint stuff, this is also a common question. So if you click on this guy, the hamster, and you go down here, you can see flexible left margin, flexible right margin, and flexible width. OK? But if you click on its parent, you're not going to see any flexible width here. OK, why is that? The idea here is that a parent has a flexible width if and only if the children have something flexible in there. OK, so basically, if you have children inside of you, you have to define what in my children should be flexible. Therefore, you can't just say, ah, you're flexible if you're a parent. If you're a child, that's fine. You can just say, you have flexible width. I hope that makes sense. Cool. OK, so let's create some links. First, let's make this myFace thing be a link to slash, which is, again, this very same page. Let's make the smiley be a link to slash. This is very similar to adding links and what you would otherwise with HTML. And this is going to be a link to /newpost, which is going to be our second page that we haven't created yet. Cool. I think now we're done with this page. So let's go into creating our second page. I'm going to click on this little icon here that is just going to create a copy of that page to serve as a template. So it says Index Copy. I'm going to change the doc name to New Post. And this is very important. I'm going to change the file path to also newpost.html. Otherwise, both of them will be trying to write to the same index of the HTML file, which wouldn't be nice. OK. And now, I don't really want to have all this here. 00:30:19,300 --> 00:30:20,469 I'm going to delete this. JARED POCHTAR: How do you select multiple blocks? GABRIEL GUIMARAES: Good question. How did I select multiple blocks? I'm pressing Command Z to undo. I selected multiple blocks by just doing Command, and then selecting basically an area, and then whatever is inside of the area is going to be selected and delete blocks. Now, I'm just going to draw another block that is white, add a border, something similar. What we want to do is this form that lets you add a new post. So here I'm going to add a new type of block, which is called a text input block. This has a placeholder, which I'm going to say, in this case, is Image Source URL. And I'm going to create a copy of it, put it here, and the second one says Description. The end of this app is very simple. And finally, I need a button. I'm going to create a button. 00:31:24,590 --> 00:31:29,626 And I'm going to do this color for the button. 00:31:35,677 --> 00:31:36,176 Cool. 00:31:40,292 --> 00:31:41,958 I want to make this a little bit bigger. 00:31:47,650 --> 00:31:54,140 If you want to center your stuff, you can also just click on an element and click on Center up here, which is going to center it within its parent element. This is not going to center it always just like the constraints that we set before. You still have to go here and click on Flexible Left Margin and Flexible Right Margin to make it always centered for all screen sizes. OK? And also, if you do specify these things, but it is not centered, you can't expect it to be centered. It is going to be flexible proportionally to what you see here. Cool. Now, we have to basically add a ref to image source URL called Image Source, which is essentially going to allow us to access this in the back end when the user submits the form and a ref called Description. This is very similar to the name tag if you're familiar in HTML forms, which is the same thing. And then we have to make this block a form and tell it where it is going to submit to. We can just click on it and do form action is going to be to new post. So we're sending it to ourselves, which is this various websites. But we're sending it with a Post method. So this is all going to make a lot more sense now when we look at the back end that we're going to add, which is here. This is our second route. 00:33:15,130 --> 00:33:16,270 Let's walk through this. I just added the second route. This is, again, this exact same stuff that you guys did for P Set 7 in CS50. We have a route called New Post. It can have multiple methods Get and Post. If the method that the user is accessing that is Get, we're just going to render the template that Pagedraw is generating, newpost.html. If it is Post, the method, that means that the user is actually submitting the form. OK? If the user is actually submitting the form, we're going to go into this code here, which is just going to execute an insertion into the database. It's going to insert the post. And where is it going to get the post from? Well, from request.form.get image source description. Those two are the refs that we just specified in the Pagedraw. And then we're going to redirect to index, back to the beginning. Cool? So now I believe we should be all set. I just saved this. Again, I'm going to go to web server. Now we can click on this, which is going to take us to Template Not Found. If you look here, yeah, indeed templates doesn't have the newpost.html. We have to refresh, because we just created a new page. It's going to say Pagedraw Sync Active. Now, you see newpost.html here. Cool. And if we refresh, there you go. Let's try to add an image. Let's look for, I don't know, hamsters. 00:34:40,139 --> 00:34:40,810 This one. This one looks cute. So I'm just going to use this image source, or is it here. And the description is going to be "cute hamster, yay!" And I'm actually going to make this really long just to show that's it's going to work. Click Me. There you go. And you see that as expected, even if the text is longer, everything is going to refill properly, because this is the code that a developer would write by hand. It's not like some package code. Cool. And now, I just want to show you the code that Pagedraw is generating to explain what's going on here. So Pagedraw generates this code that has style and, again, some divs here. So in this particular example, Pagedraw is basically saving you from writing, I don't know, 300 for this plus some 200-something. You could refactor this style and make this into a little bit less. You can see that Pagedraw is saving you a lot of the work that's how do you center this thing? How do you put different images, and colors, and whatever? All of this work, we fundamentally believe, is not really programming. We think that programming is what is happening in the data level. And we really believe that developers should be working on the data level to create some data. And then the view is a design. OK? Right now, there are two-- often in the industry, you can find two different files, they are completely separate, that have exactly the same content. One of the files is an image file like a sketch or a Photoshop file. And the other is an HTML file. Both of them have the same thing, but in completely different formats. What Pagedraw is trying to do is just creating one authoritative source for that, which is the Pagedraw document here-- very cool. Does anybody have any questions so far before we move on? All good? 00:36:38,770 --> 00:36:39,730 Cool. Now we're done with our example, I just want to show you some other cool things that Pagedraw has. The first one is this live data preview. So the idea here is since we're creating the code that a developer write, and we can compile that, we can also compile it on the fly here in the Pagedraw editor and create this data preview block. So what this data preview block is going to do is going to take data plus a design. It's going to merge them and show you what happens with that design if this data is coming from the back end. Right now, you see what happens is error while trying to run template. Why? Because there isn't any data. I happened to have a-- where is it here? JSON string. And you can use YAML for this too, which looks a lot nicer, which if I put here, yay!, you're going to see. This is basically like posts, which has description time and image source, two of them. And you can see the data preview is basically the production version of your app. And you can test this with multiple Copy Pastes and test it with multiple types of data, with multiple screen sizes, and so on. So this is just a nice feature to see what your app is going to look like. Although with the Cloud9 syncer, it is just easier to actually just refresh the actual thing many-- often. Cool. But there's another thing that's cool that I want to show you guys, which is mobile versus desktop. OK? So a lot of people ask, how can I support a mobile version of my website? So remember those artboards that we talked about? Pagedraw has-- basically you can have multiple artboards inside of a Pagedraw document. So let's draw a second artboard-- this. And I say that my hamster, myFace page in mobile-- I want to make it just blue background. 00:38:49,030 --> 00:38:49,870 That looks good. And then I just wanted to have a hamster. It's pretty big. And I'm going to give it flexible width just so it resizes with the page. 00:39:02,744 --> 00:39:04,660 Oops, I'm going to delete this dynamic source. There you go. Cool. So what Pagedraw is doing here is it's compiling both this and this artboard into two separate codes. And then it just toggles between the two when the data preview changes size, not only the data preview, but the view that you're using to see this. So you can see that you could make this into a much nicer looking mobile version of your website. And then Pagedraw is automatically going to make that happen. If we do the same with this screen, oh, it's not this-- let me refresh. There you go. 00:39:44,860 --> 00:39:45,452 Very cute. 00:39:49,680 --> 00:39:50,430 Cool. Interactive block-- there's another thing that a lot of people ask, which is what if I want to make something that's a little bit more interactive? And one of the things that we're currently very actively working on is adding interactivity to Pagedraw. So when you click a button, a lama comes on the screen and does something like-- that kind of stuff. We admittedly don't support a lot of that stuff yet, but we do support some of it whereby you can draw a block and make an interactive block. Interactive block is very similar to layout block-- the only difference being that you have these Hover Color, Hover Border, Active Color, and Active Border. So just to make the point, I'm going to make this hover color, I don't know, purple and the active color very blue. And now, if we go here, is that it right there? Oops, that's the other one, sorry. If we go here, when I hover over it, it changes to purple. When I click on it, it changes to blue. So that's just if you want to make some nicer buttons or things that are a little bit more interactive, which is interesting these days. Cool. 00:41:05,730 --> 00:41:08,310 Now we have some very common asked questions that we would like to address-- the first one being, what if Pagedraw doesn't support something that I want to do? So I'm using Pagedraw. I think it's awesome, and I am creating all of this stuff. But then there's this one detail in my page that I really want to make happen this particular way that Pagedraw doesn't quite support it. Well, we're very hard at work to make sure that you can do 100% of things that you can do with HTML and CSS with Pagedraw. And we're close to that. But still, there are some things that you can't do. In that case, you can always add your own code to any part of your app basically. So one very good example is have you guys seen-- I guess not since you've never seen Pagedraw before, but have you guys seen this page, which is basically our landing page? There is one thing which is really cute. When you hover over this block, it goes like this. It tilts its head. And this is not supported by-- this type of animation isn't supported by Pagedraw right now. So Jared did this. And what Jared did was-- I have this page here. So the cool thing is-- where is it? There you go. All of Pagedraw is made in Pagedraw actually. So you can see those later. And of course, the landing page has definitely made it bigger. So Jared made this in Pagedraw. And then he clicked on here. And he clicked on Use Custom Code down at the bottom. And then he just added his own style image that makes this transition happen. And that's all that is. OK? And then basically what we're going to do here is we're going to say this block has custom code set. It and its children will be replaced by the specified code at compile time just to give you basically full flexibility. So there is no need to be worried, oh, I won't be able to do something, because you always will be able to do something. Worst case scenario, you replace your entire page by HTML [INAUDIBLE] you write, but hopefully, you won't have to do that. Cool. Second question, "Can I manually edit the code that Pagdedraw exports?" So it should be clear by now that the answer to this is no. You cannot manually edited the code that Pagedraw exports, because if I go on the CS50 IDE, and-- what's going on? I am just going to refresh. 00:43:29,960 --> 00:43:31,090 Sure. Yeah, this is exactly what-- this is exactly my point. Because I have this index.html open and Pagedraw is changing it constantly, it's saying, this thing reloaded on disk. And if I try to change-- let's say I want to change some code here-- delete this-- it's going to delete it, but then Pagedraw is going to go and write over it again. So it doesn't really make sense to do it. That said, if you've been using Pagedraw, and you really, really don't like it for some reason, you can always take that code, because it is fully functional code and then edit it yourself. But then you have to stop using Pagedraw, which we don't like. Third question, which is really important for the CS50 final project, "Can I collaborate with friends on the same project?" And of course you do. Yeah, collaboration is really important for us. Basically, what we have to do is, again, for to back end, you're going to do exactly the same stuff that you do otherwise-- doesn't care that Pagedraw is there. For the front end, both you and your friend, or friends, have to have an account in Pagedraw. You have to go and click here on this settings of the project. And hearing collaborators, you have to add new collaborator by email address. I'm going to add jpochtar@gmail.com as a collaborator, Jared. And there you go. Now we have two collaborators. And both of them have access to the same app. And you can both edit the same files. Cool? 00:44:51,070 --> 00:44:54,980 Now, would you like support for other frameworks, languages, and some cool not-so-tested features? Yeah, we do support React, Ruby, and Rails-- what else? What is the name? Jade. We support probably 10 to 15 different languages in the frameworks. For the CS50 launch, we're basically just enabling Jinja, which is the one that problem set 7 uses. But if you like support for that kind of stuff, you can email team@pagedraw.io. And we're going to give you access to this, and we also have some other untested features like components, and a lot of other stuff that if you want to come talk to us, we can give you access to it. Getting help. Getting help is really important. for every final project. Jared and I are going to be doing office hours for Pagedraw if you're using Pagedraw to make your CS50 final project. And there's also a Facebook group. You can check on the slides later. And please join the group where people can post questions, and we can answer them as soon as possible. And then, again, team@pagedraw.io, we're always going to answer all of your questions there. 00:46:01,770 --> 00:46:03,810 One last thing is that we are also hiring. So if you're interested in working on this sort of problem, do shoot an email to jobs@pagedraw.io. We are looking for awesome engineers who have experience in this kind of development tool idea and who want to work on hard problems with us. Awesome. Questions? 00:46:26,240 --> 00:46:27,240 Yes ? AUDIENCE: So we've seen tools a bit like this in the past-- Dreamweaver and things like that. How would you separate yourself from these? GABRIEL GUIMARAES: Yes. So we've seen some tools like this in the past. How are we separating Pagedraw from these tools like Dreamweaver, for example? That's a great question. There have been many tools like this in the past. And for Dreamweaver specifically, do you want to take it, Jared? Yeah. Jared is coming up just to take that question. He likes that question. JARED POCHTAR: Hey, guys, I'm really, really excited about everything Gabriel just showed. So I hope you guys are too. So that's probably one of our biggest questions that we get a lot, right? People have been trying to do this since at least the '90s. It's been a really long time. And actually, if you look at things like iOS development or Android development, we see some kind of similar tools on those fronts that work pretty differently. The challenge is that HTML and CSS are kind of atrocious. I don't think that's bombastic to say. They are really kind of truly atrocious. And so if you look at what something like Dreamweaver used to do is it would generate pretty bad code. And so don't see anyone using Dreamweaver today. It's kind of laughed on, actually, because you're not really professional if you're using Dreamweaver code. You can't do all sorts of nice things. It just won't work right. So a couple little things is Gabriel had that really long line when he had for description for one of the images. And it pushed down all the things underneath it. If you're using something like Dreamweaver, there's two versions it can take. Either it can let you edit the issue on CSS sort of directly where you have an interactive way of touching what the code will be, even though you're not typing it out. And that's really horrible to work with, because you end up basically having to do HTML and CSS anyway. Or you have this sort of-- I'm going to draw the image way of doing it where you can draw everything you want the way that we let you draw everything you want. But if you say it's just an image, everything is fixed in space, you can't do the flexibility that we have when we do resizing across different screen sizes, or again, like push down things like. Basically, just the code quality has been never very high for the tools that have tried to do this in the past. Our secret sauce, the core technology for us, is that we're a compiler. So just like GCC takes C code and advanced assembly code that can run on your computer, what we will do is take your drawings and translate them in a meaningful semantic way into code that your web browser can handle in the way that you intend for it to be handled, not just a one-to-one, we're going to get this right on the surface level, and if you change something, it'll kind of be fussy. GABRIEL GUIMARAES: Yeah, the short answer is that no other tool before us has been able to make something as complicated as Facebook. Whereas with Pagedraw, you can do that kind of stuff. Cool. Any other questions? 00:49:21,970 --> 00:49:22,530 Awesome. JARED POCHTAR: This has been really fun. It's super exciting. For me, this is one of the greatest parts of computer science about programming is that you can use programming to change the way we do programming. Tell me that's not exciting. Tell me that's not awesome. GABRIEL GUIMARAES: Yeah. JARED POCHTAR: All right. GABRIEL GUIMARAES: It's cool. Thank you very much, everybody. JARED POCHTAR: Thank you. GABRIEL GUIMARAES: I hope you guys use Pagedraw for your CS50 final projects. Take care.