React Project 2 Day 22 - Live Coding with Jesse

Key Takeaways

hey everybody its Jesse and I hope everyone had a good weekend today I'm streaming a little bit earlier than normal to an hour earlier because the Eclipse is today and so around like 2:30 I think there's going to be a partial eclipse where I am so I guess like if I would have drove maybe five or six hours south west of where I am I could have seen a full Eclipse I thought about it but I didn't decided not to do it so today I think we're just gonna work on styling so this is this is where the projects at right now basically all of the content that was that's on the current app is here it's it's in our new react version so we have that all in there we have the the forms we have two forms one of the form is is working we just I don't have all the information to finish that form yet we have another form that we just we hadn't hooked up yet in our our server to be able to send the data where we needed to go that's not really going to be a big deal since we've already done it with one form we just do it again for the other one yes there's just not there's not really any major things left to do it's just kind of fine-tuning and testing and then getting feedback from the rest of my department and new content from the rest of my department because I think I've talked to a few people about it and I think that we're gonna add some sections and change the language in some of the sections so I obviously can't do that and so I know for sure what content is needed so I'm gonna do my best to get that going and make sure to remind everyone to think about what they want on here and get something to me you know sooner rather than later so I was thinking I'd start out maybe on the homepage and making things look a little bit nicer so this is gonna be a good stream for newer people maybe people who are just starting out because it's going to be more like CSS not not really a lot of you know we're not really gonna work on the server not really a lot of things that are getting like really into react and it'll be a somewhat short stream I want to get things done I guess within an hour so let me see actually let me know let me know if everything's all right with the stream we have a lot fewer of yours than normal so that's kind of odd I wonder the last time this happened something something happened with the YouTube notifications and a lot of people didn't get them so I know there's a delay so I'll wait I'll wait uh maybe 30 seconds to see if anybody responds I want to make sure I'm not didn't do something wrong setting up the video okay cool y-yes I got a response everything seems alright okay it's possible that maybe it wasn't something wrong with the YouTube notifications again but I'm just I'm gonna get started and if people join great if not that's not a problem either I got to do my work either way so let me let me see I'm kind of thinking it might be nice to add in so we have a new logo that's not being used in very many places right now it would probably be nice to put it here so that everybody would see what with the new web logo is you know eventually that's going to be used on all the sites also I'd like to try changing this a bit because we're going with a different look in some of our projects so I'm gonna work on this for now probably need we talked about before doing something here to make these look a bit nicer as well oh I do want to thank thank Matt for his pull request so a lot of good stuff in the pull request you can check it out it was poor request 80 or 48 there's just so much stuff I could spend like half hour going over all the stuff so I'm not going to but basically fix them some like little errors that were happening and also made a lot of components into stateless functional components any components that could be made into them so really really cool and I really appreciate it I mean it was it was a lot of work all of our content I could probably the biggest thing that you'll notice if you're working on this on this repo is that almost all of the content now is in data in these data files and is pulled in so the components themselves look a lot cleaner a breakpoint said Eclipse cast the question mark yeah I thought about trying to do something I had on maybe I could do one on my my Instagram stream stream with the Eclipse Eclipse it looks like that might be cool I don't have any of those special glasses though that they say you need or else you'll damage your eyes so hopefully I'll figure something out and I won't go blind all right so I'm gonna bring over dev tools we're going to be working mostly in dev tools and then once we get it you know looking about how we want it then I'll I'll switch over and put that in an actual sass file so let's take a look at all right structure here so right now we have the background color is green I want to change that and let's make it white and I wanted to set a order bottom and I'm gonna do let's see I'm gonna try three pixels solid and I want it to be a gold I'm gonna have to I thought I had the style guide open somewhere so I could grab that color I used to have some of the hex colors memorized for the university color palette because I use them so much but then when I started using sass variables instead I didn't have to know the hex colors and I forgot them all I do remember the green still but I forgot all the rest of them alright so on my other screen I'm just gonna find this hex code and copy it over oops up those the wrong one I got the yellow you need the gold area okay yeah that looks about like what we were going with we need to make this green why don't I even have the color here that's that was odd I wonder if I did I put that color in or was that there in the framework because anyway normally in an SVG you don't have to worry about color it's fill that you want so I don't I don't really remember if if I put that on there before it's possible but I did accidentally okay now we have the words Resource Center which I guess that will get left that yeah that'll get left and I think I'll leave the words Resource Center in and let's also make that this green alright now we want to grab the the logo which let me find the logo also let me start my Pomodoro timer it's I don't think I've actually used this logo anywhere yet so I have to take a second to find it maybe I think I actually I had an SVG version of it that I was working on and sketch yes it is so you can check it out here's the logo this is actually my edited version of the logo so it had a much bigger border radius that I didn't like so I Shrunk the border radius under two pixels and yet so we'll see so I I was trying to get officially get the border radius changed and it never really I didn't really push it and we didn't come to a decision about it so I think I'm gonna use this one and just see what see what everyone thinks if anyone even notices and yeah I mean I may have to change it or this may be the beginning of getting it changed it's still at a point now where we haven't used this logo enough that you know we need to keep it consistent it's definitely early on so we could change things at least I think we could change things before it's official but anyway yeah this is the new the new web version of the logo the main benefit to this as opposed to the other one is all our other logos actually spelled out the words Franciscan University of Steubenville and to do that you have to small font so the logo had to be quite large to make the font readable so then you were you were limited and with where you could put the logo it had to be in a spot that was big enough so like we could never use the real logo in a header that was this short because you wouldn't be able to read the text so it's definitely some benefits to this and really for this university probably the iconic thing is this here people know this so as long as that's there you know it doesn't necessarily matter as much about whatever's after that you know people who know the university will recognize that let's see so I'm gonna grab I don't know where I saved this that I'll just export it again if you're not familiar with this program and I'm using it's called sketch it's it's like a design program so I don't I'm not really great with Photoshop so this is what I use for the small amount of design work like this that I do occasionally if I have a client and I need to do some mock-ups I will use cap sketch for that it's Mac only and it's not bad I think it was about a hundred dollars and that's that's not a like recurring cost just hundred always flat fee and then you have sketch you have all the updates and everything so I like it although I haven't really tried a lot of other programs so maybe there's something better out there but this is as worked for me for what I need to use it and obviously there we go export so I don't use this often enough to be really good with it SVG yep great it looks like I already have it exported where is this folder I will just search for it then all right whoa all right so this is the the code I guess for the the mark-up for the SVG you see I've done nothing to to shrink this down so I'm sure there's stuff that could be done for now I just want to see how it looks so we're gonna use this let's so we'll just bring this in do we have I don't know that we have a place where we're putting images do we know we don't okay so let me make a folder for images actually I'm just gonna make a new file okay set in there we go see I can't remember where I have what component I have the code for the Navin is it inside now all right it's it it's inside Navi is a slightly misleading maybe I shouldn't have named it that okay alright so I am using the component for material UI so I'm assuming that there's a way to put a logo in maybe maybe this will work let's see alright let's see what that does not not hopeful that that will work oh no we lost all our styles I never I forgot to take him out of dev tools oh well we didn't really do that much so won't really be a problem but whatever I just did here didn't do anything so let's let's put in some styles for this before we before we do anything else there we go and I'm gonna put the styles for this and app because this is a standard component it'll be on every single page I guess I could make something for side nav but I think this is OK alright so I just need to know what these the names are here it looks like it's not there's no class names on it so maybe I'll have to author you either give it a class name or I think I'll give it a class name I'm sure I could pass in some styles using you know the way set out here in material UI but I'd rather work in sass and apply the Styles like that okay yeah so that's pretty standard class name works most of the time the only time class name hasn't worked for me is if like I've kind of extended a component like in that generic component card I can't just put a class name right on the generic component element and have it work okay we're just gonna give a class name of app bar and then we should be able to go with a poor background color white water bottom solid let me grab that color and what else to be let's just make sure that works first okay we did get the border on the bottom but maybe for some reason you know what these are all uh I don't know I didn't see this before these are all in line so to override this I'm either gonna have to use important or I'll have to change change these let me go back here okay I can override with the style yeah I'll probably I guess that's better than using important in my CSS okay that works and what I'm not sure about is so these interior sections here also have inline styles so I could try to do something like this but I don't think it'll work see it doesn't go down to this so I'm not so I may have to just use important on there to get that to work so since I'm using sass instead of regular CSS I can nest I can nest these which is basically same as if I were to type out a bar and then space h1 so if you're not familiar with sass the syntax probably looks a little weird but that's all that's going on here I'm just gonna double check just to make sure I yeah like I thought it wouldn't need add that important in there all right so normally it's not a great idea to use important because now at any point that guy I can't really override that even with inline Styles so like once you do that you kind of break the cascading nature of cascading style sheets for that element at least but in this case I could do this right now and get it to work and I know I'm never gonna want this to change for that element so I'm okay with that or I could try to read documentation on material UI more and figure out some other way to do it so it's possible later on if I maybe I'll figure it out and I can change this but for now this is the easiest way to do it and I know it will work but like I said you don't want to just use this all the time sometimes it's really easy and quick to do it but it will make maintaining things later on harder so use it sparingly I guess that's that's what I try to use it sparingly I probably use it too much as it is the alright so what it looks like we messed up I'm assuming when I did this that's why when I messed up the icon there yeah so now we can see let's target that SVG and we want that the fill you want the fill also to be oops I know I'm typing up the hex codes here I don't really need to I could save him his variables but I just kind of wanted to see how it was going oh did that now that didn't work oops forgot the important there we go still alright so that's about where we were before I accidentally I got rid of all the stuff we've done in dev tools so now the next step let me check my Pomodoro timer okay next step is get that logo in there and for that maybe I'll check this again actually let me okay I never really checked to see what was happening with this so I want to check because it's possible that this I guess put this element in there and the path is just wrong I'm not really sure what path I should use for this I knew with next J asked what the path was supposed to be but I'm not really sure what it's supposed to be with create react app so let's check that out and it looks like Oh awesome so we did get it is there I mean we don't I want to find some other way to put it in here because I need that button as well but this is what we wanted I think we just probably don't have the right path hmm okay let's see let me see I'm gonna check in the live chat see if anybody the users create react app knows what so if anybody uses create react app and just knows offhand what the pass should be let me know otherwise I'm just gonna play around with it a little bit and see if I could figure it out let me see just okay my timer just went off so I did find something to try for the the image but I'm going to take five minute break to go to the live chat probably won't need all five minutes because there's not a lot going on in the live chat today but hey everybody that's that's watching and it's in the chat no cool Patrick Patrick has some eclipses info in the live chat oh cool so I mentioned earlier that I don't have Eclipse glasses and Patrick linked some directions to making a an eclipse if you were so thank you I said you just need two pieces of paper and a thumbtack detect to make a pinhole cool oh sorry so patrick said sketch went to a yearly fee I did not know that so I'm sorry for misinforming you all so I guess whenever I got it there was not a yearly fee so maybe maybe I'm just allowed to have it still since I got in earlier oh cool patch you know what Patrick that's right I you're in Tennessee right so you're right in the path I was I was thinking about going driving down to Tennessee or flying down to Tennessee so my wife has family there and I thought that would be really cool I could go down there I could just you know stay with her family and see the Eclipse but it seemed like I don't know it's it's seemed like it would be no other thing to do to take a day off work and just to go down and Washington cliffs for a few minutes come back oh cool Gavin said I should take well or probably Patrick will have the better view so Patrick should Gavin said take some pics and vids and send them to slag so if I'll try to I'll definitely try take some video and pictures of it but Patrick's gonna have the best the best view out of anyone so I think where I'm at they said it was going to be like 80% obscured oh so the Sun will be 80% obscured by the moon which I guess is not bad but it's definitely not a fool full of cliffs okay so patrick said he doesn't have a solar filter for the camera so so you need a filter then if if I tried to take a video of this with my phone am I going to break my phone's camera or what our cool Gavin said he's totally up to date with the videos that's awesome that's that's a really impressive who's with quite a few videos it's really cool oh wow so Brandon thanks for that info so Brandon says not to take pictures and videos because I I will break the phone all rohan says the phone camera should be okay without without filters says it's the larger sensors that can be damaged but patrick says that actually we saw a video where the sensor on a camera got melted yeah we'll see maybe I'll rethink this okay cool so my my time is up so I'm gonna get back to work on this so I'm gonna try something and this is I don't think I've ever done anything this way before but it looks pretty cool so let me try this so I'm going to I mean it makes a lot of sense now that I saw it but I just had not thought of it at all so I'm going to import logo from shoot now how am i darkness here we go now I'm not sure if this will work say I didn't scroll down and the there's an issue and create reactive about this so after scrolling down I'm not sure if this will work but let's let's try it and see if I can import since what are there to be liked whereas we can get this to it no cure so uh alright so I need to do this I just look back to the live chat and I'll just mention this since we were talking about it a minute ago but breakpoint said I took pics with my phone of the Sun no issues now Brandon Brandon says I'm a photographer don't risk it actually the guy that works in the office next to me is a photographer a really good photographer so I will ask him just to be sure he actually has like proper lenses or something for it so actually if he takes good pictures I will have him send me the pictures and then I will post the pictures I won't try to mess up my my phone I'd rather not I bought I bought like the new pixel when it came out and that's like the most I've ever spent on a phone so I wanted to last longer than a year at least that's it hasn't been a year yet alright so back to this why can't I I have to be missing something just really simple there's this just can't be this can't be that difficult alright somebody said they did it like this and on stackoverflow it works all right still not alright let's try the documentation for create react app which is what I should have looked first all right so from what I'm seeing on the documentation it looks like this should work right so okay I can't do with sgv SVG for house so let's see what to do with SVG actually I have an idea let's do it like this I'm gonna make it's you're gonna grab just some of this markup to make things easier and so my idea is I'm just going to put this SVG in here yeah so I'm gonna grab the SVG I'm gonna take this out of here so I'm think I need that probably gonna have to change something somewhere I'll be surprised if all of these attributes work and react but we'll see what the error message says we can get rid of this and then let's just change this to and let's see you know how we can bring in and for it oops isn't that what I wanted to do click the wrong thing there we go side now that's I wanted just go go and then here we're gonna put let's try that okay cool let's get rid of just get rid of this I took it out okay oops Rapha this is a function hmm it's just all right so I'm gonna I'm not sure what this error is telling me I'm maybe you can't just put an SVG in like that let me get rid of some stuff see mm yeah I still get the same error okay I definitely did not think adding the logo would be this difficult I've added SVG's and but they view in small SVG so not really complicated so I'm not sure I mean I guess there's something in here that react is not like oh why am i checking that it's giving me the same error here okay I was checking the wrong page okay hey Sebastian Sebastian is asking where I'm adding the logo so I'm trying to add the logo in maybe that's let's let's just test this first without trying to pass this to another component just take this let's just shut he uses somewhere else oops no it's not the right path for this one huh okay so still having the same same issue all right so that's that's not gonna work out there I guess I could not use the SVG version and just convert it I'd really rather not do that didn't I wonder if I could wrap this in this SVG icon if that would make a difference all right so this will probably be my last attempt since I had a a to finish this this stream soon I guess yeah same thing alright well I will try to missing and wait the SVG name is wrong all right so I just checked I knew I just checked the live chat and I think I'm missing a nose somewhere FUS log all right let me where am I missing this if you say oh that's where I'm missing it huh Wow okay if this works now all right let's let's take it out of here and let's go with what I was originally gonna do that would be it's not gonna import that here but I'm gonna try I see their worries oops that's not kind of ha and okay wow I can't believe well you know what it probably still wouldn't worked even a photo caught the type because this this I did not have either this required so thanks Matt for giving me the code to do this require in line like that and thank you also Joseph for catching that missing oh I don't know how you saw that this must be so tiny on your screen and actually I just now realized that the font was a bit smaller than I normally do for a stream so I apologize for that Wow okay we get the logo on there a lot bigger than I want but we can sort that out at a different time also we need to keep the side nav icon in there as well so got a little bit of a work to do for this but Wow I can't believe it took me that long and it was pretty much just mostly due to a typo oh cool just zoomed awesome okay Joseph said the import on the top will also work so that's cool good to know so maybe it it probably then would have worked had I been able to spell anyway thanks everybody I'm gonna wrap things up and and get ready to watch this Eclipse so hopefully I'll have my vision and I won't ruin my my phone's camera so I think I'll I don't I don't know how I'm gonna look at it maybe I'm not I'm just gonna look around and not at the Eclipse but but hopefully my my colleague will have some really good photos from his camera and I can share them with you all on the select channel so I'll be back tomorrow and hopefully tomorrow won't have such a silly error as a typo but that happens yeah so I'll probably do some work this hopefully this will look a lot nicer by the next stream and thank you for watching also let me know if something went wrong with the YouTube notifications because it was kind of the video was kind of slow to pick up viewers so I know I did start it early so that could be it but I just want to know maybe I did something wrong setting up the YouTube video so just let me know but I'll see y'all tomorrow thank you so much for watching and for helping me out and the live chat really appreciate that and have a great day