Creating and Editing React Components (P5D36) - Live Coding with Jesse

Key Takeaways

hey everybody welcome to live coding with Jessie sorry I was a few minutes late I went to hit the button to start the stream and I realized that the camera wasn't on so I I don't know if it just wasn't working all day and I didn't notice I didn't really have OBS up until a few minutes before the stream so I wouldn't known but anyway everything should be working now and let me move this over let's let's uh make that bigger and now move this over here and this should work now there we are and I'm gonna paste the end rock link for you all there we go okay so first thing I'm gonna do is go over some changes that I've made so I've been doing I don't like a decent amount of work on this myself over the last like day or two so when I want to make sure we're on the same page with where we're at and what I need to do I'm gonna fill you in on how my presentation went yesterday so for those of you who are first-time viewers or just you know maybe haven't seen that much in this show I my day-to-day work as a front-end developer for a small University so there's gonna be mistakes we're there's gonna be interruptions so it's not exactly tutorial it's just it's just my everyday work this is what I do and I don't prepare anything and I don't try to make it look any better or worse than it really is so having said that we're working on a site and this is going to be the main website for the university it was supposed to launch by the end of this month we were on pretty good track I think it was gonna be I was gonna have to work late you know probably for a week or so but I think we were gonna be able to launch with the minimum you know that we needed but some people higher up have decided that we're not gonna launch them that I basically I need to meet with a bunch of different people all over the university present the site to them and get some feedback and then launch at some later date to be determined so I don't even have another date yet I did the first of those meetings yesterday it was okay I think you know I I didn't get a standing round of applause which I didn't really expect to get anyway but I didn't really get negative feedback from anyone so there are some features that they seem to to like the speed they like the speed I had n rock up and I let everybody load it on their phones so they could check out how it looks on a mobile and what else it they like the ability to go in and edit so I actually went into WordPress and showed at that particular department we're in our WordPress installation they would go to edit their own content and then I I showed them how easy it would be and so I think they liked those features so not bad wasn't a really big presentation it was just one small department and there are actually some people missing from the presentation so it was even smaller than I thought it was going to be some work we're talking like I don't know maybe like seven people if that so some of my other presentations would probably be bigger next then my next presentation is gonna be a big one I I meet with all the all the bosses all the vice presidents and and stuff and I'm gonna present it to them so having said all that it's kind of a big intro this is where we're at right now the project we've kind of put everything else on hold and we're trying to make this site look as nice as we can for some certain like key pages so that when I present it it looks as finished as possible even though we know you know in the background it's not finished we don't have all the data migrated so if before each presentation I'm gonna handpick certain pages and certain pieces of data even if we have to hard code them in it doesn't really matter we just need to make sure those pages are ready so for yesterday's presentation I made sure it was the student life department so I made sure that the student life page had all the data on it right otherwise he probably wouldn't worried about that page till later on down the road but that's how it's gonna go so I'm gonna have to determine what content would be best to have on the site for this next presentation for all the you know the VIPs of the vice president's and and so on of this University so I'm not really that worried about it surprisingly but I know you know other people were kind of nervous that are gonna be in the presentation with me so I do want to do a good job so here's what we're going to do today we're gonna make some components to try to clean up this homepage because I was looking it was huge right so I've already begun to do some of that and as we go through the code I'll show you what I pulled out and what components I created and we wanna we're gonna add a section here so we're gonna add a little section that's going to be full width and pretty much just text but it's going to be a little bit of explanation about what this university is about what the what the mission is for the university and that's going to kind of introduce students prospective students for the main audience so they come here they're going to see maybe not this picture I just put this picture in to try it out let me know what you all think the last picture I had there was a landscape shot and the head of my department didn't really like that picture so now I've decided to go with a shot of actual students see if I kind of prefer that I think there's kind of a connection when you see a person's face and this is kind of kind of nice right everyone's smiling it seems like I don't know like hey people are happy here I don't know let me know what you all think I really want your input on this I've been going through pictures in fact like the first half-hour I was here this morning I just spent the whole time going through images trying to figure out what to put in here so we're gonna try this and as the student Scrolls down then they're going to get a little bit about the mission of the University and they're gonna have the we're gonna put a button in there that's going to let them go on to read more more about that the university actually has this gigantic like mission and vision statement is huge but anyway then they're gonna come down and they're gonna see more of this and my boss wants me to have more like this where we actually say what the content is so instead of just having a card that's just an image or just a video we're gonna have you know two titles there so it's going to say on basically what this video is about or what this is an image of and we're gonna add some more profiles in there so we'll get as much done as we can in about an hour I do have to go and pick my kids up in about an hour and 15 minutes I have to leave for that so I'm just gonna keep that in mind and I just realized that I don't have any music going it's because I restarted my computer all right I can't possibly code without my music right all right cool so I am getting some feedback on the images and on the the new thing so let's start with that because that's the first thing we could probably work on here hey everybody that's saying I know I appreciate it thanks for watching Chris says love your videos thank you for the hard work and the time you put into them oh no problem thanks for saying that I'm happy that lets you enjoy the videos so Saad says white text on white background is hard to read yeah I think so too I did darken it so I put let me show you how I did this where's my and I can introduce you to a component that I've made as well while we're doing this so I took that ol hero section and I made this component called hero so now on interior pages we could pop in this hero component if we want to and other pages can have hero sections so I am here's here's how I did this I actually put in in line was okay I split all this stuff out there is our actual return there's our actual return okay so because I wanted to be able to pass a prop that's an image URL that's why I'm doing the style here in line but I've added a linear gradient first so the background image can take multiple things as what the background will be and it just stacks them on top so the first thing you put in will be on the top right and then after that or just layer so you can put in multiple images whatever you want so in this case we started out with a linear gradient and I just put the same two values for the linear gradient so normally it'll go like it'll go from one value to the other like gradually well if you put the same value it's just an overlay basically of all the same color so in this case we just did black but we made it transparent so it's only about 20% right now so that's how what I tried to do to make it a bit more readable I'm open to other options but this is something that standard that can increase readability no matter what image we put in there so I like it as kind of a standard thing for this component to be reusable but I'm definitely open to doing something different especially for the homepage so and this component has a lot of props to it so it's not it's not ideal right now let me get rid of some stuff I was working on them finished with so I can show you let me know if the the font needs to be larger for this so here's that euro component and there's a lot in here but this this is using every single option that the component has so if you leave out some of these the component will just render differently so probably most of the time when we use this we're not going to use all the options in there so it won't be so huge but for right now it's it's just a lot of stuff for one component but still takes a lot less space than the actual code for all that so anyway yeah I agree that this is hard to read one thing I am going to do is I would like to increase the font size for this line and for these buttons hopefully that'll make things a little bit easier to read so we can mess around with that here to make these inverted buttons I also had to make another component so I guess I should just show that component now since we're at that part I made this inverted button component because what I found was that you couldn't change the hover color there wasn't an easy way to change the hover color using the the material UI button component so I wanted to keep using that but I also wanted to be able to change the color so here's what I did I went into the repo for material UI I completely copied everything in there for their button component I changed the paths so if they would work because these paths were relative paths before assuming that this was located in the node modules folder so I changed those out and it's really simple anywhere that add a dot dot slash I just replaced the dot dot with material you I so down here where we have our flat secondary button because this happened to be the buttons that I was using on the hero section there I change the hover background to white and then I added in a color to this this green color to the official green color for the University and that allowed me to have this this effect while still using the button component so it's actually kind of cool the only problem with this is that as material UI updates it could potentially break what's going on in here so I'm gonna have to keep an eye on that it may not be the final solution but as I said you know earlier we need solutions that are going to work fast for the presentations and we can always come back later and and fix them but for now this is kind of cool it works and it gives us complete control over these buttons to do whatever we want so you see there's a ton of options here so I'm a little bit excited as we go on to kind of go in here and just figure out more about how material works like the internal stuff that's hidden away in the node modules and and try to change it a little bit don't think it'll be fun but anyway it did solve our problem as you can see we're gonna have to use it for this as well because we we don't have the right color here so we have to change this I don't know if we'll do that today or not we'll see I added in a new logo so my department head wanted to have this logo especially on the desktop but as I was looking this works as long as we don't add anything here which we don't plan to this does work you know I think I'm worried about it's on a really small screen but if it if it checks out it works even on a really small screen you might keep it that's too big let's go on this iPhone 4 is tiny yeah see it doesn't work on the small screen so we're gonna have to do something to switch out for the other logo to like let's go big again so I can show you it's like this version of a logo so we'll switch that out but otherwise this logo is okay I probably need to make it a bit bigger but those are pretty much the the biggest things that I've changed lately I've done some work with interior pages let me check out some of the other suggestions that we got right off the bat someone says Steubenville with an exclamation point so g jr j r y a n so J ryan rocks is that how you say it anyway do you know Steve oh are you from Stephenville let me know let's see John said nice tip for that linear gradient cool yeah I can't remember where I learned that if I did remember I definitely give credit to where I learned that from I think it was a blog somewhere maybe it was CSS tricks I can't remember for sure yeah but it's like such an easy way to put a gradient on I remember trying to put like divs inside of divs to do gradients and it's like no this is this is so simple all right well okay Jeff says you can make the gradient variable variable as well yeah you could we could make a prop for a gradient so I did have to stop myself I was going crazy with all the props to customize it and I just had to stop and say like honestly we're using this component once as of right now do I really need to make all these props so we you know I'll probably need that props as we go on but no sense in trying to like think of everything we possibly could need right off the bat Jeff says I think there needs to be more space between faith and life in the search icon yeah definitely yeah this got messed up somewhere along the line and I'm not sure what I did but I don't think it was always like this but it's definite need changed J Brian Rock says when you get that color straightened out you can sell it to slack and make a zillion bucks they need to fix the color of the highlights so that the dark background themes work okay all right so let's let's get into some code can we do you know what let me let's put in this section here we're gonna make a component called tech section and so primarily it's going to take as props a link in case there needs to be a button and then a block of text that right off the bat we need those two props we might be able to think of some other props that we'll need but this will be a section that I'm sure will be repeated in various places so let's make that component and then we'll put that component in there and have that that kind of intermediate section you know what let's take four props right off the bat let's do the the - I just said text and then a link the link will be optional if we don't have a link we won't render a button and actually if we're gonna have a link then we need to add a link text so will be of three and then we're gonna add a background color and a font color so we're gonna have five props and that should be enough to have some nice customization the only other thing I could think of right now is a title maybe we should just add a title drop in yeah so we're gonna end up with six props so we're gonna make component we're gonna have those six props and then we're going to have the section in and then it'll be really easy for us to just add in sections wherever any pages we want so we're kind of making some building blocks to build out some really good-looking pages quickly we can make hero sections quickly and we're about to be able to make tech sections quickly and then we can we can move pretty fast and build out some pages for these presentations there was another question and I can answer this why I'm doing that so someone asked what kind of music others do Peter asked what kind of music I listen to right now I'm listening to my top songs of 2016 playlist on Spotify which is a mix of a lot of dubstep and the Creed soundtrack so from you know the the Rocky movie right Creed creed soundtrack and then acoustic covers of songs so yeah that's that's a lot of what it is and then yeah I'd say that covers probably like 90% of what's in on this playlist right now I really listen to pretty much anything the only thing that I consistently don't like is country music everything else I will listen to depends on the mood I'm on or mood I'm in alright so we need a new component so let's start out with a blank file new file we're gonna call this text section and let's grab let's grab this hero component just to give us the base now I'm starting out all my components as class components we can go back later and refactor into stateless functional components if that's what we want but I find it easier to go from a class to stateless than to go from state leads to a class so that's why I'm starting out with the classes even though it might be overkill for a lot of the components that we're making all right so what are we gonna need we're definitely you need typography we're gonna keep this inverted button and the grid alright cool so we have a lot of what we need already we can get rid of see here a button an inverted button let's keep these styles for now because I think we can reuse some of them with just a little bit of editing so that'll save us some time let's get rid of a lot of this and then let's let's type out all the props that we know we're going to need here so we're doing some D structuring here so that we don't have to keep typing this props but this will be a nice list so that we don't forget what props we want so as I said we're gonna have title sex actually let's make this section title text I wanted to make it section Saito because title is actually an attribute that you can put on some elements so I don't like to have the same names so that no one gets confused when they're looking at things so we have the text we will have a button link button text and color let's go to say text color and background background color I said oh yeah I think that's it all right cool so we have these not let's go in here and we can get rid of pretty much all these constants you can see in this component I made all these constants because a lot of these are they're contingent upon whether or not a prop is there so it's just a lot cleaner when we pull these out into their own constants so that we can say you can easily see like if title text is there make a title if the subtitles there make a subtitle right if the primary button text secondary button text or tertiary button text is present then let's let's start rendering this grid that contains buttons right for the buttons I like to do both what and link so if there's not text and the link we you know we don't render it has to have both right no sense having a button that links somewhere but no text or the other way around so anyway that's kind of a nice like an easy way to clean up your components without actually having to make a lot of other components and link them up alright so anyway let me get rid of these and I did I use the word tertiary for the third button is that word well-known enough that it's okay like is everybody know what tertiary is I know you'll use that word often but I mean it was the correct word like if we were using like primary secondary it's it's definitely the correct one but I'm a little I was a little bit nervous that people wouldn't necessarily know especially like maybe I think this is not the first your first language maybe even if English is your first language nobody uses that word anymore anyway let me know if you think that would be an issue because I do want this code to be like readable okay now we can take pretty much all of this let's go yeah let's take out this first and yeah we definitely want this out of here we can leave the div so we're gonna need a div and the class name parallax weird if we can just make this a grid so we need that grid container right grid and then at the top grid we make a container don't we and you're there a great container and then we're gonna have a grid and I think I wish you'd do this I don't like to Center things but I'm almost positive I'm gonna get asked to Center it let's just not Center this and then see if I can get by without without centering this so I think I do want to make this first section just a div and then the tip is going to be full width so hopefully all right senator senator just actually I really I like these I want I don't want a min how you right now we don't need anything with this background stuff we won't need that I'm not gonna Center this least not yet and I leave these buttons for now so I'm not gonna worry about the the grid component yet I'm just gonna throw in some normal components typography go to use here I need to go back to the here let's move our hero section over here so I can see what typography I used here all right we use the display to up there we try that typography type display too and yeah it was good go to our bottom just go with that and then we're gonna put in here I'm gonna say it was section title section title goes in there and then we can close out our typography tag all right and then let's to grab this as well and let's put text here and we're gonna display that as it's a normal setting for text [Music] I should just look up so like I don't have these stocks open typography area where's the type shows in classes color variants okay now its variant we didn't update to this this one yet so where it says variant we're gonna use tight but just so you know if you get the latest version use variant instead we're gonna have to update everything at some point but I don't want to do it right now because I got to focus on getting things ready for this presentation body okay that's what we need let's just use body one then see how it goes body one cool alright so yes there's fog rafi let's add in buttons what do you have buttons yeah let's just add in let's grab this put it in here and we'll change it we'll just call it button and we're gonna change this to button link and we're going to change this to button text okay we're gonna have to pull in inverted button oh we already have it cool all right so we have that now down here we can just render button and we're going to conditionally render these but right now I'm I'm not worried about that I just want to make sure it works first before we do all the conditional stuff that way if something doesn't work it's going to be a lot easier to figure out why it's not working okay one more no that's it right it's only need for now we can put in the text color and background color so let's do that color yes yes I don't really yeah I don't need that right now but I don't want to get an error because I haven't used those so let's just go and say for now text color background-color now it's just not gonna give me an error when I try to do this and why is I make I'm getting an error here up I have him outside the div there we go we never changed the name of this component so it's not here oh it is text section and I forgot to set my timer sorry about that so it's definitely time for me to take a break so let's do that where's my index that's it yeah I'm just gonna bring this up so I don't forget where we are but when we I'm gonna take a five-minute break I'm gonna answer some questions when we come back to the code I'm going to import this component that we just made put some props in see how how it looks then we can adjust styles and everything like that for now I am going to remember my timer this time would you do a short break and I'm going to start at the top of the chat and just scroll down and try to get to all the comments and questions i Grimm asked about the media query for the small screen size I yes so we for media queries we are using where is it at I just deleted a media query from something so I don't know if we're using it anymore there's a way to do media queries within material UI so is so we have these breakpoints so you can go and put theme breakpoint and this is up so on any screens medium and up the background color changes to red in this case so for the route component it's blue normally on medium and up it's red so that's how we're gonna do it so we're just do thin breakpoints down and then we'll put small in here and then we'll be able to change for small screens so what we'll probably end up doing for the app bar is I think right now I'm directly putting the image in what may end up doing is making the image a background image so that we can control it right from from these styles and use breakpoints and I think that's going to end up being the easiest way to do it and for a bi image I mean I'm talking about switching out this image for small screens Sud says for design and layout ideas you should check universities websites these will give you some good ideas about your website yeah I've I do check out university sites from time to time I'm I'm a little bit torn so I want there to be some familiarity so that we users come to the site they understand what's going on but I also want to make this unique you know I mean some it's my design and development not just me you'll help a lot but like we're working on this and I kind of I want it to be unique I wanted to break the mold a little about what university sites you know are doing so I'm trying to balance that so I've actually what I do get inspiration for is for small details from the way other sites do things so like we looked at for our list component we looked at the newsstand app that's made by Google and we look at one piece of that newsstand app and got some ideas for how to display our content so I like doing that more than like in terms of like a whole layout I don't know I find like your site looks more unique in that way I don't know but if anybody seems a really cool University site or other site that you think would be good inspiration for something we're doing here let me know because I definitely check it out and see if it's you know something we could use for this project or even a different one um MRA AMR is the name so I'm not sure I pronounced have a last name is awesome so says hey wish me luck in my quiz tomorrow good luck I hope you do well in your quiz let let us know next week how you do on your quiz let's see Jay Ryan Rock says tertiary means mix from two other things right in color so I assume it's like one generation removed otherwise yet right I wasn't even thinking about colors for tertiary but I was thinking more of like primary being like well first secondary second tertiary third so I guess I could have gone like first button second button third button that would have been maybe that would have been a easier I guess I kind of wanted like primary button and then there's going to be two secondary button so I thought about doing secondary one in secondary to that might actually make more sense than tertiary maybe I'm just making a big deal about nothing yeah maybe maybe I'll change it let's see I think I got everything all the questions almost all of them Oh Nicky says for stateless to class select the function and ctrl shift P to select react pure to state it's a plugin oh cool you know what I totally forgot about that so in the reactor food-truck plugin which i do have for visual studio code they do have a plugin for switching from functional stateless functional components to stateful component the class based and it just automatically does it for you I forgot about that now that I you say it like that was one of the coolest features of the react foot truck when I decided to download it and I haven't even used it alright Anna Anna has a question about where to where do you see yourself in five years I'm gonna think about that while we do this code and then Anna when we come back after this next coding session that'll be the first question that I answer alright so I would do 25 minutes may not take the whole 25 minutes we'll see how long this takes to do what we're doing I do want to make sure I have time at the end for questions and that I do have time to pick up my kids don't want to leave them at school right okay all right yeah here's what we're doing so let's go here oops that's not a component let me copy this paste and we're gonna go what do we call that text section check section and then down here right after our hero section we're going to put our text section here text section and we need our props so scroll down make sure we get all the props so let's try section title and the section title is going to be let's just let's go mission and text for now be or remove some I need more than that why isn't it an atom I had an automatic like lorem ipsum generator that's right I'm not worried about it now I just want to make sure it all renders text for the button link oops button link we're just gonna make it here so at least we'll have something it will render button text and more it's pretty standard and that's all we shouldn't need let's see hopefully we don't get some sort of error when they try to render this stuff we'll see how it goes hmm it rose not to find where am i using hero at 72 oh I forgot here text section now that's where it went so I tried to use multiple cursors to change this not realizing that I had that text in here as well so I thought I selected this text but it didn't yeah it worked okay cool so we have a section it says mission we got our lorem ipsum text and then we have our learn more button which you can't really see because the colors are off but not bad cool definitely need some styling now let's see so let's get to styling let's change this class from parallax to section and we're gonna add to this so let's do some padding yeah we knew padding and I want let's say let's try 32 pixels of padding and zero on the sides let's just try it out and for our button colors let's give it yeah let's switch it up and let's do two one four one two a cool all right let's see how this looks all right nice yeah nice that's it that's a nice amount of padding maybe might one more but for right now I like that let's let's put on this section we do ever get her bottom on here - why isn't it showing it let's see so we have a margin bottom we should have interesting I'm not gonna adjust this until we get more text in there because I need to see it in the context like of what it will likely be in and I we do have everything centered right now which I didn't want to Center but I guess I've I miss some class on her I did a line item center justify content starts let's fresh start and I'm gonna flip it around is it this one there we are okay so depending on like where your axis is reflects these could be flipped around okay probably don't need to justify content centers since we have the padding at the top and bottom it but I'm gonna leave it in there instead in case we change it at this point we want to set a probably a max so we have this container whoops we don't need container in there so we need this container to be a hundred percent with because if we put in a background color we need that actually let's put in a background color just so that we can see exactly where everything is background color mm say purple yay how beautiful all right so if I don't want it to be centered then I need a container component so let's put this in here I guess I could use the grid container here and see what it does let's try it out maybe the grid container already has some built-in stuff if it doesn't we'll just throw in our own and then set it to like a percentage with what's aesthetic that's okay so I guess since I didn't have this in the grid I'm not about getting anything happening good item okay so the hero button stuff is is centering all right let's see what happens now all right now it goes over so weird all right let's just switch this up instead of a grid I'm just gonna make a div for now and instead of container this is close and ER container and let's say with max width is going to be 70 oops 70% Oh should I use margin:0 auto or is there flex box thing that I should use we're gonna say justify content or what did we say it was now this will work let's just do that I see some activity there in the live chat so I will check that out in just a second container margin:0 auto and this is just to Center that container actually let's let's not do let's just just do with 70 okay so that's gonna give us our offset there okay all right now bad let me grab the correct text so we could see what that looks like when I say not bad I don't mean like it's perfect I just mean we're getting there all right I really hope that the mission is on the website like the short version that I want there we are great alright so I was just grabbing it on my other screen and let me put in whoops the text here let's change this I like to just use template literals sometimes that way no matter what as long as it's gonna let me do that no matter what is in the text that we would put in here whether it's single or double quotes it doesn't matter it's not going to mess anything up so on the current website the title of this section is mission summary I don't know that I really want to keep that title but that's what we'll do for now usually questions about like content like that I just defer to my boss and lots so I'm not gonna let me do that no seriously not gonna let me use template littles alright fine I don't know what I'm doing wrong maybe I can't use them in there oh I can't use them because that's not jobs everyone all right so first thing that we notice that's off this text is way too small especially compared to this text even with more text this still needs to be have a bigger space so let's change this to let's try body 2 and see if it makes it bigger now it just makes it what is that alright let's stick with body 1 but then let's give this a class name oops classes section text and let's make the font size 16 pixels and font weights 400 and line height 1.5 can I do that I think I can do that really today there's no way that's 16 oops yeah where are we getting this oops haha I'm making lots of tiny mistakes here all right let's say I'm getting a call let me take this come up yes mm-hm oh okay yeah I'm sorry I didn't get your email so I don't know what happened with that but am i sorry about that otherwise we'll get back to you right away if yeah I I need to make sure I checked that folder more frequently so you can go you can either there's a forum on the bulletin on the actual website to submit a new bulletin announcement so you can send it through there if you want or you can just send an email to bulletin at Franciscan dot edu every Monday Monday morning yeah I think the cutoff is earlier today was the cutoff yeah you could still give it a shot and see occasionally some if someone's like an emergency it does get in but I can't guarantee anything oh yeah no problem all right sorry about that good thing I noticed earlier that there would probably be interruptions that was so in the interest of just sharing with you what my day is like it's a friend of developer I'm gonna summarize that Cole leaving out anyone's name a hug someone called and asked for information that is very much available on the bulletin website asked how to submit something to the bulletin well we have there in the bulletin several buttons to be able to submit and when you click it it has instructions for the deadlines of submitting so this person number one called and said I emailed you yesterday and you didn't get back to me so I'm going to call you I never received an email from that person so I let him know obviously as you heard they didn't receive the email right then they complained about the email system then I I let them know obviously how they can submit to the bulletin and then they said when there's bulletins come out Mondays say oh it's probably too late boy yeah it's too late said oh well that's no use to me and then you heard me say well it's worth a shot you can and they said I said oh well you know no problem and their response I think the last thing they said was well this turned out to be no use to me by that's I don't want to say that's a common response but it's definitely not the first time I've had a call or an email like that I don't know what's up here but I'm sure it's not only this organization that it happens in but there there are a group of people that have certain traits in common on campus that I don't understand if you talk to them face-to-face they're a lot nicer but via email or the phone they just treat you like you're not really a person I don't know anyway obviously I'm not upset by it but just wanted to share that with you that sometimes you have stuff like that so we're in the middle of developing a new site and I get a call just explaining information that we've already explained in emails and announcements and everything all right so here's what I want to happen I want the font size to be 16 wonderful and out 16 does that look like it's still too small should we make it 18 let me check the time - okay I definitely got a hurry up here so I can pick my kids up I like 18 better let me know what you think I think 18 works much much better and let's add in you know I'm not going to add any padding to the bottom of this because if we don't have stuff for the button it's not going to render and then I don't want to throw off the alignment the vertical alignment by adding padding so we're gonna add padding on the top of this button and we're gonna leave this alone but let's change this to 18 pixels and it's really odd but people have been freaking out way more than I thought they would about font sizes being larger I don't know why but larger fonts are a good thing it's easier to read you would think people would understand that but like within a certain age bracket of people they're always like why is the font so big so people can read it why why would we not want people to read it anyway let's do that last thing that we talked about with the inverted button at the grid all right so our hero button that's what we're gonna put so let's go with margin-top and we should give it let's try eight pixels might need to jump up a bit from there eight might be too small that yeah I can't even tell if anything happens so it's definitely too small let's jump to 16 there we go all right that's much more reasonable I like that nice okay unfortunately I'm not going to be able to finish this component but I'll tell you what I'm gonna do what I'm gonna do is just make these all conditional so I'll do one just to give you an example and then I'm just going to repeat that for for everything else so for the button I'm gonna say if we get button link so button link and button text then we will render button otherwise we're gonna render nothing we're gonna do null and why is my button oh I need a space there okay so that's what we're gonna do and then that way too you see we have a button now but if I remove even one of these so let's just take out the button link and say that see it doesn't render so we have to have both to get a button to render okay so I may I'm gonna commit this now so you all can see it in github and just in case I need to work on the weekend or something happens next week and I can't come in on Monday I have everything even though it's not quite finished let's let's do a git status and get ad and yarn cm and we had a new feature let's see create text section you ever look at a word and it looks like it's misspelled but it's not and it's where'd you spell all the time that's what I just did when I looked at component okay to run everything I did to have to change one of the tests earlier so when I changed the logo we had some some unit testing on that component that at bar component it was checking to see that the filename of the logo was correct so I I failed the test so if you are doing any work on on any of these repos keep that in mind to check the tests I mean you'll get an error it'll be pretty easy to tell what's what happened because the errors are our descriptive enough but sorry I'm trying to find this password and talk at the same time so there's a descriptive enough but that's where it might be and we do have two folders for tests so we have our unit tests and this folder up here this underscore test underscore and then our NN tests are in the e to e test folder alright so if you wanted to test an entire page do the end n test if it's just a component you do the unit test here alright let's just put that in there we are now it should work do the ssh ad so i don't have to worry about typing that in again okay now I'm going to answer as many questions as I can before 2:30 it is 2:18 p.m. my time so let's see how far I can go here and where I leave off I know I left off in asked the question about where do I see myself in five years and that's I promise to answer that first so let's do that so in five years Wow five years in five years I will have a teenager that's crazy and it will be I'll be 37 Wow only 37 crazy in five years my beard might be a lot more gray so depending on what the style is maybe I'll do like that dyeing my hair silver thing that people are doing now but as far as where it goes I I don't know we'll see maybe I'll still be here maybe I won't I actually I'm gonna let you in on something that I haven't told very many people I have a job interview for a company in Pittsburgh next week so somebody at that company found my stuff on stackoverflow and check me out online and I wanted to set up a meeting so I had a phone call I'm gonna have to finish a coding like puzzle this weekend and submit that and then I'm gonna go in and meet their team so my my job would be full stack engineer if I get this position so I don't know where I'll be in five years I like it I love the people here in my department so it would be hard when I asked my my kids about it about what I should do my son who's eight years old said you shouldn't take the new job I asked him why he said because you like going to work and seeing your friends so it's like I do I like the people but I can't count on the people being here forever either so if I stay for that and then they all got different jobs where would I would I be so anyway that's a possibility yeah odds are I'll still be somewhere in this area like geographically because I still have my parents and my grandparents live here and I want my kids to grow up knowing they're their great-grandparents and and their grandparents so that's gonna be that's gonna be there I would really like though to be speaking at more conferences and I'd like to be doing more of this I know this is all volunteer right now probably not ever gonna be like a career for me but I really do like doing this I like helping people learn more about coding so hopefully I can I can do more I mean maybe branch out and and do some more videos or who knows but if in five years I'm still sitting here or in some similar office talking to you all I'll be very happy so hope that was a decent answer also I'm gonna be huge in five years like like bodybuilder huge like I've been working out in my basement and I don't keep track how much weight I lift but it seems impressive to my kids my kids think I'm really strong so don't don't tell them otherwise if you ever get a chance to see him just let him think that for now alright thanks for that question and it was actually kind of fun I didn't I've never really thought about that till you asked it so I think that was a good question for me see Oh Nicky says there is that that lorem ipsum generator that like works inside your editor only works between JSX tag not inside props that makes sense I guess I could do it elsewhere and then just copy and paste it in really quick John Henson says does this project use code splitting or will it use code splitting import for these large components you've got on the go that would be cool that would probably be a feature that may or may not make it in before we launch depending on what date gets set for me to launch which just as an aside it's kind of silly that the launch date is now being set by people who haven't even seen the website who who don't do any work with website so once you think I don't know I mean I don't know everything about the organization I'm sure there's a lot of things going on I don't know about that they're taking into consideration but how can you set a launch date for a product without ever even seeing the product or knowing how close it actually is to launching anyway hopefully after these meetings we'll be on the same page and and we get a launch date in but anyway a little bit off top of the question but anyway John I yeah I haven't done a lot with code splitting I think it's a great idea and I'd love to put it in this project at some point let's see John Hanson said asymmetry and web design takes guts we've been programmed way before the web and computers to expect symmetrical balance and yeah I everybody's like that but like let's let's make it a bit bigger just to see because on mobile you can't really tell but I'll just make this full stream right we have this full screen other than like the weird purple color was just throwing everything off right now I don't think that that's that weird to have this off-center a little bit like I really I like that like to be honest with you I kind of want to see if I can do it right here in the hero section and just just have it off-center like that everybody does this right I'm gonna maybe try to do it like that and see people are gonna freak out but I just wanna see what it looks like I don't know I think that would be cool actually did that for a site I made for a client before is I had hero sections with titles but the titles were like I think they were either down here or up here or something so I did not have them centered they were over here they had just a slight margin it what's nice about that is that you can clearly see the title it's in that where they say that F zone that everybody looks at and then you can clearly see the image as well I don't know we'll see I I know I'll get pushback from that but you got you gotta try to push stuff right if you just make the same website over and over again like it's it's boring and I don't you you're like potentially depriving your users of something that's a better user experience or looks nicer you know you got to try different things that's the way I feel at least Nikki says using the golden ratio makes that bit of asymmetry look better the golden ratio is super interesting oh yeah you know what you're right you're right Nikki maybe I'm gonna have to read up more on that and how I can apply it in here I imagine it's not it's a little bit tricky since we're gonna have different screen sizes but we should be able to get it to work with percentage with hey Quincy was in here I don't know if Quincy still here but if you are how's it going Chloe thanks for watching the Quincy says watching Jessica Plus listening to free code can't radio at the same time oh that's awesome so if you haven't listened to it yet free code camp has this radio station going like I think the goal is 24/7 so I don't know if we're there yet but it's it's pretty much every time I've checked it's been it's been playing so check it out it has music from from campers from free code campers and it's it's cool so you check it out and go in the chat chat with people there's always been at least 20 people every time I've been in there so it's pretty fun let's see I see some more people saying hello a house with one I might have to but have to go really soon I'm really glad that I committed that and pushed it so I don't have to worry about it ah let's see Raphael asks what do you use for user management in react we really haven't done anything with with user management and reacts so I can't really say we haven't had a project that needed that the only the closest we came is we have a project that isn't it isn't live yet it's still in in development and we've had implemented like a password this login system but we like we've tested it it works but we've done nothing in terms of using that information for anything other than just logging people in so I guess I don't really have a great a great answer for that I apologize now innocent do not be upset that was when I was talking about that phone call yeah I'm not upset I mean I I'm not gonna lie calls like that I mean you they don't make you feel good right any time anybody is is not polite you don't feel good but it didn't get me down like I'm not it's not gonna stay with me for a long time I mean it kind of depends like you all know a battle depression if I happen to be really depressed right now something like that would probably seem a lot more you know terrible to me right now but I'm feeling pretty good talking with you all helps me feel better so it actually happened at a great time because I believe I'll be right back and talk to you all so I'll be alright alright looks like the size 18 font you all think is is better so awesome I'm definitely with you on that Jay Ryan Rock says the Berg unlimited for many sandwiches yeah if you've never been to Pittsburgh for Manny brothers restaurants have these sandwiches that I've like french fries on them and it's like a Pittsburgh thing I guess they're really good Oh Quincy said awesome good luck with the interview thank you I appreciate that all right Tiffany wait says hey I'm in the burgh Oh awesome Tiffany that's cool I always think like if I'm gonna be in an area I should definitely let you all know first and then if anybody wants to like have a little Meetup that would be cool so maybe I'll have to do a better job of remembering that anytime I travel or anything but I'm actually not that far away from Pittsburgh like I can get to the airport in like thirty five minutes like not not speeding anything just go on the regular fees so so anything on the western side of Pittsburgh is less than an hour for me to get to and then like the other side of Pittsburgh the eastern side takes me a little longer but if there's ever any meetups or anything going on in Pittsburgh that you all know about let me know I if I can I'd love to make it hi I'm Jay Ryan rocks got timed out for the for the bots for using cabs I also say good luck thanks I appreciate it I'm mission says good luck awesome Quincy said when we eventually get a chance to meet up in person and I definitely like to hit the weights with you yeah that would be cool that would be cool I was feeling you you definitely can lift more than me I just started getting back into it a month ago so this has been a month and it's like 4:00 on Monday it was four weeks I've worked out every single day for the last four weeks so cardio everyday and then I don't always lift but I've only like some things I just do like an ab workout so I don't really do weights but I usually get in weights like four times a week so anyway I'm excited about that I'm fishin s can you get into specifics about telling what the puzzle is about yeah the puzzle is I need to set up I can use any language I want but I need to make a program where it makes some type of data structure that represents a seating area so a certain amount of rows and columns of seats of chairs and then it needs to be able to I can give it numbers of seats that I want and it can reserve those seats and then I could give it just like a number so I could say okay I want five seats all together and it can find the best five seats that are available and reserve that so assuming that the front row Center is the best it'll use like a man what does it call Manhattan something I can't remain hatton distance or something to determine where the seats are so I have everything done up to the point where you give it a number and it gives you the seats so right now it's all command line so it just asks you questions on the command line and you type the answers back but if I have time I'd really like to build a front-end to it because I think it's not part of the instructions but honestly if I was going to build that to be more to be useful to more people it would be better if it had a front end that was a web app than just being a command line tool because most people don't use the command line right so anyway we'll see see how that goes but that's basically what I mean it's not it's not super complicated when I when you break it down into like the parts so hopefully I can get it finished up you know tomorrow morning and then that's really all the time I have to probe to do anything this weekend with it is tomorrow morning let's see what time it is okay my kids school is actually just let out right now so all right I'm really I'm really sorry that I'm not going to be able to get to all the questions so if you have a question that I didn't get to please put it in the comments this video or send me a message on Twitter or Instagram or something and I will answer your question but I have to go now because my kids school is is out and I have to I have to go pick them up so have a wonderful day everyone have a wonderful weekend I'll be back on Monday and I really appreciate all the help and has some really good questions as well and let's see trying to find the off button sorry yeah so I'll see you on Monday I have a great weekend