Welcome to live coating with Jesse.

I'm Jesse.

And today we're going to do some styling.

Cem, you I changes to make this applicant little nicer.

Uh, as you can see, there's no video right now, so I don't know why.

Uh, I moved.

So I moved into my new house.

I unplugged everything, moved all my computers over, plug it back in, and my webcam now does not work.

S o.

I'm installing some stuff from the manufacturer that hopefully will help.

It says it's gonna finish in about a minute so the video may turn on.

It may not, but you don't watch this for my face anyway.

Um, so let's get started a CZ Long as you can see the screen and hear me, I think that's, uh that's good enough.

Um, I'm gonna check real quick and see what everyone's saying in the chat.

Um, hey, everybody see a lot of people just saying Hi.

How's it going?

Okay, let's bring up the at first.

So everybody who hasn't seen it yet can at least see it.

Um, also So they hit the insulation.

Just finished.

Let's see.

Okay.

I don't want to sign up for it.

Okay.

Wow.

All right.

So I don't think that did anything because nothing happens.

Uh, hey, get something That's weird, huh?

Here we go.

It works.

All right, let's move it over it.

It's all right.

There we go.

Okay.

So I guess it was just a driver or something.

Um, you could see my background has changed.

So this is my new place.

I'm thinking about getting a fish tank back there, so I have a fish tank with some goldfish.

I haven't moved out yet.

Um, so I don't know, let me know what you think.

If you want to see my goldfish behind me of anyways.

All right, let's get started.

So I do want to give a shout out to Chris who did a awesome pool requests.

So let's d'oh get pool.

It's gonna pull down all those changes from the poor so you could see like that.

The code changed immediately.

There.

So this is decently significant pool requests, especially considering the project still small.

This is quite a few changes to thank you, Chris, Uh, we're also gonna do yard.

This is a good practice.

Any time you start a project I'm sorry.

Anytime you're working on a project, first thing you should do is do we get pool soon as you start working on in the morning.

You know, you'll get pool, do, um, and then run yarn or NPM install That way.

You know, you have the latest, you know, changes and and the packages Like I've forgotten this before and start working realized I don't have the latest changes, and then there's, like, Marge conflicts and stuff, or I do remember the pool, But I don't remember it to run yarn into, stole the packages.

And then I get all these errors on for a second.

I'm freaking out before I realized that Oh, I I just didn't install the new packages.

So start.

So let's start this up.

That way we could see the app.

Uh, we'll be able to see it.

And also, let's go to the pool request.

So the issues now there's only two issues left.

I'm sure we'll be able to add some more, but with a close pull requests on, check out this one.

Right.

So I'm not gonna go through all of this just so that we have time for coding but check this out the length to the repose in the description so you can check out with basically, this fixes two problems.

One we had said that way don't want the user to get the same question like the exact same question twice in a row.

Also, we don't want when you're doing subtraction.

We don't want subtraction to result in a negative number, at least not in in the first.

The first level.

I also found some bugs that I didn't realize were happening and fix those as well, So that's awesome.

You could check that out there.

You can check out all the files that have changed at that little bit to the prettier config, which is nice.

I'll probably set up some like automatic glinting so that any time anyone tries to commit code, it'll auto lent it and let me know if you want to see how to do that, I can do it on a stream.

Otherwise, may I just try to do it, you know, on my own and just have it set up.

But it is kind of a cool set up.

I usually do it for all my projects, and it avoids having, like weird commits where you have it looks like you have a lot of changes, but they're not really changes.

It's just like formatting things like a semi colon or not using a semi colon or weird spaces.

So anyway, uh, I have some questions about that auto land.

So when I say like auto lynching and auto formatting, I just mean like a soon as you would do, like, get commit, there'd be a pre commit hook that would run, and it would go through all your code.

It would check it to make sure the syntax is correct, according to rules that we set up, Uh, and then, if it's possible for it to just automatically change your code to use the rules we set up, it will do that.

Eso itt's pretty cool.

It keeps a nice standard, and it makes it so that if you want to contribute to this project, you don't have to learn all the rules.

You just code how you like to code, and then whenever you go to commit, it'll change it all, and it looks like there is some interest.

So yeah, I'll definitely show you to do that, um, maybe on the next dream, that's what That's what I'll do.

So, yeah, it's a cool little set up, and, uh, let's see, I lost my train of thought.

What were you doing?

Oh, I wanted to show everybody the APS.

Okay, just so you know, um, the way this is gonna go, we're gonna do a little bit of coding, and then I'm gonna take a break, and we're gonna answer some questions.

And then at the end, I'll try to answer all the remaining questions.

So if you have questions and they're in the chat and I haven't got to him, I will get to them in a bit.

Probably in about 20 minutes or so, maybe less.

I'll go back to the chat.

All right, but this is the game.

So I'm sorry if there's a lot of background noise.

My kids were all getting ready for school.

They're about to leave.

So, um, I don't know how much of that that mike is picking up.

Hey, buddy.

Uh, you want to say hi?

I don't know if it can see.

Yeah, how?

Have a good day school, but, uh, yes.

I'm just in my basement right now.

Eventually, I'm gonna build like a legit office and hopefully soundproof it, but just moved in last week.

So anyway, uh, these air the styles, we do have different colors for each mode, right?

But we just threw these in here.

Um, this is definitely not how I wanted to look.

I still I'm not exactly sure how I wanted to look, but I think there's some improvements that could be made.

Uh, so let's first thing I want to do is open up, Dev Tools.

All right, So if you're not familiar with Dev Tools, this is your best friend.

As a web developer, deaf tools will allow you to inspect things on the page, See the code, make changes.

Basically, they're like previews of changes that only you can you can see.

Hey, I'm live streaming.

But if I sent one of my sons was back there just like moving all these barker.

Um, So what I want to do is see how this will look on a device, because eventually we want to make this run on a mobile device is, well, a cz on ah desktop.

So we haven't actually checked to see how this would look on a device.

So let's just, uh I don't know which one topic.

Let's figure small one.

Just thio get an idea.

So this actually isn't terrible.

I kind of thought it would be worse since we hadn't had this in mind at all.

But it fits.

Wow, that's that's cool.

It actually is.

Um, Okay, so just looking at this right now, uh, I think for sure, uh, the numbers need to be bigger, and the buttons need to be bigger.

I think the the hero character, the tear in the enemy characters that here they're here can definitely be smaller.

Uh, so the perspective this is a Children's game.

All right, s o their attention is gonna be drawn to this.

When in reality like this, there's no interactions they can take here.

It's so weird drawing the user to an area that they can't actually do anything with.

S o.

I think we can We can shrink this s o.

This is this stream is going to be a little bit of design and death together, right?

So I'm the software engineer I have done designed before a bit, but I'm not primarily a designer.

So usually I just jump in and start coating and then figure out the design as I go along.

Uh, if this were a real project on a real team, we'd probably have a design.

A designer already do the design, right?

So let's for now, let's see what this looks like when we shrink these up and make this bigger.

All right, I don't want to make sure anything that a user will click is really big, right?

Because it's gonna be a kid's game there.

Their dexterity is not going to be, um, as good, maybe as the average user, potentially.

So we want to make sure they don't accidentally click in the wrong spot.

So right here I can see like the submit button needs to be bigger.

And there needs to be more space.

All right, uh, so let's let's do that now, Like So Since we're in depth tools, we can try some things out here without actually even touching our real code.

So let's click on some of these.

Uh, actually, it might be easier in this case, So, like in the case of ah, the numbers, we can definitely make them bigger, Let's see, So we can see all the properties that are currently on BC.

Is this properties that are currently on this?

We have the font size of 28 pixels.

Said actually, is, uh, seems pretty big, but we could see like it doesn't actually look that big on that phone.

Um, so if we click that, it will show us where in the code.

We have 28 pixels now.

Unfortunately, since we're doing this with react, Native Weapon is coming through.

Won't allow us to edit directly in line.

If this was just a normal weather, we could, um so we're gonna have to override it and let's go with.

Still with 40 pixels is gonna seem pretty crazy to do 40 pixels, but I think it'll be good.

Uh, actually, because of the way the styles get split up, I can't target a style.

So let's just go back to our code really quick.

In this case, I think it might be easier just mess with their code directly.

Normally, it is not.

So.

We do have our lifestyles down here, and, uh, I forget we're using comic sans Oprah.

We may change that.

It's ethics.

Since it's a kid's game, it might work.

Okay, so our character has a with of 80 and 80.

Let's let's cut that down, Right?

Let's let's give that 40 and no are math container our math rose.

So our math row has a padding on the bottom of eight.

Let's bump that up to 16 and then our text size 28 will bump that up to 40.

And we do have our inputs of sports.

I believe this is our input for Let's make it it just the square.

We'll give it a haIf.

And with of 60 I didn't finish my thought.

Sorry.

That's our input.

To put the answer to the question.

Let's save all that and then see what it looks like now.

Okay.

So definitely different.

We now have bigger text here.

We have more space.

I forgot to make the submit button bigger on.

Is this OK?

So we didn't actually make the text bigger.

And here so what?

We need to do that.

Let me check my time to make sure I forgot to start my timer.

So So what?

I started 7 30 So we've been about 20 minutes now.

All right, let me just get just a few more minutes, and then I'm gonna go to the live chat and read through the chap.

All right, so, for now, let's, uh let's make the button a bit bigger and we'll make the text inside the input match with this text, okay?

Oh, don't let me forget.

I need to check out Cyprus.

So are testing.

Suite has now changed from using puppeteer to using Cyprus.

So I wantto give you a preview of that.

And I forgot to last time.

And what would I want to try to do it for sure this time.