Effective PyCharm Transcripts
Chapter: Client-side web apps
Lecture: Basic HTML and PyCharm's live reload
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
It's time to write some client side code.
0:02
We've already seen what we can do with Flask and the other web frameworks,
0:06
those run on a server. And I want to focus just on pure html javascript
0:11
CSS and so on. And then we'll get into more advanced things like Typescript, LESS
0:16
and so on. But all the stuff that's just purely on the frontend inside these
0:21
are the things recall that people say,
0:23
oh I can't use PyCharm because I do this kind of stuff.
0:26
So pay attention and you can assess for yourself whether or not those assessments makes sense
0:31
So I have two examples.
0:33
We're gonna check out here a Vue.js example.
0:35
We'll get to later. But right now let's just go and create a basic html5
0:39
page. I'm just going to call this 'basic_static_site.html'.
0:49
You hear what's call this basic site.
0:51
We've already seen what we can do with the html side of things.
0:56
Right? We've seen zen coding something like this.
1:04
Right. And of course all that applies on the client side.
1:08
But let's just put in a few things here.
1:10
This will be basic site, put a div and it'll say see the console why
1:17
the console because we're going to write some javascript and it's going to write things there
1:20
So here's our page Now.
1:23
What did we do before in our Flask example.
1:26
We came over here and we right clicked and we said run app,
1:31
well we didn't set it up for a virtual environment here.
1:34
But what we did is we went over here and we right clicked and we said
1:38
run app and that ran the python server and we clicked a link at the bottom
1:42
But PyCharm actually has some really cool support or just static client side stuff
1:48
So watch this. If I right click and say run notice it's opening an
1:52
up your basic site. Alright,
1:55
that's cool. So it creates a little server that's going to serve that up because
1:58
sometimes if you're doing javascript or you're doing other things,
2:01
it makes more sense to have like a little wimpy server rather than just opening up
2:05
the file system. So PyCharm does that for us.
2:08
But notice also over here it's got this little wonky bit back there and PyCharm
2:14
actually we'll let us debug into this.
2:16
We could hit the debug button and debug into javascript code with PyCharm insane.
2:21
But watch this is going to be basic static site and I watch them and hit
2:25
save. That's all I've done.
2:26
I'm not touching any other key besides save.
2:29
And I switch over here back.
2:30
Let me put them side by side so we can go over here and say the
2:34
title, See the title appears.
2:35
Basic site. Basic static site.
2:37
Save automatically. Reloads. So it's watching the changes we're making to our static files
2:44
and doing things. So if we had something like the style equals background colour is
2:52
pink. Oh instant. Really,
2:56
really super cool here. Now this applies not just to the html files,
3:01
check this out. Let's make a little room for us to work here but still
3:04
see the background stuff. I go over here and I add something like a style
3:09
sheet and I call this 'site.css' and let's get rid of this style here
3:14
Save, see it goes back,
3:18
come here, let's say body background.
3:24
Let's go with light green. Maybe a little bit intense.
3:29
But if I go over here and then I add this,
3:33
it saved like green. Now if I even make a change here,
3:37
a light blue save am instant.
3:41
So really cool way to just be able to work on your code and just have
3:45
it live over there. I think this only works in chrome,
3:49
It doesn't seem to work in Firefox for me,
3:51
which is fine, you know,
3:52
it doesn't want to actually debug into there,
3:55
but it's really, really helpful to be able to see the code and the rendering
3:59
of it happening all at the same time.