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,
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.