Effective PyCharm Transcripts
Chapter: Server-side Python web apps
Lecture: Template tooling - rendering tweets

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Well those tweets were kind of fun, we got them loaded up but remember what they looked like. They did not look very friendly.
0:08 This is not what you want to see as a user of this website. So what we want to do is we actually want to loop over here and have
0:16 maybe a little piece of HTML where the class will be something like there's a tweet and then for each tweet I want to work with it.
0:22 But how do I specify that? Well let's do a little loop right in Python we do loop. So in jinja, we do as well.
0:29 The way we issue Python like commands to the template as we say { % notice that auto closes, which is super cool. We say for t in recent tweets,
0:41 there's our auto complete and we always need to close these wish that wasn't the case
0:45 but it's a need. It is turn down in here we're going to put something that has the class tweet and now in this loop we're going to have access to
0:54 T So let's put a div I want to have a div with a class that has the value name or maybe they will put the text in the in the name
1:04 second. So I want to have to be something like div and I'll say class equals text and I want to put the value here.
1:13 So there's this really cool thing called zen coding or Emmett that PyCharm supports and
1:18 these HTML templates. So I could just say div and put the cssselector. So I could say dot text and if I hit tab,
1:26 look what that does create a div with the class set to text. Why? Because in CSS dot text means class.
1:34 but I want to also have the idea being some id to do that. Now the id is set and it gets even more interesting.
1:41 What if I wanted a div that contained a 'ul'. Right? This is immediate containment in CSS that had 'li' but five of them
1:51 and those had message as their classes. Check this out bam. So I encourage you as you're writing HTML to take advantage
2:01 of this sort of super fast creation using CSS selectors. I just want something simple like text. And then here we're going to say t dot oh my goodness,
2:12 what is this? Look at that? It knows looping over recent tweets. Well what is recent tweets? Because of the type annotation I put here,
2:23 it knows what's coming back and even though it's in quotes, it knows it's one of these. No, it knows that it has a name and a text.
2:32 So we want text and I want something similar. So cmd+d name, this will be name. All right, that looks better. Let's run it and see what happens now.
2:45 Like this fingers crossed. Boom, very, very neat. We're super close. We don't have a lot of style or anything.
2:54 And let's go ahead and bring our CSS file in. Now we want to bring in this style sheet here.
3:00 So what we can do is we can hit link and hit tab and then over here and say staticcss/site.css. Fantastic. So that will bring it in.
3:12 But remember it's empty. If I go go over there and hit go to definition right? Or even hold down control or command to navigate,
3:23 we can navigate into this very, very neat there. What do we want to do? We want to say that if we have a class tweet and then text,
3:31 it looks like something. So we'll say tweet notice it knows the classes that we've already started using tweet. And then what else could we have?
3:40 We could have our text First. Let's do a quick thing on tweet. Let's give it a little space. Will say margin is 20. Padding is 10.
3:50 All right. I'll give us a little space from each of them. And then here we want the text to be kind of large.
3:56 So we'll say font size. There's these little short abbreviations. What do you want 25 PX What wait bold and then something similar tweet but
4:10 name actually let's make the name be bold but the font size to be 18 PX All right. Let's run it. See what happens quick on our tweets.
4:24 One more time, fingers crossed bam. There they are. I got to tell you not still loving that formatting so much but it we're getting close.
4:33 What's wrong with it? Well, we don't have very much going on in terms of like default text or fonts or anything like that. So one more quick thing.
4:43 Yeah, let's just go over here and grab a really quick link over to bootstrap and if we throw a bootstrap at the top forward,
4:52 our CSS like that, you know, all that stuff, but it's fine if it's there, go back, refresh, reload, refresh, it looks a tiny bit better.
5:07 We could probably put like some italics on this, but you know, the point is not so much to make this look particularly amazing
5:13 Maybe we want to wrap this in like a little 'em' or something like that. There you go. At least I think it's readable.
5:20 So look, we built this cool little page and I hope you got a sense
5:23 of like how many of the pieces of our web app are fitting together incredibly tightly So when I'm over here writing I get the Jinja help.
5:35 But then I also, as I work with that, I get auto complete back into my Python code for the type annotations. When I work with CSS here,
5:45 it actually drives what I can do over what I get assisted with over in the CSS side and also works in the other direction.
5:53 So if I were to go create a div and give it a class notice automatically suggests all the things that we've put in their super,
6:05 super cool. So really, really great binding together of the Python side and the website and all of these different,
6:12 many moving parts and this just touches the surface. But remember when I said PyCharm, is it fantastic. HTML Editor and Javascript Editor,
6:21 CSS editor. This is a little bit of what I'm talking about, but of course, we'll see more as we go through the few next chapters.


Talk Python's Mastodon Michael Kennedy's Mastodon