Creating a Grid Layout with MaterialUI (P4D9) - Live Coding with Jesse

Key Takeaways

hey everybody and welcome to live coding with Jessie I'm Jessie and today we're going to make a grid layout material UI is the framework that we're using the style or react app and they have this grid component built in so we're gonna use that but we're gonna make it possible for the user to switch between views so the grid view will be one possible view of several so we'll probably just work on two views today the grid view and then the main view which will probably will be the default we've already seen that so probably we won't really need to work on it that much but we will need to make sure that we can switch back and forth so I haven't decided yet with the best way to do that is and by that I mean how are we going to handle how that information is passed between components in terms of what the view should be so I'm gonna start by telling you what I think the the solution could be and then getting feedback from you all and depending on what feedback I get that'll determine how we solve that problem so say just today is Friday the 13th so I'm not really superstitious at all but if you are superstitious about that sort of thing watch your back today cuz it's Friday the 13th uh-huh all right let me take the live chat real quick to say hi world says you look less tired today okay that's cool I'll take that I'm actually I was trying to think if I got a sleep I don't even remember how much sleep I got I was up earlier than normal with kids but I think I got at least 7 hours so let's see I'm surprised I think I actually looked really weird on this camera because I got different lighting coming from my screens depending on whether I have a light screen or a dark screen so it's always odd to see myself like that oh okay all right let me let me fill you in on what happened yesterday so Sebastian asked about the issue with the resource center that we looked at at the end of the stream yesterday so I had actually forgotten about that until you brought it up so and it looks like my mic is still popping I wonder if maybe it's it's not my phone so the phone's far away the cords farther away than it's ever been hmm if it keeps popping if it keeps popping and it gets really bad let me know and I will just switch over to the the built-in mic all right it's good now okay yeah he said if it gets really bad I'll just switch over I'm using an external mic now but I could just use the one that's built into the iMac and the mic I got it wasn't really that expensive so if it's if it's breaking then I guess that's what I get from buying a cheap mic okay so here's what the problem was so we had correctly set up the max file size in the in our server Jas file this was for the our last project project 2 which was the Resource Center we had set up a file upload form and we used form Z was it forms e no no we use form Z for client-side form validation server side we used formidable SWE's node formidable and we set our max file size and we had it said it's something very reasonable I can't remember exactly what it was but it should have been able to handle the amount of data that was going in so I it occurred to me that oh maybe nginx needs to be said and I looked it up and it turns out the default max upload size for nginx is one megabyte so anytime someone was exceeding that one megabyte either with one file it was big or the total of all files that were being uploaded then it was failing not it wasn't even getting you know to our server das file it was failing at our nginx level which we were using as a reverse proxy on that digitalocean droplet so I just looked up how to increase the the max upload size so I increased the max upload size and then I increase the the time out I forget what it was called but basically I increased the amount of time it would allow something to be uploaded that fixed the problem so that was it and I think it was Sebastian was it you who said it was probably the the upload size so you were you're definitely right about that I just was thinking that somehow it was in our server J's file that we had mess it up but we didn't that was that was fun it was with nginx and that was entirely on me because I don't think I set up that server on the stream so had I done so one of you all will probably would have thought of it but I didn't so we're gonna have to keep that in mind for this project because we will of will we have a file upload I think we might I'll have to double check on the other we're not gonna work on it today so it doesn't matter but I'll double check on the live version of this project and see if we have a file upload ok so let's see ok so it wasn't you so somebody said something about file upload so I don't remember who it was but whoever it was you were right see everybody are giving it to you hey Gideon she's late today don't worry you you weren't that late just a few minutes ok oh ok awesome fontsize is that better does that work ok alright let's get started and I am gonna remember to set my timer today so I want to do kind of a shorter stream today depends on how things go but it's Friday and I want to go home and see my family so so I don't want to stream for a really long time because I wanted to want to get out of here uh-huh so we're gonna do at least one session maybe two we'll see how it goes ok so let's get started let me show you what's going on right now I have done some things so far depending on how much time we have at the end I might review the pull request but just be aware we've I've merged two pool requests one from Harshit one from Sebastian and both awesome pool requests so you can review those as pour quest six and seven we're going to see some of the changes because we're going to be working on the same files that were changed but I'm not gonna try to go home right now but I will go over them later if we have time okay so here's kind of a demonstration of using this grid component so hard should actually put the grid component in on his pull request so I modified it slightly but that was part of his pull requests you can see you can see the other part as well so we now have a responsive sidebar so it automatically hives or shows depending on screen width so that's awesome that's exactly the behavior that we wanted from that component so so thanks again for that Harshit and it's actually those were the those are the big parts of this pull request so I guess we did review it at least from this end of things so basically when we have the grid view we want things to stack up like this and let me see we'd probably when the screen got this big we probably want to go even smaller but I just put some numbers in there just to to demonstrate so we dropped down to two columns that we drop down to one and then when we go to our our default view is going to look like what we have here so this is what we want our default view to look like and then we've just seen the grid view so those are the two views that we want we want to be able to talk them with toggle them from this button up here I can zoom trying to zoom in here and it's not working I don't know what's going on the batteries are almost dead on my trackpad there we go so I may have to change out the batteries here in the middle of stream but when we press this what we want to happen is that icon will change because the second click will take you back to the default view so we'll have two icons that change in and out depending on what you click here then obviously we want all of these cards that have our posts to go to the new layout based on the click so here's what here's what I'm thinking about actually I wrote this down so I wouldn't forget um so actually wrote it down on a piece of paper with a real pen so really old-school today haha so here's what we need we need to be able to pass the the value so I don't know we're gonna state or something but we need the components to be aware so we need obviously this app bar component to be aware of what the user selected for the view the view type the the layout type we also need this category J S component to be aware of the layout type so what we need then and then with this we go a couple of ways so do we just have the state exist in the app bar component and then pass it down as a prop to our category J S component because this app bar I believe lives in our layout or layout component so potentially the state could exist at the layout component and be passed down as a prop to our app bar and if you're not familiar with react this is probably really confusing I'm gonna describe this now but then we're actually going to go in and do the code and hopefully it'll be less confusing for you so that's one option right we just take the the parent component of both of those and we have the state there we pass it down as props that's a possibility the other possibility is do we have our global or store basically so I know we're not using Redux directly now because we switched out for Apollo which uses Redux behind the scenes anyway so I guess what my question is is if we wanted to have a global store that would hold that value so that any of our components could have access to it would we be able to do that with Apollo or would we need to bring react back into the or redux I'm sorry Redux back into the picture and use Redux for that or or is that unnecessary now we will have we will have some other views and potentially we might have some other data that should be in some sort of global store so Redux if it has to be Redux and we can't do it with Apollo Redux may seem like overkill for this one thing but I suspect we're going to have some other pieces of data that would be useful to having a global store so I'll let you you all think about that if you have any thoughts just put it in the live chat for now we may as well spend some time getting this grid layout to look how we want it to look and that'll give us all some time to think about what we want to do I mean we can always implement one solution and then switch later if we need to but I was actually I was gonna try to do it earlier and then I thought no I want I want advice from you all on this before I before I actually implement it so let's get to some code let's see since we're gonna be working on this first let's check this up now here's the the thing that I'm not sure about I did mess around with this a little bit and I kept getting errors and I decided to just remove what I was doing and I figured we'll redo it on the stream and it'll be easier for everyone to follow so in our category J s let me make some space here in our category J s file right now you see some of the stuff has changed but basically the the main thing here is that we've imported this grid component so first we have this container this grid container if you want to check out what's going on look at the docs for material UI make sure you go to the newest version the beta version and then check on the under the Layout tab you can see more about this grid there's a lot of other options we could do but for now we're using this grid container and then for each of our posts we're gonna have this grid item right so each post each card will be wrapped in this grid item and right now we have it set on small screens to take up 12 so this is a column thing much like we used with the column classes in materialized CSS very similar to that so we have extra small is takes up 12 so the full width then half width on small and then a third on medium screens I'm assuming large is LG so let's go with large and we'll just pop put in four right here so I think I want that anyway let me put in the N grok link I forgot to do that at the beginning so I already started it up before the stream and okay if you're not familiar with how we do things I look at the live chat again after our Pomodoro session is up so in about 15 minutes I'll get to the live chat so please don't think that I'm ignoring you I will get to all the comments and questions in the live chat soon okay so since we've wrapped that component let's I want to go ahead and see what this looks like with four yeah okay it's four obviously we don't have enough posts to really see the four columns but you can you can guess write it there would be two more okay so here's the the first thing that I need to do we need to handle so if we're going to keep it like this we need some way to either change these values or just make use a ternary right like an if statement and render it this way or the original way we were rendering it like yesterday right how we render it on the home page because here's what happens let me move make large 12 so this is what happens if we just try to change the value to 12 it gets really big so we don't want that so if there's some way I mean realistically we could just set a max width on the cars right I guess that's an option I'm assuming that this would just be positioned in the middle we can let's try that let's sit on Macs with I have dev tools open on my other screen here so I'm just gonna set a max width and dev tools just to try it out go 500 pixels okay so it actually isn't it doesn't get centered I'm not sure if we could okay so we could potentially just give it a max width of however many pixels we want and then a margin:0 auto and that that would work okay that's not bad that's actually not too bad my initial idea was to just have basically duplicate this take out the grid and then render one of the other based on the view but if all we have to do is add or take away those two lines of CSS that just may be the simplest approach that would result in the least amount of code so let's do that who okay so I think that's settled now let's see okay Omar says you could do like the the column offset John Hanson says you could flex justify items okay and Sebastien says there is something built in alright let's check that out I'd much rather work with what's built into material UI rather than just use some CSS to override I mean this in this case the override is just like really obvious and easy but still I think if we can use what's built in the material I we have less of a chance of like weird things happening in our UI that are that we haven't thought of you know on some browser screen with device combination we might have something weird happen we won't know about it we're less likely to have that happen if we don't try to override things in material UI okay so let's check it out then where we had layouts grid should we use the center then okay Sebastian says the last one is demo okay where we have things centered all right let's see what it what it looks like all right so if we justify:center in a line Center then so I guess this would be basically what we need just a it's just a five direction okay let's try it out so is that again okay so this is a container it's just inside sorry that's probably really small I'm I didn't even think about it okay let's see I do want to set this is I don't want these centered there we go I didn't want them centered on the page you remember we tried that on a previous project and it was it seemed like a good idea but then we actually look at it it was really weird okay so we do just want justified center okay alright let's try it this should be pretty simple I think if we just say justify let's separate this out a bit and it is Center right yet Center okay check it out now okay it looks like we would probably still need a max-width but it should be centered now so if we give it the max width and it's not yeah okay so what happened to great dude you just fess in it all right let's look back here and see if we miss something all right let's make sure we have direction row as well ro all right I'm just gonna put the max-width right on these because it's getting annoying to do it every time whoops style all right now that's weird I guess I could put it on here all right cool that works let me go back actually not that did not work I wanted it to work we need all right let me check the live chat and see if I'm missing something that you all have seen okay Blake asks what's the material UI link its material - UI calm all right let's think maybe this isn't going to be the the simplest way all right let's see yeah so it's messing up what we're doing here the max width is but this max width has no effect hmm so let's get rid of this I want to inspect this quickly and see what's happening with that max with and if it's being applied anywhere all right so never grid and then within that okay I see all right we're a little bit stuck right so I've just manually set max with and dev tools and you'll see the highlighted portion right now is the the div that is from the grid component and then this div that's highlighted now is the card component so you could see the the orangish part there is is the margin so the grid I don't know if the grids gonna be able to Center this the way we wants so we might be better off just doing a little bit of our own CSS yes the Sebastian says the problem is that the large 12 will use full width on the large screen and that's it but if we want it to be one column then we have to use the 12 okay all right let's see alright let's get rid of this for now actually this might not be applying because it's possible that we're not passing the styles on to the dis component to left to remember that now so I guess I'll leave this in here for now okay my timer is up let's do five minutes a question answer and that'll give us all a minute to think about this as well really I probably should just do something so that we can move on and we can always change it if we want to later on all right let me scroll up and stop going through here I see a lot of you also saying hi hey hey everybody I see some some new people in the live chat I haven't haven't seen the names before so welcome thank you for for joining us for the live stream Nikhil says me maybe the sidebar could be improved in terms of user interface yeah I think it could it's it's still work-in-progress now so I'm not I want to get all of our options on the sidebar first and then I'm gonna adjust it at that point so this this is not going to be it's um its final form so I definitely agree with that okay Sebastian says so earlier when I was talking about whether or not we have a global store or we just pass things down as props to components from a parent component Sebastian says if you have a global store then yes include it there if not you can use react state directly and switch components based on the state I think that's that's going to be the simplest way to do it is just to keep the state and the parent component and pass it down to the child components and if it gets more complex later on we could always add Redux if we have to xavier says what's your opinion on CSS grids okay and rook asks for some clarification saying do you mean the CSS feature called grid or the thing bootstrap and other CSX CSS frameworks do let's see okay it doesn't look like Xavier responded so Xavier I'm gonna assume that I just answered both either way so if we're talking about the grid structure that's common among CSS frameworks I think it's really easy to work with so despite my problems with this this framework here I I like them I think it makes it very easy to do responsive layouts I haven't worked directly with the the new CSS feature that is grid that much at all I basically just kind of read a little bit about it so honestly I think any new feature of CSS is a good thing right it you don't have to use it so it's not it's not really bad because you could just choose not to use it but since it's there you have the potential to use it on something so I'm hopeful that it'll be very useful so I just need to learn a little bit more about it before I start using it Blake's asks can you change the color of the wave effect on the category buttons probably oh yeah yeah I can definitely change it it will change at some point see all right Nikhil says could something like an image holder be used here like when the website loves their these frames slash image holders present then the image loads that might speed up the website a bit improve the UI yeah let me think yeah we might might be able to do that I'll probably wait till later on if everything runs really fast then I probably won't bother implementing something like that but if we are running into some performance issues then that would be good to to have in there what do they call it premature optimization right so yeah but that'll be good to put in if we need it later on if we have time okay I'm almost to the bottom of the live chat so my timer went up but I'm just going to answer these last few rook ass is that dark github theme a standard feature the white is kind of blinding yeah it's not a standard feature it is a I have this plug-in called tampermonkey that lets me run scripts on certain pages so I use that plug plug in with another thing called github dark so with those two things it gives me all these options of various like a dark theme but I could I could change it so I they have pre-made themes but then also you could customize it even further if you wanted to I never tried any of these other things maybe I should try them one day anyway so that's it okay michael says hey Jesse I never catch these live love the streams always catch them later the same day oh well I'm really glad that you could be here live for this dream that's awesome Nino says is this video for advice or front end for advance front end it just depends on what we're working on so sometimes we work on more advanced topics for front end occasionally we do work back in and DevOps stuff mostly front end though sometimes we go over some basic front end stuff so it just kind of depends on what we're working on day to day for this I don't know this stream falls maybe somewhere in the middle I don't really think it's that advanced but if you're not familiar with react some of it might be kind of confusing so hang in there and ask you so many questions as you want if anything is confusing let's see alright last question and then we're going back to the code in actually so in is it pronounced in uh or or ina let me know I don't want to I don't want to mess it up all right let me start the timer first is correct inna okay awesome yeah if I ever pronounce any of your names incorrectly call me out on it let me know I I want to get them right okay so I guess we're doing two Pomodoro sessions I know I said I was gonna do one but now that I'm into it I want to get something done here okay I just saw it Anna kills comment here about the logo and the adjacent top RSS okay watch this said where's my there we go here it is okay um yeah actually you know what I was looking at this earlier today and I kind of thought the same thing what do you all think is it okay that these are different sizes or would it look a lot better if let's say this line lined up with with the bottom of the app bar so we'd either make the logo smaller or the app bar bigger I like the size for the logo I'm a little hesitant to make make it smaller I think it could be slightly smaller so maybe it needs to be a compromise where we meet right about here I'm a big fan of a slim taut nav but in this case this does look a little weird let me know what you'll think potentially though it might not look quite as weird if we take out this line we'll see I want to know what you all think and then maybe we could try some several different options not on today's stream but on another stream we'll try it out okay so let's get this thing done here because I spent a whole Pomodoro session just trying to get this lined up in the middle okay I see there's a lot of stuff coming up in the live chat now just want to let you know for those who are just joining us I will get to all your questions in the live chat as soon as this Pomodoro session is over so I just started one so we have in 23 minutes I'm going to go back to the live chat I'm gonna answer everything so if you can't stick around to hear the answer live you can hear the answer later on when this the recording of the stream is available on the free code camp YouTube channel all right let's do this so here's what I'm gonna do for now just so that we can get something that works and worried about how we're gonna handle state because that was that's really the big issue that I'm more concerned about this is this issue is like we know how to make it work we're just trying to figure out the best way to do it so for now Center all right we can get rid of this right because we didn't hoops not all of that we can get rid of these I don't think we were actually we actually need that also we can get rid of this oh no you know what I think I want to keep that yeah let's keep that here and then yeah and then we'll give it a margin of zero Otto all right so that's how we'll settle it the zero means top and bottom margin is 0 and then Auto means it just automatically fills in the left right margin equally but now we need to actually pass these in to that component so let's check out our post preview component which I don't have it up right now so let's go back to hear those preview ok so let's see all right we actually we have styles here class name let's see if that's enough to do it I don't remember how I've done this in the past oops styles not too fine up awesome that did it okay let me explain what I did in case you're not familiar with react so in our category ojs file we had put this style these styles right and think of this as just inline CSS it's really a JavaScript object but that's how how we do it in react so initially it didn't work because this component it wasn't really rendering anything to the Dom right it was it was rendering this component this post preview component and then on this component what really ends up getting rendered is you know this card which in itself is a whole other component so there's a lot of layers to it but basically what we needed to do was pass it the style so we're passing the Styles down from parent to child component and at first it didn't work because with this component instead of having to type this props style we bring everything in here and then we don't have to type this props so really useful to do it that way just in terms of in this case it wouldn't been a big deal but if you have to type the same prop over and over again or a lot of props you can save a lot of a lot of characters by doing it like this okay so that's what we did so now what we have then we can go so you can see it still works so we should be able to keep let's just let's try this actually this might have just simplified things a lot for us so if we go back to three with this one great all right so what this means is we actually only need to change one thing in this component we can leave these styles here that's not a problem all we have to do is change this value we'll probably want to change it across the board yeah we'll probably want to change it across the board to twelve but now we don't have to worry about changing any styles all right so let's do this now we're gonna go all the way up to our parent component for all of this so if you see our layout so this is where we're actually rendering this component so this is the category component and this is a stateless functional component but then we also have this render categories okay and that's a child component of of category right but we also wrapping this in layouts layout is where we bring in our app bar as well so let's see actually it might be a little bit more complicated than I thought so so lay out I'm trying to think of whether or not the state should live in layout or it should it live in cat category I would rather have it live in layout because I want this these views to persist across you know the home view and category views and whatever other thing we have so we will have some other things let's see okay okay so here's the thing how if we make the state live and lay out is there even any way for me to pass something from lay out to you know any of these components see I don't know it is kind of looking like maybe we should have a global store my thing is is this basically if we have the state live here in Category then we're going to have the state living in two different places so we're going to have it here in Category and then we're also going to have it in you know the regular home view so we're gonna have to have it at home you as well let's see yeah so we're now gonna have consistency across state we don't want two different states we're not really going to be able to keep them in sync I mean I guess we could but we're gonna be repeating a lot of a lot of markup so I mean I was just thinking like let's say that we had we had this state exist at each of our views all right which is repetitive and then we had some sort of on click that got passed up up to the parent component right so we had like what the on click handler would live in the parent component and get passed down as a prop right but we'd have to have that same one and every parent component every one of our views so that's not good all right I could clone elements as Photoshop okay so hard should just posted some stuff some code in the live chat so let's see saying react clone element this props children logged in this state look all right so so you're saying that here we could pass props to the children if if that's the case that's actually exactly what we need all right let's try it out so let me go I'm gonna copy this and paste it in here for now let's see layout type and for now I'll just say grid I have a C okay it didn't like that you didn't like this react let me see I just looked up on my other screen one of my other screens how to pass props with this props children or state okay I see need this we're calling element Davis frosty we might need to map over this react all right let's see okay Ishod this okay so from the example that i just saw and stackoverflow they were we're mapping through and and then cloning the element so it said that you have to clone it because of the I guess the the children are immutable so you can't directly do anything and I guess that's not working either I don't think it likes you us using react inside there so if we pull this out let's put it up here and each other okay let's try like that I don't know doesn't want us to put anything in here what is the problem most that's really weird get rid of this that's so weird what why is it not upset about this but it was upset before okay child is not defined no I'm fine 9:36 equals hmm I don't know maybe I wonder how old this is saw that oh hello okay harsh it is uh submitting a pull request bulletin me eggs okay not yet are you working on a pull request for that then let me check my time two minutes okay all right so for now I let's try this now the okay Savior says you you wouldn't have that this problem with CSS grids well it's not it's not the layout anymore that's the problem it's it's trying to pass the state I can't believe I'm saying this now but redux would probably make this simpler this because Redux was so hard for me to grasp it was so complex but they're they're probably and I just I know how I would do this in redux alright let's just get rid of this and go back to how it was where it worked and all right okay so here's what I'm gonna do it's Friday I'm not gonna work on this anymore we're gonna come back on Monday now if if anybody wants to submit a pull request to try to fix this that's wonderful if not I think on Monday unless I come up with another idea I think on Monday I'm just going to bring redux back in or figure out a way to access the global store that Apollo is using and add to it and I'm just gonna have this in here because this is a perfect candidate for something that should be in a global store it's something that needs to be accessed by multiple components and it's gonna have to be passed you know down several components so you know that's that's one of the big benefits of Redux is when you have something like that you don't have to keep passing you know things back and forth between you know several levels of components so that's the plan right now at this point I'm gonna go to the live chat I'm gonna check out all the comments and questions answer as many as I can and then then I'm gonna finish up so that I can get out of here and enjoy the weekend although tomorrow I'm probably just gonna code all day so it's not like I'll be doing that much different but I'll get to code all day from a recliner in my basement so much more comfortable okay I'm gonna go back up to where I left off let's let me commit this the that way you all can see everything oops oh you know what I have my my terminal my other screen all right let's bring this in get status all right so we've changed our press preview in a category yep that's what exactly we wanted to change let's see what did we do oops okay all right so everything should be up now on github and okay now let me go to the live chat okay Blake s could you send the link for github styles yeah let me find it you have dark I'm pretty sure this is it I'm gonna paste it in in here and if you're watching this later and can't see the live chat if you just search github dark github dark theme for me it was the very first thing that came up it's a github repo okay John Henson says CSS greed is less code it has a fair learning curve though it's a game changer it is a must learn as it will work on all new browsers very soon I'm gonna have to take the time to learn it here sometime soon Xavier says I agree CSS grids are much easier to work with and many grid systems and the most common frameworks cool ok anna says I enjoy your stream awesome I'm glad that you enjoy it see and it says your English is great I would hope it would be great since I'm I had to take English class every year of my life for the first I don't know since I started school and up until I was 18 I guess Nina says how long have you been coding I started learning how to code when I was a teenager but it was just really basic stuff so I don't even think I'll count that I did a little bit in college with C++ but I didn't really start to code until maybe like five years ago and I would say like really seriously doing JavaScript coding or attempting to do JavaScript coding for about three years now before that the two years before that I did some but a lot of what I did was basic team LCS WordPress theme customization which which is fine and you know I made money doing that and a lot of people make money doing that but you don't really need to use a lot of like more in-depth you know coding with that so so I'd say more realistic measurement is like three years of full-time like dedicated work with coding mainly JavaScript dead zombie says I just want to say how grateful I am for your tutorials I recently started working as a junior front-end dev and watching you helps me so much Oh awesome well congratulations on the job really happy for you and I'm really glad that I could help so awesome I mean that's like exactly why I initially wanted to do this dream is to help out to help out and just show people especially people who were newer just what it's like for what for what I do and see okay in Ashe do you have a mentor sadly I don't really have a mentor I had kind of a mentor so I had a friend and he was actually younger than me but I'd known him since I don't know probably my early teenage years and I was good friends with his older brother and he's the reason that I started actually doing coding for a living I didn't have a job at the time and I had two kids and a wife and I really needed to get a job at make some money and he brought me on with his he had like a media marketing company and he brought me on and basically I did work for him but he paid me to learn you know it was an hourly job and he would say take a couple hours I'll pay you for it and learn how to do this thing or that thing and then he'd give me work based on that so that was really awesome he taught me a lot about contracts and and clients about search engine optimization and different things like that so in terms of like JavaScript coding not necessarily a mentor in that but in just a lot of other things that that happened he was a mentor to me also a really good friend so that's the kind of the closest I've had to a mentor but it'd be cool I mean I've gotten advice from people who have been doing this for a lot longer than me or who are a higher level skill wise than me I wouldn't really say mentorship just you know advice here and there Wow so dead zombie says one guy who's been working for three plus years as a front-end dev has been assigned to me cool so assigned as your mentor just to clarify so I understand that's really cool to be like I said I don't I haven't really had a mentor in terms of coding specifically with with JavaScript but from everything I've read about mentorship and how important it is like it can be a huge help jamjam Euler sorry for mispronouncing that so Jam Euler says do you have any course on Android development sorry for asking something awkward oh no don't don't be sorry at all that's that's definitely not not awkward feel free to ask anything I don't currently have any courses on Android development and I don't think like me personally I don't have it I don't think that free code can't does but I'm not a hundred percent sure if they do it would probably be some sort of video series or potentially like I don't know blog posts about it in the free code camp medium publication so I don't know I would maybe check the playlist on this YouTube channel to see if there's something I am working right now on learning react native which can be used for android development so I really hope to be using some react native stuff on a stream at some point potentially we might turn this project or another one of our projects that we've already done into an Android app in an iOS app with react native so if you can't find something you know right now you know hopefully within the next I don't know month or two maybe I could I could squeeze it in so I don't actually have any official projects or directives from my boss to do an app but I think we could work it in to spend a little bit of time here and they're working on it I think that would be nice that would be the kind of thing that I could just kind of surprise my boss with and say hey I've been messing around with this check it out and I think he would be happy with it at that point when he saw it then he would probably say okay keep working on this and then we could we could do more with it oh so you all heard the vibration when someone was calling on my phone yeah I normally don't answer during the stream unless I think it's really important I think that was just a spam caller though I wouldn't have answered it anyway even if I wasn't streaming okay lucky says it's asking about what the theme is in Visual Studio so yeah Blake said this is Adam so yeah this is Adam and not Visual Studio sometimes I do use Visual Studio but I'm not for this project the theme is SETI so SETI is the theme oh wait a second all right so hard should just pasted some new stuff in okay Murphy or seven hold on a second that's he was going on all right let's check this out quickly okay so this ended up working cool I'll merge this in a second I'm just going to copy and paste it real quick just so that I can show on the stream that it works actually let me alright let's just merge this right now we'll merge there quit like okay so I know I said yesterday normally you'd want to test it out but literally one line has changed right I could see what line that is so we're safe to to merge this in all right now let's pull it in isn't good amazing he just said live collaboration right here on the stream with code being pulled in so that's really cool thanks hardship for the code let's check it out NoHo what is this she like this for you kind of from the files define it that's ridiculous let me reach there at the server because I that shouldn't have anything to do with what we're doing Oh after I just said now I feel silly cuz I just said oh we don't have to worry about it it's just one line what is how you all saw it you you saw the you the code right this was it we a clone element this cross your intestine what all right I'm just going back to the live chat right now all right love you finish in the live chat alright so for now let me just revert yeah let's revert this I just want to make sure that it was this and not something else weirdness happening okay so alright so I have to merge this now right yeah all right our common history is gonna be a little messy all right so let's double check make sure okay yeah it definitely was something all right so anyway we'll figure this out after the stream well not really I figured out on Monday let me finish with the live chat okay okay in ass do you have any trouble with deadlines no not really the deadlines here are not always like strict deadlines so I don't really have a problem so I should say like in terms of the initial deadlines for projects I don't always meet the initial ones but that's because the scope of the project usually changes at some point and because it changes then we change the the launch date accordingly because it's just not realistic anymore also I'm usually waiting on other people for approval for different things so a lot of times I have everything done before it it actually needs to launch but then because I have to wait on more information or different things it doesn't launch on time I mean in that case you know what can I do it's I'm waiting on people that are my superiors to get back to me with the okay that we can launch this so generally though I do launch things on time so it hasn't been an issue there's never been a time where you know I've been reprimanded for not making a deadline usually it's been the opposite and and people have been pleasantly surprised at how quickly I can get things done so not all the time but a lot of times so luckily is that I'm getting a lot better at correctly estimating how long things will take it's taken me a long time to get to that point when I can estimate correctly but I would say if you're giving an estimate of how long something should take always over s to make things complications always arise in projects so very rarely where everything go perfectly according to plan so factor that into your time if if you need to give time estimates you know definitely definitely give yourself some allowance for that unexpected element that always seems to happen all right Blake says I have my portfolio running off a github repo with pages running but I want to run it off of the username repo what is the best way to do it okay it looks like rook already answered and says basically create a repo with your your username github io as the name and enable pages okay cool I didn't realize you could do that so thanks thanks rope for that answer Harshit says what plans about the server how will you protect the wordpress api it still returns to four or three yeah it does still return a four or three I'm not sure if that's something to do with the plug-in so probably when we get closer to the time when this will actually launch I'll worry more about it if it's still we're turning the 403 but until that time I'm just going to continue to upgrade the plug-in when new upgrades come out and because I think they're aware of the problem I do need to double check in the slack Channel but I'm pretty sure someone's already reported the issue it might be reported on github as well so I think it's being worked on and this project the WP graph QL plug-in project seems to be pretty active there's always activity on the slack Channel at least every day so I'm that it probably should be fixed I would think before we're ready to launch in terms of the server we do need to figure something out about WordPress so I don't know if if you've realized this or not yet but potentially right if we want this to be a login only site so we don't want anybody to be able to see this except users who can log in that's fine but what if somebody knows how to use the WordPress API or graph QL and decides they're going to try to pull data from our WordPress installation now normally that would be a very kind of remote possibility right because we could certainly not advertise the URL at all we can make if some crazy long URL that no one would ever guess try to hide it like that but potentially someone could still get it there's still a chance so it's it's not enough to just have our react portion of this password protected we have to have some way to protect it from the WordPress end so that's something we're going to have to think about I think we have multiple options on how to do that so we will get to that at some point I'm still not hundred percent sure how I want to do it though so if anyone has any ideas about that let me know we'll talk about it in an upcoming stream or like I said I do have some ideas I just kind of need to test them out and see if they'll work with with the graph QL plugin that we're using world says what's the advantage of using material UI instead of some other framework like flex box or bootstrap for material UI they have react components built in so that's a huge advantage if you're using reacts otherwise so some frameworks rely on jQuery to do some things and or or not or potentially vanilla JavaScript but either way you're not really supposed to manipulate the Dom through other means all Dom manipulations should be done the react way within your components otherwise it messes up Reax ability to have an accurate picture of the state of the Dom at all times so it's better to use a framework that is made for react and works within those constraints then you use another one it's not impossible though if you check out project one we used a just a regular non react framework materialized CSS that's very similar to bootstrap and we made it work with react it worked I mean the site's functional it's been live for a couple of months now we've had no problems with it so it's just better to do everything right the react way Oh her shirt says tell me I will work on it this weekend I'm not sure at what point what I was talking about when you made that comment so harsh it let me know what what in particular were you saying that you would work on I mean there's definitely definitely love to work on still and if you're willing to work on it this weekend that would be amazing Eric's Eric asks how hard is it to learn react from using angularjs let's see I I don't know that I'm the best to answer this because I knew it allure before I started using react but I was not an experienced angular developer you know by by any means at all I just kind of messed around with it on side projects and wasn't very successful so if you know angular I don't think it'd be that hard for you to figure out react but they are different so you won't be able to just come straight over and say okay this in angular equals this thing and react exactly right so it's a little bit different mindset but if someone has the skills to be able to learn angular I have no doubt that they also have the skills to be able to learn react so I wouldn't worry too much about it if you were trying to make the switch but I would say like just be open to thinking about things differently with react than you did with angular so like don't think there's going to be like I said those exact correspondence to the way you do things are things work so but I don't think someone who knows angular would have any issues and learning react let's see so you sick I'm not sure I pronounce this Sokka sick soch I si si so anyway says hello from Russia thanks for your streams hey welcome and how's it going in Russia thank thanks for saying that you're welcome I'm glad that you're you're watching the stream and that you joined us here in the live chat oh cool okay Anna says thank you for your stream have a good day and weekend oh you welcome thanks for watching being a live chat and you have a great weekend as well oh okay okay so hard she was talking about the plugin yeah so syndication okay so hard is commenting a little bit about this authentication and our WP graph he'll plug in so hard says my idea is to screw up the plug-in and write our custom graph QL query this way we will use authentication on the server like like a loss 2.0 plug-in okay I'm open I'm open to it Xavier asked Jesse what is it you want to try to do with your grid layout I kind of want to give it a shot with CSS grids over the weekend okay so basically I want to I guess I can show you on this other site let's see this will probably the easiest way to just show you okay so here's the current bulletin this is the default view right which looks pretty much like the default view we have now and then when you click on this icon for grid view it goes like this and then you can go back to what I'm calling list view and of course it's responsive so even if you were in good view and you went down to mobile size it would only take up one you know one column so as you get smaller you have less columns so that's that's basically what I'm trying to accomplish that we can click a button and have the view switch all right awesome okay JV or says challenge accepted how hi cool that's it I'm at the bottom of the live chat so it's after 4:00 p.m. on a Friday almost time for me to get out of here so thank you so much for watching for joining the live chat for helping me thanks for the pool requests this was a really nice stream I liked it we didn't get that much done but we talked about a lot of issues that we're gonna face in the future and we have some ideas so I like that we're on a good track here and some new people today in the live chat so that's always awesome I enjoy meeting you virtually here so I'll be back Monday and until then have a great weekend