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.