Effective PyCharm (2021 edition) Transcripts
Chapter: Client-side web apps
Lecture: Basic HTML and PyCharm's live reload

Learn more about this course
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.