React Project 2 Day 7 - Live Coding with Jesse

Key Takeaways

Hey everybody, it's Jesse and uh good morning if you're uh in in my time zone or near there. Uh so this is a lot earlier than I normally stream. Uh but we all get here at the university, we all get pretty much everybody gets to go home at at noon today. Uh because there's a big conference going on and they need the parking spaces for the people attending the conference. So we all have to leave. Uh so still wanted to do a stream. So we're going to do one. It's going to have to be a short stream, though, because I uh I knew I had a meeting at 11:30, but I had completely forgot that there was also a going away party uh for somebody that that works here in the in the same building as I do at 11:00. So, I'd like to uh I'd like to stop into that cuz he's he's really nice guy. So, like to be able to say goodbye to him before uh before he leaves. So, um I uh I was just in the middle of reviewing pull requests. So, um Kevin has submitted two pull requests. They both look really good. I um I've already merged one and I was just kind of testing the the second one. Uh and this is Kevin aka uh Kebian 6020 uh in the in the chat. So, I'm not sure if he's in the chat or not. I expect this is going to be a smaller audience since uh it's a totally different time and um I didn't even post it on on Twitter or anything like till I don't know maybe a half hour ago probably not even that long ago. Uh so hey everybody there are there are a few people in the chat. It's picking up a little bit. Okay. Uh so I'm just going to finish up uh just checking this out. I'm I'm looking at it. There's no, you know, I don't see any errors other than our our normal uh errors that we get. Uh so it's looking good. Uh so basically what what Kevin did was uh the first thing he did was refactor the sidenav. So there's nothing visible that happened, but behind the scenes there's a lot of code that it was kind of removed, moved around, and uh so it makes it a lot more a lot more streamlined. And uh now for for the letter head uh he's made it so that um it's basically let me show you the code first I guess. Um let me get rid of this and open it up again. Okay, cool. So, we have the letterhead card now and that's this component here. So, basically he's before remember we had just copied and pasted everything which was okay just to see how the layout looks but you don't want to leave it like that. Uh so Kevin was completely right in uh refactoring this into its own component. And now let me go back to letterhead. There we go. Uh so now you know we just have you know the letter head here. And it's since there's not a lot of them it's okay like this. And I probably won't make it any smaller than this. But we probably could just loop over this and we could take these props uh and put them in uh an array uh and then we could just loop over that array. So we would just do like array.m map and put all the cards, you know, in here like that. Uh so that could be a further customization that we could do, further optimization that we could do. Uh, but I don't know. Four is not really a big deal to me. If it were closer to like 10, then yeah, I'm definitely making I'm gonna make an array and loop through it. All right, so this looks good. Uh, I'm just going to check on my other screen. I have the um I'll pull this over in case you haven't seen it before. Uh, this shows this is the pull request, pull request 10, and this is just showing the difference between it. So the letterhead card is entirely new. So you see the stuff on the left hand side is how it was. And then on the right hand side, this is how it is now after the changes from the pull request. So before we didn't have it at all. Now this is in here. This all looks good. Uh and then letter head uh has changed. So you can see um you know able to remove a lot of this stuff because now it's in letterhead card. also able to remove a lot of that, you know, that repetition of all that markup replaced with letterhead uh cards. So, um that looks good. I'm going to merge that. Uh also, let me let me paste in the address for the Enro uh server. So, I'm going to paste that into the live chat. And let me bring it over. In case you can't see what's in the live chat, it's this highlight highlighted bit right here. Uh if you can see the site as uh as we're working on it and inspect it with DevTools. And um a lot nicer than having to to wait for me to click on something for you to check it out. Uh also I do have the uh the stream open on uh Instagram as well. Uh so let's get started. And okay, I just checked the live chat. So um Taylor asked just 31 persons here. Yeah, it's just cuz it's such a different time than I normally do. Uh, and there I didn't give a lot of notice uh with either the YouTube alert or with uh my Twitter um my tweet about it. Uh all right, Zana Zana has to go. She's going on a trip and she's got to prepare. So, uh thanks for checking in. Have a great time on on your trip. Okay, let's get started. Uh so, hopefully now uh if if you want to see this, uh you've gotten that. Now we're going to uh merge this in. So I've actually merged the master branch into this this branch that I pulled down for testing which is the pull request 10. Uh so I've already merged into that just to test it with everything and and make sure it all works uh properly. And I do want to double check one more thing before I I merge this. And that was the sidenav. So I want to make sure. Yeah. I I was afraid of this that this might be the case. Uh let me jump back. Okay. on my other screen. I'm um comparing that last I just wanted to make sure that when I did the merge that nothing got messed up with the last pull request number nine that I had I had merged in. And so I'm just want to check what it should have looked like. So let me let me look at is this is sidenav. Yeah, let me view this. just to see. Okay, maybe it is all right. I thought I'd seen something that didn't look right, but right now that I'm comparing it, it looks looks about the same as as it should. Um, yeah. Okay, cool. Everything looks good. So, I'm going to check out master branch. I'm just going to do like a basic merge. I know we had we tried out uh different ways to merge things um at in a previous uh stream. Uh what's this letter head? Uh I'm just going to do really basic merge here. and uh not go through. So there there's a basically the reason I said that is there's a lot of options for how you merge and what happens when the merge goes in. So um you know the most basic is just merge. Uh but there's a lot of other things you can do with that. All right. Also, another thing that was uh added in pull request 10 from Kevin was uh that the random images uh in fact they're random, you know, for each each card now. Uh which I had mentioned yesterday that I I like that and that's really cool. Also, uh this is fixed. So, before we had um uneven uh spacing so between the first two cards, we had no padding at all. Then we had a a de a pretty good amount here. Probably double what this is. And then no padding again. So now that that problem is fixed. So it's looking good. Let's move on now. And what we going to do? Share a story. Yeah, this is where we left off yesterday uh with share a story. And I'll bring up Let me log in here and show you. Oh, I also I forgot to tell you all what happened. So, yesterday I left you all um and uh I had to go check out somebody's computer. So, it turns out the problem. So, basically the person could not access my website. He he was saying that there was uh just a blank screen and this had been going on like for a long time and other people um from the IT department had tried to check it out and and couldn't figure out what was going on. So my suspicion was correct. I suspected that he was just using an old browser and he was he was trying to open it in Internet Explorer 9 and didn't realize it. So um you know the user was you know basically not you know he's not really into computers so he didn't realize what was happening but he he assumed that it was opening the link automatically in Chrome because that's what he normally used. But the default browser on his machine was set to Internet Explorer 9. So that there was a lot of confusion I think from that because he was, you know, saying and thinking that it was in Chrome where it should have worked, not realizing that it was Internet Explorer 9 and some people had checked out his computer before and told him that his browsers were up to date. So he assumed they were up to date as well. So, I don't know if they just meant Chrome is up to date and didn't bother with Internet Explorer because they didn't think anybody would use it, but in reality, like Internet Explorer 9, that's pretty old. Uh, I believe that came out in 2011, so really old. So, anyway, I was I uh I I was a little bit I'm relieved that it wasn't my project. It wasn't my fault. Uh but I feel bad for this uh for this person because there was important information that was being conveyed through that that site and he couldn't get it and for months he hasn't been able to get it and uh so I feel really bad about it and he was legitimately angry about the situation and I can't blame him. Uh I just wish he hadn't been so angry at me uh since it wasn't really my fault. But, you know, in reality, based on everything that he was seeing and been told, it seemed like it was my it was my issue. Uh, so, in fact, he'd actually been told by other people that it was it was on my end. It was my issue. So, uh, so anyway, I can't be mad at him. I was a little bit upset about the whole situation in general of like, why do we still have Internet Explore 9 on computers and uh, here. So anyway, but now I'm I'm uh I'm over it and I'm I was I was mad for for a little bit, but now I'm cool. So, um anyway, just wanted to say that because I know you all had uh some of you had said at the end of yesterday's uh stream that you wanted the update. So, there's the update. Wow. Patrick says in the live chat, "End of support for Internet Explorer 9 was a year and a half ago." Wow. Wow. I did forward on uh so I I I wrote several emails uh to various people about what happened and I'm I'm trying to get the browsers updated. Uh or like at the very least I wouldn't care if they just deleted Internet Explorer off everybody's computers. that would be fine with me too because why would you need it? Everybody seems to have Chrome on campus anyway. Uh so anyway, it's not really, you know, my department's responsibility or my call at all. I don't actually have any access to update anyone's browser even even if I wanted to. Uh so I can't really fix that, but hopefully, you know, we'll be able to get that fixed at some point. Uh because this is not the only time that's happened. Uh some people somebody was using a really old version of Safari once and that's why my site didn't work. Uh some people continually try to log in with Firefox 3 from somewhere on campus and I can't figure out who it is uh because my my error tracking uh setup for that site also tells me their email addresses but the code can't even run the part where it grabs their email address. So it it gets held up even before that. So I I can get an IP address, but um I don't I don't have any ability to figure out whose IP that is. So anyway, enough of that. Uh hopefully I'm I won't have to handle too many of of those situations again. And oops, not that form. We want to go to suggest a story form. Okay. So, for this form, we're just going to have some paragraphs uh and some form elements. We decided yesterday that we were not going to put this on a card. We're going to try to put it, you know, directly onto the paper and we're going to make this font a larger size. And uh we'll see how that looks. So, let me move this off to the other screen. And first thing, first things first, let's just make a container. Where we at? The story. That's what I named it. Okay. So, let's copy some some uh some of the markup over from let's see is it posters? Letter head would actually be good to copy it from uh because we have some P tags up at the top of letterhead just like we we'll have with this. Okay. So, I'm just going to grab this whole container and then we'll remove what we don't need. But this will save us a little bit of time typing. Okay, now we don't need to see that. And we can get rid of this. And I'm just going to leave these paragraphs here because uh that's fine for now. I don't I know how paragraphs are going to act. What I'm really worried about though is I want to make sure that we get the right uh font size here. So I am going to pull in from materialize the uh responsive uh font. So I let's see if we still have this open. I think we do. Yep. So we still have our materialized CSS file open uh from their GitHub repo. So I'm I'm going to find the um the font. So it's it's flow text. It's not a font. This is just the uh font weight. So you could see or I'm sorry, not the f well it I guess it does set the font weight but the font size. So you can see at different screen sizes the font size will change. So there's a bunch of media queries. So obviously like I'm not going to spend my time rewriting all these media queries, right? So, we're just going to uh take this and put this in our CSS file. Oops. And I'm just going to take this for now. It might be helpful to have some of these other kind of helper classes at some point, but uh I'd rather bring in what I need because sometimes at the end of the project, you never go back in and remove all the stuff you don't need. So, I'm not going to copy everything in right now. Uh I'm going to try to be uh a little bit more responsible about it. I know the last project there was a bit of a mess in the CSS and I I just ran out of time and didn't get to to clean it up. So, don't want that to happen this time. So, I'm just going to put this in the Do we want to do this? Yeah, this is I I'm going to put this in a separate file. Uh, for now, I think I'd like to keep my CSS in different files. Yeah. And then, uh, that'll help keep it a little bit more clean. So, let's make another file or another um I guess I already made the style. I was thinking I'd make another directory, but uh I think I already made it. So, I think we just need to touch source styles. Yep, that's it. And we'll name this All right. All right. And I'm naming it flow text because that's the name of the class. So, um I I'm immediately going to know what that is. Uh I guess if you haven't worked with materialize, you might not know what that is, but at least you'll know. Maybe I should change it then. Uh because I do want people, you know, down the road to be able to look at this and see what's going on. So, we'll call it responsive responsive text. Okay. Yeah, that's a little bit more descriptive of what it what it is. Oops. And I I almost misspelled this. So, I didn't mean to say tough. I wanted to say touch. So, touch is how you create a file in the command line. Okay. Now, we can see that we have this file. If I open up a folder here, we should have that file. What happened to us? What's that? Oops. It should be there, right? Source styles. Oh, I just didn't see it. How did I not see that? I think I was I was thinking that it would have showed up uh green since I just added it. So that's why I didn't even bother reading it, which I don't know why it didn't show up green. Normally um new brand new files do appear as being green. So not not really sure what's going on with that, but we can finally copy this in. And let's save that. And then we'll bring in I'm probably going to end up using this. Will I use this everywhere? I actually I won't use this everywhere. So, there are going to be some pages where I won't even need this because we're going to have we're not really going to have blocks of text. So, I don't know that I need to pull this into every page. Let me check. Oh, I have it on the other screen. All right. So, let's let's just uh check quickly because I think we can try to Yeah, I'm not I don't actually want it on this page. I want to keep uh control of exactly what these sizes are uh on the homepage. Same thing with this page. Um, and this page. Do we have text? Yeah. And yeah, the uh the text inside of cards. I'd rather keep more control over the size. Uh, just because I I do want to make sure that we have cards that are the same height. Uh, and I don't want them to be huge. If I applied the flow tech stuff in the cards, it they would be really big. So, uh, stories are Yeah. So, some of the like these pages obviously I could apply it to, but yeah. So, my my whole point point is like I I don't want to have to load uh CSS in places where I'm not going to use it. So, here's what we're going to do. Uh, so we can see like on app.js we're importing our styles up at the top. So I'm just going to copy that and paste it into story and change this to responsive text. Okay, now we should be able to put I should be able to put flow class or flow text class here and it'll just apply to all these paragraph tags. Uh so let's see if that is the case. Oh, okay. I see. Let me Oops. Do you need to go out and then back in the styles? Let's try this. Okay, cool. uh if you didn't catch that uh so initially I just had one dot which would have meant from where this is so from the views folder it was trying to find within the views folder a styles folder okay which obviously is not the case okay so it worked when I had it like that within app.js because app.js JS uh is here within the source folder. So what I had to do was put another dot and that's saying go up one level, right? So go to the source folder then try to look for the styles folder. So, uh be aware uh if you're moving components into other um other directories within your project that you may have to change some of this stuff depending on how how you've done it, how how your project's set up. Uh so, at some point we're going to make a components folder and move some things into there and we'll we'll have to take care of that uh when we do that as well. So, all right. But for now, this is the one what we want. So, we have this. It actually ends. It's pretty large. The font's Yeah, the font's pretty large. Now, of course, this is uh larger blocks of f of text than uh that we we'll have. So, actually, I think I'm going to bring in the the real text because I would like to see now that we have the the flow text applied. I want to see what this would really look like. So, you can see it's not nearly as much. The second one's going to be a bit longer. And Let's bring this in. Okay. So, this is the actual text. Something just looks weird to me about this. What? What is wrong with this? I don't know. Does that look odd to anyone? Like it it just doesn't look as nice as Maybe there's some conflicting styles between material UI and this that Yeah, maybe that's it. Oh, maybe it's the font. Am I not? All right. So, it's saying the font family is just saying serif, which is not what I want. Maybe that's I want it to be robboto, which I I thought robboto was the default for for material UI. Maybe I missed a step and I have to actually pull in Robboto at some point. Let's check. Let's check on that. Uh because I'm not really going to know if this looks good unless I see the font. Let's check out usage. I'm not seeing anything there. There's no there's no search uh for this site. I wonder if it's like that with everything if I'm not getting my family. Okay, so robboto is it's here. Uh it's just not being applied here for some reason. Okay. Uh let me I'm about halfway through uh the stream for today. Uh so I do want to go to the live chat just just quickly and uh see if there are any questions or you know any new people to welcome uh before I solve this uh this font problem. Uh Oshan says his uh connection's really laggy. So, uh, yeah, sorry about that. Oh, okay. Patrick's saying there's there's more to flow text than what I'm copying. Uh, so let me check. Did I Maybe I missed Maybe I missed some stuff here. I mean, maybe I should pull in some of the baseline. font stuff. Okay, I'm not Maybe I'm missing it. Yeah, maybe I had thought that maybe the base font uh is different. So then all those uh the uh flow text classes in the media queries would be slightly off from what I'm used to. Um Bill uh says, "Have you thought of using styled components?" Uh yes, I have thought of using uh the styled components. So, uh, I'm going to look into that. I would actually like to make each of the components completely self-contained if I could. So, we'll see that. That could be a goal uh for this project because then I' I'd like to be able to just reuse them. Uh, it'd be cool actually to make like um Kevin made the letter head card. It would be cool to just make a card component, which I mean they already have the card component, so I'd have to call it something different. It couldn't be card, but basically a component that would be like it would have the card there, but you could control everything in it just through props. And then that way I could reuse that for all my projects. just control and what I mean by what's in it like whether or not it it has an image at the top, a title, an overlay, uh text, action buttons. Uh so all of that would be in props and maybe I'm missing something and that's how material UI is already set up and uh trying to reinvent it here. Uh but I think that would be really versatile and especially since I use cards in pretty much everything that I do. Uh that would be a component that would be awesome to have make that completely self-contained with everything that it needs uh to render and just be able to drop it into any project. All right. I just see uh Rohan asked about what the uh issue was yesterday uh with the project and I see you all told him that it was Internet Explorer 9. Yeah. It's terrible. Uh Blake asks, "What is Docker?" Um Docker is like a way to like like you make a container and your program can run in that container and you could transfer that container. So, and I mean like everything can run in like your entire setup, the whole stack can be in this container and it can be copied exactly onto anybody's machine no matter what they're running. And it's supposed to be able to run uh in exactly the same way. And you don't even have to install all the same stuff on your machine. Like if you're running something in Node and you didn't have Node installed on your machine, it wouldn't matter. If you had docker and you downloaded the uh the container then you should be able to run it. So that's my understanding of docker. I haven't used it in at least a year. Uh I was start I wanted to use it more and then I just got busy with things and never uh felt comfortable enough with it to use it uh for you know in production. All right, Patrick had some uh and um and Bill had some good uh explanation as well for uh for Docker basically saying it's like like a virtual machine. Um yeah, so it said it's like like a lightweight virtual machine. Somebody Arsenal of Color Aquatic says, "Come on, guys. Thumbs up this." Yeah, cool. Give it a thumbs up if you want. I don't um I mean I it's cool when you all thumbs up that, but I don't really know um if thumbs up mean it means much uh in terms of of anything. I don't really know uh how that that helps other than letting me know that you like the video. Okay, Sebastian saying uh material UI was designed with robboto font mind, so be sure to include it in your project. Where is that? Look over Okay, Patrick said I I did get all of the flow tech stuff. So, cool. So, Sebastian, um Let me go back. So, uh, we're working on trying to get Robboto to be the font for for this, which, um, it's already being applied to like H tags, and I'm not sure why it's not being applied to these P tags, at least. Let me inspect it again. Yeah. So, you can see like on our P tags here, it's it's saying that our font is just saying serif. So, I'm not exactly sure what the problem is and why we're not getting, you know, on the same page. You know, some things have that font and some things don't. Uh, so I may just have to import the fonts in one of my main CSS files. Actually, here's the thing I'm not sure about. We can test it out. But uh if one of you knows uh it'll save us a few minutes. Um if I put in different CSS files. So it's obviously it uh importing that font. Importing Robboto exists already somewhere in material UI and it's already being imported. If I try to import it again in another CSS file, will the browser know that and not bother bringing it in again or will it try to bring it in twice? That's that sounds weird. The only I mean possibly if uh if there were different locations that it was getting it from it might think it was two different files but right it it shouldn't try to pull it in again. Right. So I know there's a delay so it'll be a minute before you all hear that and can can answer. Uh so I guess in the meantime just to prepare I can look up Okay. said this font which water thin butter light regular medium bold I don't know that I need all of these whoops okay so I rarely use bold or medium So, I'm I'm definitely not going to use bold. It's possible that if I want something to be bolded, I'll use medium. So, I will grab that cuz uh now that I think about it, there's might be some stuff that's bolded. Uh and then I do use I do like to use some of the thinner stuff if I can. On some uh monitors though, it's really hard to read the thin stuff. So it definitely has to be a large font for thin to work. So let's bring that in. Let me check that. See this? Okay. Sebastian says it's inherited but not using the robboto font. Rohan says it's from the same if it's from the same source it won't if it's different location versions it will try. Okay. But since it's already imported you can just use uh robboto. Actually I I want to see what's being imported. Uh, let's see what Let's check it out here and see where it's coming from. Or might be easier just to check here. Wow, that's a lot of stuff. That Let me refresh this page. I don't want to see all the Okay. You know what? Maybe I won't be able to see it. Okay. I do want to see though if I um before I pull in all the font stuff, if I just go into this responsive text, do flow text fonts family robboto sens So, are we getting robboto now? There we go. We've got robboto now. Okay, cool. So, anyway, thanks. Um, you said that. So, I think it was something Sebastian said that made me want to do that instead. So, thank you. Um, oh yeah, and and Rohan's uh mentioned since the h tags are using it, it's obviously imported already. So, that should be that'll work. Uh, I mean, maybe maybe I could put in one of the CSS files. I'm not going to worry about it right now. I just want to get this page done. But uh in one of the CSS files, maybe I will um put just like globally like everything gets robbott uh one of the ones that I import into the app.js uh file. Okay, cool. So that's that's it. Now, uh like I said, I I'm still not sure I'm just not sure about the size. I mean, maybe I maybe it just looks weird because on my other screen I'm looking at the really small size. So, this is what I'm looking at and it's like a huge difference. So, maybe that's just the kind of the weirdness that I'm that I'm getting here. All right, but I I do want to before we end today, I I want to throw in some some fields uh some form fields. So, let's check out the fields. Where's this at? Text field. That's what I want. Okay. So, which one? There we go. I want the floating label. That's what we have now. Uh, so I'll need two text fields and then a multi-line with the floating label. Okay. So, first things first, let's import text field story. Oh, get that semicolon out of here. Um, I don't care if you all use semicolons, but I just now that I don't I'm not using them anymore, I I can't stand them. Uh, let's see. Floating label. There we go. So, let's pull that in. And we're going to need to make a little container for that. So we want that to be 50% width. So we're going to give class name and that's going to be column 12 and six. Okay. Okay, so with the column classes that we brought in from materialize uh the materialize CSS framework uh this means on small screens it's going to take up 12 columns which means full width and then on mediumsiz screens it's only going to take up six so it's going to be 50% width and then we're going to put our text field in and we need two of those. So, I'm going to put that there. And then we need a full width multi-line uh text input. And yeah, we want the floating label one. So, I actually want to try Let's see. Do I want to try this? I want to try this. Uh, I'm just curious. Oops. No, I meant to put another column. Let's see how this uh turns out. That doesn't I'm I'm going to get rid of the hint text. Obviously, I don't want the hint text, but why is this only this big? There must be some sort of max um max length set. Okay, so that does stack uh like we want it to. So, the thing I was saying I wanted to try out is not to make another row and just to put all these. And my my reasoning was if I put another row, it's going to add in a margin and then uh it's going to look odd on small screens. So there won't be a uniform spacing between here. Uh so that's why I did it like that. And I because I had noticed that that's how Kevin uh did it when he refactored the letter head uh page. All right. So, let's check this out to see if it has a max width or I guess just a width. Where is it getting this width from? Okay, so that's saying 100%. So, at some point it's got to be setting a width. I mean, what move this over a bit so I can just see Okay. Yeah, this um yeah, that element with here is controlling that. So, let me check the docs. see if I can just change it uh in here because I I want it to be like here I I do have it uh full uh full width and that's how I I want it to be. All right, full width. There we go. Let's add full width. True. I wonder if I just add it if it'll if it'll go true. Let's see. I think it it might. Yep, there we go. Uh, so that's that's the answer. We just have to add full width, which is awesome. So, full width. Full width. Now, let's check it out. Awesome. Okay, so we have our full width going on and Okay, not bad. Uh I think on the other as it is now on the site, it definitely has a bit more padding, but I'm not I'm not super worried about it. Okay, cool. Uh, so let's add in let's get rid of the hint text and then we'll add in a button. And what time is it? And then we'll uh then we'll wrap things up. Uh, so here's our our hint text. There we go. Cool. This is just I don't know if if you all can see this, but it looks like it's just not quite as smooth. Like the animation for this bar, it's not quite as smooth as I have it. Actually, that's because on the on the other thing. All right, I see. So, I'm not actually trying to do like the the really cool animation that they have here where it it actually expands and shrinks. So, um that's that's why there's I think I was just adding um a different color and and weight of uh border. Okay, cool. Uh let's find our buttons. button. Race win. Yeah, this is what I want. Um, so I just want it to say submit really to just need a simple simple button that says submit. And we do want it to be the primary color. So let's import this button. And then we'll bring in this raised primary. Oops. We'll put it All right. Raise button. Submit. Style is not defined. Where were we at here? Okay. What's We missed something then. Style margin 12. All right. I'm not going to worry about that right now. Let's just take out the style and see how it looks. And then we can put our own margins in if we need to. Okay, cool. So, Actually, let me I'm going to compare this. Okay, so this is my current effects. I don't think they're the same. Whoops. Okay, I may change change how this is working because I don't like it as much as this. I'm going to check I'm going to have to check the material design uh guidelines on this just to see. But I mean, this is I did build this a while ago, but I'm assuming that I followed what was with materialized CSS for this effect. And you could see they're they're definitely different. Uh, so in terms of I mean, yes, there's a color change and then a slight increase in the shadow to make it appear like it's coming forward. But you could see like the increase in the shadow is barely noticeable. I actually, now that I look at it, I'm not even sure that's happening. Um, and I'm not sure. Yeah, this is happening faster. It seems like there's not there's not as much of a transition. Okay. So, yeah, I'll have to work on that button because I just it's not as satisfying hovering over that button as this button. I don't know. Maybe it's just me, but um but realistically like if I need if I want to keep a consistent brand standard, then we need to have the same thing. So, I'm going to need to change how this button works then to be consistent with what we're doing across all our sites. Okay. Um so, I think that's it. So, basically, this page is layout's done. Just need to change change some text, work on uh this button a bit, and that's pretty much it. Uh probably didn't do like a comparison to make sure that, you know, these this font size is correct. Uh I just want to see what the base font size is for material UI that this is going off of. Um all right, let me go to the uh live chat. I'm going to go through quickly and uh hey uh one of my co-workers is in Iceland right now and uh she just was watching the live chat and uh sent a message said hello from Iceland. Glad you're working hard. So I'm not even sure if she's still watching or not, but uh that was cool. All right. So, I'm going to scroll up. I'll try to get through everything, but I do need, you know, in a few minutes I'll need to to end the stream. Hey, we ended up getting about 50. We're up. We're up to 49 uh viewers now. So, that's not bad. I was I was a bit worried no one would watch because it was at a different time. Uh let me scroll down. Yeah, if you have any questions, throw them in the live chat. But uh I am I won't have a lot of time to answer. So if I can't get to them, you just send them to me on Twitter. And I will say uh I know that some of you have asked me to look over your code and uh sent me messages and I've just been really busy lately. So hopefully I have some time this weekend to check it out, but uh just uh please be a little bit patient with me and um I'll try I'll try to get to it. Okay, let's see. Uh Rohan says it's too much text together. So yeah, now that it's a bigger font, it does look like it's too much text. So yeah, we'll see. We'll see what to do with that. I there's a good chance that some of the uh the text will change uh when everybody, you know, kind of reviews this again. And um so we might be able to get rid of of some of that text. Rohan says, "I'm partial to semicolons. Just feels complete to me." I did. It was weird not using semicolons at first. It felt the same way, but now it's No, it just looks nicer without them. Uh, Prrath Mesh asks, "Hey friends, can I get a job if I do full stack developing uh in free code camp?" Uh, yeah. I mean, you you can there there are people that have definitely gotten jobs after doing free code camp. So, it just kind of depends on the quality of your work and, you know, how many places you apply to, what they're looking for. There's just so many factors that go into actually getting a job that I couldn't say for sure you're going to get a job with Free Code Camp, but it's definitely going to help you and help you increase your skills. And, you know, the more skills you have, the better your portfolio is, the better chance that you do have of getting a job. Oh, Sebastian, I see uh you saw a full width uh before I did. So, thanks for that. Sorry I didn't didn't look over and see that. All right. Patrick says, "Why is the bottom field so different than the other two? Look where the blinking cursor ends up on the bottom once it's active. Yeah. Uh, it's because it's a multi-line field. That's why. So, it's it's multi-line and it's currently set to two uh two rows. So, um, if I really wanted it to be uniform, I guess I could set it to one row. And I'm I'm assuming it would expand. Actually, no. I want to I want to make sure that it expands. Yeah. Okay. It'll expand. Yeah. I don't I guess I don't mind that. I'm used to that. But if it'll look better, we could always just set it to initially just only have one column. I just want people to know that they can type a lot in here if they need to. Oh, and I just see uh Patrick already got his answer in the live chat. So, thanks uh thanks Sebastian for um uh for giving an answer. Nie said, "Today you streamed early." Yeah, I did. I'm not going to be in uh the office later on when my I normally stream. So, I had to do a an early stream, but it might not be bad. Maybe some people who because of the time difference and things couldn't see the later stream, maybe they can see it. So, uh so I guess that's, you know, that's kind of cool. Uh Ans says, "Would you recommend the beta version of Free Code Camp or the other one? And do you have any idea when the beta version will be released? Uh, I have no idea when it'll be released and um, I I have no recommendation one way or another because I haven't gone through the beta version yet. So, I wouldn't I wouldn't feel comfortable giving a recommendation. I'll just say you're going to learn a lot no matter what. Um, if if you're a little bit more adventurous and want to are going to be okay if like something's a little bit buggy, then I'd say go for the beta version. If you're the type of person that gets really mad when something doesn't work right, then stick with the regular version. Uh, because, you know, obviously it's a beta, so there's going to be things that don't work right. Uh, so that's that's my my advice. Uh there's some talk talk about my editor. It is Adam. It is the STEI theme si. Uh yes, it does look similar to Sublime. Uh JRE says, "What age did you actually start working as a dev?" Okay, let me let me think. I'm gonna have to do some math in my head here. Uh, I I will say this. I got paid to build websites when I was I don't know like 18 was probably the first time I ever got paid to do a website. Uh, somewhere around there. So, but I I definitely didn't consider myself a developer at that time. So, I would probably say, let me think, how old am I right now? 30. I think I'm 31 right now. So, I'm 31. Maybe around 28. I'd say I probably wouldn't really consider myself a dev until I was around 28. And at that point, I was freelancing. I think I was freelancing for a little while before that, but it was mostly like stuff you wouldn't really consider being a dev. Like I don't like customizing WordPress themes, like basic CSS customizations to a WordPress theme. To me, uh I don't necessarily consider that being dev work. I didn't consider dev work when I did it before. Uh so so whenever I was doing that I you know I I was getting paid to do website stuff but real dev work probably I was maybe 28 somewhere around there give or take a year. So occasionally I I see people say something like I'm already 20 years old and I don't have a job and as a developer and like they're freaking out. So, uh, just don't worry about it. Don't worry, really. Uh, so yeah. Okay. So, um, Demar Demari, how I'm not sure how to pronounce that uh to pronounce your name. So, let me know if I'm pronouncing it wrong, but uh, Demarqu Allen says, "I'm 23 with good practice. Could I get where you are?" Definitely. Definitely. For sure. Um, so when I was 23, I was I think I might have been a waiter at the time. All right. And then I taught high school. Okay. Demarcus. Okay. I was like thinking it would be like the French pronunciation, but Demarcus. Cool. Uh, sorry for mispronouncing it. So, uh, yeah. So anyway, let let me give you just a brief timeline. I actually did a video explaining like my timeline on my own channel. So if you check out the link in the description to my channel, uh I did a video on like how I became a front-end dev, that'll give you a better idea of just like how long it took me to learn things. Uh so but basically when I was around, let me think. So I graduated with a business degree in 2008. I couldn't find a job for like six months. I worked as a manager at a Burger King and then I quit that job and I worked as a waiter at a restaurant and then I got offered a job as a high school teacher. So I took it because it was in my hometown. I really wanted to move back. So I took that job and I taught I actually taught Latin and religion at a high school for almost four years. Then I quit that job and I traded money on the stock market for a little while until I ran out of money and then so obviously I stopped doing that and I looked for work for a couple months couldn't find anything and then finally I started doing website stuff and for I'd say probably the first year of doing that I would not have considered myself a dev. It was mostly like search engine optimization work, writing blogs, you know, making minor CSS changes. So, I was definitely in my late 20s before I really started to try to learn how to be a dev. So basically within within the last like three years, maybe four years, I've gotten to this point because before that my knowledge of of development was really like basic. Yeah. No, I didn't uh I did not have a formal degree. My degree is in business with a specialization in banking, finance, and economics. So, not related uh to web development, although good to know. Uh it's it's good to know how to handle money and and run businesses and things. But uh yeah, so uh basically my my point is um I think you can definitely pick up web development and really quickly get to the point where you're good enough to make really nice sites, really good things. So uh for me it actually took a couple of years but I had kids you know I had a family I was trying to make money so I was taking a bunch of you know I was taking work doing anything like during that time of me learning I was taking work uh you know doing landscaping at people's houses painting like paint their basement um I would take work uh like just writing writing blogs and things like that so uh I was taking work doing anything I could to provide for my family. Uh so I couldn't dedicate all my time to learning. So if you did have time to dedicate to learning, you could probably learn way faster and get better than me, way faster. Uh so don't don't be discouraged at your current age. Uh, it's just if you have the the desire and the talent and uh and the time to put into it, you can definitely learn this stuff. I'm not saying it's easy. It takes work, but you can you can learn it. All right. So, I'm going to take maybe like two more questions and then I'm gonna I'm gonna wrap it up. Okay, let's see. I I missed this question. So, Demarcus asks, "And do you consider real dev work to be working from scratch?" I wouldn't say from scratch, but um the reason I say that about WordPress is a lot of customizations you can do in WordPress come like just through their admin interface. So, you don't even interact at all with with code necessarily. Um, so that's why I I kind of didn't really consider myself doing dev work. I would say you don't have to start from scratch because really who starts from scratch, right? Even, you know, you set up a project, you install a bunch of node modules and there's stuff in there that, you know, there's already been thousands of hours of work put into, you know, what you're doing just from your build tools alone. Uh, so no one starts from scratch, but I think the ability to go in and build a site uh using HTML, CSS, JavaScript, actually being able to write the code at that point, I would say that's you're a developer. Um, if you can't do that, then I don't I don't know that that I don't know that I would call myself a developer. I know people have different definitions and but if I wasn't able to to go in and in a code editor and put out a website uh you know just with the you know basic markup then I wouldn't be I wouldn't feel comfortable calling myself a developer. So hopefully that helps. I don't want to offend anybody who uh who does WordPress theme customization. Uh I it's you can make a lot of money in that and it's definitely needed. Uh but that's just how I felt when I was doing it. Uh Demarcus asked, "What are your thoughts on Bootstrap?" Uh yeah, I think Bootstrap's great. I think that's a great way. Um it takes care of a lot of really basic stuff in CSS that in my opinion is a waste of time to do yourself. I mean it maybe like once just to see how it is. And I'm thinking mainly like like a grid system. Um you know all the different kind of things you need to uh make things work properly across browsers. So things like that like nobody codes that by hand. Um so that's really really useful. Uh so I think Bootstrap is good to know because a lot of places use Bootstrap as well. Uh Jay says, "What resources are you using to learn this stuff?" Yeah. Uh free code camp, um YouTube videos, uh courses on Udacity. All right. Demarcus said, "Uh, great advice, Jesse. Just subbed your channel." So, thanks. Thank I'm glad you like the advice and thanks for subscribing to my channel, uh as well. Yeah, I hope I hope that helps. Uh, I thought I saw one more question that I missed, but now I can't find it. So, sorry. I Okay, here it is. Uh, it was a question about Angular 4. Are you going to cover anything like this for Angular 4? I don't have any plans to cover Angular right now. I'm not ruling it out for the future, but I have no plans at this point to do anything with Angular. So, all right. Yeah. Uh, thanks for watching everyone, and I'll see you on Monday. And uh it was great. Thanks for uh uh adapting to the difference in time. Uh I I appreciate y'all being so flexible and um yeah, so have a great weekend.