Placeholder Image

Subtitles section Play video

  • everybody welcome alive coating with Jesse.

  • I'm Jesse.

  • And today we're gonna work on the react native Web app that we started to a couple weeks ago.

  • I don't remember.

  • We started it.

  • Um, let me know what thestreet quality is like, um, last time, we had really good quality, but the time before that, it was terrible.

  • So hoping we have good quality again.

  • All right?

  • And YouTube's telling me that the quality is okay, so I hope that's the case.

  • Um all right, cool.

  • So looks like it's looking good.

  • Hey, everybody in the chat.

  • All right.

  • So I'm gonna go ahead and get started, and then I'll go back to the chat.

  • If you've never joined in before, this is how it works.

  • Uh, I will do.

  • Ah, Pomodoro sessions.

  • So let me get a Pomodoro timer running.

  • Um, let's go.

  • It's just fun.

  • Harry, get tomatoes.

  • Hammer will work.

  • So we're gonna start this Pomodoro timer.

  • It's 25 minutes.

  • Well, 25 minutes is up.

  • I'm gonna stop coding and I'm gonna answer some questions.

  • They were going to try to get through to Pomodoro cycles, see how that goes on.

  • And then at the end of both Pomodoro cycles.

  • If there any questions left, I'll answer those.

  • Andi.

  • If it starts to go really long, I will have to cut it off.

  • And, um so I may not be able to answer all the questions, depending on how many questions we have, because I'll have to go to my normal day job as a software engineer.

  • All right, so let's check out what we have so far.

  • Here's the actual app.

  • So this is as faras we got last time.

  • Ah, we just have a an input, a button and a title on the page.

  • But the cool thing was, we did all this intrigue at Native and it's showing up.

  • Ah, in in like Dom Primitives.

  • Basically.

  • So these air Dave's right.

  • Um, so that's that's the idea.

  • Behind React.

  • Native Web.

  • You can write a react native and render it as a Web app, and you'd be able to render it.

  • Not only is a Web app, but since it's in react native, you can render that same code.

  • Uh, you can I don't know of renders the right word when we're talking about mobile, but, uh, basically, that same code could be used to make an IOS app and on android app and potentially other things as well.

  • Um, so let's go to the code.

  • All right?

  • Hopefully that's all big enough for you.

  • The only thing is blocked out by my face right now is just the ah, the terminal that it actually is running the local server.

  • So not really anything there that ah would be useful to see.

  • Let's give ourselves a little bit more space for code.

  • All right?

  • You could see a pack of Jason at this point is very, very basic.

  • We have react.

  • Um react Dom and react Native Web React Native Web includes react native So that's why we don't actually have react native here in our main dependencies.

  • This package Jason will grow as we continue.

  • And eventually if we would like to turn this into a mobile APA's well, so it it'll get a lot more complex.

  • But right now it's It's a pretty simple and we only really have one component.

  • And that's app dot Js and it's also very, very basic.

  • Okay, so this will get broken out in a separate components.

  • But for now, I'd like to just work on building out the u I a little bit, and we This is gonna be a game, like, basically a math game.

  • So I used to play this math game with, uh, with my oldest son when he was just learning basic math.

  • And, uh, I think we de mode it last week.

  • But the whole idea is you have to get math problems, correct.

  • Toe win the game, right?

  • S o.

  • We wanna build out of basic you.

  • I I'm not gonna worry about graphics at this point, so we're probably just gonna use, like, color dibs to represent the characters in the game for right now.

  • Ah, and then, later on, I'm not really a graphics person, so self to figure out what I'm going to use for the characters.

  • But we just need to get something on the screen visually so that we can test out the logic.

  • All right, so for right now, the the input is there.

  • That's that's what we need.

  • Ah, Let's get some, I guess.

  • Let me explain first.

  • What?

  • What I'm thinking at first is just a basic thing.

  • So let me make this bigger.

  • All right?

  • So this before I just be at the top is our title.

  • We're gonna center this on the page.

  • The input.

  • All right.

  • So above the input, there'll be a math problem, right?

  • Just for now, it'll just be a simple addition.

  • Problem?

  • Do you type your answer in here and you hit?

  • Submit, right.

  • That's basic.

  • But then above that, or even on the sides, depending on the screen size Ah, we'll have the hero character on one side and the enemies on the other side.

  • Right?

  • And if you get the math problem right, an enemy will disappear.

  • If you get it wrong, an enemy will appear right.

  • So the way to win the game is to get so many questions right consecutively so that all the enemies disappear.

  • Right?

  • Um, so that's the very basic idea.

  • Level one, simple, um, the simplest version of this game.

  • All right.

  • And then we could think about adding in some more complex things later, maybe like having high scores being able to save, um, your your data's things like that.

  • Um, but for today, I'd like to just get that basic you.

  • I build out and I see sedition action in the chat so Hey, everybody.

  • That's Ah is joining us.

  • Um, if you're Ah, If you didn't catch the beginning and you're wondering why I'm not checking the chat, just hang in there.

  • I have a timer going.

  • When the timer goes off, I'm gonna check the chat and answer all your questions.

  • All right, So in react, native, we don't have the concept of dibs, uh, or spans or, you know, p tags and things like that.

  • We have these other perimeters which are based.

  • The very basic is the view and the text.

  • All right, so we're gonna be using mostly views here.

  • Okay, so this main view is gonna stay are our route view.

  • Right?

  • Um, but then we're also going to make what?

  • Let's call this our who's actually ever dividend so used to that.

  • Okay, So this view is gonna be our here of you feel for now, we're just going to give it, like a class.

  • Basically a style of hero later on will probably break these out into their own components, but it's a lot easier to work with him in one place when we're starting out.

  • So we're gonna say style hero, and that's all we're gonna have in that view books you, and this one is gonna be enemy.

  • Okay, um so for now, since I know there's we're gonna start out with multiple enemies, I'm gonna make three.

  • Okay?

  • Where?

  • Obviously not going to keep copy and pasting these, you know, But for now, we're just gonna kind of hard code, Um, a demo of the layout.

  • So down here, where we have our styles and react natives, the react native comes with this the style sheet, um dot create.

  • And you could put styles in there Basically the styles or a javascript object.

  • So instead of normal CSS you have these camel case versions of CSS.

  • Um, not all of CSS is available here, so it's It's a subset you could normally use on a on a website.

  • So, uh, it'll you're at probably won't break, but you'll get a little error in the console letting you know, um, if you're using something that's not supported by react native.

  • So for now, we're gonna add, So this is the objects objects intact.

  • So we're gonna add Atacama, and then we're gonna add a hero, okay?

  • And let's just give him a haIf within a height and in react native.

  • The units, uh, are just plain numbers.

  • Right.

  • So we don't say pixels or e m or whatever is just just flat out.

  • Ah, number.

  • Right.

  • So for now, let's keep things small.

  • It's just say 40 and height 40.

  • Okay, so we're gonna keep him at this point.

  • Just squares just really basic.

  • And then let's give it a color.

  • So we're gonna say background color and I don't really know, Axl, you for off the top of my head.

  • Um, I'm just gonna put in.

  • I wonder if you know, I've never tried this, but I wonder if I could say just like Blue.

  • I know you can do this on the web, but I don't know if you do it react native, So I'd like to know if you can do it, so I'm just gonna try it.

  • All right.

  • So I just copied and pasted Oops, area I just copied and pasted hero, and we're gonna call this enemy.

  • And let's just say red for the enemy.

  • And it saved that.

  • See what we get.

  • Hey, here we go.

  • So it actually works, Although I don't know about you, but to me this blue looks purple.

  • Maybe just because it's up against the red.

  • It's like messing with my eyes here.

  • But anyway, so here's a hero.

  • And here's our three enemies great s.

  • So I definitely learned something that you can just put, uh, names of colors in There s so that's useful, especially.

  • We're trying to just mock things up really quickly.

  • All right, so the positionings an issue right now, like we just put him on the page, but they're not at all where we want him to be.

  • So let's try to get in position properly.

  • So first thing we can do is moving down below the title and let's add ah, use.

  • And I'm thinking, probably should add a container for hero in a container for our enemies s.

  • Oh, let's do that now.

  • Basically, are we're gonna have ah view.

  • And, uh, sounds that, um I'm gonna say container for now, because I I suspect that these containers are gonna be very similar s O.

  • That we'll just have this container class and oops.

  • We don't want to self clothes that we want to actually close this view around the hero and then we're gonna have another container around all of these.

  • And you know what I don't have?

  • Oops.

  • There we go.

  • I don't have like my auto.

  • There we go.

  • The auto format wasn't working.

  • I was worried for a second and had it set up.

  • Okay, so now we have containers around here.

  • We haven't given the containers any styles, though, yet.

  • Ah, so let's let's do that.

  • Right now.

  • Everything inside the route is getting this justified content a line item center.

  • Let's let's take the route and make it.

  • Um, hate, Um, I think we can do We can do percentage to see if this will work on.

  • We need to put that.

  • All right, So we're gonna try height 100% on that route.

  • I'm not sure if it'll work or not.

  • I can't even really tell.

  • No, no, I didn't work, so Oh, actually, you know what we should do?

  • Um, let's go with, um flags.

  • One.

  • Is this it?

  • Let me see.

  • There's some property on flex that will make it take up the entire, um, the entire container.

  • No, that's not it.

  • I may have to look that up now.

  • So are our actual.

  • This is I d route.

  • But that's not really our route.

  • Um, let's just mess around in depth tools for a minute to try to get this right.

  • So this should have our flex.

  • Yeah.

  • Reflects, grow one.

  • See what?

  • This one this, um, so that's not owning.

  • And are even our bodies on this to creationists on this too, huh?

  • Let's just look this up.

  • I had to look this up for a project that I'm working on now.

  • But it was, like, two months ago, and I've already for gotten, so let's say Ah, full height.

  • Uh huh.

  • You react.

  • Native.

  • There we go.

  • Ah, it's a possible make you 100% and react.

  • Natives.

  • Yep.

  • This looks good.

  • All right.

  • So, Flex one is suggested here, which we tried, uh, take up the full screen position.

  • Absolute lose, too, if it doesn't solve your problem.

  • Okay.

  • So we can go with this position.

  • Absolute.

  • We could also try to get the dimensions first and then set.

  • That is within height.

  • Okay.

  • Okay.

  • Looks like they're doing the flex.

  • One thing.

  • Yeah, I think.

  • Let's just try this, um position absolute member.

  • Probably the quickest to test.

  • All right, so I apologize.

  • If somebody already put this in the chat, let me see each element inside flex container.

  • If you put Flex one for each of them will give all the same with height.

  • If it's for extraction.

  • Calm.

  • Okay.

  • So, uh, Jon Hansen was talking about the flex, uh, as well was tried this, and I don't want or need these.

  • All right, let's see what this gives us.

  • Okay.

  • All right.

  • This is is the fool.

  • Um, the full height now, right?

  • And Okay, great.

  • All right, so now we know we have a full full height and with, uh, view.

  • Ah, and then within this view, let's all right, we're at the containers with south of the containers.

  • Get sidetracked there.

  • We have container and within the containers.

  • See how we want to do this.

  • Um, I think the normal flex will work for these containers because flex direction is calling by default on dhe.

  • So I believe that's what we want.

  • Eso in react.

  • Native flex direction by default is calling.

  • Okay, um but here's what you want to do.

  • So let's take this route and say Appear the chef Flex direction row.

  • And actually, it's common to set.

  • For now, I really could do this in dentals.

  • Okay, so this is like, what I mean by flex direction, Uh, so by default on the web.

  • So if using regular react, this is would be the layout.

  • If you said if you're using Flex Fox by default on react native and react native, the flex direction is called him, which would have been, like, the first year that we saw.

  • All right, so we were going to, within our views, probably switch back and forth to get the layout that we want.

  • So we're gonna like basically, we're gonna nest views with different flex box properties to do our layout.

  • Right?

  • So we're using Flex flex box because that's what would the layout stuff is for.

  • React, like, built in to react.

  • Native.

  • All right, so we're gonna need a, um, a rapper arounds this.

  • All right, so we want to leave our main route as just flex direction call.

  • Um, but then we'll need a wrapper around this to set these to flex direction.

  • Row.

  • So these line up like this, we're gonna space them out.

  • But for now, like This is a better line up.

  • Okay, Uh, me Check my time.

  • In about five minutes, I'm gonna go to the questions, the chat and answer some questions.

  • Okay?

  • So let's add.

  • Yeah, let's have this another view.

  • The views were going to start to get crazy.

  • It'll get simplified once we split thes out into separate components, though.

  • All right, So this view we're gonna set the style of and we're going to say this is Ah, battlefield.

  • All right, So this is going to contain our our battlefield, right?

  • Where our hero in our enemies, um, do their math battling.

  • And this will encompass both of our containers for our heroes and enemies.

  • Now, we can go down here for a battlefield.

  • We can grab this flex direction.

  • Row will remove it here and then just added in down here.

  • And let's see if that gives us what we want.

  • I don't like that space.

  • Oops.

  • We forgot a comma.

  • Check it out now.

  • Okay, great.

  • So that that does give us what you want, So the main layout remains Flex column, right?

  • Flex direction.

  • Call him.

  • But then within this, if we can get get the outline here this Steve.

  • So within this container, we switched the flex, um direction row.

  • And then once we're outside of that container, back to the normal normal layout again.

  • So not bad.

  • Now, of course, we want to separate these these warring parties here, and well, let's well, we have this open.

  • Uh, let's just add some styling right here so we can get immediate feedback.

  • Eso Okay, so the flex one here on this element is going to give us It's going to spread us out vertically.

  • But what we really want?

  • Yes, here it is.

  • Sued.

  • This gives us hey, conceiving a little weird.

  • There we go.

  • Okay, so we're gonna give this container.

  • This is our battlefield container.

  • We're gonna give it a with of 100% going to stretch out.

  • Um, the battle here.

  • Now, I don't really want this to take up the fool with of the screen.

  • Um, for now, I'm gonna add some padding on this one.

  • It might not be a bad idea just to add padding on the route, but we can change that if we need to later.

  • So I'm gonna say I should just wear the padding in on in here because it's a little bit different for react, native.

  • At least we have a different option.

  • So our battlefield with it is gonna be 100%.

  • And then we're gonna say padding.

  • I'm going to say padding horizontal.

  • All right, and then we can give it Ah, padding.

  • So I'm going to say 16 See how that looks.

  • Okay, so here you have 16 year and I think I forgot to add in.

  • I had added in the Flex one.

  • Yeah, so affects one when I added flex one.

  • Here s so this is basically what it's doing.

  • It's making this 1st 1 this first container for our hero, the full with, with the exception of the tiny bit of space that we give to our enemies.

  • So this this will actually achieve what we want for right now, so I'll leave it.

  • But we may wanna switch that up at some point because it's logically like it may end up being confusing for us because we'll expect there to be kind of like, uneven battlefield in terms of our containers.

  • Um, actually, let's see what happens if I do this Hopes I didn't want that uh, this this actually will work out better.

  • It doesn't look better right now, but it will in a minute.

  • Let's add flex one to both of these containers.

  • So we do get that middle.

  • Ah, that split down the middle, you know?

  • So basically, each one would be 50%.

  • Uh, verify that yet this is what we have now.

  • What we can do in these containers as well is say, like, how we want the elements inside to be displayed.

  • So flicks it's a flex direction, and then we have some some options, right?

  • So hopes.

  • That's not what I want.

  • Um, eyes it just that continent.

  • All right, so it's not just fat content, and then it will be a line items area s o.

  • If you're trying to, like, center something vertically or horizontally, it's always either gonna be justified content or a line items I can never keep straight.

  • Which one is which?

  • I always just try both.

  • Um, so this will give us you know what we're going to be for now?

  • I think center is perfectly fine.

  • So let's add are a line items center groups yet?

  • I put that, huh?

  • All rights we're gonna add our line on him center, and then that should center both of them area.

  • So now we have our our little battlefield, right?

  • Ah, Now, also, like, we do have an issue with spacing, right?

  • And we ought to just fire content as well.

  • So we get that vertical align we're gonna send her.

  • That, too, s So now you see our hero centered.

  • Our enemies are also centered.

  • We want to give some space between our enemies.

  • And there's there's two ways we could try to do this.

  • We could set this container to be larger in terms of vertical height, and then whoops.

  • My timer went off.

  • All right.

  • Sorry about that.

  • All right, let's pause that for a second and let me go to the chat and answer some questions.

  • All right?

  • Okay, so Philip says Philip dares me to Kota program, which makes a new random language.

  • I know it's possible.

  • I tried and it works.

  • Um, all right, that's that's pretty interesting.

  • I don't know.

  • I'm not sure how I would go about that, but that's a good idea for a future project.

  • Thank you, Rob says.

  • Good morning social stock says Good morning.

  • All right.

  • So a lot of people are saying good morning.

  • So I'm just going to say good morning to everyone.

  • Um, thanks for watching, um, surrender.

  • Asked if I could explain the python language, I my experience and python is very limited.

  • So, uh, I'm I'm not the person to explain that, all right?

  • If anybody else watching is really good with python, maybe in the chat, you could try to explain a bit.

  • Ah, the only thing I really would say about Python is, um, the syntax is based on a lot on Indentation s.

  • Oh, that's that's kind of all I remember from the brief time I spent learning Python.

  • Ah, let's see.

  • Koval asked about my i d My code editor in it is visual studio code.

  • Let's see, Jon Hansen says, should the input type B text or number?

  • Ah, it's probably gonna It should be number.

  • So I don't remember what I have in there now.

  • I probably just copy and paste it from somewhere the last time.

  • Mint.

  • OK, look, there are some questions here that I think I actually just answered as I was going along, So I'm going to skip some of those, um, let's see someone, which I can't pronounce her name because it's in different characters.

  • Says what about flutter?

  • Flutter is really interesting.

  • And it would be a different way to create mobile APS.

  • I don't know that you can create a web apple flutter.

  • Um, so flutter seems really interesting.

  • I just I don't know enough about it to do stream on it yet, but I've I read a little about it, and it's it seems pretty cool.

  • Okay, um, we had a question about whether this will be uploaded to the channel later.

  • Yes.

  • All the live streams get automatically uploaded to the channel later on.

  • Adjust my monitor here.

  • It's easier for me to read.

  • Okay.

  • Uh, good question.

  • Wouldn't be trying to make in the web page eso I explained a little bit earlier, but just very briefly, we're gonna make a mass game where ah, the user will have to answer basic math problems in order to defeat the enemy.

  • Sebastian says I enjoy watching you on my five minute break at school.

  • Uh, I'm glad that you enjoy it.

  • Uh, have another question.

  • Do you use PHP S o p h p I I have used in the past.

  • I don't currently use it.

  • Um, for my job s o my PHP knowledge is really basic, though.

  • So I've done just some, like, file uploading.

  • Um, yeah, I made, like, a basic file upload er for PHP, and then all the other PHP have donuts like wordpress plug ins.

  • Eso definitely not a PHP expert, you know, by any means and all right.

  • Hey, I can't believe I made it through all the questions.

  • I think I did.

  • I made it through other questions in the five minutes.

  • So let's ah, let's start another timer.

  • I may have to finish up a little early, but for now, this should be good.

  • I'm gonna check the stream quality really quick.

  • All right.

  • It looks good.

  • Quality looks good.

  • Awesome.

  • If anybody has any issues with stream quality, let me know.

  • Um, I just see a question.

  • How long will this stream go?

  • The streams probably gonna end in about 1/2 an hour.

  • So another half hour, you could always catch the rest of it.

  • Um, in the recording, if you if you want to.

  • All right.

  • So let's go back to her app and let me kind of continue on with what I was explaining.

  • I gotta change the song I'm listening to.

  • It's kind of I can't focus with songs.

  • Uh, okay.

  • This is very, uh all right.

  • So we have two options.

  • We fired more than two.

  • But to my mind, there are two options I'm thinking of here.

  • We can make this container.

  • Um, bigger.

  • Right.

  • So the goal here is to space thes dibs out because this is three days, right?

  • Ah, we could make this container like larger vertically.

  • Then we could use flex box to space thes out evenly within that container.

  • Or we could just add a little bit of padding or I'm sorry, margins to each one of these, uh, the easier thing to do right now.

  • I think it's just add the margins.

  • So I wonder.

  • Actually know what?

  • I have a different idea.

  • Maybe for the you.

  • Why?

  • We would want to, like, let's say, push this down a bit.

  • So yeah, I think this will be better.

  • Let's set a standard height for this container.

  • What I'm thinking is like at some point when we start adding and taking away enemies.

  • It's gonna cause this input to jump up and down, right?

  • Because its position based on, um, the height of this container above it.

  • So it will be Ah, night.

  • It'll look nicer if this doesn't jump up and down when the enemies do it.

  • So let's take these containers and give them some sort of height.

  • I wonder if you could do it.

  • These ones.

  • Or maybe Maybe this container.

  • Yeah.

  • Let's do it on this container.

  • Let's try it right now and see if we can go.

  • Um, something.

  • We tried this already.

  • Let's try.

  • Almost tried again.

  • There we go.

  • I guess I didn't try it.

  • So basically, what I'm doing here is Flex one and we're bumping this down.

  • This looks weird now, but we'll get down to here and fix this up a little bit.

  • Um, So if we have flex one here now, when we go down, did this We can say, um, justify content space around.

  • We could do space between we could do space evenly, right?

  • Space evenly.

  • Looks the best to may.

  • So we're gonna go space, even land.

  • Okay, so we need to make two changes back here So on our battlefield, we're gonna go flex one and then on our containers were going to change.

  • Justify content from center to space evenly.

  • And I will give a shout out to John Hanson because he was mentioning this further up in the chat.

  • Um, and I skipped over because I knew I was just going to do it here, but, um, John, you were, like, 100% on the right track there with this.

  • So now we have our battlefield with our enemies based evenly are here is over here.

  • So this is looking more like like what I have in my mind and with what the original game looks like.

  • The original game was really basic.

  • It's on my get up.

  • Paige.

  • If you want to check it out, it's It's one of my very first repose.

  • But the original page, the original game was just built with Jake weary.

  • Um, so it was in my early days of coding s.

  • So now we have this.

  • Let's add in, we need an actual math problem.

  • So we're just gonna hard code one in just to see, how would I look in the u I?

  • So the math problem will be here or yeah, for now.

  • We'll put it here.

  • I was actually might not be if we put it in the middle of the battlefield, that might be cool too.

  • But let's keep it here for now.

  • And then this input definitely doesn't need to be this big.

  • If they're just gonna put in a number, that's probably gonna be, like, two or three digits.

  • We can adjust that and then put some space in here at the bottom.

  • So we're not right up against the bottom of the window.

  • Hey, all right, so let's put in our at sea view let's put any container.

  • Div eso Let's say, um, it's called math container.

  • I don't want to waste too much time thinking about names, so that'll do for now s So we're gonna put a wrap, our button, our input, and then our math problem, which we're about to put in Now we're gonna wrap that in that container, and they were gonna have this text.

  • Ah, so, like, in react native, I could never just type text outside of a container, so I couldn't just have text here, right?

  • Ah, that would throw in air.

  • It has to be inside this this text.

  • So let's put, um, so we're gonna just want to bless, too, for now.

  • Okay, that'll be Ah, that would be good enough, I guess.

  • Hi.

  • Border.

  • Great border with Okay, So I'm not giving any style to this.

  • Maybe I should Ah, let's say math text.

  • All right, So we'll do some basic styles here for math container.

  • Um, we'll definitely want this to be, huh?

  • I guess we just give it some some padding for now.

  • Ah, and really, we just want vertical padding rights.

  • We're gonna do padding vertical, and, um, let's say 16 as well, just like we did with our other container is going to give this some vertical padding.

  • And then here, we're going to give our math text poops, math text.

  • Um, let's just say font size and let's make the font size 20.

  • You see how that looks?

  • And that should be okay for now.

  • Just Ah, give us an idea.

  • Okay, so we have our little padding here, and we have our math problem.

  • Uh, we could if our math frogs are gonna be like this, we definitely have space to put our input up here.

  • That might not be a bad idea.

  • I'd like to see that.

  • Let me know what you think.

  • Right?

  • Um, to just take a look at it like this.

  • And then we'll see what it's gonna be like when we switch the input to be in line here.

  • And then we'll see which one you like.

  • Better eso The the way we're going to do this is we're gonna have a container just around here, and we'll set the flex direction to row.

  • And then that should give us what we want here.

  • And we'll keep the submit button below, and we'll see how that a kind of as our next step eso we need another view.

  • Um, let's say there's a bath container.

  • Let's say math, bro, we'll call a bathroom.

  • Um, since it's going to be in a row, Flex direction road.

  • All right, that's what Ah, little piece of advice that I have is never spend more than a couple seconds trying to name something because it's so easy to change the name later on.

  • And you may actually completely get rid of that view or whatever you're working on.

  • It might have different functionality later, it might.

  • There's so many reasons why that name could change.

  • It's it's a waste of time trying to figure out what to name it.

  • So the first thing that pops in your head just just use that.

  • Like I I spent too much time like wasting time on naming things and seen it happen with other people.

  • It's It's definitely not not worth it.

  • So we have this math row, and we're gonna put a flex direction of row on a math row.

  • And it's not Forget the comma and let's see what that does for us.

  • Hopefully what I thought it would.

  • Hey, there it is.

  • Okay, so that works.

  • It doesn't look great right now, but, um, yeah, you know, I think I'll keep it like this for no.

  • I want to make this smaller.

  • Definitely had some padding here, some some spacing, and then make sure that this text is, uh, lined up.

  • Uh, with at the very least, it should be its baseline.

  • Should be the bottom of this input, or it should be centered vertically.

  • Let me check my timer and check.

  • Okay.

  • I think we're good.

  • Okay.

  • I'm gonna check I am going to check the chat.

  • Now that we've shared you both ways, just see what you all think is Well, uh, okay.

  • I don't see anything about that in particular.

  • So I'm gonna go back to the year.

  • And I did see a few more questions in the chat, so I'll get to those in a few minutes.

  • Uh, let's Yeah, let's turn this in.

  • Put down.

  • Yes.

  • So it can definitely be trimmed down significantly.

  • Yeah.

  • So I believe we have some in line styles on this input we can bring these down to.

  • So let's switch this up and do it styles, um, input.

  • And you see, I'm trying to keep my styles in the order of that.

  • Things are in the page.

  • For now.

  • That is.

  • Helping me keep track of them may not be like the best way of organization may be better ways, but it's working right now.

  • Uh, oops.

  • I don't need that.

  • Okay.

  • Near here.

  • Uh, it usually makes sense to put your style's down below.

  • Uh, otherwise, when you start to get a lot of here, it just it's way too cluttered to have your styles in line.

  • A swell I mean, I won't say never put him in line, but, um, it's it's definitely cleaner to put your style stone down below.

  • All right, so on the input, let's give it a with what do we cut down the height to?

  • Ah, you know what I do?

  • I don't want to leave it at 40.

  • Um, just so it's a decent tap target for, like, on a touch screen, But we can change the with and wanted to be pretty small.

  • Um, this goat 80.

  • Let's see if it if 80 works for this and then for a text here for a math.

  • Rowe, um, we could put justify content center, and that should help us with their text there.

  • Okay, so I made a little bit better.

  • It looks like that's interesting.

  • It still didn't exactly help us with our alignment for attack.

  • So you have to look into that.

  • Actually, we could still go even smaller with this input.

  • So let me try that.

  • I'm gonna go with 60 see how that looks.

  • All right.

  • That's more reasonable.

  • Yeah.

  • 60 does seem a little more reasonable there today.

  • All right, let's work out some of this.

  • This padding right here in the inspector.

  • So, um, honor, I don't see what's going on here.

  • This comes out as a div with just, um if you could do a line height.

  • Whoa, that was crazy.

  • Um, I know it.

  • Now I know what it was.

  • Creative Mary.

  • So if we change the line night, we can make this go up and down, right?

  • So we could do it like that.

  • I mean, I guess that works.

  • This doesn't feel like the best solution, but it'll it'll work for now.

  • I could just try.

  • Let's just try increasing the font size for now.

  • Um, I'm not I'm not, like, entirely opposed to a larger font size.

  • Um, you know, this is a like a kid's game.

  • So, like the larger farm is not, um, like in terms of the genre of, like, kids, books and games and things.

  • Usually they go with the larger font, especially if they're just learning to recognize their their numbers and things.

  • It's easier if it's larger.

  • So, uh, let's go with this size 26 phone.

  • It looks like it's fits well with this 40 pixel height for the input, so that that'll be good for insights for us.

  • We'll go with that.

  • And then let's add a little, um, we're gonna say padding.

  • Let's go with our patting left.

  • Right.

  • Sorry.

  • Right.

  • Let's go with eight pixels area.

  • So that space out a little bit.

  • All right.

  • I think I think that works.

  • So we're gonna bump this up to 26 then as padding rights of eight pixels or eight unit lifts with numbers.

  • Uh, that works.

  • That's cool.

  • We need some space in between the submit button in this row, too.

  • We're gonna go on the container itself.

  • I don't want a huge amount of space, so I'm gonna try padding.

  • Um, bottom of eight.

  • We'll see how that looks.

  • All right.

  • Great.

  • All right.

  • Not bad.

  • I mean, I'm right.

  • This is not gonna win any awards for design here, but, like, uh, it's it's good enough.

  • That's not going to drive me crazy to look at.

  • Okay, um, let's see what else we can do.

  • I mean, I'm gonna have probably change the color of this button.

  • I kind of want to leave the button really large, too.

  • Especially when we consider the, um this running on a phone.

  • Um, if if Children are going to be playing this game like, uh, their dexterity, you know what?

  • Their fingers Probably not.

  • Great.

  • So you want to make sure tap targets are, like, probably larger than we would even normally make them.

  • Okay.

  • All right.

  • This is not bad.

  • No, but we got the basic You, uh uh, I'm okay with this for right now, but I think on the next dream, I'd like to move on to some of the logic of what's happening.

  • Maybe actually getting these to appear and disappear, Uh, depending on what you put into here.

  • So yeah, I'm okay for now, eh?

  • So I'm gonna go to the chat right now, and I know we I went a little over on the last Komodo recession.

  • I didn't notice when this this actually the timer was up.

  • So I'm gonna end this one a little early, so I have time for questions.

  • Ah, but definitely once you commit this so that, uh, you'll have access to the code that we've done today.

  • So this would get status and see?

  • OK, we modified Abdullah Js Great.

  • Just like we thought.

  • It's the only far we worked in.

  • Let's do it, get commit.

  • And I'm going to give it an A m flag.

  • Right?

  • Which means were adding and we're committing and we're gonna add a commit message to So we're going to say I like to kind of prefix all my commit messages s O that we kind of know what this is about.

  • So this is a new feature, right?

  • The addition of this you I elements, so Ah, fuck Yuri ad you?

  • Ah, yeah, for characters.

  • All right, so it's kind of basic.

  • We did.

  • We did more than that.

  • But essentially, like what?

  • Really what we really added.

  • The biggest part we added was we have these these characters now on the screen.

  • And so now we're gonna push this up to get a If you're wondering, like how we set all this up Ah, we did do some set up in the last dream and then on my channel.

  • Ah, I go in depth more into, like, how to use gate and set it up on your computer.

  • So the link to my YouTube channel is in the description if if you, you know, need a little bit of extra um extra help getting up to speed on what we're doing here.

  • Maybe check out some of those tutorials, and that should should help you.

  • Uh, okay, cool.

  • So all that coach should now be on get home.

  • Let me show you the rebo and you can go to it.

  • Ah, give it a refresh.

  • Right?

  • So years or commit and I'm gonna put I forgot to put this in description to the video.

  • So I'm gonna copy and paste it right now in the chat.

  • This is the link to the get hungry.

  • Bo.

  • Um, I'll try to remember to put it in the description, Uh, for next time.

  • Okay, um, somebody just Ah, a little bit more question and answer before we end this stream.

  • Be fun.

  • Okay.

  • So ah, Samuel says, uh, I'm the new B of a friend and INGE engineer.

  • What language do you recommend except for Java script and ph fee?

  • So you want a language recommendation?

  • That's not Java script or PhD.

  • And your front and engineer, um, honestly, like, if you're doing anything with front end like Java script is the language.

  • You need to know that.

  • Um, Now, if you want a pair that with something back in.

  • And that's not PHP.

  • It kind of depends on what you wanna work on.

  • Um, you could go with you, Could go with Java.

  • You could go with like dot net.

  • Um, it just kind of depends on, like, different factors.

  • Like what?

  • You already know what you're interested in if you have a certain job you really want, Like, what is that company use?

  • You know, maybe you want to go with that.

  • So it's it's hard to say, but, um, you know, if you want to focus on front and your jobs, Gibbs really is necessary.

  • Costas says hello.

  • Is it worth learning?

  • Django in 2019.

  • Thank you.

  • All right.

  • So I would say if something is worth learning, it's just it is definitely dependent on your situation.

  • Right?

  • Um I mean, it's kind of you to be like the same thing.

  • I just said, If you know the company, you really want to work for the technology really wanna work with or whatever is is Django based, then it is worth it for you to learn it.

  • Now, just if you're just getting into, uh, you know, software engineering or Web development, and you want to know what to learn.

  • I would not really even think of Django as something to learn it, To be honest, Like I would say, more focus on JavaScript and you could run full stack JavaScript.

  • Um, and then you see where that takes you where you end up being a job with your clients need and and then kind of decide, like Okay.

  • Well, all my clients were using Django our companies using Django, but, um, I I wouldn't give the advice to someone who's new to say, like, focus on Jango right now.

  • Does that make sense?

  • Hopefully I I answered your question.

  • Um Oh, by the way, Django is, um, strike me if I'm wrong, but I believe Django is like, um, uh, Python Based on my right.

  • I see.

  • Jon Hansen says the answer's four.

  • So did I defeat the enemy?

  • Yes, you.

  • That is the correct answer.

  • See, uh, in Imtiaz says how to create Custom rom's.

  • I have no idea how to create custom room.

  • So I'm sorry.

  • I don't really know about it.

  • Um, Habib says, is the CSS coming from react also, Um, yes.

  • So, like this uh, the style sheet object that we have here.

  • This is built in to react native.

  • So this actually does some cool optimization Tze with your style.

  • So if you're using react native I definitely recommend doing your styles like this It's not the only way, but because it's built in with, um I don't know how it does it all in the background, but basically it it will apply these styles in away that's gonna be most helpful to your performance.

  • All right, so Pierre asked, Why are you using react native for building a Web?

  • You?

  • Is that a real scenario?

  • Actually, yeah, that's a really good question, because this concept of using react native for the Web instead of using just regular react is a weird concept, right?

  • Ah, but the idea is, if you use react native to build a Web app, you can use that same code base for your android and IOS up.

  • And then, if you have a desktop, pappa's well, the same code base for that could be used because you could use something like electron, um to run your your react native web on the desktop.

  • So the the idea is like, you know, you have your team or just you and you don't have the resource is to hire people who are experts in IOS in separate experts, an android in separate experts and web.

  • So you want to be able to share the code, um, and be able to doom or with, you know, your developers that you already have eso It is a real scenario, so I'm actually using react.

  • Native web.

  • Currently at at my job, my normal job and the the idea behind it is we want to be cross platform, uh, with one code base.

  • Michael Cruces.

  • Views and views and views.

  • Yeah, Actually, it does.

  • Uh, yeah, you definitely end up getting a lot of use once we break these out into components, though it won't be all these years together.

  • You know, these will have their own names is components.

  • So it will.

  • It will look better, like in terms of what gets added to the dom.

  • It's going to be dibs and is and is.

  • But at least for the development of it, it will be a lot cleaner city.

  • All right, we had another question.

  • About what?

  • In my building.

  • Basically I'm building a game.

  • A math game for Children to help him learn howto, uh, learn about math.

  • Um, see, I lost my place.

  • Okay, So, uh, Michael then adds, um saying that the point to build it like it's a bit like this initially, but also cross platform.

  • Yeah, That's a good point, Michael.

  • I forgot about that, too.

  • It is the developer experience for developing a Web app is a lot better than trying to develop on a mobile device or even with an emulator.

  • So building it l

everybody welcome alive coating with Jesse.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it