React Native Web Styling (P7D12) - Live Coding with Jesse

Key Takeaways

Because we think that it's a ghost. Hey everybody, welcome to live coding with Jesse. I'm Jesse and today we're going to do some styling and some UI changes to make this app look a little nicer. Uh as you can see, there's no video right now. So I don't know why. Uh I I moved so I moved into my new house. Unplugged everything, moved all my computers over, plugged it back in and my uh uh webcam now does not work. Uh so I'm installing some stuff from the manufacturer that hopefully will help. It says it's going to finish in about a minute so the video may turn on, it may not but y'all don't watch this for my face anyway. Um So let's get started. As long as you can see the screen and hear me, I think that's that's good enough. Um I'm going to check real quick and see what everyone's saying in the chat. Um Hey everybody. See a lot of people are just saying hi. How's it going? Okay. Let's bring up the app first. So that everybody who hasn't seen it yet can at least see it. Um Also Sorry, the the the installation just finished so let's see. Oh, okay. No, I don't want to sign up for this. Okay. Wow. All right, so I don't think that did anything because nothing happened. Uh Hey, I've got something. That's weird. Huh. There we go. It works. All right. Let's move it over so it's the right spot. There we go. Okay. So, I I guess it was just a driver or something. Um you can see my background has changed. So, this is my new place. Um I'm thinking about getting a fish tank back there. So, I have a fish tank with some goldfish. I haven't moved it yet. Um so, I don't know. Let me know what you think if you want to see my goldfish behind me. Uh anyway, all right, let's get started. So, I do want to give a shout out to Chris who did a um uh awesome pull request. Ooh. So, let's do uh get pull. This going to pull down all those changes from the pull. So, you can see like the the code changed immediately there. Um so, this is a decently significant pull request especially considering the project still small. This is uh quite a few changes, so thank you, Chris. We're also going to do yarn. This is a good practice anytime you start a project. Or I'm sorry, anytime you're working on a project, first thing you should do um is do a get pull as soon as you you start working on in the morning, you know, do a get pull. Do um and then run yarn or npm install. That way you know you have the latest you know, changes and and the packages, right? Like I've forgotten this before. Um and I start working, realize I don't have the latest changes, and then there's like merge conflicts and stuff. Or I do remember to pull, but I don't remember to to run yarn and install the packages, and then I get all these errors. Uh and for a second I'm freaking out before I realize that, oh, I I just didn't install the the new packages. So, Let's start. So, let's start this up, that way we could see the app. Uh so, we'll be able to see it, and also let's go to the pull requests. So, the issues, now there's only two issues left. I'm sure we'll we'll be able to add some more, but we're going to close pull requests and check out this one, right? So, I'm not going to go through all of this just so that we have time for coding, but check this out. The link to the uh the repo is in the description. So, you can check out what Basically, this fixes two problems. One, we had said that um we don't want the user to get the same question in a row 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. Uh also, it found some bugs that I didn't realize were happening and it fixed those as well. So, that's awesome. You can check that out there. You can check out all the files that have have changed. Um added that little bit to the uh the prettier config, uh which is nice. I'll probably set up some like automatic linting so that anytime anyone tries to commit code, it'll auto lint it. And let me know, if you want to see how to do that, I can do it on a stream. Otherwise, maybe I just try to do it, you know, uh on my own and just have it set up. But, it is kind of a cool setup. I usually do it for all my projects. And it it avoids having uh like weird commits where you have uh it looks like you have a lot of changes, but they're not really changes. It's just like formatting things, like a semicolon or not using a semicolon or weird spaces. So, anyway. Um uh I had some questions about that uh auto lint. So, when I say like auto linting and auto formatting, I just mean like as soon as you would do like a 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. Uh so, it's it'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 how to do that. Maybe on the next stream, that's what that's what I'll do. So, yeah, it's a cool little setup. And let's see. I lost my train of thought. What were we doing? Oh, I wanted to show everybody the app. Okay, just so you know, the way this is going to go, we're going to do a little bit of coding and then I'm going to take a break and we're going to 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 them, I will get to them in in a bit, probably in about, I don't know, 20 minutes or so, maybe less. I'll go back to the chat. All right, but this is the game. All right, so if you're I'm sorry if there's a lot of background noise. My kids are all getting ready for school. We're about to leave, so I don't know how much of that the mic is picking up. Hi, Daddy. Hey, buddy. You want to say hi? Hi. I don't know if they can see you up there. Say hi. Hi. All right. Have a good day at school, bud. Yeah, so I'm just in my basement right now. Eventually, I'm going to build like a legit office and hopefully soundproof it, but just moved in last week. So, anyway, these are the styles. We do have different colors for each mode, right? But we just threw these in here. This is definitely not how I want it to look. I still am not exactly sure how I want it to look, but I I there is 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, uh the this is your best friend as a web developer. Uh dev 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, Raphael. What? I'm I'm live streaming, bud. My son One of my sons was back there just like moving all these boxes. 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 as well as on um a 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 I'll pick. Let's pick a small one just to uh to 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. Um but it fits. Wow, that's that's cool. It actually fits. 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 uh the hero character that's here and the enemy characters that here that here can definitely be smaller. Uh so the the perspective uh this is a a children's game, right? Uh so, their attention is going to be drawn to this. When in reality, like this there's no interactions they can take here. All right, so we're we're drawing the user to an area that they can't actually do anything with. Uh so, I think we can we can shrink this. Uh so, this is this stream is going to be a little bit of design and dev together, right? So, I'm I'm a software engineer. I've done design before a bit, but I'm not primarily a designer. So, usually I just jump in and start coding 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, um let's for now, let's see what this looks like when we shrink these up and make this bigger. All right, and I don't want to make sure anything that um a user would click is really big, right? Because this is going to be a kids game, their 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, right? Uh so, let's let's do that now. Like so, since we're in dev tools, we can try some things out here without actually even touching our 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 uh the numbers, we can definitely make them bigger. Let's see. So, we can see all the properties that are currently on. Like the CSS properties that are currently on this. We have the font size of 28 pixels. So, it actually is seems pretty big, but as we could see that it doesn't actually look that big on that phone. Um So, if we click that, it'll show us where in the code we have that 28 pixels. Now, unfortunately, since we're doing this with React Native web and it's coming through, it won't allow us to edit directly in line. If this was just a normal web app, we could. Um So, we're going to have to override it. And let's go with Let's go with 40 pixels. It's going to seem pretty crazy to do 40 pixels, but I think it'll be good. Uh Actually, this is not going 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 to just mess with our code directly. Normally, it is not. So, we do have all the styles down here. And I forgot we're using Comic Sans. We'll prob- We may change that. It's I think since it's a kids game, it might work. Okay, so our character has a width of 80 and 80. Let's Let's cut that down, right? Let's Let's give that 40. And now our math container vertical line our math row So, our math row has a padding on the bottom of eight. Let's bump that up to 16. Okay, and then our text size 28, we'll bump that up to 40. And we do have our inputs for the them. I believe this is our input for Let's give it a 60. Let's make it just a square. We'll give it a height and width of 60. Um, I didn't finish my thought, sorry. That's our input to put the answer to the the question. So, 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. And is this Okay, so we we didn't actually make the text bigger in here. So, what we need to do that. And let me check my time and make sure I I forgot to start my timer, so So, what I started at 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 going to go to the live chat and read through the chat. All right, so for now, let's Let's make the button a bit bigger. And we'll make the text inside the input match with this text. Oh, don't let me forget. I need to check out Cypress. So, uh our testing suite is now changed from using Puppeteer to using Cypress. So, I want to give you all preview of that and I forgot to last time and I want to try to do it for sure this time. So, uh that was an addition from from Harshit who I haven't seen in the chat today, so I don't think he's here, but he's been a big contributor to um to my streams for a long time, for like over a year. Uh let's see. Where is our button? I don't think we have any styles for a button. So, we're going to have to go up here and see what we can do here. Uh okay, so we actually have the the default styles for a button. So, let's look up in the doc the React Native documentation what the styles are for button. So, if you're doing a React Native project, uh definitely recommend just just leave the React Native docs open on your tab uh on on one of your tabs because uh I I reference it so much, there's just no point in me even closing it. Uh so, here's the button. Um you'd see I'm pretty sure we just copy this ex- exactly. Uh but, what I want to see is uh all the the props uh on press, title, accessibility color, disabled test ID, preferred focus. Okay, so here's our props, but what I want to see is what kind of styles we could actually give this. Um which I don't know. Let's see Let's just add some styles and see if we can give it one. Uh we may have to switch it up. So, you can use Touchable Opacity uh or Touchable Native Feedback to give your button some custom styles. So, we may have to switch up to that. That's what I normally end up using anyway. Uh but, for now, let's just see if we can do this. So, I'm just going to do an inline style just as a test. So, we're going to add style. So, in uh React Native, if you want to do an inline style, you can. You want to uh use an object, right? So, we're doing style, we're putting our curly brackets, which means hey, we're about to do some JavaScript. And then inside of there, we have another set of curly brackets, which is just normal JavaScript, right? It just says like this is an object. And then now, we're going to do CSS as if we were writing So, like I'm we're converting our normal CSS into JavaScript object syntax, right? So, we're going to camel case everything. Uh it's key-value pairs, right? So, in this case, let's just say height h e i If I can spell h e i g h t height. And we're going to give it something crazy, so we just know uh we know that it works, right? So, type 200. That's So, that should be obvious if it works. And it didn't. Right? So, it looks like we're going to have to change that. And we can't actually add height to a button. Uh If there is some way to add height to a button, let me know in the chat. You know, but according to the documentation, it didn't look like we could. I was hoping there'd be like some props. But, it seems like the only thing you can really change style-wise is the color. Okay. So, I'm just going to click on Touchable Opacity. So, it's there. Uh and we can we can check that out. And if anybody wants to read ahead, I'm going to put this in the chat, the link to Touchable Opacity. If you've never used it before, you can check out the docs. Um basically, you're just making something clickable in React Native. And you can give it whatever styles you want. All right. And I'm going to take a 5-minute break here. So, I'm going to set my my Pomodoro timer to 5 minutes. I'm going to go to the chat and I'm going to answer some questions. Okay, so I'm scrolling. Just seeing a lot of people saying hi at first. Uh Charming Muhammad says, "This is very good thing. Thank you." Oh, you're welcome. I appreciate that. Uh Akim says, "Is this a React thing?" Yes, yes, so it's it's React Native web. So, it's all React Native syntax, but we're actually running it as a web app. If you want to know why we're doing it like that, watch like the first two streams and I I explain more of the benefits of doing that. Um Eric says, "How can I find your JavaScript beginner tutorials?" Uh so, I haven't done a lot of tutorials myself. It's mostly live streams and it's Some streams are more beginner-friendly and some streams aren't. It just depends on what we're working on that day, but um there are some awesome beginner JavaScript tutorials on this channel on the free code camp channel. If you do want to see my tutorials, check out my channel. The link's in the description. Uh I don't do as much with my personal YouTube channel. I'd love to do more. Just hard to find the time, but I do have some tutorials on there for beginners. Let's see. I can Jalal says, "Smile more, bro. You look better, right?" All right, I'll try to smile more. Um Vedant says, "Bro, I love this channel." Oh, thanks. Thanks. Yeah, the free code camp channel is awesome. Like, not I'm not just talking about my stream. Like um there are so many really, really good contributors uh and just the variety and quality of content on this channel is I I mean, it's really amazing and it's impressive. Like, no one's getting paid to do this. It's all volunteer. Uh so, it's it's really cool and it's helped a lot of people to get their skills up and get jobs, like, including me. Uh Charming says, "Pulling in pulling and installing yarn before anything in the morning is a is good advice. Been a victim of such and I trust me, you don't want to go through the work before you pull." Yeah, for sure. Um Okay. Sure. Um Bell Bellies Zari Angelos, I'm sorry. I I probably messed your name up. Uh let me know how I'm supposed to pronounce it, but says, uh "I can animate that." Uh I'm not sure what you're what you're for Are you offering to animate something? And so, let me know what you're mean cuz I'm not exactly sure what what you're saying. Uh Yeshu asks if I have any plans to work on Vue.js projects. Not right now. Uh I've I'm like curious about Vue, but I don't have any immediate plans to work on them. Uh maybe maybe I'll do it at some point. Uh Creative Girl says, "Hi, which one do I have to learn? Flexbox, CSS Grid, or maybe Bootstrap? I've no idea when to use them." Okay, that's a good question. Uh there are some answers there. Uh Coding Technique says, "I think Flexbox is easier." Um Uh Is Ismael says, "I will go with Bootstrap, but just know a little Flexbox." Okay, so they're not exactly comparable, right? So, Bootstrap is an entire uh CSS library that's you bring in. It's CSS and JavaScript uh and there's a lot of, like, built-in classes uh that you you use to style uh an entire app or a website. Flexbox is a part of CSS and so is grid. So it's a part of just normal CSS. You don't have to import anything extra and it's used for positioning. Right? So back in the day people used tables for positioning or we used floats for for positioning, but flex or flexbox gives you a nicer way to position like for instance, you can vertically center things on a page very easily with flexbox. Right? That was always really hard to do before and not that it was impossible, but it was just more difficult. Grid is another way to align things on a page. So it's not exactly comparable. So like if you learned all of bootstrap, you could style an entire site. If you learned flexbox, you could just position things, but you couldn't really style things. So I say definitely if if you want to do react native, then you need to know flexbox because flexbox is the default positioning system for react native. So definitely recommend using flexbox. That's what what we use. And like bootstrap's not always going to be available to you. So you know, try to learn the the regular CSS. It'll be easier to work on a variety of sites. If you know CSS, bootstrap should be easy to to pick up because it's just basically giving you chunks of you know, pre-written CSS attached to classes that you can add to your site. Uh so, if you know really know CSS, you'd be able to understand all of Bootstrap just by looking at the CSS files. Uh and kind of know what's what's happening and be able to to change it up and uh like customize it to what you need. Okay? Does that make sense? Let me know if it doesn't. All right, didn't get through everything, but let me go back to All right, here's what I'm going to do. I'm going to say I'm going to mark down here where I left off. Uh 7:46 Okay, I need to like adjust the tilt of my screen or something. It's really hard to see. I need new screens, period. I I just I'm using some old screens that I've just uh gotten from people like when they're getting rid of their screens. Okay, so let's How much time do we have? Okay. So, have about a half hour left. So, here's what I'd like to accomplish in that half an hour. I want to get the styling. So, I want to get this button a little bit bigger. Uh commit these new styles. I'm not like obviously we're not finished with the styling, but this is just a little bit of some updates. Um I want to demo Cypress for testing, and then I want to finish the rest of the questions. Okay, so that's the that's the plan. So, let's switch this up to use TouchableOpacity first. So, we can see in with TouchableOpacity, obviously instead of using button button, we're replacing it with this. But then also, we can put things inside of it. And in fact, we we need to put things inside of it. Uh so, let me show you what I mean. So, right now our button, we can say like the title is submit. And look, there's there's nothing. There's no children to this button. When we switch it to touchable opacity, if we did this, nothing would appear on the page, right? So, we need to give it children for instance to to say like, "Hey, here's what you should display inside of this button." All right, so let's switch that up now. And go to the top of the file and where we have button, let's change it to touchable opacity. Should have changed up here, too. Yep. Okay, we're going to change it to touchable opacity. Now, I know I'm going to need something in here and I will need text. And let's say Oh wait, is this our Oh, this was our restart button. I changed the wrong thing. I forgot we had I I totally forgot we had a restart button. All right. Let's do that again. Let's keep button in there cuz I don't want to mess with the restart button right now just cuz I want to finish on time, right? Uh so, let's touchable opacity. Now, let's find the right button this time. Where we at? Okay. Whoa, actually, did we Yeah, yeah, this is what we did. For a second, I was like, "Have we been working on the wrong button the whole time?" But I don't think so. All right, so touchable opacity. Now, we're going to say text submit and then we're going to close out touchable opacity. Okay, now let me just save it. So, we'll just see what shows up on the page now before we do anything else. So, you can see it's it's just a button, right? So, it should still work. So, like right? There's no um Hm, and you know what I just thought of? We should uh not allow a submit if there's nothing in here. Uh I could see that being really frustrating for a child if they accidentally hit submit and haven't even put anything in there. Uh and then another enemy comes like that especially if a child is really struggling with their math and they're like almost beat beat it and they know what the answer is and they just accidentally hit submit. Like, that could be devastating for a little kid. Right? Like, so let's make that happen so that we check to make sure that basic if there is nothing in this box, we don't allow a submit. All right. We're not going to do that right now, but um let's just keep that in mind and add that in at some point. Uh if somebody wants to make an issue for that, feel free to make an issue. I'll try to remember to make an issue for it later. Uh okay. So, we need to style this this submit button, right? Uh so, you can see like our color you know, that's not that's not going to work, right? Uh we do still want to keep this test ID. I believe the title is not going to matter here. We can double-check that there is no title attribute. Let's see if it shows us. Yeah, so our our props here style active opacity Yeah, okay. Hm. Actually, this is kind of weird. Why do we have It's weird that they don't list on press under this. I I guess maybe they're just like assuming that you would have that. But, anyway, we can remove Where are we at? Oops, here's our code. We can definitely remove the color. Uh let's give this a style, though. Style equals and let's say styles. dot Um we'll just call this button for now. I know we're going to have we have more than one button, but we'll just say styles. dot button. And I'm going to group this. I'm going to put this under input since it appears under the input. All right. So, we need to give this like a height, a width, a background color, right? So, let's say our height is going to be at 40 pixels. So, we always want to at least go 40 for touch You know, let's go um let's at least bump it up to 50, right? I want to make this bigger than you would normally make it for an adult. Uh like I said, I know kids' fingers are smaller, but they may be a bit more clumsy. And Okay, button. Height Width Let's just go with width like 100 for now. We'll see how it looks. And then background color, we can give it that same color that we had. I'm not like a huge fan of that color, but I don't really have any other color in mind, so we might as well just use it. Okay. Let's see what that gives us now. Hey, look. We've got We've got a button. Okay. You can see like Look, it's still just totally bare bones. The The submit is not even centered, so let's work on the submit as well. Oops. Yeah. Okay. Uh so we can actually set this to display I don't know if I should I don't think I need to put display flex on here, but let's see. So let's say justify content center and align items Oops. center. So this is flexbox. This is what I'm talking about when I say flexbox makes um vertically aligning things easy. So this is going to vertically and horizontally center submit, hopefully. Let's see. Yep, here we go. So now it was up here, now it is both vertically and horizontally centered. So easy. Uh especially if you remember everything that you had to go through to do make this happen before flexbox. So much easier. All right, now we want to make our our text a little bit more readable. So, we're definitely going to give it a color of let's just say white for now. Oops. All right. So, FFF is going to give us white. Uh that's the the hex code and let's make the font size Uh so, the button itself is what's 50. So, let's make our font size 40. Uh definitely don't want it to be bigger and let's see what it looks like. Oops, we didn't apply it to the text. So, on the text here, let's say style equals styles . button text. Whoa. Okay. We need to make that wider and okay. Yeah, definitely need to make it wider. And probably taller. Yeah. All right. So, the button now is 100. Uh let's double it to 200 and let's make its height 60. Okay, that's more reasonable. It's still not like a spectacular looking button, but it does have a little effect, right? It has this little kind of flash thing, right? Um and it still works. All right. I tell you truth, like I I'm not thrilled with the way this button turned out, but but it allows us to customize it. So, we can further customize this as we we need to, right? Uh let's see. Yeah, that I'm kind of thinking that the submit button is like dominating the page now. I mean, I do want to keep track of my time. Okay, but uh I think I'm at a point now where I want to commit this uh and and then check out the testing suite so that I have enough time to get to the um like the the messages the chat messages. Okay, so that's So, if if you're totally beginner and you're not really familiar with version control, we're using get. Okay, so we have get status. And that tells us what's changed, right? We've only really worked on one file, right? So, uh that's to be expected and now we're going to do a get commit. And I'm going to give it an AM flag, okay? And then I'm going to put the commit message. So, I'm going to say add a feature. Um This is like a terrible message, uh but we we just adjusted styles, right? So, let's commit that and now we can do a get push. Right? And that's going to push that up to GitHub, right? Okay. So, that's like very, very basic of using Git. You commit and then you push. Um now we basically have a save point for our code that we could always go back to that point later on. So, if we totally mess things up in the next stream, it's okay cuz we could always go back to this point. All right. Now, let's check out our package.json for a second and see that we have this e2e script. All right. And that's going to open up Cypress and run some tests. All right. So, let's let's check this out. So, we're going to run yarn e2e. And like I said, I haven't really used Cypress yet. So, Harsh it set this up. Um I think it's really cool. I did run it once just to see what what it did. Uh but it's definitely something that I want to learn more about uh cuz it's it's pretty cool. So, while this is doing its thing, which why is this taking There we go. So, you can see this is definitely different than what we had in the test before. Before our tests would just run and, you know, display some things here in the console, but this is bringing up this whole UI, right? So, it says, "Here's our tests. Here's our file, right? Oops. This is the following page. Cool. All right. So, I click that and now it's running the I didn't mean to actually run them, but so I clicked on that file and and can see it's run all the tests in that file. So, we only have one file with the test. I'm assuming if we had more, it would show all the tests and we could run them all at once if we wanted. Okay, but as you saw some flashes up on the screen of basically it it was running this and and going through the motions of clicking everything. Uh and it says we can see a title, we can see hero, and we can we we get the if we do a correct addition answer, it reduces the enemies by one, right? So, we don't have a lot of tests in there, uh but it's kind of cool to have a UI as well. Um I know some of the people I work with um on my team are way more familiar with UI stuff as opposed to like doing things through the command line. Uh so, it definitely could be helpful um to be able to have that that visual uh of this. So, then we can see I've no recorded runs. Yeah, so there's a lot of stuff in here that I haven't even messed with. Um well, okay. So, there's all your settings in here. So, I mean this is really cool. So, definitely check this out if you need to do React testing. Wow, really cool. All right. Uh so, I'm not going to go more into that yet because I myself don't know that much about it. So, I'd rather not mislead you, but I promised Harsh it that I would demo it. So, definitely uh you know, check that out. It looks cool. It does give us some output in the command line as well. Um All right. Let's Let's go back to the chat. So, I've left about 15 minutes before I have to end the show for chat. Uh so, I hope I can get through everything uh before I have to end it. And Where did I do that? Oh, okay. So, I ended about there in the chat about 6:46 my time. There we go. Okay. And I'm going to I didn't really display what's changed in our package.json, so I'm just going to put that up here. Uh really the devDependencies changed. We have Cypress and our ESLint plugin for Cypress. Uh and all the stuff with like Mocha and Chai and Puppeteer are gone. All right, so let's get to these questions. Uh Abdoulaye says, "I am fresh to programming and I don't know where to start." Uh check out freecodecamp.org and just start out with with some of the lessons there. It's totally free. Uh just create a free account. And like freecodecamp's never going to try to sell you anything. We're not going to spam you with ads, nothing like that. So just check it out, start doing some of the the um the lessons there and see how you like it. Um Web Noob says in response to Creative Girl's question about Flexbox and Bootstrap and Grid, says, "Everything is important to learn." It Yeah, I mean ultimately, yeah, it's great to know everything, but I would say like don't don't get overwhelmed thinking that you have to learn everything. You definitely don't. You know, if you just pick something and learn it, you're fine, right? So um I would just try not to be anxious about what to learn what to learn first and in what order. Uh you know, just just learning something and being able to work with it is great. Like a ton of websites use Bootstrap. If you just know Bootstrap, there's a ton of work out there. Um the same way like if you just know Flexbox and you don't know Bootstrap or grid, you can still do a lot of awesome things. Like so basically my point is like as long as you're learning something that's you're good, you know, you're you're already going in the right direction, you know, and you'll learn more eventually. It just you know, it takes time. Um Jimmy says, "Guys, please can you help me out? How can I animate a button on long press?" Um I'm not exactly sure. That would be something I'd have to look up myself. So I can't give you an answer right now. Uh but maybe somebody else in the in the chat can. Web noob says, uh "Hey Jesse, are you teaching your kids in programming? Can't wait to try with my son." Yeah, so actually I I do So we have like some little kid programming books uh that we we read to the kids sometimes. And um we have I'm trying to think what it's called. Uh Tynker. So we have a Tynker subscription. Uh so I think it's like tynker.com or something and they have coding exercises for kids. And so our my kids do that. Uh so we've tried out some other ones too. Um but my son especially, my oldest, my 9-year-old seems to really like the Tynker stuff and he works on it all the time. Uh so yeah, so we're we're trying to teach him and not like pushing them into the into it, but you know, just kind of providing them with books and uh you know, like lessons and stuff. So it's there if they want them want it, you know, and they're just excited about using a computer. Uh so if I tell them like all the only way you can use computers if you're doing the coding stuff, then usually that's enough and and they do it. Uh let's see. uh Rish Rishba Bob Um I'm really sorry. I'm not pronouncing your name right. Uh but says, "Are you using the Windows Subsystem for Linux?" Uh no. So, I am using Bash on Windows, but I'm not I haven't done anything with the the subsystem yet. Zar Gaming says, "Hello everyone." Hey, how's it going? Let's see. Oh, cool. So, Michael Creel uh answered my question about the button, and unfortunately, I didn't look over to see that. But, thanks, Michael. Basically, says from Stack Overflow, "This component has limited options, so you can't resize it to a fixed height." All right. So, uh so, that is true. So, basically, we we did have to switch the button over to a uh TouchableOpacity in order to basically change anything except the color and text. Um Fer Fergentius says, uh "Are you doing the mobile or web?" Yeah, so right now we're doing web, but we're going to switch it over to mobile. So, let me give you an update on that, actually. So, I'd like to use Expo to help us uh test and build the mobile versions, but unfortunately, so All right, let me give some background to explain this. So, like, Expo just takes has its own fork of React Native, right? Uh and it allows you to create React Native apps more easily. It comes with a lot of built-in things to uh to like developer tools, and like different components that work with um like hardware on a phone on a device. So, I'd love to use Expo cuz it comes with all that, but since Expo has its own fork of React Native, it's behind a little bit. So, it's not the latest version. So, the latest version of React Native allows you to use React Hooks, which we are using. Right? But, the Expo version of React Native doesn't yet support hooks. So, if we try to use Expo right now, we would have to switch to not use hooks, and that would be a lot of refactoring, and I don't want to refactor it back to that. I'd rather use hooks. So, the plan is this. I'm going to keep developing the web version. I'm going to keep the mobile styles in mind like by using dev tools and mimicking the phone, right? Uh but, we're not actually going to test it on a device. We're going to wait for the next update to Expo, which should allow us to use hooks. Then, we'll pull in Expo into our project, and we'll be able to run the web version and the mobile version, the mobile in a simulator, side by side so that we make a change, we can immediately see how it impacts both the web and mobile versions. So, hopefully that makes sense. Uh we could just use straight-up React Native and run it like that, but like I I really do like everything the additional stuff that Expo uses. So, I'd rather just wait on that. If it seems like it's going to take a really long time, then maybe we'll rethink that strategy, but that's where I'm at right now. Uh so, the mobile's coming. We're just kind of waiting on the next Expo update. If anybody had knows like if you've been keeping track of the updates to Expo and you have some insight into when that's going to happen, let me know. Uh last week or something I did read up on it. Um and at least at that point I don't think there was an exact time for the next release. Uh Saeed says, "Love you, bro." Oh, thanks. I love you, too. Um Let's see. Vedant says, "This channel is great." Manu says, "Well, thanks. Thanks. I appreciate that." Manu says, "Please suggest All right, let me Hold on. Let me read this question. Says, "I'm I'm intermediate in JavaScript, but I can't build up logics. What should I do?" Um I check out some of the more advanced JavaScript uh problems in freeCodeCamp. Uh so, freecodecamp.org, I'd check those out. I know I keep recommending freeCodeCamp, but it's it's quality stuff and it's totally free. Right? If you feel like you need more, then maybe, you know, go look at some of the paid things out there. Uh but freeCodeCamp's always a great place to start. There's always links to additional resources on the freeCodeCamp lessons, so you can go and read more if if you want to. But I would say, yeah, check those out. It's going to, you know, give you some algorithm problems. Uh and practice is really I mean, that's how you build up your skills. So, just keep at it. Um it'll it'll be tough. It's It's tough for me um to do the algorithm stuff and kind of the more advanced um like logic-based stuff, right? Because as a primarily like web mobile developer, you know, you're not doing a lot of algorithm-based stuff. So, you don't normally get practice. You kind of have to go out of your way to keep up and practice that stuff. Um JM says, "Have you Have you ever told your YouTube audience about how you got into coding, your challenges, obstacles, how you got your first job, etc.?" Um it would be of interest to us newbies. So, I have a little So, check out my YouTube channel. The link in the is in the description. I have done some videos on like my background and how I got into that. So, go ahead and check that out. Um if you check that out and like there's something more specific you want me to talk about, let me know and maybe I can make a video about that as well. But, yeah, that's a good question and so I do have kind of a basic overview of how I got into coding. Um so, that should kind of highlight a lot of that. Oh, goodness. Um somebody said in response to the question about building up skills and logic and stuff. Somebody gave the response of just give up if you can't build logic, then coding's not really your thing. Um So, number one I would say, please don't do comments like that. You know, we're trying to help each other out. Uh so, I don't really want comments like that. Let's keep it positive. Secondly, like I'm going to say it again, like practice is the difference between people that can do things and people that can't, right? There's not like you know, some people do have more natural ability one way or another or maybe their background gives them more ability, but it's still if you practice, you can get there. So, uh Uh if something is really hard, it doesn't mean you should give up or it doesn't mean you can't do it, right? It just means you need more practice, right? That's That's it. So, yeah, don't don't give up. Uh if this is what you want to do, then keep at it, right? Um and uh like just don't get discouraged. I You know, it's easy to say don't get discouraged, but just realize that like everyone goes through times where they feel like they just can't figure things out. Like I was working on a bug on my work project and trying to get something to work for like over a week. Just trying and trying and everything I tried just didn't work and I just felt like I was never going to figure this out. Uh and then then I did and it works. It was And it was awesome and my team was excited and my boss took me to his boss and said, "Here, demo this thing." Right? And it was awesome. All right. And and but I really thought, you know, just just like 2 days before I was like in despair of ever finding a solution, right? So, it's just like, you know, keep going and um you find a solution, right? I think people that have been doing this for a long time realize that you will always find a solution eventually. Uh so, you know, don't give up. So. Um but just in general, everybody, try to keep things positive here. You know, there's enough depressing stuff out there in the world. I don't want this stream to add to that. Okay. Um Ikram says, "Anyone know any materials about music recommendation systems which could be helpful to my college project?" Uh, I'm really sorry. Um, I don't know anything about that. So, I won't be able to help you. Hopefully somebody in the chat can. Um, All right. So, Jay says, "I'm confused between Android and React. What can I start for job purpose?" Um, Okay. So, React is used normally for web apps, right? React Native can be used for Android apps. Uh, so you could start out by just learning React and then transition into React Native to build things for Android as well. So, it kind of depends on what you want to do. If you know you just want to be an Android developer, then maybe you you just learn Android development and just don't worry about React at all. Um, but React is going to allow you to develop things for more devices, um, more platforms. Um, so that may be a better path for a job, but like it it just kind of depends really on what you want to do. Uh, Aman asks, "Can you use React Navigation with React Native Web?" Um, So, yeah. So, the navigation is a little bit tricky. Uh, so you can use any navigation that will work on the web with React Native web, but when you want to also do it on mobile, you'd have to have an alternate navigation system that would work with mobile. So, um I'm actually I'm I'm working with navigation systems on another project right now that's React Native web, and uh so right now for the web navigation, we're using uh React Router. Um but for mobile, it's really like we have no mobile navigation system set up. We're just kind of using state to navigate. So, like it's if that is a little bit tricky, um I don't know of a a navigation system that would work for both as of right now. I'm hopeful there is one cuz I'd like to use it. Uh but to be honest, I need to do more research on it as well. All right. Again, listen, I do want to say like so I can see the the conversation from earlier that kind of got took a wrong turn there is going on. So, everybody just kind of like chill. So, um Vadon, like uh you like you're cool. Just like kind of like please don't tell people to give up. Um and then everybody else that's getting on Vadon, like let's just be be cool about it, too, right? Like um and let's kind of just let it go for now. All right? Okay. Uh Michael Krill says, uh regarding coding with your kids, have you tried Scratch? Yes, we have done some stuff with Scratch. That's really cool. Uh so if if you haven't done anything with Scratch, even if you're an adult coder, like check it out. It's actually pretty fun. Um it's kind of like a drag-and-drop coding interface. It's It's cool. Michael says, "If you have an Android device, you can plug it put it in a debug mode, connect it to your computer, and then dev tools can let you interact live with your phone." Um yeah, that's Yeah, we have done that. I've done that before. Um so yeah, we may end up doing that. But I do I want to do something in a way that uh everybody can see it on the stream. So I don't want to run stuff on my device. Let's see. Oh, cool. So Aman is researching navigation system that works on both. Okay, cool. I'll uh If you find anything, let me know. I I definitely want to want to know more about that. Um Oh, okay. Michael Currier is saying that it shows up live in dev tools. So maybe that might be something we could do where I could test it on my Android. Uh it would show up live in dev tools, so you all could see it as well. Okay. So maybe we'll we'll have to to do that. Um Rubber Boy asks, "Best language to learn for beginners?" Um It It It depends on what you want, really. Um what you really want to learn, but assuming you have no preference for what you want to try to do, I'm going to say JavaScript because you can run JavaScript in a browser. Um and you don't need anything special on your uh on your computer, right? So uh Uh try that out like if you if you know you want to do something different like if you're not interested in web development at all, then like don't mess around with JavaScript, right? Um but if you think you might want to do something that has to do with web development, then go with JavaScript cuz you're going to have to learn it at some point anyway if you want to do web dev. All right. Uh Okay, so I went over a little bit uh but I did get all the questions in. So, anyway, uh I guess we'll be we'll wrap things up now. I feel like I'm forgetting something. But I I think we did everything. All right, so thank you all so much for watching. I'm not going to be able to stream on Friday because I'm going to be at a conference. So, I'll be at the Star Trek conference in Columbus, Ohio here in the in the US. Uh so I believe my talk from that conference is going to be online. So, whenever it gets posted online, I'll I'll mention it in the chat. I'll probably post it on my social media and stuff. So, if you liked what you saw here, um subscribe and check out my channel and my social media and stuff. Links are in the description. Uh if you have suggestions for what I could do in the future, you know, let me know. If you want to contribute to this project, feel free. Uh you can add issues, you can submit pull requests. Like the project's totally open source. Um if you have any other questions that I didn't get to today, uh you didn't get a chance to ask, you know, put it in the comments, um send it to me on social media. You know, I'm happy to happy to help. So, uh I guess I'll see y'all next week. Until then, have a great week and uh thanks again for watching.