Live CSS Styling (P5D67) - Live Coding with Jesse

Key Takeaways

hey everyone welcome to live coding with Jessie I'm Jessie and I apologize for being 7 minutes late I I had so many things happen all at once right when I was going to start so really sorry it got a couple emails from work and had to respond to those and I've I'm getting errors when I try to commit and when I tried to start the stream the button to start the stream was was like grayed out and I I couldn't get it to start it turns out I just had to refresh the page and it worked but anyway I'm sorry that was really late apologies for that but I was kind of freaking out beforehand because my the project wouldn't wouldn't run at all so I mean that was that was a big deal because we wouldn't really have much of a show if that was the case all right let me check I'm gonna check the live chat really quick because there's a lot in there okay all right so for those of you who haven't seen this show before I'm gonna do some coding and then I'm gonna answer some questions and then do coding and then answer some questions and I'll break it up with a timer so I'm gonna do a 25 minute timer which I'm going to start now and I think maybe I should move I'm gonna move the timer to one of my other screens and we'll just leave the code on this screen let me make this bigger so y'all can see today's livestream is only gonna be around an hour long which is pretty close to what our normal is but I do have to go somewhere shortly after that today so gotta make sure I don't lose track of time all right so I think that should be big enough for everyone to see just to show you what what has gone on and what some of the errors were I upgraded to next version 6 I believe it's 6.0 1 is the official version so if anybody is upgrading your react or your next projects to 6 watch out for this it may not affect all of you but if you have a babel RC file and you have these presets the presets need to be arrays so what I had was I had just strings and not arrays and it would not start the server at all it would try to start and then it would exit so that would my issue was simply IDs just needed to be a race so if you're having some similar issues try putting all your values for your presets and your babel others RC file into make him erase now I'm also getting another error so I thought that fixed the problem but when I wanted to commit really quickly before the stream so that you all didn't get the same error if you tried to load this project but my tests failed and I think it's it's a similar issue so I didn't get to completely fix this before I started the stream but it says it couldn't find preset and relative to the directory users Jessie our projects trances can react so this is why I'm assuming that we we have this file here we have tests we have presets and so I'm wondering if this is also an issue and we're gonna try we need to troubleshoot this first before we move on otherwise I'm just gonna push this same error up to github and I don't want to do that I'd rather fix it so this is gonna be CSS hopefully we can fix this in a minute or two if I can't fix it in a minute - I'll just hold off and I won't commit anything and I'll fix it later and then commit all my stuff later but if we can fix it quickly I think it'll be better more rides if I never listen to different rate all right so it's looking for before there all right so let's see Oh quick it's yeah okay so Harshit said that he had the same issue all right awesome hard let me check out says check out the babel RC in JSA f so let's go let me pull over a browser window and we'll do this together so some of you I'm sure have heard me talk about this project before but Carson and I and Niki JavaScript er have been working on a side project called JavaScript AF so this is where we're gonna go right now to get the fix for our issue so I need to go into the front-end correct and if you check this out and github before check it out again and it's a lot easier to contribute now it's all in one repo the backend the front-end are no longer separated all right let me see the difference here let's get rid of that glad I don't have to go through that I wasn't looking forward to it okay let's copy make sure yes just don't copy style confinement stuff okay yeah I didn't yeah I didn't get the style component stuff so whoops and I need one more of those I believe am I good maybe I didn't need one more all right I was kind of one two three four five she goes here and then six go slowly up there seven all right yeah that should work okay let's start that and let's rerun this so I'm gonna do yarn CM and then I'm gonna give it the retry flag hopefully this will work and then we can get started on our CSS so if you were here for just the CSS stuff sorry for the wait it looks like it's working now and it's gonna happen no it still failed I hopefully I didn't get the same error as for finding invalid property of the fault yes all right did I mess it up mmm alright let me verify that this actually is still loading the page and if it is I think we'll just move on to that localhost let's go all right so if this is still loading I think we may just go on to the CSS okay all right so I'll work on that later on if anybody is having similar problems and is really interested on how we fix that just ask me later on and hopefully I'll have that fixed later today okay so here's the page we're gonna go to and we were working on this a little yesterday but we're gonna work on it from a different angle we're gonna do the CSS we were doing it JavaScript and data stuff yesterday so today we'll work on the CSS so this would be a good stream if you're kind of new maybe you're not that great with react or JavaScript but you do know CSS or you're at least learning it then we can see I think I had its didn't have education faculty I don't know if I have this data linked up we'll find out in a second if not I can switch to a different Department yep don't have it all right so let's go with oh I know I know who's English English faculty there we are me too okay harsh it says I need two new dependencies Babel core and Babel just wish the versions in there okay I'll grab those in a little bit okay so this is the page as it is right now it doesn't look great and so just a quick recap of how we got to this point we created some cards we used some pre-made components and then added our own stuff as well and then we're just pulling some data using graph QL we're pulling some data from a wordpress installation and we're getting a lot of markup and then we use some regular expressions to pull out the pieces of the markup that we wanted and this is what we have and we have a couple problems here so the big problem is we have these images and they're obviously different shapes and sizes so what we need to do is create a way to display this that will look good no matter what shape and size image we have okay the hard should I see I see you have the fix I just want to get do a little CSS stuff because I I advertise the stream as CSS so I don't want to get too far off right now maybe I'll try it a little later on in the stream I'll do the fix all right so here's what I'm thinking we can maybe actually you know what we had this issue before we had this issue on a different project let's take a look at a different UI we created a little less than than a year ago so let's go here to khattak addicts comm and this was our first project we did on the stream we had the same issue with really similar components similar similar data and so this is what we had we tried to go with a cart approach but because we have different size and shapes in terms of images it wouldn't work so we ended up going with these rows instead and also we wanted to make sure that all of our text was aligned properly so we obviously couldn't put the images on this side we had to move them that this side I think this is probably the model that we ought to go with so what we'll do is we're gonna we're gonna switch around the mark up a little bit to make it easier to apply our styles but we're basically gonna follow this and we may even come in and grab some styles that we used here so maybe like this little line here might not be a bad idea to just pull the Styles instead of trying to recreate it but unless anyone has objections I think this is the route that that we're gonna go with so since we already did all the work to do this you know what why not use that as the basis for what we're gonna do here it'll be nice and create some consistency between two different sites that are both University sites for Franciscan University so always good that provide a familiar user experience across you you know different sites okay so let's look at the actual file the mark-up for this to see what we need to change because I think this is gonna take a bit more than just CSS we'll have to move around some things in the markup so I'm gonna leave these pages up I'm not gonna close them out since we'll probably be editing them later on to fix our error but right now let's go to I thought I had these pages up maybe I don't [Music] faculty list that's not it I just open it up here no my my node modules folder got open that's the worst and you have to scroll for three days um okay where are my components that's what we want to be components and here's our new component that we've created just in the last few days and that's that list card item and if we turn this into a list row item we'll probably end up changing the name I'm just gonna leave it for now but here's what we'll do right off the bat let's check out no this isn't it faculty list item that's what it is it wasn't Lascar died in this faculty list items so sorry about that let's see okay yeah this looks way more familiar I was scrolling through that component like I don't remember any of this from from yesterday all right so we're not gonna have a card anymore so let's get rid of what we're doing here in terms of setting up a card and let's switch it out and for now let's just add divs so I'm just gonna select whoa didn't realize there wasn't oh I see what it is let's add some divs I need to go way up here to card and change this to do and let's make sure we do the same here we'll do do alright so this will be our outermost container and then we have some things in here like card actions I'm actually really interested to see what things look like if we just remove the outer card and we leave the other things in there oops I capitalized Dave I don't know what I was thinking and so we don't need card so let's just import card actions apart content so let's just see what it does we should have gotten Auto refresh it looks like there we are nice okay this is what I was hoping would happen so we've actually kept a lot of the styles here like for for the button here that's that's exactly what I wanted so that's good news you know one thing that we're not getting though that we did get before is we had a we had more info showing up let's see why we're not getting that info also I don't know if you notice this I installed we had a talk yesterday about how my imports are a mess and so I went ahead and did a setting so I upgraded my Visual Studio code and I notice there is a new setting to where you could if you turned it on it would auto organize all your imports the only problem is that it also adds semicolons which we have set for there not to be semicolons so I I don't know so my in court it seems like my imports can either be organized with semicolons or not organized without them I'm hoping that it'll just get Auto formatted once it gets committed and then it'll be okay all right so why are we busy are we missing some of this yeah we should we should be getting the title right in there and for some reason we're not I mean we're still getting the image obviously unless for some reason it's the font is white and I just can't see it would be odd but I guess it's worth checking okay it it looks like yeah we're not getting me yeah it should be here should be in this pizza we're not getting sorry that the dev tools font is probably insanely small not string that up again okay so here where there should be content there's not all right let's play around with this just for a second to see why this isn't coming in still nothing okay there we are so we got something this time why is there so much going on this time all right so now let me try to put this back in because this should be what we want basically where the title gives us an array of two values and we don't want to we want one okay great that works not really sure what was going on there but this gives us what we want and it gives us what we need to continue on with our styling so in terms of markup let's let's try to make this a little bit easier for to handle with our CSS so let's grab this div that is our image and let's throw it down here below our card actions it's this word now we want it down here so we're gonna throw it down below here and I'm gonna get rid of this we were keeping it to test it out but now that we're not gonna use a card I don't think we will use it that'll just clean up our component a bit we have about two more minutes before I do some questions from the live chat so hang in there if you have some questions and okay there we are so now we have our images below which in in terms of the flow of you know the this site is will obviously be a left to right site that makes more sense with the markup okay now let's get into some of the styling that we could do we have a few options we could style you know completely custom with CSS well we could maybe take advantage of some of things we have available to us with material you I I think I want to just do some regular CSS styles though so what we'll do is we will we already have some class here class of card on everything and did we did we wrap this in anything else we did not great but what we did do in our faculty list component where we're pulling this in oops that's our faculty this query let's get rid of that for now here's our faculty list component what we did was we put our all our faculty stuff in this masonry layout this masonry flat with the grid so we want to you know stop doing that and we'll keep this container we'll take out masonry right and then for our grid we can keep the grid and that won't really be an issue if we want but what we need I guess we need a grid container what we need to do is get rid of this and let's let's bring back and just call this but let's say that see what happens I think we're gonna need a container though for a grid also we're gonna get it's not gonna like that we took out masonry oh maybe it just automatically took it out for me awesome okay so now you see these all are a hundred percent of the width of the container so that's what we want it these are now rows okay so that's a that's a good first step next step after we take a little break for questions is going to be getting these images over here and getting them to be not quite so large once we get those over there then we can work on how to display this information and and the most attractive way possible so let me I guess I don't have to do anything on the screen let me go over to the chat and I'm gonna start up at the top I'm gonna scroll through look for any questions I'm gonna set a five-minute timer and we'll see how much I can get through five minutes and I need to make sure I keep an eye on the clock I have my phone here okay it's 11:35 my time 11:35 a.m. so gotta make sure I don't go really don't go past noon too much so so what as it was a feast for days asked what is the age of consent for CSS in the US is this obviously a joke but that's that's good one see so see a lot of you saying hello hey everybody we have someone I is it's aya Z if I'm mispronouncing that please let me know it says hi I'm new welcome thanks for watching and thanks for letting me know you're here in the chat is si I don't know something about coding okay so if you're beginner feel free to ask questions I'll do my best to answer them and explain what I'm doing there's a lot of other people in the chat that are very helpful lord dragon as how often does this happen and I'm assuming Lord dragons talking about the errors and things that were happening yeah it's I don't know I mean errors like that I mean that was pretty serious the whole site was like wouldn't start that's not that often but you know things do mess up so almost all these things don't go exactly according to plan so these these are I will say these are real projects that I'm doing for my employer so I don't rehearse any of this so when I mess up we fix it together here on the stream and I I mess up a lot so that's that's what you get here so it's not exactly a well planned out tutorial but it is an authentic glimpse into what I do as a my titles front-end developer but we do back in at times as well let's see alright Phoenix says the notification from YouTube came on time today which is awesome yesterday had an issue where Phoenix didn't get the notification or didn't get it till really late so I'm glad you got it I asked us how can I get started with coding I as I think if you go to free code camp org and go through some of those exercises that's a really easy way to get started it's easy in terms of setup you just need a browser and an internet connection and you could start there so if you just work your way through some of those challenges and free code camp and then their lessons I think that'll give you an idea for you know maybe do you like it this is something you want to pursue further and then you know you can keep going further on and progress like that yeah John says another bit of advice to new people put your seat belt on it's a ride a knowledge ride I like that one uh JJ solo says looks like a hacker and not a web coder haha I didn't realize it looked like a hacker so I don't know if that's a compliment or not but let's take it as a compliment so evidently I look like a really awesome hacker Christian asks what is the difference between material UI and bootstrap yet so hardship gives an answer here material UI is based on Google's material design framework and material UI also is designed to work in with react components so bootstrap on the other hand is its own as don't style and it's also designed to work on almost say like let's say sites websites that don't have a particular JavaScript framework it or library like angular react to you so a bootstrap is easier to use for just a plain JavaScript HTML CSS site although I do believe there are versions out there that can be used with things like angular and react alright so I didn't get to all the questions but I will after our next session is over or I will at least try to get to everything right now I just started another 25-minute Pomodoro session we're gonna get back to the code and let's see oh did you all y'all heard the alarm from oh I forgot my my laptop speakers must still be on and my headphones which are normally in my laptop or in my phone so that I don't waste any computing power on running Spotify alright so our next step then is to display this on this side over here so let's just do a little bit of work right here in dev tools so I think it's it's always very useful to do working dev tools by the way if you haven't already done so it might not be a bad idea to check out the the latest in what's available in dev tools so at one of the sessions at the Google i/o conference they did a on the new stuff in in dev tools so you that's on the Google Developers YouTube channel so check that out definitely worthwhile a lot of cool tools so I'm still not familiar enough with them to use them yet but I think I might need to watch the talk again in practice but definitely some good stuff so let's see what we can do here and here's what I'm gonna try first let's give let's let's try using a bit of flexbox here okay unfortunately well are we already using flex nice let's give it a display flex okay and then let's set my on the top oops I don't want to be I'm one step up from where I want to be I actually want to be down here so we'll give this a display flex hey already looking like a little better here so we'll give this a display flex and let's see okay so by default let's see flex direction let's just go these are the options we have we could do a column which is what we had before we don't want call them reverse which flips the site flips the content and then we could GU row or row reverse so we want row which we'd defaulted to anyway so we're gonna go with that but that just gives you an idea of your options and let's see just justified content here's some some other options we can go with so you can see we can Center our content and flex it so it's it's not actually that great to use right now because there's not a whole lot of space right but what what I would like to do is set things to the left okay there'll be a line left and then let's go down to this and for this one let's say justify self and we'll go rights that should have done that maybe there's just not enough space not yeah it should have adjusted interesting I got a I shouldn't have to do this yeah i what am I doing wrong just fat content okay the first two times inside the same diff okay so John's saying the first two need to be inside the same div all right so that's messing things up alright let's go ahead and adjust the mark-up a bit so that we can get a better result and then also let's do the the mark-up first so down here within our faculty list item component which now or is gonna be a row basically we need to say have our card actions and our card content in the same div so let's just create a div here and class name equals classes that's Louis we'll call it text content and that'll give us something to use as a class here and when we need it down here yeah this is where we need our end all right is that it let's see I think so alright let's go back over here we can see already this is aligning much more nicely for us so now we only have two kind of sub groupings here within our list actually what's this happen there we are there's the div um I'm looking at so within this div we only have two sections two divs now better direct children and that's better that's what we want so let's go back to here to this one and so if you hear the vibrating noise I'm getting a phone call but I don't know who it is I'm not gonna answer it so what I want to do justify self and I wanted to see if that would work it looks like it's still not working so it looks like John had some other things see what he said between Oh excellent John you are awesome so we can use this justify content space between to basically get the the effect we want so let's take what we've done here and apply it in our actual project and let's let's see how it looks on all of these next step after that we'll be tackling you know these images we need to make a the maximum height to the images the width is gonna be okay and as long as it's not outrageous you know any width will do but we do need a maximum height so let's go ahead and do that I think the way let's see display for X sticks are just like content space between okay I can remember that so what did we name this outer div I believe our classes card yeah which we had yes with 100% on so now with our with 100% we're gonna add this now I do have to say this is gonna look a little bit different than normal CSS so I had anticipated we would be using a regular stylesheet but after looking at the markup and working with it I think this will be the better way to go so this is actually using CSS as JavaScript essentially this is JavaScript object but in terms of what we call things and the values we give them it's gonna be pretty much the same as normal CSS so let's go with display flex and we had what was it I already forgot it I thought I could remember it Oh flex direction Rho which we don't need because it's gonna be there by default so let's leave that out and then we need justify content C and we're gonna camel case because we're in JavaScript land right now and in hyphens mean minus signs and we're gonna do the space between we can leave the hyphen in but in this case because we put it in single quotes which makes it a string in so that's okay all right so we have that and then if you remember we made another div and we called that it was text content right so we're gonna say for our text content actually do we need to do anything with that no we don't and we don't need that okay great so we actually don't need this which is wonderful less whoops I got rid of the comma that I needed let's save that and then I'm gonna do a hard refresh or just a fresh and that'll just get rid of anything that we had left over here in chrome so that it doesn't interfere and we know for sure that this is our stuff that we put in our project and not our test stuff in chrome and nice one thing I don't understand that why this is happening but we keep getting alternate order for this data so I think maybe at the later time what I'm gonna have to address that but not bad not bad so let's let's shrink these down let's at least see what what the height is for these looks like 300 pixels so let's see if we put a max height on these images let's see what we get so once again we'll do it in dev tools first we may even be able to do it on the detail image you let's let's do that since we can grab it from from the tag name and apply it everywhere and let's set max height 300 pixels whoa let's get our image here alright let's try it again let's put our 300 pixels here okay much better much much better okay so it's it's still not gonna be the most visually appealing thing so at some point it might be nice to go in and what we would need really is to look up or in our photo archive if we actually have photos that are more like this for these professors and then if we don't we'll need to get our photographers to set up appointments with these professors to take you know professional photo that would give us what we need for kind of for Standardization of the site but doing it this way does allow us to have various sizes of images and it doesn't throw off our entire layout so I think we're gonna go with this for now the only thing I'd like to add is that kind of horizontal line in here so we'll do that and then once again we've lost the we've lost some of our data so yeah that's that's a problem for later on I'm not going to tackle that during this stream okay so let's add this style up now into our component so we're gonna go down here Oh actually no we're getting we're gonna need to add some CSS in here into a CSS file so what we'll do it we'll do it in here so in our faculty list component I believe we're already bringing in styles here's our Styles so let's make a CSS page this faculty list okay yeah so what we want actually let's let's do it like this I want to keep whatever styles we have in faculty and then I want to see if we can bring in another style sheet and we'll call that faculty list and this is gonna seem like overkill right now but we'll probably end up adding styles to this so don't don't worry about it and if it does end up being overkill dev - style sheets will we can refactor hmm sorry about the yawn alright so we need to actually create this so we're gonna go into our static styles and we're gonna add another page and we're gonna still call this faculty list dot CSS and now see it's open and we're gonna we're gonna say in our faculty list dot CSS anything that's in this detail oops and what's what is a detailed view image element and it's an image we're gonna MIT set it at a max height of 300 pixels and let's save that we'll see see what happens here let's give it a refresh to get rid of what we've just done here all right wonderful so that's been pooled in oh and for a second we actually had the data that we wanted and what happened what happens happening weird and in this component so at least we have hmm there were images looking better better than they were and you can see this CSS has now successfully been imported here and if we we look we can see in dev tools that it's pulling that from faculty list dot CSS see we can see it's right here and we still as well have our other other styles being applied that were already there as well as our Styles here and then any inline styles that we may want to use those are applied as well so we have a lot of different levels of styles going on okay Harshit said check the console which is a great idea to see what what may be going on here did not match okay it says warning prop dangerously set enter HTML did not match server client interesting so it looks like that is why I'm getting this I said I yeah all right so something's wrong with the way I'm pulling in this title content so it looks like it's pulling it in initially but then it's taking it out because it's not matching what we'll divers on the server so anyway we'll we'll tackle that let me check how much time we have in this comodoro session okay about only about five more minutes so basically at this point I'm just gonna go I'm gonna do some more questions because I need to end the stream in a few minutes anyway so if I were getting all the data here that I would like to have then we may do a bit more styling just to make sure everything lines up and we would add that horizontal in here but basically it's gonna end up looking somewhat like this which I think will look pretty nice the only adjustment to make them may be made is like right now compared to the text the images are quite large you might not be a bad idea to maybe shrink these and do max height of maybe 250 pixels that way more faculty members can be displayed at once you know you could see them on one screen there wouldn't be the oldest space here so that I mean there there are some things that definitely could be done to improve it so right now I need to hurry through the rest of this live chat so normally I like to take my time and answer all the questions but unfortunately today I cannot and I actually completely forgot I had somewhere to go until I already started the stream and then I I got a message on my phone that I had that I had an employment and I panicked for a second and thought when is it when is it and but I I still had time to stream just a quick one all right I'm trying to figure out where I left off in the chat okay the Stevens here Steven says hey hey how's it going deepak says thank you so much for sharing your time with us all you're welcome well I mean that you all are sharing your time as well so I appreciate that appreciate you all watching in and helping me so don't this is definitely not a one-sided thing here well Michael said why not set max height of road of to 300 to scale everything down yeah I guess I could have tried that although when we tried to set the container did for this image down to 300 the image is just kind of bled out anyway so anyway I mean this this works as it is I suppose but but had I seen that message earlier I probably would have tried it oh and then John said the same thing set it on the outer div group and let me try to pronounce this it's gee you are you Raj guru rush I'm gonna say guru Raj let me know if that's not how to pronounce it says please make shopping cart app with angular 6 and nodejs and latest material design I haven't worked with angular for a long long time let alone angular 6 so I don't think I'll be making that anytime soon so if anybody else has anything like that they're working on with egular please let us know see Michael creo says dr. John Homs yes we have a dr. John homes or homes or whatever you want to pronounce it I don't know okay Michael good thinking on that michael says the faculty right now are being brought in by their faculty ID and so that's how they're ordered but they should be ordered by last name alphabetically so we will do that actually I need to check what the current order is on the main website that's that's live the one that will be replaced and see if they actually are an alphabetic order there or if there's a different order I hope itself abetik oh I don't want to do a custom order for everyone all right looks like there's two more questions and then I have to be finished Matthew says what do you recommend if my job discourages asking for any mentorship in my programming skills I hear that it's really key to help help me grow but my boss wants me to be a 100% independent what do I do I would say that the best thing that you could do maybe is find information that shows how much mentoring will help you and really how being 100% independent will make you less productive because I definitely believe it will so I don't offhand know of any studies or information that I can point you to but I'm sure it's out there so I would maybe find that share that with your boss I mean you you know your boss better than I do of course so I don't know the best way to approach him with that information you may not want to just confront him with it maybe you wanted to slip in little comments here and there to warm him up I don't really know but you know you you want to show your boss how this will make you a better employee because that's probably what he's worried about you know and then if you can convince him of that then he should be okay with with mentorship and if he isn't still okay with it then then come ask me and we can think about a strategy for the next Phoenix says hey Jesse just an update on my 30 days 30 sites it's going good but it looks like I am doing 30 days 30 landing pages ha ha hey well it's it's still coding still coding every day okay that's CSS file you created was there a period in front of that class attribute and in from the image or I don't understand that where was it thoughtfully CSS no no period because the actual name of the elements is detailed view image right so we can see here the detailed view image so we're not targeting a class we're targeting in elements so I mean this technically is completely okay I believe in html5 it became okay don't I'm not sure that that's exactly when but so this wouldn't pass like I don't know what are those HTML certification things you know depending on your version but browsers browsers can handle this but then we go to use it with CSS we need to treat it just like we would let say a div where we wouldn't put a period in front of the div so hopefully that that answers your question hopefully I'm understanding it correctly okay thank you so much for joining me thank you for putting up with my lateness at the beginning and the errors that I had to deal with and I died for sure have to go right now if I make it to my appointment on time I had a great time and a great week with you all and I can't wait to come back next week and start streaming again so until then have a wonderful weekend