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.

Talk Python's Mastodon Michael Kennedy's Mastodon