00:0.04 It's time to write some client side code.
00:2.65 We've already seen what we can do with Flask and the other web frameworks,
00:6.64 those run on a server. And I want to focus just on pure html javascript
00:11.39 CSS and so on. And then we'll get into more advanced things like Typescript, LESS
00:16.75 and so on. But all the stuff that's just purely on the frontend inside these
00:21.52 are the things recall that people say,
00:23.49 oh I can't use PyCharm because I do this kind of stuff.
00:26.44 So pay attention and you can assess for yourself whether or not those assessments makes sense
00:31.34 So I have two examples.
00:33.35 We're gonna check out here a Vue.js example.
00:35.38 We'll get to later. But right now let's just go and create a basic html5
00:39.73  page. I'm just going to call this 'basic_static_site.html'.
00:49.94 You hear what's call this basic site.
00:51.8 We've already seen what we can do with the html side of things.
00:56.67 Right? We've seen zen coding something like this.
01:4.41 Right. And of course all that applies on the client side.
01:8.52 But let's just put in a few things here.
01:10.12 This will be basic site, put a div and it'll say see the console why
01:17.09 the console because we're going to write some javascript and it's going to write things there
01:20.81 So here's our page Now.
01:23.98 What did we do before in our Flask example.
01:26.79 We came over here and we right clicked and we said run app,
01:31.94 well we didn't set it up for a virtual environment here.
01:34.11 But what we did is we went over here and we right clicked and we said
01:38.13 run app and that ran the python server and we clicked a link at the bottom
01:42.19 But PyCharm actually has some really cool support or just static client side stuff
01:48.85 So watch this. If I right click and say run notice it's opening an
01:52.89 up your basic site. Alright,
01:55.09 that's cool. So it creates a little server that's going to serve that up because
01:58.5 sometimes if you're doing javascript or you're doing other things,
02:1.66 it makes more sense to have like a little wimpy server rather than just opening up
02:5.57 the file system. So PyCharm does that for us.
02:8.42 But notice also over here it's got this little wonky bit back there and PyCharm
02:14.04 actually we'll let us debug into this.
02:16.51 We could hit the debug button and debug into javascript code with PyCharm insane.
02:21.41 But watch this is going to be basic static site and I watch them and hit
02:25.16 save. That's all I've done.
02:26.62 I'm not touching any other key besides save.
02:29.25 And I switch over here back.
02:30.64 Let me put them side by side so we can go over here and say the
02:34.53 title, See the title appears.
02:35.67 Basic site. Basic static site.
02:37.8 Save automatically. Reloads. So it's watching the changes we're making to our static files
02:44.75 and doing things. So if we had something like the style equals background colour is
02:52.81 pink. Oh instant. Really,
02:56.53 really super cool here. Now this applies not just to the html files,
03:1.42 check this out. Let's make a little room for us to work here but still
03:4.33 see the background stuff. I go over here and I add something like a style
03:9.31 sheet and I call this 'site.css' and let's get rid of this style here
03:14.78 Save, see it goes back,
03:18.54 come here, let's say body background.
03:24.34 Let's go with light green. Maybe a little bit intense.
03:29.74 But if I go over here and then I add this,
03:33.84 it saved like green. Now if I even make a change here,
03:37.04 a light blue save am instant.
03:41.24 So really cool way to just be able to work on your code and just have
03:45.09 it live over there. I think this only works in chrome,
03:49.8 It doesn't seem to work in Firefox for me,
03:51.71 which is fine, you know,
03:52.87 it doesn't want to actually debug into there,
03:55.04 but it's really, really helpful to be able to see the code and the rendering
03:59.42 of it happening all at the same time.
