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

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