React Project 2 Day 3 - Live Coding with Jesse

Key Takeaways

hey everybody it's Jesse and uh I hope everyone had a good weekend today I am streaming at home from my basement so uh the quality might not be as good as it has been uh so I'm hoping to get full 480 uh 480p quality and that's about as good as I can get uh I've tried to get better quality before but it ends up just buffering a lot for everyone so uh this is it for now and uh not much I can do about it I already have the best internet I can buy at this location uh so unless I move I'm stuck with it uh the internet at my office was down today uh then they got it working but it was on and off so I decided not to risk it and I would just work from home uh see I see in the live chat Nathaniel says you can get Google fivr uh pay them a million dollars for like a half a second I was like wait I can get Google Fiber uh and then I saw the next comment so let me know know if you all can hear me I have a little bit of a different setup uh usually I have a um like an external mic and I don't uh that's a at the office uh so I'm just using the mic that's in my MacBook and my laptop is actually on my lap so I don't even know where the mic is in this thing I just hope I'm not covering it up accidentally but uh if you have trouble hearing me let me know uh first I want to go over what I've done uh since I did the last stream so basically what I've done this morning and I also go over a pull request that I got and then we'll get started Okay cool so sounds like everyone can hear me uh so good that was all I was worried about uh there's since I'm in the basement my air conditioner is down here so I hope you can't hear it in the background it doesn't sound too bad right now but let me know all right so enough with the sound let me uh let me show you let me show you what's been done so I added show the package Json first uh make this a bit bigger all right so we already had this first three but I've added react router and I'll show you how I set up the router uh in a minute but then I also added uh a uh pre-commit hook so I pulled this over from our last project and I think I think it was uh V who had the pull request in the last project that we did that set up prettier and um standard JS and it just enforced the style rules so I wanted to set this up early on so that if you all uh want to submit a pull request you know all the code will all be in the same same format all the time so that's set up now and um let's see what else all right just a little bit uh to configure uh standard JS these are all the packages so I added them as Dev dependencies so Babel es lint husky lint staged prettier and standard uh so if you're not familiar with that basically all it does is every time I go to commit so I do a get commit uh it checks all of my JavaScript and it formats it automatically so I have it set to use single quotes and no semicolons so um and then all the the normal standard JS rules so you can check out standard JS and see what those rules are if you're interested um so standard JS is the set of rules prettier is the thing that actually applies those rules to the code to format uh the code and tell you the truth I'm not exactly sure what husky is like I said V is the one that submitted this pool request the last time so I know it works but I'm not 100% sure how it works but I'm not worried about that because I mean really like look at these node modules I don't know how most of these things work but they work and that's how pretty much everybody's projects are nowadays okay so that's it for the package Json um let me show you how I set up the router so I imported browser router route and Link from react router Dom and uh for so for react router when you bring it in you have to bring in Dom because there's also react router you know for other things like for Native and different things so uh make sure to remember the Dom I'm not even sure if there is a react router package um I never really checked so you pull that in I wrap everything in this browser router and then within it I can make links like this so here's my my side drawer menu now and instead of normal like a tags I have these link tags and instead of an href I say two and then I just put the route and then I've made some routes down here just to to kind of make sure it's working and give me an idea and everyone in idea of these are all the views that we need to make so each one of these routes is is a different view so the home view right now every route right now just has an H1 uh but when you click on this route it'll render whatever you have inside the render function for the route So eventually it's going to render one of these views which so I made Pages for each View and it might be hard to see there on the side um but for each view I've made a separate component and I put it in a views folder so each one of these routes will render that view and then everything for each view will go into that component so it'll be separated out pretty nicely we reuse for every view the same title bar and the same drawer uh side drawer with the links here so this is outside of all the routes and that's pretty cool so that means the entire page pretty much never has to render refresh because you know this is this app bar is going to stay the same uh throughout all of it okay so that's it for what I've done let me show you what um what Sebastian uh did with his pool request okay I see in the live chat it says uh Maxim May says you can autof format the code on Save uh with es lent and vs code yeah I have I actually have something that's autof formatting things for me like as I type uh but the thing with this is it um it enforces it across for everyone so anyone who um who clones this repo it will enforce the same style rules for them uh and they don't have to regardless of how they have their editor set up uh so yeah also I'm not using visual studio code for this project so I'm using Adam uh I have another project where I'm using visual studio code but I'm sure there's a plugin for adom as well um but anyway in this case I don't have to worry about plugins or anything I could load this in any editor um and regardless of how I loaded it uh it's still going to format properly like I could open it up in Nano on a server and change something and as long as I commit it it's still going to format properly I would probably never edit any files on a server in Nano but I might have unless I was setting up the server initially um all right so let me pull over on my other screen I'm trying to find the uh the pull request let's see I don't know why this is not right at the top oh my there we go Resource Center okay uh let's go P request and I'll bring this over now you all can see you can check this out if you want to check it out in more depth I'm just going to go over it really briefly just want to give credit uh to Sebastian for doing this and oh this is weird that's kind of why is it doing that anyway I wanted it to uh um get bigger but it just got taller I wanted it to take up the full screen uh so anyway I want to give credit to Sebastian for um making this pull request so you can see uh you know what he says about it here uh so proper theme if you remember last time we were talking about the theme and um how we we had kind of gone through and figured out how to customize the theme but I never hooked up I made like a separate file for the theme but then I ended up just testing it out right in the uh index.js file uh with an object there instead of linking up the separate file which would have been the better way to do it so Sebastian went ahead and linked everything up so you can kind of see a lot of you know what's going on here so he Imports Fus theme that's the file you know that we had made uh so he Imports that and then then for this theme here he says get get mui theme and then he brings in that Fus theme here okay so really helpful uh be able to kind of you know do all this so that we can start up now and you know just get right to it uh not have to worry about setting this this up and let's see test [Music] and all right so this is the file this is the uh theme file you can see here and then in index uh he's removed you know all the stuff that we had in here and I think it was uh Patrick had the idea to make leave the index file as clean as possible and uh to to wrap inside the app component to wrap everything instead of wrapping it here like we had done so it's clean and I I took that same idea in with in terms of the router and I wrapped browser router around the app component in the app file uh not not in um in the index Okay so thanks again Sebastian I really appreciate that and now let me show you there's really not much that happened in terms of like visually what you can see uh but I'll show you anyway you can see I still have not filled out my Trello board I don't want to bring over the site and I'm just running it on Local Host so I can just pull it up right here okay so here it is but now so now we have our home View and you can see here uh have these great default link Styles but I can click on it and you see it changed and the URL changed and now we're at the poster view so obviously you notice we need to do something to make this app drawer automatically close because that's not really the expected Behavior uh when you when you click normally you want it to close on click so I'm I'm actually somewhat surprised that that's not the default um so we're going to I'm going to check out the documentation for material UI and see how to do that uh and then we can get into I guess probably start out with the home View and start building that out so let me check I'm just going to scroll through the live chat briefly just to uh say hi see if there's any any new people in here looks like there's some some people I haven't seen before so hi and welcome okay all right so uh Patrick says didn't you say you were working with your laptop on on your lap how do you have multiple screens in the configuration so uh yeah I just have um I have my my recliner scooted up as close as possible to a table that's set up like pretty high so that the recliner can actually go underneath it uh so it's scooted up pretty close and I have pretty decently long cables so I have um you know my laptop and then two monitors connected to it right now so uh um it's it's an odd setup I you when I was freelancing I used to work like this all the time um so it's a little weird for me to get used to it from being at like a normal desk and a normal desk chair uh but I'm kind of getting used to it it's not too bad uh so anyway that's how I have my setup if you want to see my setup I um I put it on Instagram earlier uh just to kind of show the the weirdness of of my setup so it's the last thing I posted if anyone anyone's interested uh usually when I work from home I I don't work in the basement but uh my kids are home and they had friends over and so they're in they're upstairs and I'm downstairs otherwise uh it would be way too noisy to do anything all right so first I do want to I want to fix we proba let's fix two things let's make it close on click and then let's style these links a bit because we we obviously don't want to keep the links like this so I'm actually even wondering if there's some sort of Link component in material UI that I just wasn't using uh so we'll see so I'm going to check out I have the material UI docs open I think already I think I had them open on my other screen yep I did all right oh actually we we did discuss going back to material UI um the Alpha version and I haven't done that yet uh and I think some of you had said that you can um basically pull components from the new version and use them with the old version so that's probably what I'll end up doing instead of you know entirely going over to the new version that should help keep things I think a bit more stable hopefully I'm I'm I'm hoping that we can get the best of both worlds and have the stability of you know the older version but then be able to grab some of the components that we want from the new version so hopefully it works out like that if it doesn't then we might just switch to the Alpha version We we'll see when we get there which will be soon uh because we'll need to use I do want to use those columns uh that are in the newer version all right so on my other screen I'm just looking at the documentation for material UI and I'm assuming that there's just some option that needs to be set to true or false to uh close it on on click h all right if the dra oh okay I think I know what's going on let me see oh no that's it I did have that set I thought for a second I had this set incorrectly but I don't actually I do want to see I had wondered if uh it might be better to have the sidebar open all the time but I'm not sure that's not really what people are used to right now from the old uh the older version of of this that we're making uh so have to think about it either way it still needs to close on click because on a smaller screen it obviously wouldn't stay open so you still need to figure that out okay so stay open on request change okay so what am I doing here on this on request change I'm guessing that maybe this is open State requested to be changed yeah maybe this is the problem let me check I want to check the live chat quickly just see if any of you have um given some sort of answer it's possible that you some of you may have already used material UI and have gone through the same thing and know the answer oh Rohan uh Rohan is a regular here in the live chat and uh he's not feeling well today so sorry about that I hope you feel better and uh get some sleep cuz I know what it's probably midnight in India right now so yeah get some sleep and get better okay we have to say hello from Vienna Austria hey thanks for joining from Austria actually the university that I work at has a remote campus in Austria in um in gaming so I'm not exactly sure how that how far gaming is from Vienna I've never been to the other campus but uh that would be cool I can't I can't think of any reason why they would need to send me to the campus since I can work from anywhere but if I can think of a reason I'm going to try to uh to get a trip to Austria for work all right mod said hi uh from India and you're a good teacher well thanks I appreciate that okay all right so all right Patrick says um haven't used a library but you can define a click Handler function that set state to to close uh and add that to the links um yeah that's what I was kind of thinking is just have that click I I was just wondering there has to be some built-in way of doing this because this this is not it's not like some weird thing we're trying to do this is normal behavior so um in I I kind of would like to check it out let's see the do example undocked let me see the undocked example uh so if you want to follow along it's uh materialen ui.com and I'm checking out the documentation on the drawer I'm not putting it on my other screen because since the uh the video quality is is lower today uh there's probably not there's not really much of a chance that it's going to be legible for most people so I'm just going to leave the code up on the screen uh and then do like kind of the research part on the other screen if it's something really important that I think you all would like to see I will pull it over all right so right now I'm looking looking at their example code just to see on tap touch this handle okay I think I found it no did I know okay I found it Patrick you were actually uh on the right track completely so basically your idea of adding um a click Handler to the links was exactly how they handle that uh so it's it's nothing that I put on the drawer but on these menu items that's where I need to put The Click Handler so I'm going to go through and just select all of these and add this ontouch tap this handle close all right so now let's go check this out is it not H all right well that's how it was let me double check that I did that correctly all right it is supposed to be on the menu item on touch tab was um I wonder oh okay I see I forgot some other stuff as well I need to actually add in handle clothes because what's the point in calling a function if you didn't Define the function in the first place all right so this is what I was missing so obviously if you didn't catch my mistake I was calling this handle close but there was no handle close function so here it is now so now it should work all right awesome well that one wasn't so awesome because it didn't oh okay all right I don't know if you noticed this so the behavior that I'm getting now is that the it only is a link if I actually click the link it it's only doing the routing if I click over here it still shuts it but it doesn't route so we need to fix that and probably what we need to do is wrap this entire menu item in a link so let's try to wrap that I'm just going to try the first one just to see if it works oops keep going the wrong way uhuh oh I see didn't didn't get it all the first time okay all right let's try this now so we'll go we'll go to posters first and then I'll come back and click on the side there we go all right that works now so we need to change all these which it's kind of a pain but um not really let's see if I can change it all at once all right that makes it a little bit easier let's try this yeah this is going to be the tough part cuz they're all different lengths oh well helped a little bit whoa I don't know does anybody else uh ever play around with a multiple cursor thing and sometimes you just have weird things happen l i n uh occasionally that happens to me where I I'm not exactly sure if it'll work so I just try it anyway and it ends up just pasting stuff like every it just totally like it like just happened right it I it didn't work because these were different lengths so I couldn't copy the way I wanted to and then when I tried to copy one of them it copied all the lengths so not really a big deal all in all multiple cursors is way more helpful uh than then it is uh you know kind of a waste of time at times when it doesn't work all right so let me do these few things I know this is a bit boring but it'll be over in about 10 seconds or so now I think I have a few uh Vim users that that watch as well so I'm sure there's probably some super like magic Vim stuff that could have done that a lot faster because although I don't use them when I see people use it I'm always amazed at what can be done but now these should work so we'll give it a test just to make sure we did it correctly posters Share story awesome okay so that works great um so I'll leave that up so you can see what I was doing in case it was too fast and what were we trying to trying to have things styled a bit better yeah so basically I was surprised when I saw the default link style here because I had assumed obviously that links would go here so that the default would have been to override you know this link style this normal link style but it wasn't so I'm thinking maybe I needed to add something into the markup that was already built in to material UI uh I'm not sure but we'll we'll try it out if worse comes to worse we could always just add our own Styles it's not really a big deal so I'm not really seeing anything that stands out in the documentation I don't want to spend a ton of time digging into it uh the examples for the drawers aren't showing anything so they just have the regular menu items which is you know where we got this these examples from okay what potentially what could be happening as well and I didn't double check this but it's possible um on the last project I did when I was using the style jsx tag I noticed that at times depending on you know how I brought things in the Styles within that tag never got applied so potentially because this is a link tag and not an a tag uh at some point along the line uh the Styles try to get applied and and can't find the a tags that's basically what was happening before uh so I don't know how the styles are you know for these you know like for instance for the menu item um so maybe actually I wonder if they have looking to see if they had uh the menu item component in here but I don't see it let's see yeah they have some menus but it's uh like drop- down menus let's see they do use menu item but again I'm not seeing anything anything in here that's um that has a link on it oh well at the very least uh let's just get rid of these underlines so we don't have to look at them anymore so where's actually let me see there's some uh some stuff here in the live chat let me check it out uh Sabo says hi from Hungry how's it going thanks for watching hey Zanna how's it going glad you can join us uh Zanna ask what's with the blur I'm assuming you're talking about the video quality yeah it's because I'm at home my internet's not as good as at work so tomorrow I'll be back at work so it'll be uh good quality again tomorrow oh okay all right so uh Patrick has some uh advice about our issue right now with the the menu items and styling so says we could do uh menu item uh primary text and then within primary text put put what we want the text to be so let me let me try that out then all right and then in that case actually if this works I like this a lot better because then I don't even need that closing tag and that'll just look cleaner in general all right so we do that for Logos let's see how how it looks H still giving us that styling let me do a refresh just to be sure yeah it's still giving us that styling H oh actually I just so I finally found where the menu item properties are in the documentation so they're on the same page as the regular menus so on the on that sidebar in material UI underneath the menu selection if you scroll the bottom there there so let me check that out all right I mean I could just put a style tag in there it's not really let's see yeah I don't think it has anything yeah a few people are asking about the uh stream quality and live chat yeah sorry sorry my internet's bad today okay Sebastian says can use nav link instead of link so you can add an active class when you were on that routing Sebastian does so is navlink can I use that with uh react router then all right so let's I want to see actually want to see how this gets rendered okay I'm going to pull this over on the other screen here so you all can see oh actually I almost for got this I don't want to actually I don't I don't really want to try it on my network right now I'm afraid it'll make it even worse but uh so some of you may remember at one point I tried to use uh enro I don't really know how you say it but it's NG r o k uh so that you all could check out the site while I'm uh while I'm developing and we used it and it worked for like 5 seconds and then uh everybody tried to access the site and I hit the uh the limits um for the free plan well at some point um another um streamer I forget exactly how it came up but I told another streamer about what happened with enro on uh Twitter and I guess the guy who maintains en gr or you know made it saw it on Twitter responded asked what the problem was so I've been emailing back and forth with him and now I have basically it'll work I'll have I'll have enough um you know requ I don't know what level I'm at now but basically it should work for the stream it should be able to handle all the requests and um so I didn't have time to set that up this morning so I'll try to get everything set up um tomorrow because I would I I don't even have uh enro uh installed on this computer it's I have it on my work computer but anyway I'll get it working tomorrow and that should be cool because then everybody can can view I think Fabian was the one that had that idea which it was a really good idea and um anyway so that'll be uh tomorrow all right okay so Sebastian saying if I use navlink and so let me let me see again if I use navlink then I can add an active class when you're on that routing okay cool that won't be hard to switch n link okay I'm just going to check this just to make sure it still works yep still works awesome and then name so I can do so Sebastian's uh copying some stuff over into the um into the live chat for me to try out actually uh which one did I put that on was it logos yeah okay so I should have the class active on there now let's see yep class active Okay so anyway this is at one point I was trying to show you all how this is getting rendered uh and I I think I got sidetracked so we have see to do okay so this is the div that all the links are in so it all shows up that's OD okay for some reason home has active and logos have active I'm not really sure why that happened but anyway what I wanted to see was these styles to see that like yes this is the default and we don't want that okay let's um all right so here's here's what I haven't done yet in react and uh maybe uh some of you have done this uh can give me some advice here because I know this is possible so what I'd like to do is just have some standard CSS uh for links so I'm not always going to use the link tag so I don't want it to be on a specific component but just any time that a link is used so normally we'd put this in this app CSS which should probably be okay in this case because we could have links anywhere but I know that you can break up CSS and have it apply just to different components so I suppose I don't have to know it right now but it would be cool to know the best way to do that okay uh Dead zombie uh says F first time here uh hi Jesse I assum says I I love your stream but it uh anyway thanks for thanks for watching and uh again sorry about the quality I probably won't do as long of a stream uh just so that people who are watching now and watch the recording later don't have to suffer through too long of the stream I like am seriously thinking about moving just so I can get better internet because this is terrible if I ever went back to freelance I might move or like rent an office somewhere or something um because this is bad okay so let's just put some styling for an a tag here just to make sure I mean it looks like there's there's nothing that would be overriding anything so we should be fine to put the AAG styling here uh okay me like yeah yeah this is all basic okay Patrick says remove dead CSS W while I'm there good idea all right so what am I not using pretty much none of this right yeah oops okay cool have text decoration and color was the color off I can't even remember yeah we want to uh for now I'll just go black for now probably change it at some point okay cool we might have to do all all right awesome do want to see okay cool all right so at least we got rid of the annoying underlines and all these work and you can even click on the side and it still works so this is now operating like you would normally expect uh this side navigation drawer to operate cool all right I think this would be a good time to commit these changes so let me commit that I have I'm going to pull over my my terminal because I imagine there are some people watching that aren't familiar with the terminal so it's good I kind of like to just show when I do this though let me try to make it as big as possible there we go okay so um if you aren't familiar with terminal yours might not look like this uh there's some custom things going on here with the colors uh but basically the commands are all the same so I'm going to use get status just to see what we've changed we've changed app uh CSS and app.js so now we're going to do a get commit and I'm going to just do am and that means we're going to add the files uh while we're committing them and we're going to add a message as well right here uh in the command so the message is going to be um probably just pretty much style drawer links that's pretty much what we did I mean I know we uh we fixed the click thing too um DW there we dang it I can't type today all right drawer links that was terrible took me like four tries to spell drawer all right cool so you noticed we had it was taking a little bit of time that was all that stuff that we added with prettier um you know see husky was was running there so it was checking our files and changing so if we go back to our files they're most likely a bit different uh than how we left them so I don't remember exactly how we left them but if we would have been really lazy with our formatting it wouldn't have mattered because as soon as we commit everything gets formatted correctly uh according to whatever we said as our style rules which we're just using pretty much standard JS uh I I not even sure we altered it at all okay did I push that that uh and let me so I'm going to do a get push and this is going to make sure the code goes to our repository on GitHub and it's important to remember to do a get push because if somebody else is working on the project they won't know about your changes unless you push them or if you go to work on it from a different computer you won't have be able to get those changes unless you've pushed them up which I frequently work from two different computers so I pretty much I normally just push every time I commit that's not it's not 100% necessary but that way I I usually don't forget and we're pushing uh the master Branch right to into the master Branch so that's why we have Master otherwise whatever our Branch name was that we wanted to push to we would put it here instead of Master and now our changes are up on on GitHub and if you don't believe me you can check the repo the Link's in the description all right so let's check here again and let's see whatever the next thing is we're going to do um I guess we can work on the home view since this is functional and doesn't look terrible uh and you remember our home view is just going to have uh six six cards uh excuse me I was yawning uh six material design cards uh and basically on a on a large screen it'll be three and three and then it'll scale down uh it's like 2 two two and then all in a row on a very small screen like on a phone um and that's it that's pretty much all we had on the home screen before that's probably how we're going to keep it so we need to have some column classes and this is where I wanted to try to pull in the component from uh the newest version of material UI which we're not using right now so let me oops I had uh I hadn't I hadn't checked the um live chat in a while now I see uh Sebastian was was telling me to add in exact did I not have exact anymore let's see exact to the home routing so you're saying I need to add so uh Sebastian said I need to add exact to uh the home routing so I'm ass assuming this is what you're talking about exact so why um I'm not super familiar with react router I actually just learned about it a few weeks ago from the react course I was taking I'm still taking it uh so I was using it on my first project for that course so that's why I decided to use it for this project the two projects are actually pretty similar in terms of the setup they're both using Create react app and react router I set them both up with prettier and standard Js okay so um I guess that was the right spot so Sebastian why would what what does exact do on when I add it there uh to the um to the nav link I'm assuming now that that will solve the problem problem we had of home getting the active class as well I guess not let me refresh double check oh actually it should have it there because we're on the home view let me take me change that okay cool so that's what it fixed then right okay so um basically uh I'm I'm saying basically what Sebastian's saying in the live chat so you all know what's going on if you're watching this later on uh if if you don't put exact here then it'll try to match and put this uh this active class um on whatever matches so since we had a slash in the URL technically that matches this so by adding exact we're saying well it has to be just slash and nothing else so it it would have matched anything any of these links so that's why we did that and actually I've done that down here on the routes I just I didn't realize that that you could also do it on the links and actually so I'll probably need then to put that active class thing on everything yeah okay oh uh uh Timmy says hey have you shared the Trello todos yet actually no I haven't shared that or put the link anywhere just because I haven't put in any to-dos so I've been slacking on that uh I had thought about doing it this morning but instead I just started working on it uh so I'm going to I'm going to need to put them on there soon otherwise uh I'll start forgetting things and being a lot less organized so usually at the beginning of a project I I frequently just start working on it without doing all its todos and then once I get into it a little bit it's a lot easier for me to see all the steps you know and think about all the steps but right off the bat it's um I don't know why but I find it hard to break down everything uh it's just hard to think through all the steps when you're not seeing anything at all on the screen uh in terms of your project how it looks or the code uh but probably this week I'll need to lay out some steps here okay let's see should we add I'm sorry yawning again I didn't uh I didn't have any caffeine today at all uh which is which is rare I've been used to having uh either espresso in the morning uh or gfuel in the afternoon or sometimes both depending on how much sleep I got so um uh I should have had caffeine before the stream oh let me check the time here oh okay let me um I want to go to the live chat I totally forgot to do my um my normal Pomodoro uh stuff so I never really went back to the chat to check for questions and it's been an hour over an hour and I try to check every 25 minutes so I'm going to go back to the chat I uh I'm thinking that I may I may wrap up the uh the video because basically we're at a point where we've accomplished like a chunk of work and that chunk was you know basically get the navigation drawer to a point where we want the only other thing I could think of doing right now is maybe adding that active style but I'm not 100% sure how I even want that to look right now so I think maybe this will be the end of the coding portion and then um I'll do all the questions and everything I'd like to wrap things up by maybe 3:30 so I'm it doesn't look like there's a lot of questions so I think that's definitely doable but I have to take my son to his karate class uh in about an hour or so uh so I'd like to be able to eat dinner before I do that and um I haven't he hasn't been to his class in like a month and some of that was us being on vacation and doing things on during his time but at least once it was due to me getting home from work a little bit late so I don't want to make him miss the class again uh all right so if you were just here for the code portion of it thank you so much for watching you can safely uh quit watching now if you don't want to be around for the uh Q&A if you have some questions or you'd like to stick around to help answer questions or you know hear the answers then uh feel free to stick around so if you have a question right now that you'd like for me to answer or anybody else in the chat to answer uh put it in the live chat uh or if you can't stick around you can still put your question in the comments to this video or you can um message me on Twitter or any other social media Med stuff that that I'm on and I'll get back to you as soon as I can and let me let me see uh what's in the live chat I think I covered all my normal uh stuff that I say at the end of the stream so I'm going to scroll all the way back to the top make sure I didn't miss anything I'm actually really surprised at how many viewers we still have cuz I know the quality is bad I'm really sorry about that uh so I'm I'm I'm impressed that you all were able to stick with it oh Nathaniel asked way at the beginning about uh streaming on weekends so yeah I've never streamed on a weekend I'm not entirely opposed to streaming on the weekends because I do work on occasionally I do work on things for my main job on the weekend if I have to uh hopefully I won't have to do that again for for a long time cuz I've I've done quite a bit of it recently uh but I work on on other projects on the weekend so I have my class my Udacity react course that I'm doing projects for which it would be cool to stream that although I wonder if I'm allowed to stream it since it's a paid course if they want like their project on there or not I guess it wouldn't be a big deal because the paid stuff is really paying for somebody to grade the project and give me feedback so I don't think it would be a big deal but I'd have to double check uh also I have some other just fun side projects so maybe I will stream on the weekend uh my oldest son really wants me to make a video game and he's already drawn everything that he wants me to do and like crayon on big pieces of paper he's drawn out the maps for like levels and uh all the bad guys and the good guys and all the weapons so maybe I'll do that I think it'd be cool to uh try to make a game in react I think it would help me build up my react skills and be fun and uh then maybe my son would get interested more interested in what I do and that would be cool too he's only eight years old he just turned eight over the weekend so I don't really expect him to be that into coding okay okay as I'm scrolling through I am I'm seeing like some more new people uh that are joining so uh welcome I appreciate you watching and joining in in the chat I didn't notice this before Nathaniel said earlier I wish Trello let you resize The Columns it triggers my OCD I'm working on my own list app to get around that taking a bit of time to code though oh that's really cool um if you get your app to the point where you'd like to share it uh I think that would be cool to to see it so send me uh send me a link to to the code or to a demo or something uh if you get a chance okay so Droid uh Dro pcgeek says I'm a web dev uh but I mostly work with JavaScript and a little bit of node.js because I program Discord Bots for fun that's really cool cool thanks uh thanks for sharing thanks for joining in I'd like to get into to learn how to program Bots preferably in JavaScript uh since that's what I'm most familiar with uh Isaiah asks how are you integrating material design with react uh and then um Maxime answers with material UI yeah that's it so material UI Vel says nothing so much great about material UI [Music] um yeah I I have no um particular I have nothing really to say about Mysterio UI yet because I don't feel that I've used it long enough to have uh an a really informed opinion about it so after this project I'm sure I I'll know what I think about it uh Sabo asks do you include the CSS into JS file or call it with a separate reference let me bring up where I have that so the um the CSS currently is actually I I have two CS so I have an index CSS file that gets included in the index and that's just this all right some basic stuff here and then we have an app CSS file and that gets included up here uh in the app file so that's where we put the the link um really I I don't really know why there needs really to be two different files to be honest with with you this is just how it came like automatically from create react app uh because I'm not it's not like there's a separate component other than apps like everything's flowing through app into index so it probably could everything could probably be in this index CSS if we really wanted it to apply everywhere maybe there is some like performance reason why you would want to split them up and not have a lot in here I don't really know but basically that's the way we're we're importing them uh at you know at the top of our uh react components and we could split it up as much as we want so each component could have its own separate CSS file uh which may end up happening some components probably won't need their own CSS uh if they're not really doing a lot uh UI wise so uh we'll see but we may may end up having having it uh like that Nathaniel says if I stay up till 3:00 am then wake up at 8 am I generally feel sick that day and can't code properly yeah so I've done that before uh actually my uh my kids wake up at night frequently and the baby wakes up really early in the morning so if I stay up late the odds of me having to wake up at like 5 5 or 6 in the morning with the baby are pretty high it seems like it always happens like that if I go to sleep early the baby sleeps in too uh and then I get a lot of sleep which is great but uh if I stay up late for some reason I think the baby senses that and then wakes up at 5 o'clock in the morning and wants me so my solution to that is espresso and g-fuel those are the days when I have both uh and then I can't fall asleep that night even though I'm exhausted so does anybody else have trouble falling asleep even though you're tired at night that's been happening to me a lot lately I know I'm tired I know I should sleep but I just can't sleep I just um I don't know last night was okay I was so exhausted I was able to fall asleep but it had been after days of not getting enough sleep all right so I'm just scrolling through the live chat a bit more I'm about halfway through now uh Nathaniel asks what packages do you use on adom um I have a lot of packages I'll bring up my um my settings right now and just let you see the packages I'm not going to go through all of them I did that once on a video I can't remember what video it was though uh that's one of the video ideas that I have like you know to do some pre-recorded short videos on my own channel uh I have a list of ideas a lot of them have come from you all but one of them on the list is go through all my packages and how I set up um my my editor how I set up Adam and then maybe even how I set up Visual Studio code as well I don't have nearly as a much set up for visual studio code but I do have some so anyway this is I'll make this a bit bigger oh I can't I tried to uh command plus and make it bigger and it did not work so I'll just scroll through this as I'm talking uh and that way you can see a little bit of what I'm using some of these I I don't ever really use I know I've downloaded things before that I thought sounded cool and then didn't use them that much uh ysep says using dual screen is good for eye protection but they shouldn't be in the same Dimension at least one should be closer than the other that's interesting i' never heard that um that's cool I have to keep that in mind now that I think about it uh I guess I do have them at different dimensions most of the time just because the way my desk is set up so I wasn't doing that on purpose because I had no idea there was any advantage to doing that but I'll have to remember that now I used to have a four monitor setup and every monitor was at a different height and everyone was at a dist different distance from me and it wasn't on purpose it was just I didn't have proper mounts for the monitors they were all different sizes because I would just like grab monitors when I could get them like for free if somebody was getting a new one they just let me have their old one and then I just had them standing on whatever I could find around the house to put them on so it was an oddl look setup but it worked uh mobin said disable caching and chrome Dev tools just to be sure I usually have caching disabled uh every time Dev tools is open uh just by default oh fine if if you're a web developer which you probably I'm assuming most people watching this are I recommend doing that because I mean if you're spending most of your time on the internet developing you're going to have Dev tools open and you're probably not going to want the cash to work because you want to change something and see what happens immediately so I just leave it leave the cash off when Dev tools is open all the time uh because I I've never had a case where I wanted to cash a site that I was working on shirt actually see Nathaniel says just get a digital ocean VPS and save it to it in real time so this is when we're talking about using enrs uh it says pay them like $40 a month for highend VPS and you'll never have a problem again yeah I think I'll just go with enro since uh it's been generously given for free so not not really uh excited to pay $40 and month if I don't have to oh Nathaniel says I can get 32 CPUs for 640 a month that's more than I pay for my house payment oh mobin says you can compress the stream uh with pi Piper oh I've never heard about that I'll have to look that up okay Patrick says that he's gotten SAS working in the his uh latest react project that's awesome uh I actually I'd really like to know how how you got it working CU I would love to use SAS as well for my project so um if you get a chance you know send me a message or something or let me know comment depending on how difficult it was you probably just comment on the video and um uh that would that would be really awesome [Music] okay [Music] uh see oh Barto says that he was yawning right before I did hope he didn't send it to you then again with the delay yeah there is a delay on the stream so maybe we yawned at the exact same time didn't even realize it uh uh Daniel said how did he do that super copy and paste so I'm yeah I'm guessing that you meant like my um my multiple cursors so let me demonstrate that because that is a really cool thing to do so if you're using adom or pretty much every code editor has this I don't know if the hot keys are always the same to do it but basically I can highlight so I'm going to highlight nav link here and then I'm going to press on my my Mac using atom I'm going to press command and then D and I'm going to hold in command and every time I press D while still holding in command it highlights that same word that that same string that you have highlighted in the next spot that it appears in and then you can edit it so right now I'm just moving the error keys back and forth and you'll edit everything and if I were to paste whatever I last copied it would paste in every POS position if I were to highlight it and um cut it it would cut that out so it's really really handy it's it's kind of like if you don't have enough things that you really need to use find and replace like it would be a pain to try to do a find and replace then these multiple curses make a lot of sense once you'd have a lot of items then finding replace is probably the way to go and it's it's more power powerful but especially like if all the items you need pretty much fit like within the screen so you can see what's going on uh then that's that's when it's most useful so anyway I'm really glad you asked that question actually because if there was anyone out there anyone else out there that didn't know about it uh really helpful I actually I heard about it first I saw it first on uh will Stern's uh YouTube channel it's um learn code academy and it was one of his videos I think he was actually using Sublime Text when he did it uh but I remember seeing him do that and thinking like what what is this awesome thing and um yeah ever since then I I use it a lot one it's one of my favorite things uh Sebastian asks uh quick quick update of what you've done so far I saw you merge my my uh pool request yeah so I I did I merged your pool request that was awesome thank you uh thank you for that uh basically the only other things that I've done is I added in react router I added all these you these links and uh the routes down here that you see and I didn't do all this during the the the stream I did it beforehand and then I um I added prettier uh to Auto format so uh with you know standard Js so just like we had set up on the last project that's pretty much it uh Hamza asks react native when is it coming is it coming yeah react native is coming I can't say when though for sure uh so I'm doing a course right now and the last part of the course it is about react native so uh within a few months I will have built something with with react native and um at that point I would really like to try to build something for work for my main job with react native this project I'm working on right now might not be a bad candidate for that so I may maybe I'll come back to this project I just don't really think I'll be able to learn enough about react native to to do this project with it but this might be a good candidate to come back to uh and and try it because it's pretty simple it' probably be easy to to you know convert it I I just I haven't used react native yet so I just don't really know how much more difficult it would be sorry for the noise I think my kids are throwing uh things down the laundry shoot so the laundry shoot comes out right behind me uh sad asks about being a complete web developer uh as a beginner um yeah I would you start out with HTML and CSS uh than JavaScript and you know free code cams course is really good uh you could try um uh free code academy no that's not what it is it's just code academy learn code academy is a video series all right but I would say start out with um uh with free code camp and that's I mean that's a really good place to start out de zombie asked as a beginner front end Dev what should I learn first I already have a great knowledge of HTML and CSS I'm learning JS at the moment so any opinions um I don't know I mean I would say if you're already learning JavaScript it kind of depends on exactly what kind of stuff you want to work on but um all right that's my I'm sure you all can hear that my three-year-old is just like making a lot of noise right now so all right so I'm not sure why hey hey guys okay I'm on YouTube right now so I need you all to be a little bit more quiet okay okay all right thank you uh hey that doesn't sound quiet to me so um anyway sorry about that uh so anyway as a beginner like if you're already good with HTML CSS you're into JS um I I kind of think learning react is is a good way I mean I know I'm I'm using rect already so maybe I'm a little bit biased towards it but for me I've I've learned so much more about just vanilla JavaScript by learning react than than I ever had before also I will say since I started doing the live streams I've learned more than I ever had before from you know everything that you all share with me during this the chat uh and uh from the pool requests and stuff that I get so that that helps as well uh but that's that's I mean if you're looking for you know somewhere to some goal you know because there's a lot of stuff you could learn I would I would go that way uh Hamza says and Redux have you done a video with Redux I haven't done a video with Redux yet I don't really know a lot about Redux so maybe it's coming I think Redux I think I will also learn Redux in the course that I'm taking I'm not 100% sure but I think that was on like the course outline so uh once I cover that if I feel I need to work that into a project then I will and we can cover that as well um SJ asks about vue.js I have not tried vuejs yet I've just kind of heard a little bit about it uh haven't used it yet I might use it at some point uh but I don't really have a plan to use it uh right now uh saw ask do you uh use PHP and HTML in your project in this project yeah I mean I use HTML I mean I pretty much use HTML in every project uh in this particular project I'm not using PHP in the last project that that we did and that I streamed I did use PHP I made a a custom WordPress plugin for that project so um so occasionally I have used it on some of my projects but I won't be on this particular project I might use it again on a future project though uh Enix core says and I'm late again good day everyone well glad you could join us for for the end here you can always catch the recording uh Blake asks or Blake says I've been using Adam text editor and it's been really laggy I haven't messed with at with it at all so there's nothing extra any ideas to speed it up h i you know what I don't really know I guess if um if you haven't really added anything to it and it's still like that I don't know of ways to make it faster there may be some ways out there um Sebastian recommends uh Visual Studio code and I would probably give you the same thing I Visual Studio code seems to be way faster than Atom from my experience but I wasn't comparing fresh installs of each one so I I didn't know exactly because my atom has so many plugins and things so I'm not 100% sure you know just how much faster they are but I have noticed a definit speed difference and visual studio code is very similar to atom it's free uh it's developed by Microsoft um so I've been I've been pretty impressed with it so far you can actually set Visual Studio code to use the same key Bindings that atom does so if you're used to those you can switch over and just go in the settings and uh vs code set it to your atom key bindings and then you won't even have to learn any new um any new shortcuts uh you know on your keyboard so that was pretty convenient Dana says all right so in in regard to um I think I got to the point in the chat where I was talking about not sleeping uh Zanna says um working in the garden uh really helps it improved my sleep a lot yeah I'll have you know what that makes a lot of sense because um I used to have a better routine of like doing workouts and since I was was doing so much work you know so much coding recently I just that that kind of got pushed to the side so there's just you know obviously there's not enough time in the day so something had to be cut out for me to be able to work that much and that's what got cut out so probably like you know I sit around all day and I code and mentally I'm getting fatigued but my body is getting nothing so uh yeah maybe I need to do some something physical Daniel says get flux for your computer the blue light from your computer keeps you awake it lowers serotonin levels yeah actually that's a good idea I have flux installed on my PC but I don't have anything like that on my Mac so uh I guess I I'll have to do that I do have my phone set to switch uh when it gets late but you know it actually and the the nights when it's been hardest to sleep I've been up late um building my um my app for the the course that I'm taking so that makes a lot of sense Maxim says meditate to sleep better yeah actually that helps I mean I'm uh I'm Catholic so uh sometimes I'll like pray the rosary which is somewhat of a type of meditation and that usually helps me go to sleep uh Sarah says yep I use melat yeah actually I have tried melatonin before uh I'll have to use that if I really can't sleep I don't like to use it a lot cuz it doesn't leave me really groggy but it's definitely like I can tell the difference to when I I take melatonin when I differ when I don't in terms of like how rested I feel uh so it's not as bad as like you know a sleeping pill um but I don't like to use it too much yeah occasionally my kids give my kids melatonin uh they actually really like it they ask for melatonin all the time I don't always give it to them but they like that they be able to follow sleep quickly uh sod says uh Jesse understand coding and when we make some mistake in our code I was stuck sometimes all the night I was doing free code can't practice till it really makes me strong in HTML CSS and now I moved into JavaScript um cool yeah it's good once you get into the JavaScript part of free code Camp it does get a lot harder um so there will be sometimes where you know you got to spend a lot of time on some of the algorithms and things but you know keep working at it you know you'll get there sometimes you got to like take a little break and then you know when you come back to it the solution seems like it's it's just a lot more obvious uh John says John Hansen says will those JS files and Views become separate HTML uh final public web page files okay so what's going to happen here is all these files here in views we'll put in these routes so instead of the H1 tag we'll just have a tag you know based on that component so it'll just say like glossery right or in this case it'll be home so it'll be home.js here so we'll render home.js and there'll be a separate file so we'll go into the home.js file and here's where we'll put all our markup for that page and then it'll render to the user it will seem like a separate page it'll have a different URL but in reality it's not entirely a separate page because we're not rendering the whole screen so there's still this whole menu system and nav at the top that will stay the same and never have to render uh so it's kind of nicer like it definitely keeps the appearance of separate pages but it's not really a whole page which is why I call them views instead of page it's not like I make up the term that's everybody uses the term views I guess but uh I think it's more accurate to say a view than a page because it's not traditionally a page like normally as in sending a request to the server and getting an entire page back so anyway let me know John if that uh answered your question or not Zanna says love and Fusion if you can accept the taste one teaspoon of dry lavand in a glass of water you put it in the morning and leave it till evening you drink it before going to sleep I've never heard about that that's really interesting all right so sorry I can't pronounce someone is asking a question here and the uh the characters are not the normal alphabet that I'm used to so I can't pronounced that sorry um I guess it's it's Russian uh it says why why does people prefer create react app if you can't even configure webpack or something similar for your own needs you just have to follow react scripts workflow yeah so create react app is just really nice to get started if you just want to start working on something because you can get started in just a you know a few minutes and have something that works so you do sacrifice customization for that so it's just a tradeoff that sometimes makes sense and sometimes doesn't for this particular project uh we may not have to do any customizations so it should work uh but for some projects you would need to so it just depends on what you're doing so if you don't need to customize this saves you a lot of time you can also eject this and then do all the customizations that you want so it's good to start it's nice you can start a project like this and if the project ends up becoming more complicated than you thought it would be and you need to customize you can always do that later on uh Nathaniel says will the video replay be in full HD or still blurry actually the video replay will still be in uh lower quality which which really stinks that's I that's why I really don't like to have to do streams from home uh I maybe could record the video while I'm streaming it with OBS and then upload it later that would be a huge file size though I'll have to think about that and see because I'm pretty sure you can do that with OBS so what would happen I guess is that I would actually just maybe take down the video for the stream and then instead upload the video that might work I'll think about doing that next time assuming that I have enough space on my hard drive to handle the huge file that ends up uh being made from the stream I'll have to keep the stream short Maybe oh okay um I didn't realize so uh mobin had said something about using pi Piper for something and I didn't get the reference and uh Rahul says it's a it's a reference from a TV show not an actual product so thanks for letting me know I would have tried to look it up I I mean I probably would have eventually figured out it was from a show but thanks they said it's from Silicon Valley TV show so I've never seen that I want to see it uh I just haven't watched it yet okay cool so uh Patrick followed up about using SAS uh and it says it's it's in to it is about using it with create react app cool awesome I have to check that out thank you uh R rishab asks is there any way of using the CSS grid system just like bootstrap I don't I don't know how I can make a react app responsive yeah uh you can use any uh system you want like any CSS system with react you know just you just plug the CSS in so it would work um I'm actually G to try to have a responsive grid with this site by using the newest version of material UI so uh if you watch maybe some of the the episodes coming up this week I'll probably try to get it working this week and um so it won't be with bootstrap but it will be a grid system uh Patrick asked about the shortcut to skip to the next instance of text uh for multiple cursors um I guess what it command d oh to to skip the next instance I don't know the skip I've never used the command to skip but that would be really useful but I've never taken the time to learn it I've always figured there there was one all right Jordan says hi hey Jordan thanks for watching Alonso says hi on my break at my coding boot camp cool well thanks for uh thanks for watching I hope everything's going well at at the coding boot camp also Alonso how did you get your name to show up like that that's really cool so I mean you anyone watching the video can't see this unless you're in the live chat but Alfonso's name in the live everybody else's name is all just the normal gray and the normal font Alonso has like uh wow it says he's a moderator okay is that why you're moderator how did you get to be a moderator anyway I was just amazed that he has a different color name now I can I can I get I get to the part in the chat where um where my kids were making all that noise so thanks thanks for being such good sports about it everyone thanks uh Zanna says my kids sound too cute thanks they said Maxi just so cute yeah they're cute they're really cute that's I think um the kids like it's really good that kids are so cute because if like if you have kids or been around kids before you know sometimes they're just crazy and they just do things that don't make any sense but they're so cute you don't stay super mad at them right like otherwise it would be really hard to take care of kids but it makes it so much nicer that they're so cute like when I have to wake up really early in the morning with the baby like she smiles at me and laughs and it's like okay I feel like I'm going to die cuz I'm so tired but it's still fun because I get to you know I get to see her for a while before work so so that's cool I think I think it's it's definitely the cuteness has its its purpose oh cool Sebastian says yes uh nine-year-old twin brothers so cool Santa says you should invite them over when you were at work too yeah they've they've come into where I work before and um it usually is like the same thing it's me saying okay let's try to be quiet uh V says hello everyone uh Hey V thanks for joining us Blake says six brothers and sisters awesome that's really cool okay so marrow says why not use switch in router then don't use exact in route uh well why I I guess I could use that the reason why is simply being I had no idea that switch existed so thanks for bringing that up I'll have to check it out now like I said I said a little bit earlier um I just literally just learned how to use react router a couple weeks ago and I haven't worked with it very much just in my side project for my course which I don't get to work on very much so um yeah so there's a lot of stuff I'm sure about react router that I don't even know is possible so I'll have to check that out thank you for that Sebastian says wow Chrome eating all my Ram yeah it does that occasionally does oh okay Nathaniel says you don't need to use flux on Mac so flux was the thing that we were talking about that would automatically make you know dim your screen and you know shift the light so that it would um it wouldn't keep you awake at night as much so evidently Mac has night shift built in and so you can just uh enable night shift so oh cool that's good to know I'll have to do that okay Zanna says and this is uh back to what we're talking about with you know sleeping and you know getting good exercise and so that I can be able to sleep and uh she says uh both me and my boyfriend are writing code we have a big garden and we make sure we work out as well that's cool yeah I think that is probably important I usually never have trouble sleeping if I get a good you know workout in during the day although sometimes if I work out at night it wakes me up and I can't go to sleep so I have to make sure I get it in earlier in the day if I work out in the morning I actually am really awake right after the workout so it's kind of nice it's like better than than coffee uh okay I see Hamza uh mentioned night shift as well for Mac Blake says PC versus MAC for coding um I don't know I used both um lately I've been using a Mac a lot so I'm I'm kind of partial to a Mac for coding PC is always going to win I think when it comes to gaming but uh but the Mac it could just be that my Mac is just a better computer than my PC in terms of how much RAM it has and things but uh my Mac just seems so much faster than my PC and my PC has a desktop it has a decent amount of ram a nice video card like it should run well uh but it just doesn't compete with with a Mac it seems like I click something on my Mac and it immediately happens on the PC like I have to wait for everything so maybe if I had a PC with with enough RAM you know maybe it would be better uh but I don't know I like I I like using the Mac now I don't like that they cost so much money but uh I do like that they they function really well wow Sebastian said just saw an article claiming that Firefox uh version 56 can open about 1,600 tabs in 15 seconds that's amazing I mean why would you want to do that but that is amazing wow Nathaniel says melatonin gave gave him a ton of vivid nightmares that's it's never happened to me when I've taken melatonin that's crazy I didn't even know you could have uh an a reaction like that to melison oh Blake says the newest Windows 10 UPS update has a nightlight setting okay cool uh sgut says hi hey thanks for joining us Nathaniel says upload the video at work so if I were to record the video here just upload it at work leas your network actually I might have to do that um I might hit my data cap at home if I try to upload too many things U Maxim says it's getting late in France I'm leaving thanks for the stream hey you're welcome thanks for watching thanks for sticking around uh s you know even though it was so late uh John Hansen says thanks Jesse um I set up something different where my ENT point is an array and the output goes to a resolve directory file uh bundle I did not have separate CSS and JS for each page okay uh my react built into webpack has no errors on build everything compiles but for some reason the JavaScript the react code is not running not even a simple console log uh John if you um I'd be happy to take a look and and see if you have it GitHub or something uh just you know send me the link like on uh you know you could direct message me on Twitter or something and uh I might not get a chance to look at it right away but I'll I'll you know try to look at it when I can uh Jordan says there there are nine kids in my family that's awesome big families are really cool because I think like you know you wouldn't get bored I mean nine kids that's a whole baseball team you could literally have a baseball team that's just your family that's really cool uh James says agree on uh the Mac is better but the PC is good uh for gaming yeah that's true that honestly all I use my PC for anymore is gaming I don't game that much but I just bought my son uh my eight-year-old I I bought in Minecraft for his birthday so he's been using my PC that used to be what I developed on and now he's been using it for Minecraft which that game is really cool I never played it before and uh it's super addictive so I need to like watch out so I don't play Minecraft all day and not get anything done uh Nathaniel says benad is good for sleeping take two of them you fall asleep so fast yeah you definitely do but if I take benad and fall asleep I feel so tired the next morning oh cool Patrick says command K uh command D skips the next section I think cool I'll have to try that let's try it right now all right so let's say command k d cool ha check that out look it skipped that so I skipped these two sections and then skipped down to skip this one kept going that's awesome okay one says same uh one works works in Ubuntu Ubuntu but then uh uses windows for gaming Hamza said in Pakistan they make fun of people who have a lot of kids and not a lot of time uh yeah in the in the United States actually um it's it's weird like uh big families sometimes get uh like a lot of like negativity people I don't know why people get freaked out by big families uh I'm in a unique Place uh where I live uh in Stubenville Ohio in the United States there's actually a lot of big families like way more than in most parts of the country so it's not really like I have a family of four in a lot of places a family of four is seen as a above average size family but around here it's not seen as a big family at all because uh you know my my children's friends uh from school they have six seven eight there's some families that have 12 kids uh so like six kids would be more of an average sized family around here like eight is getting kind of big and then above that is a big family so it's kind of a weird a weird spot I'm sure it's different in different different parts of the world uh but yeah um I always said uh when people ask me how many kids I wanted to have I would say I'd like to have a football team but I'll settle for a baseball team and they always looked at me like I was crazy I thought it was funny but they thought it was nuts oh James says uh in Utah there are a lot of big families as well cool yeah like I said I I like big familyes I think that's that's cool all right I think I'm GNA wrap it up the stream's going on oh yeah it's it's almost 4 I definitely I have to wrap it up because I have to take my son um so uh yeah I'm going to I'm going to wrap up the stream I got through all of the uh the live chat so I think I covered everybody's questions if not just send them to me on Twitter put them in the comments in the video uh I'll be back tomorrow I'm pretty sure that the network will be stable tomorrow and I can stream from work and um I don't think I have anything going on so it should be the same time but I'll schedule the stream as early as I can and I'll I'll post on Twitter as well to let you all know ahead of time when I'll be streaming and um thank you so much uh for watching and for helping me out in the live chat uh and I'll um I'll see y'all tomorrow for