React Project 2 Day 4 - Live Coding with Jesse

Key Takeaways

Hey everybody, it's Jesse and uh today we're going to switch over to using the newest version of material UI. Uh so this will be let's see we started with the the stable version then we switched to the alpha then we switched back to what we originally had and then a few days ago the beta version came out so now we're switching to that. Uh, so I know we talked about switching yesterday and uh I didn't realize when we were talking about it that the beta version had already come out. So I saw that on Twitter afterwards and I felt really stupid and then uh a few of you uh messaged me and told me about it. So thanks for giving me the heads up uh on that. I appreciate that. Um, let's see. All right. Somebody in the in the live chat is asking, "How do I get started with this series?" This is only the fourth stream in the series for this particular project. So, uh, just go back to where it says, I think, um, starting my new React project. If you want to see like the very beginning of the series, you'll actually have to go to to my channel, my personal channel. The link's in the description. And if you um if you check I can't remember what the name is. I think it's the the first video is like building a website as fast as I can. That might be the title. So, I did a few videos on my own channel before I got invited to uh live stream for this channel. So that's where project one started. But project two, we're still uh in the beginning phases of that. All right. Yeah. And uh I am at work today, so the video quality should be good. Uh sorry again about yesterday's quality. Um, I'm I'm in the middle of actually switching over. So, um, I'll show you how it's going. So, this is how it's going so far. It's not too bad. There were more there were more errors. So, I've gotten it down. Uh, I've just been slowly working through error messages because it's definitely different. Uh, so this switch once I switch it's not going to be that easy to go back. Uh, so there's differences. I guess this will be really good for anyone to watch if you're thinking about switching. Uh, so let me go through some of the differences that I've noticed so far and I had to change. Uh, let me bring up the code. So I think this this is a good one where I had some differences. All right. So originally we were bringing in app bar. Uh and actually if you check out the code that's in the git repo right now it's the old code. I haven't pushed any of the new stuff up yet because there's errors. I I never really like to push errors unless something comes up and I have to leave work and I just I need to push it. So, as soon as I get rid of the errors, I'll push up the new code. But for now, it'll be all right because you can check on GitHub what we did have and how we had to change it. So, I did leave some of the code in here so you could at least see some of what we had down here. Uh, and we did change some stuff up here. Uh, but you'll have to check that out on GitHub. So, let me make this a bit bigger. We had app bar. We were bringing in app bar from material UI and all we had to do was put in a title and that's what would show up at the top of our uh our app and you know then we had some other options uh for like clicking uh clicking the menu button and that was it. It was pretty simple. We've replaced this with this button app bar. And this is a component that I've made, but I basically just copied and pasted everything from the docs for the latest version of material UI. So, let me show you what I had to do. So, in order to get that same thing, which I'm I'm still not even sure this will work since I keep getting so many errors, but in order to get that same thing, it it's a lot more complicated. So, I'm I'm not necessarily saying that's a bad thing. It seems like they'll be it'll be easier to customize things like this. So, I think it'll end up being a good thing, but for now, it's just I'm going to definitely going to have to change uh you know, how how we were doing things. Uh but basically we've got now instead of uh just app bar we have app bar toolbar typography button icon button menu icon. So we're putting all of that together here. And you can see some of the stuff is still similar. Uh I guess um we have this is a little bit odd. you know, instead of being able to put the title, we actually have to put it inside typography. So, I haven't played with it enough to know whether or not you absolutely have to have this. Uh, but for now, uh, I'm just going to kind of leave it there. Once I get it working, then we can try to customize it and see what, you know, what happens. Uh, there's a little bit. So, I've noticed for some things I've had to switch to this type of import. So before for some of the things I could just import it like this like I'm doing with let's say you know appb bar toolbar. So import appb bar from material UI/appbar. I was getting errors on some of that those and I had to switch it to look like this import and then inside my my curly brackets I'd have to put it uh listed. So I just kind of keep going back and forth to the documentation and trying to figure out what the new way of doing it is. Um, so that's what I've been working on so far. I had to change. Okay, this is a good example. So before, uh, I was able to bring in menu item just like this. So I would, so I would import menu item from material UI icons or material UI menu item. Now I had to switch it and I have to import menu item from material UI menu. So there's just little things like that that aren't really a big deal, but it's a big enough deal to give you an error message. So I'm sure it'll only take a few days to get used to how everything is, especially since I wasn't really that used to the old way. Uh so right now I'm going I'm just going to work try to work through these error messages. And let me bring pull that over there and bring this over. So, our error message that we're getting now, make this bigger. Oh, actually before we get into anything, I do want to say thank you uh to Patrick and Sebastian for their pull requests. So, actually, a lot of the stuff I just showed you probably seemed weird because those were all new things from pull request. So, uh I I'm sorry, I totally forgot. So, a lot changed since yesterday. Let me take you through some of the changes uh just so that we're all on the same page. So, most of the changes are available uh at in GitHub right now, so you can check them out as I'm going over them. Uh but right now in terms of how everything looks, it all looked pretty much the same. Uh the the changes were just how everything's laid out uh behind the scenes. The only difference that you could see was Sebastian had added a uh a different background color to that active class so that it actually did show there was a visual representation of what page you were on when you open that that side drawer. Uh so this is what so this sidenav component this was all um Sebastian. So he created the sidenav component. Now, of course, as I said, I've I've edited it uh to work with the newer material UI, but the bulk of it is still the same. I also edited the sidenav uh to add this this sidebar item component. So, this is the component now. So, what I had done is uh so Patrick had submitted a pull request and it was the second pull request. Then, Sebastian submitted pull request three. Uh, so I think they were both working at the same time. Uh, so Patrick had worked on some of the same stuff that Sebastian was. So I kind of combined the two. So I merged in Patrick's pull request and I turned what he had, you know, he had basically had this component um inside uh the main app.js file. So it was just like um I I mean obviously I don't have it in here uh but it was just above here you know as a functional component um and then he could you know call it you know down here. This is all now changed a lot as well. But basically, I just took that, I made it a component. So that allowed me to use it, this sidebar item inside the nav sidenav component that Sebastian had made. Uh, so it worked out pretty well. I uh I had some trouble getting everything working, but that was just entirely due to me messing up the prop names. Uh so for a second I thought I had some like really weird bug, but it was just just using the wrong prop name. So that happens. Um let's see. Anything else? Okay, on app uh.js, a lot did change here as well. Uh, so you Sebastian changed it to use this switch. Uh, so it's it's a lot more concise. And you can see our our app component now is way shorter than it was. So the top part where we're importing things actually, you know, we do have a lot of different things imported now. Uh, Sebastian took all those com all those views and he imported them all. So now they're actually working. So you can see each one has like the bare bones it needs to be a component which is awesome. And so now this is all imported. And so you can see what our routes will render each one of these views uh depending on what the URL is. Sebastian also added a component in case it's it's some URL uh that's not here. It just is like a catch all uh to tell users like hey that URL doesn't have anything. So I think that's Oh, also um Sebastian Sebastian did a lot of stuff in his pull request. Uh he added in the theme properly, which I had to take a lot out of the theme. So here's the theme right now because I was getting weird errors with the colors. And I realized that I don't actually need to import the colors cuz I was just using the default colors anyway. And the only color I had changed was primary. So, I got rid of everything that didn't matter except this primary color that had changed. And we can just add back in what we need as we go based on the new documentation. Uh, and then that'll that'll help us get up and running a little bit faster right now cuz, you know, just one less or a few less errors that we have to worry about. Uh, but anyway, thank you so much, Patrick and Sebastian. Uh, that helped a lot. It made things a lot more clean and um it took care of a lot of stuff. Uh some of which I had no idea how to do. So, it would have taken me a long time uh to figure it out. So, okay. Now that we're all caught up and everyone should have a decent idea of uh where we're at today, we're going to start fixing these errors. So we're going to look at cannot read property appbar of undefined in appbarjs54. So that's not I don't like this error because appbar isn't even our component. Right. Appbar is um appbar comes with with the theme. So, we're going to have to look at the documentation then and see what the heck's going on with app bar. So, we have app bar position static bring in app bar. See that? This is actually really weird because I copied and pasted this exactly from the documentation and that should be the only place that we're actually using appbar. Let's double check and make sure we didn't leave it in anywhere. So inside nav I mean other than here which I can get rid of this now. Other than there I don't think we're using app bar anywhere. Let me check the live chat quickly. I haven't even said hi to everybody yet. Oh also this is being broadcast simultaneously on YouTube and on Instagram. So, if you're watching on Instagram, check out the Free Code Camp YouTube channel and you can see the code that I'm working on. And if you're watching on YouTube, if you would like to see my face and some of my office while I'm doing this, you can check me out on Instagram and the link to that is in the description for this video. All right, so let's see. Hey everybody. Uh Charan is asking about links to my channel in the description. Um okay, it looks like you found it. So awesome. Uh Joel says, "Hi from Bolivia." Hey, how's it going? Thanks for watching. All right. So, getting some uh comments about I guess the new material UI. Rohan says, "Looked over material UI and I actually like how it bundles multiple exports into one where it makes sense, but the thing is you wouldn't immediately know without referring to the docs." Mhm. All right, cool. Yes. And the uh the editor is Adam. To tell you the truth, I'm pretty sure we had a few streams where no one asked about the code editor. I was kind of disappointed. Maybe I'm mistaken. Maybe I'll have to go back and watch the streams, but I'm pretty sure no one asked. Maybe yesterday or last week at some point. I know there was at least one where I don't think anyone asked. So it broke the streak. Uh, Nan says, "Hi, campers. Any good resource to learn jQuery real quick?" Um, I think the free code camp course goes through jQuery at first, right? The jQuery documentation is actually really easy to read. So, I would um check that out. Uh as as far as documentation goes, some documentation is super uh difficult to read and but I think the jQuery docs are really really easy. So I had some uh someone just joined in Instagram. Hey, how's it going? Got a couple people joining. Thanks for watching. Uh if you want to see the code, check it out on Free Code Camps YouTube. Um, Tone asks if I will include Redux. I don't think I'm going to include Redux in this project. I don't think it'll be needed, but um, there are plans for doing a really really big website in React. And if that's the case, I'm probably going to use some more advanced things for that. So, that project's coming. Uh so if just a little sneak peek, the main website for the university needs redone. It's like three years old at this point and uh the system it's built on is going extinct. So we need to redo it. And I'm like 90% sure it's going to be redone with React. And there's going to be cool stuff with load balancing. Uh, so we're going to have lots of lots of servers with load balancing going on and lots of caching and things. So, uh, because it needs to handle a lot of traffic. So, that's going to be fun to do. So, all these little React projects are building up to that. I'm purposely testing out different things I'll need on that project. Uh, so that's my plan. So, that's coming. Okay. Alberto says, "Uh, hey Jesse, are you able to comment out the place where you use appbar and see if the error goes away, then debug from there?" I guess I could, but re like I'm using app bar here, you know, and it's wrapping it's wrapped around all this stuff. So, I'm not sure I can't just comment that out without commenting all this stuff out. And then that's basically the whole component. What I I could h I guess I Where am I using this at? Button app bar. I guess I could um comment this out really quick. And then I'd have to comment this out too so I don't get an error. So, if you're new to React and you can't figure out how to do comments inside JSX, this is how you do it. It took me forever to figure this out. I used to get errors cuz I tried to do comments and they wouldn't work. So you have to use the curly brackets to drop into JavaScript and then you put your multi-line comments and that's how you have to comment it out. So a little bit more work. All right. So I'm going to do that and just see what I get. I don't even know where my There we go. Okay. So, I actually did get a different error. Let me show you what I I've got going on over here. So, this is the uh the app. So, nav drawer is now undefined. Yeah. And that's actually in this is another error that's that's within this material UI drawer component. So, I don't know what is going on. All right, let me read a few more comments here and see if anyone has any ideas for me. Hey, Jordan. Jordan says, "Hi." Hey, Jordan. Philip said, "Patrick, saving Jesse's job one pull request at a time." I like that. I mean, I'm pretty sure I'd still have a job, but I really do appreciate all the pull requests. Uh, it does make me look better that I have these. I give you all credit, though. Even like in meetings I'll uh when we have our uh our department meetings I do bring up you know that that you all have submitted pull requests. So most of the people in the meeting have no idea what I'm talking about. So, I try to explain it, but sometimes it's better just to say, "I have lots of people helping me." Oh, Zana says she doesn't have Instagram. Oh, well, I didn't have an Instagram until maybe two months ago. And uh it's kind of fun. I never thought it would would really be I didn't think I'd be into it, but it was kind of fun. All right. Sebastian says, "Remove the prototype. Remove the prop types." Oh, okay. Is that what's causing my errors then? actually. Oh, really? Rowan said, "My Instagram live stream keeps on buffering, so I don't really know. I I'm I'm really new with everything on Instagram, so I'm not I'm not even sure if I can change settings or anything. It seems really basic. You just hit a button to go live and and there's not really any options." All right, so here's what I I do want to say. this. Is it possible? Is it possible that some stuff from the old version could have been left behind? I do remember reading in the uh in the change log something about um I thought it was something about Z-index being removed and that is actually part of what uh error I was getting. All right. Bill says maybe delete. Yeah, that sounds like a good idea. I'm going to go in. I'm going to delete um material UI and then I'm going to reinstall it. And uh after I delete material UI, I will manually check to make sure that it it really is deleted. So let's go in yarn. I mean this is where the shot this is really easy and if it fixes it that'll save a lot of time. Okay, now let's check our node modules. So, we should have All right. So, there's no material UI. We have the icons there, but I'm going to leave them because I've had no issues with the icons. All right. Now, I will I did the at next version and that did give me the um the latest beta version. Is there some other way to do this that would get I mean I assume at this point it'll be fine. It'll just give me the latest version. So I did double check in the node module to see what the version number was. I think it's beta v1. Um, and it's like 00.2 or something like that. Uh, Johnny asked if I'm using Ubuntu. No, not for my machine. It's It's Mac. I use Ubuntu on my servers. Um, 16.04. Yeah. So, Juan's using Ubuntu. So is Anna. Oh, Johnny said the console looks like Linux. This is actually Iterm 2 uh for the console. I mean, it's all the same commands that you would use in Linux. All right. Well, hopefully that make a difference. I'm going to restart the server as well since that seems to help sometimes. And uh I really wanted to start uh use using uh Enro like I had mentioned yesterday, but if I'm just getting errors right now, there's really no point. I'll um I'll start it if we get these fixed. Um sorry if you're watching on Instagram. My uh my phone just fell over and you were looking at the ceiling. So I just noticed that. Hopefully, it wasn't going on for a while. Um, let's see. All right. Sebastian says, "Make sure you updated all the old version components to the beta ones. All right. Well, let's see. Nav drawer. All right, I'm going to check out I guess there's really not not much I can do except try to check out the docs for everything that I'm getting an error for. And where I lost my docks. Oh, here they are. All right. So, I'll bring these over and I'll leave this error up. And so, let's check out drawer. Okay, it looks like there is some different stuff for the drawer. All sorry, that was really small. I didn't didn't realize that. Okay, I'm gonna move this over to my other screen so I can compare it with the code that we're currently using for the drawer just to see uh if we're uh if we're doing this the right way. So, uh I'm looking at the documentation for the newest version of material UI. So, I had you have to click the bar if you're going to go to materiali.com. You have to click the bar at the top that says, "Oh, yeah. material UI v1 is coming. I like that. That's fun. Um, so I'm just going to check to see that I am importing what I need to import. Let's see. All right. They definitely they have a different way of uh doing this. this handle close. I doubt that would be messing us up, but it's probably worth a shot. And now, so it's saying like instead of saying this state, let me bring this over. So there's a lot more options going on here. So you can open it from all these different places. So this state open left. Um, then they have different ways to close it. So, maybe I ought to pull in a lot more of what's going on here. Let me check back in the live chat. Uh, Rohan says, "At this point, I would just try modifying node modules by hand and commenting out the offending lines." Uh, yep. Sometimes I do things that make people kill themselves. Uh, Juan says, "Wouldn't it help to look for more info in the errors call stack close?" Yeah, says just remember to uncomment your button app bar. Yeah, maybe I should just uncomment that for now and then take these one at a time. So, we'll come back to the drawer thing. Let's handle this. We'll handle them in order. I have a feeling that once we figure out one or two of these, then the rest won't be as big of a deal. Oops, forgot to uncomment this. There we go. Okay, now let's see what our error was. And this one was giving us the error here. Okay. So, it is this zindex thing again. So, for both of the components, the error we're getting has to do with uh this zindex theme app bar. Actually, let's check out Let's check this out. I'm looking looking for things that were really new. No, that's too old. All right. It's worth a shot to just throw this in the Google search and see. Oh. Well, so I didn't really have much hope since this version just came out. So, let me go back to app bar. I wonder we So I did have something I mentioned earlier that I took a lot of stuff out of my theme and I did have some stuff in there I think about Zindex. Maybe it was about shadows. I hope that that wasn't somehow required and now my theme's overriding stuff and it has no has nothing in there. All right. All right, let's check out our theme. I have our function theme. Yeah. Let's check what it says about themes then since that seems to be the issue. There we go. Theme CNX app bar. Okay. So in here in this theme we do have zindex appb bar. Let's check out what we actually have in some material UI styles theme.js. All right let's check out our themeJS file. All right. This looks different. Let's looks like we have zindex.js. JS. Okay, it looks like it's here. So, so this should be getting imported into the themes. Well, let's just copy this. Let's copy all of this and let's put it in our custom theme. Uh so let's see should be Z index. All right. All right. Not sure if that'll do anything. But you see where my terminal went? Oh, I moved it over. All right, Cool. Hey, we fixed that error. So, um, hey, guess what? I have a better idea. What if? Let's just copy everything in this theme.js since it seems like it's legit. And we'll paste it into the theme.js in our node module. Or better yet, let's just paste it into our custom theme so we don't have to mess with our node modules. So, I mean, a little bit repetitive here to have it all in there, but instead of going through one by one, it's I think it makes a lot more sense to do it like this. Let me make sure where this starts. Okay. All right. Dang it. Still have errors. All right. What is it now? color theme get pallet. Did Did my restarting of the server actually do anything? Maybe it did. No. Okay. All right. So, let's let's look specifically at what's going on here. No, that's not what we were. App bar 74 color theme palette contrast. Okay function. All right, let me go back to the um to the live chat for a minute here. Let's see. All right. Yeah. So, I'm not Looks like everybody was still talking about Zindex and I'm not I'm pretty sure that we've we've kind of we've I don't want to say we fixed the problem because really we just like worked around it. Uh but I could contrast text is not a function. H. So, the problem with everything is this theme file. Where's mine? Sorry, this is really small. Let me make it bigger. Okay. There really wasn't even a theme.js there. Yeah. Sebastian asked, "Is that the old version theme?" No, I think this these are the docs. No, you're right. It did switch over. I thought I had the uh it must have switched over when I went uh to issues. So, good call on that uh Sebastian. Okay, now we can actually see this. Okay. palette. Create palette. All right, let's go to pallet. There we go. So, I suppose whatever is they're saying is not a function should be in this pallet file. All right. Which one were we looking for? Get contrast text. Yep. This is it. All right. So, for some reason, it can't find that. Why? Why can it not find that? Let's see if we have a pallet js file in our our module. So under styles palletjs get contrast text. Okay, so we have it. All right. So, we we obviously have the right function here. Okay, it is bringing in pallet. Okay, so I don't maybe I'm missing something. I'm going to go to live chat and see. But it seems to me like we just saw that this theme.js JS is pulling in pallet which is requiring pallet and then when we looked in pallet we did have the correct function. All right. So I'm going to scroll up a bit. Uh Fran Francis uh asks, "Can we fork your project and fix it for you?" Yeah, you can. I don't really want to uh push things with errors up to uh GitHub, but I I might I might push this. Actually, it won't let me. My commit hook will probably not let me push this up. All right, let's see. Johnny says, "The next video should be named Problem Solving with Jesse." Yeah, honestly, sometimes that's that's what happens. So, hey, that's uh someone else joined us in uh on the Instagram live stream. So, welcome. If you want to check out the code that I'm working on, go to Free Code Camp's YouTube channel and um then you get to see what I'm seeing on my screen. All right. John Hansen said, "The Instagram live feed is great as it's not uh delayed sound to the YouTube live video." Cool. All right, that's cool. I mean, I I never realized that, but that's pretty cool. Uh, Patrick says, "You're using the old theme way with the new beta way. Check out the docs for themes." Okay, cool. I will do that. So, let me see. I think I have the docks up here still. I thought I did. Did I move them? Oh, yeah. I did. I moved him to the other screen so I could see him better. So, let's do the provider. So, let's pull in. So, here's where I'm here's my Fus theme. Obviously, I copied over pretty much everything. Um, let's see. All right. So maybe I am I'm thinking I So I did update in where we at in app.js. I updated to thought I updated to the new way of pulling in a theme. So we changed before uh this was different and so I updated that and also how we pull in uh the theme as well. seem creat. So this is under the new documentation at the bottom of the themes page. So maybe creating the theme is different as well. So, maybe I need to do something like this. All right. So, let's try I guess I should change the URL too. Oops. Put that in the wrong spot. with theme PS theme. Does that look right? That does not look right. Let me see. Okay, definitely got an error. Maybe I'm looking at the wrong We'll take it. All right, John Hansen uh in the live chat says, "Great news. I installed React on top of Webpack. Uh a pain in the works now using router as well for multiple pages links. Now trying to see if I can get SAS to build separate files for each page." That's awesome. Definitely let me know how SAS works out for you. Uh syntax. Uh did I put that in the wrong place? Probably I did. All right. So, I'm still getting that error. Yeah. John said the Instagram feed did die. Yeah. So, I guess Instagram has a limit of an hour on live streams. So only the first hour of anything I do gets gets streamed. So I imagine my stream was probably uh super boring uh for Instagram because it was a lot of me just looking at a screen. I wasn't doing much talking. So um All right. So, um I'm not sure. I'm not exactly sure where to go next from here. Let me think for a minute. H. So, I mean, we had we made some progress and then we're stopped. Okay, let's see if we have pallet. Where was where is our um our GitHub documentation for pallet? I can't do this, can I? This isn't going to work. Is there any way for me to put a function inside this object? This I feel like this is like just objects 101, but Yep. Figured I can't do that. Oh, is that just What if I get contrast ratio? All right. What if I do like this? Uh, okay. H. Okay. So Patrick says uh JavaScript has first class functions. Of course you can put a function in an object but not like that. Just because you can doesn't mean the material uh UI knows how to use it. Yeah. At at this point, I was just continuing on with ourh process of putting everything that we get an arrow on into our um into our theme. But it looks like this pulls a lot of other stuff. So, it's probably not a great idea because we'll we will literally end up having to put everything into there when the problem seems to be for some reason the things aren't getting pulled into theme.js. JS properly. Actually, hold on. This This looks weird. Uh maybe I'm missing something. I I might be missing something going on in here. But look in here. It's saying pallet is pallet, right? But up here. We're naming it underscore pallet. Where else are we are we getting? Are we changing that somewhere? Okay, here we go. Looks like we're defining pallet here. All right. Rohan says, "I think it's the wrong way to go, having to put everything in a custom theme file." Yeah, I I agree. I think it was worth a shot if I could just get it to work with just the part that I put in, but if I have to put in more, then it's not it's going to be too much. All right. Uh Tyler asked in the live chat, "What's your opinion on these new nano degree programs popping up?" And I'm going to answer that just to take a little break from this. Um, I'm I'm doing the re a react nano degree program from Udacity right now. In terms of the course quality and content, I'm impressed with it so far. I don't know firsthand whether a nano degree is helpful in getting a job. Excuse me, he's yawning. Um, today is day two with no caffeine. I think I'm going to take a little break from it and see if it helps me sleep, but I am yawning more. Um, so anyway, I don't know personally whether it helps getting a job. of course like I've read online that you know companies are starting to recognize them but I don't really know you know how many companies and so I'm not I'm not really sure uh if your main goal in taking a nano degree is to learn and you want to get feedback to do like the paid version and you know get a um uh you know actually end up with a nano degree then I I think it's good for that. I just I kind of wonder like what people think when they see nano degree on a resume. Uh does that really mean anything or not? I think at some point it might mean something and to some companies it might mean something, but I'm just not sure yet. Uh but I think it's you definitely learn a lot. All right. Okay, Patrick, I I see your uh your comment here. You can't Are you using create MUI theme, which is how the docs, dude? Let's see. Um Yeah. So, here's what I'm doing up here. Uh Rohan says, "Are we importing MUI theme provider?" Yes, I am importing that as well. Yeah, that's the thing. Some stuff was working and even before I changed all this around, which I couldn't even keep track of what I was doing. I think I I think I messed this up. I should probably just uh undo everything uh since it was working. But this was, you know, it fixed that zindex uh issue that we were having. So obviously this was getting used somehow. But I I actually do think I should just undo all of the stuff I did in here. I don't know. It did it. It is fixing the Z-index issue still, right? Let me let me take out this stuff I did down here. I think I accidentally set a debug point. Didn't realize it. All right. Okay. Yeah. So that that that actually is taking care of that z-index issue because it's going farther down in appbar.js. So the z-index thing was up here in line 54. Now we've we've made it all the way down to line 74 and now it's this pallet thing. All right, let me see. Um, I see unbear I see what you're saying. Shouldn't that be for material UI styles MUI theme provider? Let me see where I was having that at. Um, I think I pulled this I think I pulled this right from the docs. Let me double check. Yeah, Patrick said, "I feel like this beta is an alpha." Yeah, kind of regretting regretting the decision to do this. The good thing is, let me check my git log and see what I've actually done. I I don't know that I've actually committed any of this. So, we could just go back easily. Yeah. So, if this endeavor fails, uh it won't be hard to go back to where we were at. That's uh that's the beauty of Git and version control in general. So if you aren't using Git, this is a great reason to use Git because if you if you mess up your app just pretty much beyond repair, which is it's kind of what I think I've done just now. Um then uh then it can help you can just go back. Same thing. Oh, actually we've got Okay, so I had gone in here and messed with some stuff actually. Okay, so this makes at least this will help us narrow it down. So, it's it's able successfully, at least it was able to go into uh theme pallet background app bar, but then when it tried to do theme pallet get contrast text, it couldn't work. So, it it actually is importing. So, the the issue then would probably be within pallet.js. Expose H. Okay. So, this is where it is actually returning get contrast text and that is yeah that is the name of the function. Oh, okay. I now I'm seeing what you all were saying about pushing into another branch first. Okay. Um, let's see. So, is there is there like a shortcut way for me to switch to another branch and commit these or do I need to commit them to master and then uh push to another branch? And then just roll back the commits. Okay, David says there is a shortcut Okay. If anybody commit directly to branch. All right. Let me check. Should I commit directly to to the to another branch? Okay, cool. It comes up as one of the uh options in the Google search. All right, let me make a new branch. Check it out. And the changes will come with you any change. Then add the changes to the branch commit. Oh, okay. I had no idea that you could do this. All right, let me pull over. I'll I'm going to do this so everybody can see. Get Okay, so just so everybody knows what I'm doing, I'm on the master branch and I don't want to commit these changes to master branch. I've decided uh according to the advice of you all that I should commit these on a different branch and then push it up to GitHub and then that way everyone can see what's going on. So that's what I'm attempting to do. So I'm going to get checkout v and then uh what are we going to say? Um, material UI beta. Okay, cool. Awesome. Everything's right here. Great. I can't believe that made it through. I thought for sure I had done something that was going to cause an error. That's awesome. All right. Oops. Cool. All right. Now, it's on GitHub so you all can see the mess that I've made. That's what I get. All right, kids. What the heck? Okay, so this should be working cuz it's undone everything, but for some reason it's not. Um, There we go. So, I didn't uh I didn't install the right packages. So, that's that was the problem. All right. So, at least now I can show you show you this. The uh the highlighting of the page we're on is working. So I think this is what's um Yeah. Uh I think what I'll do for now maybe is uh give up on the idea of using uh the newest version. So the whole point of me wanting to use the beta version instead of the normal one is for the column class components. And I figured that that would save me time in the long run by having all those extra components and it would be worth the setup time and transferring it over. I think now that that does that's not true anymore. So the time I thought it would take to get this working was way less than what it's actually taking. And then that's no longer a good decision timewise. I think it would be faster for me to just make my own column classes and use them. I mean, I could potentially even try to model them after what's in the beta if I want to, but uh that's just too much. Also, I'm a little worried that if I run into errors, since it's so new, there's not going to be a whole lot of other people talking about those errors. All right, one has to go. See you later, one. Thanks for uh for joining us. What time is it now? Okay, it's about 3:30. So, uh, yeah, I think now's a good time for me to admit defeat for today and, uh, wrap things up. So, all in all, today did did get a lot of stuff done behind the scenes, uh, in terms of getting the pull requests in uh, and making some extra components and things. So, it wasn't, you know, in terms of trying to do the switch to the beta that that definitely was a failure. Uh, but did I did get some stuff done on the site and can always come back since we've, you know, saved those changes in another branch. It's entirely possible to come back to that at some point. Uh, but for right now, I'm not sure that's the best idea. So, this is going to be a very good lesson to me and maybe to someone else out there that it's probably better just to pick something and stick with it and not try to keep changing it. Uh because I've definitely wasted a lot of time. I don't want to say wasted. I mean, learned some stuff along the way, but uh could have been using that time to actually build this out. So, don't like to um I don't ever really like to back down from trying to figure something out, but at at some point there's just not enough time to figure some things out. Bill wrote, "React project 2 day 10 design decided for real this time." That actually does sound like something I would type. If you've ever seen my commit messages, uh, if I try to commit something and I accidentally don't commit what I wanted to, my next commit message is always do this thing for real this time. So, that is how I would say it. Uh, okay. So, I'm going to go back through the chat now and see if there's any questions that I missed. I'm sure there probably is because I was so focused on this Um, so if you have any questions, uh, put them in the live chat. Now, if you can't stick around for the chat, uh, Patrick's, if you can't stick around for the chat, uh, just direct message me on Twitter or, uh, put it in the comments uh, to this video and I'll get to him whenever I get a chance. Uh Patrick said, "Dude, uh commit amend." Yeah, I actually did do an amend um on a project I was working on on my lunch break. So I have done that before, but usually honestly usually I don't even care enough to do an amend uh because it's just me working on these projects. So, um, although now you all are working on them with me, but like in the past it's always been just me working on these projects and no one ever looked at my git commits. So, I get I was lazy about it and I said, I'll just do another commit. It'll be faster. So, I probably should start using amend more, but all right. So, let me go through the chat here. And um if if you got to leave now, uh thank you so much for watching. I'll be back tomorrow. All right. looking through actually not really a lot of questions so far in the chat. Oh, I see you all made some comments on um JSX uh comment tags being ugly. I agree. I mean, it's not really that big of a deal, I guess, but I do wish there were a simpler way and a nicer looking way to do comments. Uh so uh Jan asks, "Can you recommend me a good tool for debugging JS?" Um, that was asked a long time ago, so not sure if you're still around, but I mean Dev DevTools is pretty good. Chrome DevTools is good. Does anyone know of anything better than uh than Chrome DevTools that's uh easy to use? I mean, I assume you're talking, I guess, about, you know, regular JavaScript. I'm not sure how good uh DevTools is at debugging like Node or I don't know if you were trying to do something with React Native or something like that. Uh I'm sure maybe there's different debuggers for that. But if just talk about like normal JavaScript that most people write, uh I think DevTools is pretty good. I haven't really used much of anything else though, so maybe there's other things out there I just am not aware of. All All right. Uh, Nom says, "Hi everyone. I'm a new person. Uh, have gotten into programmer. I like working on backend or to be software engineer in general. Someone here could you suggest uh the programming language you like most?" Um, I think this is not going to be a surprise to anyone. Uh, I'm going to say JavaScript. Um so uh yeah it it didn't I guess if your question is simply what do you like the most then I would say JavaScript although I did enjoy uh Python when I did some stuff in Python just because of um like all the indentation and stuff it was really easy to do and you could actually program with Python on a phone it was easy with a phone keyboard Uh, normally programming on a phone keyboard is ridiculous because, you know, all the um brackets and everything that you need take forever to get to. Someone should make an app that's a phone keyboard for programmers and you could have custom keyboards depending on the language that you're using. That would be awesome. I would like that app. I mean, I I don't really plan on programming that much on my phone, if ever. But if there were a really good keyboard that made it easy, I would definitely like that cuz I'm sure there's some keys that you could just do without cuz you don't use it that often and you could replace it with uh brackets. Uh something that you use more anyway or maybe an app that's like an editor, a mobile editor. So, not only does it have the keyboard, but it also has all the features that you would have in like a code editor, the autocomplete and things like that. Anyway, if anybody wants to work on that project, if you open it up uh and and make a repo on GitHub, I'll I'll try to contribute to it. Okay, Nom says uh uh thanks for the suggestion. Uh not thanking me. This was earlier thanking Rohan for the suggestion of Rohan actually suggested Python as well. Says actually most people using Python tend to machine learning or data science. My favorite is creating apps actually. So nom if you're interested in creating apps um you could try to go with one of like the native app languages. So for iOS I think it's it's swift right uh and then for Android it's Java but now you can use cotlin which I don't know anything about cotlin but I'm pretty sure you can use it to make apps on uh Android. So if you wanted something else to make apps with, you could make apps with JavaScript using React Native. Uh so I guess it depends on what what you want to do. The good thing about doing it with JavaScript is that it would let you more easily make apps for iOS and Android. uh if you just focused on on one or the other then it would probably be a little bit harder to switch. That's my assumption. I don't really know because I haven't done it. But um anyway, that would be my advice. Either JavaScript with React Native or uh one of the native languages for iOS or Android. Wow. I didn't even see this. So, I I definitely didn't see this. So, sorry if you're still doing here, but it's free code camp said how much longer you'll be streaming. So, I'm assuming that was someone else logged in as free code camp while I'm streaming said that. I didn't even know you you could do that. Uh, but if you're still watching, uh, I want to wrap this up by 4:00. All right. So, I'm going to skip through. It looks like uh there's a lot of discussion about helping um Blake with uh his uh I guess his portfolio project. So, I'm going to skip through a bunch of that. Now, Bill said, "Drinking some G-Fuel. Thanks, Jesse, for bringing this into my life." Cool. I'm I'm glad you like the G-Fuel. So, I had I had mentioned before that I I drink G-Fuel and uh so Bill had asked me about it and I directed him to the the G-Fuel site. So, yeah, I I like it and I guess Bill likes it. So, I need to get like some affiliate program set up. So, I can get I can get you all a discount uh if you use my code or something like that. I think I need a lot more people watching me before I would uh they would want me to be an affiliate though. Okay, almost to the bottom of the live chat. Uh Jordan asks any good videos on Git. Um and Sarah said Udacity has some Git vid. Yeah, actually I really like the Udacity uh course on Git. Um that was really good. I am I I'm pretty sure uh Learn Code Academy that that's the YouTube channel Learn Code Academy has some videos on Git. Um there's videos on Git on for free code camp. Uh so uh on this channel. Yeah. So between those you you can get a pretty good idea about how to use Git. Okay, in regard to the JavaScript debugging question from a few minutes ago, uh Jordan says Firebug uh works as well. And David says, "Visual Studio Code has built-in JavaScript debugging that can be used in the editor." Uh which is nice. So that's cool. I didn't uh didn't realize that. So those are some other options. Uh John Hansen has a question. Is it better to JSlint for ES6 and JSX in the build or in the Atom editor? Uh it's probably you could probably do both. If you if you want to know what's better, probably probably both. Uh, and then that way, um, having it done in the build, uh, or on commit would enforce it for other people working on the project, but then you would have immediate feedback of how it's supposed to look in your browser or in your editor if you had the uh, editor plugin. So, uh, I would say if you're only going to do one, I think doing it on on commit or on build is the best if you can only have one. But if you can have both then that would be better. Uh Sarah says that Firefox development browser is pretty good. And it looks like David uh gave Jordan pretty much uh the same answer in terms of both or better uh to have uh in terms of linting ES6 and Rohan said it as well. So I should have read down farther. Okay, John said, "Uh, thanks for the answer." You're welcome. Sebastian asked if I fixed the issue with the theme. Uh, no, no, definitely didn't fix it. So, there's a there is a branch now on GitHub that has the mess that I made on it. So, if anybody really wants to check it out, you can. But otherwise, I think I'm just going to leave it alone for now and uh just continue developing with what we had before that actually works on the master branch. So, all right. Well, I've gotten through uh everything in the live chat. If I missed your question, uh just send it to me on Twitter, put it in the comments below. Uh thanks so much everyone for all the help. Uh really sorry I didn't we didn't actually accomplish anything. Uh so it's a lot better I think when we get something accomplished because like we can feel good about that. But we did work through a lot of stuff even though it didn't end you know finally in you know us solving the big issues. But um anyway it was cool. We got to dig into a lot of um a lot a lot of the node modules and uh you know a lot of the code base for material uh UI the beta version. So that was kind of cool to see how it all works. So maybe it was useful a bit and got to do some stuff with Git that I'd never done before. Uh so not bad. And uh it was good hanging out with all of you uh and talking with all of you. So I will be back tomorrow. Should be at the normal time, 2:00 p.m. Eastern time. And um have a great day. I'll see you all tomorrow.