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