React Search Page UI (P5D48) - Live Coding with Jesse

Key Takeaways

hey everyone welcome to live coding with jesse i'm jesse and today we're gonna do some ui work so we're gonna try to stay as close as we can within material design principles and uh we're working on this search page so i've been looking at probably what's the most well-known search page with lots of filters and that is amazon search a well-known search in general probably be google's search page but i think for our use case we're going to have filters that are closer to what amazon uses so we can take some inspiration from google search page as well but at least for the desktop version i think we're going to be better off going with something similar to what amazon uses uh even even the mobile as well i think the way amazon has done it is pretty nice so on my other screen i'm trying to get these examples up of what what both amazon and google do for their search uh filters and sorting uh for some reason it's not let me resize this window here we go hmm okay let me let me get ngrok started for you all so if you're not familiar with ngrok this is going to allow all of you to use this link to see the website that's being hosted locally you can inspect it in your own dev tools you know on your own machine as we're going so that's in the live chat i'll probably paste it again in a few minutes as more people join looks like we have yeah we have about our average uh number of viewers in here now so i'm going to switch my screen and get started uh i do want to let you all know especially those of you who watch my last stream uh that i tried to do at home and the quality wasn't too great that i did upgrade my internet service to the highest level i could possibly get at my my house and i'm hoping that'll help and i also messed around with a lot of the settings i looked at what a bunch of other people were doing i had some help um so you know like the youtube um live stream or the uh 24 7 uh free code camp music stream that's going now so the guy who does that uh pretty matthew i think his name is matthew i hope i didn't get that wrong uh but matthew worked with me for like an hour we were trying to figure it out so i've done all that i think i can at this point to try to get it to work so hopefully the next time i try to do it from home which may be tomorrow or sometime next week it will work i'm aiming to get 720p resolution i think that'll be high enough so that everyone can see the font i don't really think it'd be possible for my current setup to get higher than 720p so i'm hopeful for that i really would would want to have a better quality for you all also i'm working on a project let's get this let's get our ui started uh should we do you know normally we do a mobile first one but i think i'd rather start off with a desktop search because the mobile first one is going to add the mobile version of our search is going to add a bit more complexity and i don't know that i want to deal with that right now i think it'd be better to go with the more simple one and then add the complexity of having drop downs and things so that's what we'll do so any i'm working on a new project if anyone is interested let me know i'll have a get up repo up soon but i i put some details on twitter yesterday or the day before or so and i bought a a brain computer interface headset so i don't know if you all have ever seen this but uh you put this headset on it's kind of like headphones uh and it it monitors your your brain activity your brain waves and um you can tell you know certain things about what's going on in the brain like are you more relaxed uh or you know are you more focused uh things like that so my son uh my oldest son who's eight years old he has obsessive-compulsive disorder or he has some issues where you know he'll just like get he gets himself all worked up about something and if it gets bad enough he just like he can't get out of this uh this mentality where he's just so frustrated and upset so my idea is that i'm going to take those brain waves and i'm going to use some of the work that alex castillo has been doing so uh you could check out alex on his alex castillo dot io uh check him out on twitter you know he's been at a bunch of conferences but he's done a lot of work with being able to interpret the signal from those uh headsets and and bring it in and manipulate use that for with javascript so basically pull it into a website or a web app so i'd like to do that same thing and alex has actually offered to help me with this which is awesome and i want to bring it into a very simple javascript game that's going to help my son recognize when his brain is starting to get into that pattern where it's he's gonna get all worked up to recognize that early enough so he can get himself out of that and also to help him train his brain to be able to get himself out of that to calm down so the idea is just very loose right now but the idea of the game is that certain mechanics in the game are going to be based on his his brain activity so in order to move forward in the game and progress he'll have to successfully calm himself down so there's going to be a lot of fine tuning that's going to happen i know there's definitely got to be a balance between like making the game um challenging enough so that it actually does give him incentive and train him to you know help correct his thought patterns but it also can't be too challenging that it actually would make him more frustrated so he does get really frustrated with video games if if he keeps like losing and losing so it's gonna probably take a long time but i think if it could work it could be really helpful for my son but potentially helpful for other people who are dealing with mental health issues especially with kids adults have a much easier time verbalizing what they're thinking but kids especially when my son was younger you just never knew what was going on in his head he didn't know how to explain what he was experiencing so i'm thinking that this may help so i'm going to start with start with my son and see how it goes so anyway i'll probably give you you know updates on this as it goes on you know i may even live stream some of the work on it record some of the results uh because i think i mean other people might be interested and you know other people that maybe are way more experienced than me might be interested and might be able to do more with the project and help more people so anyway enough with that project let's get to our project uh that that we're working on today and that is this search page so today what we're going to do is just take these filters that we have here and this sorting and we're just going to move it over we're gonna move it to the side so let's see what side left side or right side i don't really know i don't know whether we should do left or right if any as one has any opinion on that let me know otherwise i guess we'll just start on the right side yeah so essentially this this section here will be split into um let's say a fourth of it or a third of it will be filters and then the rest will be search results okay james saying right side okay we can try that all right so let's get this into position first we'll kind of fill out you know this basic grid that we'll have that'll keep these in their right sections and uh we could probably determine like at what point we need to switch to a mobile view and then then we'll go uh get like kind of a little bit more detailed with fixing padding and things like that sorry sorry about the on okay all right so uh some of you are commenting here on on this um michael says won't be able to stay till i see what you intend all right fair enough yeah it's i have an image in my head but of course you all can't see that so james asks a great question how many check boxes will there be eventually there may end up being quite a few yeah definitely more than three so let me let me pull over uh from amazon here let me pull this over under the screen so you all can see kind of what what they're doing and so so you can see what i have in my mind a bit so i just did a search for a webcam because i'm i'm looking for a better webcam for streaming but they have their refined by section here and you can click on these different things but they have them and we may end up having to do this as well to help the user they have them in these little subsections and depending on how many filtering options we end up having that that might be a better way to go so something similar to this and then amazon puts their sort by up here i mean that's a possibility if that's what you where a user would expect it to be and instead of with the filters then i'm open to that um and then the search bar i do kind of want to keep the search bar like maybe at the top so maybe something more like search bar where it is except with better padding and not completely across the entire screen filters next to the search bar or i'm sorry the sorting next to the search bar and then filters down one of the sides oh cool when nikki says the uh logitech 920 is often used for stream streaming so yeah i think i was looking at one of these 920 models so there's some of them i'm just trying to determine like what how good do i need it to be uh for for streaming because some of them are there's one that's you can stream you can record 4k and things like that i definitely don't you all don't need to see my face in 4k i'm pretty sure let's see all right michael says uh those aren't searches though the choices anyway when you start inputting in search bar brings up choices for departments um logitech has a gold box today on logitech all right i'm getting a lot of input on the um webcam okay so i'm not going to read it right now i'm going to wait and read it after let me start this pomodoro timer so we can get to work after 25 minutes i'm going to go back to the live chat and answer any questions that you you all may have put in there um and we can talk more about webcams then uh but right now [Music] let's start with the search bar all right we'll start with the first things that we're gonna have on the page and we'll work our way down so it'll be search bar first filter second i'm sorry i keep mixing these up forget what i just said search bar first sorting second over here and then filters somewhere on one of these sides all right so let's go into our our file first you can check out the where the search.js file so you can check out the github repo if you like the description for this video should have a link to the repository and let's go down to where we have that input here it is here's our search input and we haven't used the material design style for testing we just threw in a regular input so the first thing we're going to want to do is go to the material ui documentation and we're going to grab some code from there to be able to use this input we are up unless material ui came out with a new beta update within the last two days we are completely up to date so i did merge that other branch into master and i found out after i restarted the server i did find some things that broke in the ui so basically almost everything was fixed by me changing type to variant that was most of the work if you want to see specifically what i change go check the last few commits and that should give you an idea of what it takes to upgrade to the latest version of material ui uh in terms of dealing with braking changes luckily a lot of the braking changes dealt with components that we didn't even use so that was good for us so we should have this open material ui nope those are the icons there we are i always have a material ui window open somewhere okay so this is material uinext.com so we're using the latest beta version and actually let's refresh this see if we get the newest version what i refreshed it now i can't use this sidebar what is going on there we are okay beta 38. i that's what we're on so we're in beta 38 we're all up to date let's check out our components and what do we have inputs text fields there we are okay so we're going to want a text field here's a search field i guess we could check out the code for the search field we're definitely going to need to bring in a text field so let's pull that in right now we'll bring in this import let me zoom in a bit so you all can see so we're importing text field and then we're also going to bring in uh we'll figure out what styles we need let's see textview yeah let's just pull in this text field styles we're probably going to need those and put um let's put them here as of right now my my organization for our styles object is basically just in the order that these elements appear on the page might not be the best way to do it but uh it it's working right now okay now let's find that let's see we already have our our handle change so we're good with that search there we are i'm not sure right now what is different about the search field it looks pretty much the same i guess we'll find out okay so we have this input now and at first i'm just going to put this in right above our current input so i can make sure that we have search type search all right uh you know what let's see we want this to be a controlled component let's see if let's see if that's how they're doing this one all right let's find that multi-line that's controlled where is that um i thought the last time i looked at this there was a version where they used the controlled input okay so it is just value here okay all right that should work then so we're going to add whoa not that uh so we're going to add this value here and we also need this on change here and let's get rid of this and see what we have label search i don't think i need that okay oh what is going on failed to save important text field what did i just do all right uh check check i don't know what just happened let's see if it caught our changes all right there we go text field i'll change your search results whoa that's not right i'm gonna check the live chat see if any of you caught what what i just did what the heck okay let's do this i'm going to grab this text field i'm going to copy it and throw it over here in our file of scraps and then i'm gonna go to the github report i'm gonna grab the original file so it wasn't let me undo the changes wonder if i can manually undo undo yeah i cannot do any of that um so we're gonna grab that file i guess i could just johnson i may have an extra closing bracket somewhere yeah it looks like i accidentally deleted some stuff right or pasted in some things that i shouldn't have i yeah i'm not exactly sure what happened so anyway i'll fix it right now uh i don't need any of that stuff that looks good so i'm just gonna copy um the let's see checkbox form control form control label checkbox svg okay so from here down to this second form control i think is what we need let's double check that we do have that classes select value okay i think that's that's it all right text field is not defined okay let's try this again did anybody catch what happened what did i do okay now let's save it okay successful save that time all right now there we are now i have a search field let's actually put search out there which probably not going to have it like that so let's do let's do our search for biology okay wonderful all right cool so it is it is searching okay maybe maybe since i said it was a search field it automatically gives me that x which is actually really cool very cool all right so we have our search field step one completed let's check our time 11 minutes left on our timer cool uh let's see okay sort by that's what we're doing now let's go grab all the stuff for sort by and first thing we're going to do is just move it up here and then once you do that then we can work on whatever else we need to make this look nice and be very obvious to the user what it's going to do so this was already put in i believe nikki was the one that that did put that in there so uh nikki already filled it in with the uh material design style so we won't have to worry about changing anything for that so right now this whole form controls like yep there we are so we're just going to take that and remove it from where it is we're going to move it up here above uh our we uh we're gonna move it up here but what we might want to do though is change change this form actually on submit is get form results we don't actually have a submit button there dewey and what is this svg i'm going to take this i'm going to take this out and this svg and i'm going to replace the forms with with this form control okay all right let's see how that looks whoa okay so now we have everything up here in this line and we're gonna i probably need to add some grid stuff here okay let's check out in material ui let's check out our layout stuff and see where our grid is i just want to see what okay grid container all right grid containers and grid items all right it's been a few weeks since i worked with this uh i just needed a refresher on the syntax okay so let's just put some containers in here uh we're definitely gonna want a container here and within the same grid container i want to have i guess we could put everything in the container let's try to put everything in one grid container right now and see if that works just oops that was it right grid grid yeah okay so we put it all in the grid oh john hanson has a good point here it says submit function in a form without a submit button is the enter key okay i guess that shouldn't be a problem since we're searching automatically there wouldn't really be a reason to hit the enter key the user could hit the enter key and it would seem like it worked anyway but because since we're just automatically searching so i guess that should be all right if anyone has a different reason why we should keep what we had before and let me know all right let's import grid as well um and as this component starts to get larger it's probably going to be a good idea to separate it out into multiple components but while we're building it we'll keep it all in one place once we get it to a place where it looks good this is you know pretty much what we want then we can separate it out i find as long as it's not too large it's easier to have it all in one spot while you're making it at least for me all right and i suppose let's we can grab this container do we already have a container class i think we do content container okay so this should work so let's see what it's done we need to add our um our grid items in now because it's going to look silly without it okay so we just need to add grid item and then we can add in our values for what we want we like how many rows we want this to take up okay so let's put around i'm just gonna put these in and not really worry about the values for now i just want to get it all in there all right and i apologize if i'm gonna be a little off today i started to get a headache i actually started to get really bad heartburn in a headache right before the stream so i took some uh pain medicine to try to get rid of the headache and uh it's starting to come back again so i'm gonna do my best i want to see how these i better type in something legitimate i want to see how these results look okay i mean this is makes sense this is exactly what i just told it to do uh so now let's go back and give this some legitimate values what do you have all right about two minutes i'm gonna come back to the live chat and answer answer all the questions for now let's go in here and give let's set this to 12. am i using let me see what i'm using am i using a 12 grid let's inspect this for a second okay it looks like it is great at least for now that's skids we want all right let's go with let's go up here to our search bar uh let's give this um so out of 12 let's give this nine and that can stay three and then that's down here let's take this grid and let's move it down below here and we'll keep this at 3 and we'll make this a nine and that'll be all right because things ought to line up there we are so these will line up and these will line up okay hopefully now you see a little bit um a little bit more about what i was going for so the filters will be here right sort here so it doesn't really look like much right now i think we still have some work to put in for this but this is about what we're going if you think the filters would definitely look better on this side let me know we can do that that won't really be a problem for now uh my timer just went off so i'm going to take a five minute break i am gonna take a drink here so as always i'm drinking my g fuel i put up a post on uh instagram with my g fuel in it and i tag g fuel in it and i gave him a little hint that they got an opportunity for me to be a spokesperson if they want it so they didn't get back to me though not yet they you know they might be busy maybe they'll get back to me later this week all right oops let me start this all right so five minutes i'm gonna try to get through as many questions as i can all right nikki says hey excited for f1 to start again this weekend cool i'm i'm not really a racing fan i'm not anti-racing but i just don't often watch it but i'm glad you're excited for it nikki says i hope daniel ricardo rick ricciardo said does well uh cool again i'm not really knowledgeable about racing but good luck daniel uh but matthias says hi jesse love your stuff keep it up thank you i appreciate that and i plan on keeping it up for as long as i can as long as it's beneficial to you all i will keep doing this james ross says it's the new project a beard no i've completed that project i that was our last project the beard will probably be leaving soon it's it's gonna start getting warmer now despite all the snow that that a lot of us got uh yesterday it is gonna start getting warmer and then beards aren't as fun santiago says greetings from venezuela uh the game sounds like a good idea oh thank you thank you so that was if you weren't here at the beginning i gave kind of my plan for one of my side projects so you can if you're interested in my side project that has to do with brain human interface or brain computer interfaces check it out uh on the recording you just go back and watch the first like 10 minutes uh let's see i'm scrolling down to find some questions all right so here was some discussion about what the best camera is for streaming that i should get so if anybody has any experience with webcams please let me know your opinion uh basically the logitech 920 series seems like something that i should look into um i don't the only thing that i ever really do is like images of me right like doing this just like i'm doing now so i don't know what quality i really need i saw one that's uh a pretty good deal on amazon i think it was only like 40 or 50 dollars which was discounted from the the normal price and it could do you can record in 1080p but you can only stream in 720. i think that would be okay i mean i don't let me know if you think that quality would be all right for me uh i i mean i really i'd rather not spend a ton of money and i don't make any money from streaming so it's it's not like an investment for me it's just would be a little bit better quality so anyway if you have any experience with webcams uh especially if you're streaming with them uh please let me know what what you all think is is a good one preferably one under a hundred dollars okay daniel says uh daniel frank says i can personally vouch for the 920 and it has worked in my enterprise for three years straight everyday use oh excellent that's exactly what i wanted that's that's really uh good advice uh i mean you know you you can read all you want online you can read reviews but it's much better to like really talk to somebody who knows so uh i appreciate that daniel oh michael says about search bar stuff i like the amazon drop down incorporated into the search bar then the autofill entries into the search results not sure how hard that is in react okay so is that somewhat like what we're what we're doing that the filters are kind of with the search results and then the drop down is kind of with the i know it's not as closely with it as on amazon but i think that's a bit what we're going with that general idea michael says or to save space especially on mobile have a multi-select drop down that autofills with returned available filters yeah that's what i'm planning on doing on mobile so definitely basically the only thing you'll see right off the bat on mobile is the search field everything else will be in a drop down yeah it'll be in a multi-select drop down maybe i'll have the sort by in its own drop down as well i don't i don't want to get too crazy and have too much stuff uh you know because the mobile you only have limited space on mobile so we'll see how much space we can get but that's basically what i'm uh what i was thinking i'm going with okay i am almost to the bottom of the live chat so let me see i don't think there's that many questions left uh so i may go ahead even though my timer went off i might try to get just these last few just don't want to keep you all waiting with for the answers for too long let's see uh jason lee asks what's the timers for is this a freelance project the timer is just to break up our time here so that i don't spend too much time talking or too much time coding we get a nice kind of break in between i also use the pomodoro timer just to break up my day it's not a freelance project this is uh i'm a front-end developer i work full-time salary for a university ah let's see software dev says it is interesting that you've got tags like grid control and form control is that precompiled in normal html tags and the javascript is within the html all right nikki says it's not really html just looks like it all right so this is a good segue back into the code here so let's um let's go over this yeah let me go over this now then so let me start our our coding timer and the first thing we'll do is just kind of do a quick recap of what we've done to go over some of these these tags so software dev is asking about these tags so um basically if you're not and i'm not assuming software dev that you're not familiar with react but anybody out there that's not that familiar with react all of this here looks a lot like html but it's actually not it's it's jsx and what this is is is syntactic sugar on top of javascript functions to create dom elements uh so really what what these will break down into is a javascript function that's going to create a select field and create these items within these select fields but that's really hard to write if you're used to html it's kind of a pain to write all these functions like uh think of like continually writing like document.creator or uh get element by id or create it yeah you know what i'm saying it's it's a lot so this makes it easier that we can write basically what looks and acts pretty much like normal html so when we write things like this like this grid it ends up turning into something else so we can see what it turns into here uh so we have this div with a class of mui grid right the classes are get kind of crazy but and within it we have a field set all right we have a legend a div labels spans more spans svgs inputs right so all of that comes from just adding in in that case the select and these menu items within within this or i'm sorry that was the check boxes we're looking at from just adding in this grid form control form labels and check boxes okay so each one of these is a separate component that exists in a separate javascript file somewhere within our project and in particular most of these exist within the material ui uh package so it's it's in our node modules folder so yeah so it doesn't exactly behave like normal html and there's a lot more to it obviously but it's kind of hidden away and it lets us you know have markup that's that's cleaner and we can still have control over it by passing in these properties so these props will change things and give us some versatility for those components so hopefully that was a decent explanation of a little bit of how react works and hopefully it answered your question if it didn't let me know and then after this pomodoro session then i can go back and try to do a better job okay so if i didn't get to your question right now i will get it to it at the end i know there were a few there at the bottom that i didn't get to and okay so let's let's work on these uh let's move the label for sort by up because right now this this looks kind of odd side by side so we have the labels kind of opposite so let's just switch that around now should be something easy and i think it'll look a lot nicer let's deform upper text let's put that up here see what that does for us there we are we still have some padding issues here let's see what what's going on so right now we have our grid container our grid item form control the text field must be what has the extra padding because right we have grid form control here right so it's the same let's see what kind of class text field let's see what we have going on here on our on our text field styles with margin left marching right with okay we don't have any extra margins or paddings margin or padding happening okay all right let's then look look into uh devtools and see what's going on okay form control the form control here oh let's see do we have a difference here all right this form control it is giving us class name form interesting so this has a in a div within the normal form control div that says page text field so let's check out here what we have going on and we don't have that happening here okay all right let's see all right michael's saying isn't the search field text built into the search element is the select a material ui element i thought it was a material let me double check yeah that's definitely a mature ui element so that's not default select behavior um okay let's see all right so the style of that margin that's this 16 pixel margin here and 8 at the bottom and that's coming from margin normal so why don't we have that it's just it entirely not creating another it's it's creating this item type that's really odd hmm that's really odd all right john hanson is saying add a line items baseline on that wrapping div okay we'll try it out in devtools first and we should have there we go all right not making a difference um the furthest div she's saying this this whole container okay all right let's shout out then whoa baseline okay so all right so we have a line items baseline going now [Music] and then oh why is it doing this now so we have this gap right here why do we have this gap css is a fun mystery sometimes all right where's my gap coming from all right is there any difference here we have this align items on here but that's about it uh john asked if i took out that first baseline that i had it i was that's what i was thinking and i think it was here and i must have accidentally set it to left but that's it i mean it's that was where i added it in so it's gone now it's just weird anyone have any idea why why it's doing this excuse me i'm gonna get another drink here while i ponder this problem okay hmm let's play with um let's play with this all right baseline center looks pretty good obviously these don't this doesn't look good and this looks okay right now but if there were only a few items it would take it down well i guess it it would show up in the middle so that wouldn't look good but what we can do is we could change it might be easier to just do it on here let's let's try this for a second let's take out this align item center here and then how do we do it uh align align self center okay so uh if you're using flexbox which i believe the grid system is uh this grid system and material ui is based on flexbox so it's a little misleading because it's calling it grid but it's not using css grid it's using flexbox correct me if i'm wrong but i'm it looks like from the css that everything's based on flex so what we've done is the standard for everything is still in place but on this one particular element we want to change the behavior so we use a line self center and then it can change changes this alignment to center and it doesn't affect any of the other ones does that make sense so let's go with that and let's add i'm not going to make a class i'm going to add this in right on that element because right now it doesn't look like we're going to have to repeat that so let's go over here to our grid and we're going to style we're going to style and then in react when we want to put a style on something we're actually going to make a javascript object so the first set of curly brackets lets us start writing javascript within this jsx so we've switched from kind of like the html like mode and now within these brackets we're in javascript mode so we can write pretty much the same way that we would write normal javascript and then so now i'm creating an object within there and now i can put the the style in there so we're going to do a line self and we can can we need to camel case that right because this is javascript if i put a line hyphen self it's going to think i'm trying to i'll take a line minus self okay so align self and then the next one we're going to make a string so everything unless it's just a pure number needs to be a string on on the right hand side of the colon and so we're going to say center okay and now when we save this will show up like an inline style one here so let's make sure yeah let's uh hit refresh just to verify we'll do an actual page refresh and there we are so you can see we still have this align self center and now that i look at it does that still look a little off to you that actually still looks a little off let's see if we can squish this together to get a better look at uh you know what it's it's not really that off i thought it was farther off so you can see here whoa so you can see here our lines are just a bit off and when it pops up his search field it's a bit off but i i'll live with that for right now um what do you all think i mean just for the sake of moving on i think we can live with that uh so i mean one reason is the screen's never going to be that small showing these side by side like that we'll switch to a mobile version that'll be different so when it's that far apart i don't know i'm okay with it for now it'll probably bother me for a while though let's refresh that again what's going on here the styles are definitely messed up here oh you know what see if that does anything no there we are okay uh i think what happened was the changes oh yeah i pulled in all the changes but i forgot to run yarn uh or npm install so i didn't get the latest version of uh of material ui so that was that was why these the size was all off okay all right now we're good and for these uh filter results for now the only thing i really want to do is decrease the padding in between these i just think it's a bit much once we get more filters in there then we can take a look and and really see like do we need you know how do we need to organize these uh but for now let's just decrease the padding a bit let's see do we still we like that color you know what i also want to change i may not do it today i don't think we'll have time today but i like to change it so that if you click this it only does a search again if there's actually some text in that search field so i i don't want it to just give you like automatically search when there's nothing in the search field oh um yusuf uh asked for it ngrok link yeah i'll paste it in there again i pasted it earlier and i forgot to paste it again uh here you are all right michael creo saying for now added to do yeah actually that's not a bad idea let's add some to do's in here to do more precisely is that how you spell precisely do you all ever just avoid using a word you don't know how to spell because you don't feel like actually verifying how it's spelled um and then what else did i just say we were gonna do oh okay with the search here so let's let's put this up here in the filter filter filter filter filter by category okay all right now let's check out what's going on with our padding here and i just want to see where that all that padding is coming from and it looks like it's not actually padding it's its height so we have margin right margin left right flex vertical in the middle so where where are we getting that height from maybe it's in here height 48 all right if we drop that height let's see what our computed height is okay so why is our computed height let's check back here uh it's saying our computer right is 48. i mean that that does make sense interesting okay let's let's check this out where are we getting the height directly okay so that's on the button icon button which we don't directly have control over here huh menu i don't know that's not it oh we have these okay so within our check box we're going to have to look at the material ui documentation to see if we can change that i realize why they do that they want the check boxes to be easily clickable by someone's finger or thumb uh but if we're on a desktop we don't really need to worry about that uh so yeah so john just i just see in the live chat john's saying the same thing that that is 48 pixels is pretty standard for being clickable so i'm willing to go below that standard only for large screens i do want to keep that standard for smaller screens so actually my pomodoro timer just ran out so i think we'll keep it for now and i'll consider whether we should have right now it really doesn't matter like i mean this is fine my worry is if we get a lot more items it's it's going to be this is going to be too much it'll be overwhelming like the length of all the the options here so i guess this is something we'll revisit once we get more content here and and then we'll see what we need to do so let's commit these changes uh so let's go in our terminal here and for those of you who are new to the terminal and new to git and github i'm going to just explain what i'm doing while i'm doing it so i'm in the terminal i'm in the folder for this project and i'm going to do git status so if you have git installed on your computer you can use the command git so the git status is telling me that two files have changed the search.js file that we've been working in which we expect to change and then this yarn lock and that's whenever i went in and and ran the yarn command it changed this lock file so that's also expected even though we didn't directly uh do anything to log file which generally you shouldn't directly do anything to your lock file anyway so now that we've verified that these are the files that we expected to be changed we can do in this case we're going to run this command called yarn cm now this is probably going to be unfamiliar if you haven't watched any streams because this is kind of a custom setup i'm not we didn't make it all custom but the command whoa we never added it oh okay get ad i need to add first i need to add these files to the staging area so git add and then if i add a little dot a little period after that it'll just stage everything everything that changed so if we do a git status you can see now these have changed to green and they're in the uh staging areas it says changes to be committed now we're going to commit with yarn cm all this is going to do this is just kind of a layer on top of the normal git command so it's just going to walk us through how to write a good commit message and then just run a git commit on that so we're going to say it's a new feature and let's say update search ui and there are no breaking changes and i don't think this affects any issues now it's going to do a bunch of automated testing which this potentially depending on how good of a computer you have this could be a much longer process we did get one warning here since it was a warning we still passed and we can still do this but i believe this is due to our update to the newest version of material ui so for right now it's a warning but at some point we should check this out and see like perhaps this just isn't used anymore uh so we still have it in there and it's kind of a little confusing here to react so we'll see see what that is but not not an emergency type of thing so now that we have our commit message we're going to push this up to github so if you're using github in addition to git which a lot of people do you'll want to make sure you sync up everything you've done locally on your machine with github so that other people can see what you've done and you can access that on other computers as well and and they can too so we're just going to do a git push origin since we're on the master branch it'll automatically push to origin master if we wanted to push this to a different branch we could have done git push origin and then put the name of that other branch that we wanted to push to and that's it all done so now everything we've done today all the updates are available now on the get uh github repo the link is in the description to this video you all can use that do whatever you want with the code it's entirely uh free and open source and uh have have fun with it okay let me go to the live chat now and answer as many questions as as you all have if you do have any more questions please put them in the live chat now uh if you for whatever reason don't want to put your question in the live chat but you still like to ask it just reach out to me on any social media platform uh my the link to my github channel is in the description and from there you can see um on the home page of my channel all my links to all my different social media things so i don't always answer right away but i do try to get back to everyone that asks me a question at some point uh as she says hi i learned c plus plus and java right now i am uh in free code camp hoping i will understand your topic okay great i um yeah i hope that you get something useful out of this feel free to ask as many questions as you need to i'm sure if you've already learned c plus plus and java you'll be able to pick up on this you know pretty quickly oh okay michael just checked out the logitech gold box on amazon so they don't have cams just just mice keyboards and speakers all right well thanks for checking that out for me i do appreciate that um i've got a question which book is best for beginners beginners of c sharp true beginners i i can't um answer that i i have almost no experience with c sharp uh i've just i've done a little bit when i've had to for this job so i don't really know if anybody else has experience with c sharp and knows of any good books please let us know in the live chat newshour asks what motivates you um i think there's a lot of different factors that that can motivate me so it's it's not usually one thing all the time you know it depends so uh obviously the overall you know motivation uh for me is to provide for my family right i mean that's like baseline you got to take care of your your basic needs before you can take care of anything else right so just making sure that my family has enough to eat you know i can put them through school have a house form and things like that right but i could really do that with any job so for specifically for coding what motivates me is number one i really i like to do this i think it's fun are there moments that are frustrating oh absolutely do i sometimes have to work on projects that aren't as fun yeah it happens but overall in general i really like this when when i'm home and on like the very rare occasions when i don't have any kids at home uh like coding is one of the things that i think oh i'm just gonna code like a side project to do something right so i it's it's like a hobby but i get paid for it okay so i do like it uh also um and i hope this doesn't sound bad but uh can competition motivates me right i like i want to be better i don't want to be better in the sense that i enjoy watching other people get beat right like this is you know one-on-one competition no i want everybody to get better but like i enjoy being better myself so in the healthiest version of competition where i want to be the best but i want all the competitors to be at the top of their game right so we can all get better together uh so hopefully that makes sense right like there are some people who want to win no matter what and it doesn't matter to them like if their opponent gets the flu and they win they're just as happy well that's that's not me right i'd i wouldn't be happy about that i want everybody to be really good and then push me to be really good too so um i don't know i think that's that's just an exciting thing uh to just try to find out like how much better can i be in building things you know and ultimately being better in web development means making things that are more useful to people there are more easily accessible that make their lives easier that that look beautiful you know that's that's what better means so i'm not gauging success in terms of motivation you know really by money in terms of providing for my family money is you know obviously what i need to gauge that by in addition to being able to spend time with them but then in terms of being motivated by wanting to be better it has almost nothing to do with money it's you know is what i'm making is it quality work you know is it really helping people so anyway i hope that wasn't too long of an answer for you all but those are kind of some of my my motivators and sometimes when you're just down you got to make up your own motivators like or you gotta have help so like you gotta drink an energy drink or give yourself like little things like okay if i every time i finish a new pomodoro session uh i'm gonna like eat a bite of chocolate or do something that uh that you wanna do like i've actually done it before where like every time i had a five minute break in my pomodoro session i would watch five minutes of a netflix show which is silly to watch five minutes at a time but like that was my reward to get me through that that little portion i think at the time i was putting in like crazy hours so it's just like anything that i could do to just uh keep going so anyway those are some of the things that motivate me and on any given day i might be more or less motivated by one of those things but you know together it really keeps me on track and passionate about what i'm doing let me know what you all think is motivating for you i'm really interested to hear what motivates other people so let me know in the chat uh or in the comments the video or even uh in social media somehow tag me in in it or whatever you can even dm me if you want let's see okay uh why why didn't you join any company well i mean i'm not i work for university um so i guess that counts as a company right john hanson says for mobile just use a modal for filters and sorting yeah i could i'm either going to use a drop down or in material ui you can actually have two different drawers come out so i could have the one drawer come out for the main menu and i could have a drawer come out of the other side the right side for the filters so i just have to figure out what what button are people going to press to get to those filters that might be kind of cool i'll have to remember that michael says a bunch of new people in here today that's a good thing yeah definitely for everyone that's new here welcome i really appreciate you watching i know towards the end here we've kind of dropped off so i wish i would have acknowledged you all earlier when there were you know about twice as many people in here uh but if you stuck around if you're here uh yeah thank you so much for watching and i really want to be receptive to what you all want so any advice you have for me or any questions please let me know i'm i'm usually super nice about everything so i'm cool with criticism you know try to be nice but if you must be mean i'm not going to cry at least on camera but but anyway i'm serious i want to make this better so let me know what would you all want you know what kind of things you like what kind of things you don't like all right not too many questions left let's see noble and savage says woot hi all hey how's it going thanks for joining us oh john hanson says use a negative margin left on the input titles this won't impact on the standard clickable area okay i think i like i like that idea well i'm not gonna do it right now um but when it comes time for us to really start getting detailed on this as we get more of uh the filters on here yeah i'll definitely want to mess with this to to see if it looks better you know with them being closer that's a good trick uh nino says do you know when why um just for the terminal vibe v-e-n-v what's i'm not sure what that is was it supposed to be end i don't know uh in python can't be active from the terminal uh in visual studio code i i have no idea i i haven't done anything with python for years so i really have no ideas i'm sorry michael says i've been playing around with graphql slash react for a day or so so when i think like i understand what's going on watch out you might have a harsher 2.0 all right i'm looking forward to it yeah unfortunately i had to stream later today because i had other stuff going on so i know harsh it's most likely sleeping at least i hope he's sleeping it should be it's really late where he's at uh so i'm gonna try to stream earlier uh tomorrow if i can and i know he's busy right now with school so maybe he can join us for those of you who don't know harshad he's a veteran i guess of the channel and very outspoken in helping me when i'm doing something wrong uh but it it truly is it is helpful michael says but i'm three times his age so that's kind of creepy that's true yeah harshit is only 16. um and actually when he was 15 when he started watching the the streams and uh very smart i think he's gonna he's gonna be a very good programmer if he keeps going at this pace he's already good let's see carlos says jesse can you explain the yarn command on git oh yeah for sure let me explain that that again so what we did here on the terminal let me go up and show you um so instead of doing a regular git commit we did yarn cm and then we got these little prompts that basically writes a commit message for us and then the commit actually happens so let me scroll down i wonder if you would be able to see it yeah so here's where the commit happens so you see this is the commit message that we actually got feet right for new feature because we said yes we selected that option and then for our message we put in update search ui and we said no to everything else so this is our message so it creates a message for us depending on what answers we give to the questions so it's just a little additional thing that helps us make a nice uniform commit message all right michael says i'm out it's been fun hey uh see you later michael thanks for joining us so that's what we're doing if you want to know more about exactly what's going on behind the scenes i would check out the package json file let's see where that's at our package.json yeah so here's our package.json file and down here we have this cm and that does a get cz and we're using committed so check out committed and if you want to know more about how to do stuff like this and how to set this up and i believe there was a pull request for this so if you check through the pull request for this project on github you'll find one that has to do with this and there's probably some more info on on how to use it there oh carla says awesome thanks for explaining i always have a hard time thinking what to put in a commit uh with what i'm doing yeah me too for sure so this does help a bit it helps you kind of think through okay what am i what am i doing here so uh yeah it's definitely a really cool addition to the project oh cool carlos says awesome class had a great time learned a lot i'm glad i'm really glad um you know join us again if you can sometime i'd love to have you back java bat says would you recommend using react with es6 plus typescript i don't know that i can recommend it because i haven't really used it i've looked at other repos that use it i haven't in terms of typescript like es6 with react for sure for sure use es6 with react it's it's a lot better if you take advantage of what's available in es6 if you're not familiar with es6 it's kind of the newer things that are available to use with javascript sometimes called uh es2015 i believe es 2015 is is actually the the official name for it but most people say es6 uh in terms of typescript though i don't i don't know enough i don't have enough uh experience working with it to really tell you if it would be better it would probably depend on your project honestly to to determine like how much benefit would you get out of it if anybody else uses typescript with react and can give a better answer that question uh please you know let us know in the chat uh bhuvana asks does this session go on every day um yeah er monday through friday i try to do a session every day i don't always get to do a session every day but that's my goal uh viral only says hi thanks for the session uh you're welcome thanks for watching uh john hanson says i just realized that by using the array function find it totally isn't supported at all in internet explorer good that's i'm of the opinion that we're not doing our users any favors by supporting outdated browsers especially browsers that are so outdated that it's security risk to the user we're enabling them to uh keep doing things that are bad for them right to keep doing these bad security practices they probably don't even know it but if more sites i mean this may be controversial but if more sites just wouldn't work for them at all maybe it would spur them to say hey something's wrong with my computer or my browser and actually learn more about it and update if we keep supporting all these old browsers then we're just enabling hackers or whoever to take advantage of people who know a little bit less about computers instead we should educate our users with a little message or something saying please update your browser for your security and for a better experience also i think we got to think about like what is the reason behind why we want to support these older browsers right mistakenly we may be thinking like oh we want to include everybody and we want everybody to be able to experience our site i mean that's a good thought but you know at the bottom of it at the root of it especially if we're one if we're selling something are we just supporting older browsers because we want the most number of people possibly able to buy our product or do something online no i'm not saying that's what everybody does but at some point somebody higher up is probably thinking that like more people coming to our site equals more money so we want as many people as possible without really thinking like okay but is that with what's best for the user so that's that's my reasoning i'm not trying to be mean by not supporting older browsers but my reasoning behind not supporting older browsers is genuinely being concerned that people have no idea what kind of danger they're putting their themselves and their computers in by using such outdated browsers when there are so many security safeguards in the newer versions anyway i know i've talked about that before in the stream so if you've heard me say that before sorry for repeating myself um but that's my view on it i will say this if you do it like that and you don't support browsers um it's it's probably good to have some sort of check for a browser and display some sort of message to let the user know what's going on if the site just breaks and doesn't work that's not a good user experience at least if you have a very polite message explaining the situation to the user then you are actually providing some help so we'll have to remember to put that in this project or else i'm going to sound like a big hypocrite so let's plan on doing that i have done it for some of my projects uh i admit i don't always remember to do that and sometimes i do end up supporting older browsers occasionally i i don't do it a lot sometimes i just do it kind of accidentally because build tools like a lot of build tools take care of that for you but anyway i'm going to move on noble and savage says i met someone today that uses ie there's a lot of people that use ie on campus here that i run into always amazed john anson says there's a lot of elderly people still using internet explorer eight yeah somebody on campus was using internet explorer eight and had a hard time trying to use some of the sites that i built and um finally realized that they were on internet explorer eight and that was the problem java bat says do you have something like a set of css classes which you are using as a basis for every project uh yes something like that so uh depending on what we're doing if we're doing a react project we're we're always using material ui which comes with its own set i mean it's it's like bootstrap or materialize but for react projects if we're doing a non-react project we use materialized css and then we also have some classes that we just kind of carry over to new projects we usually use sas and we have some sas variables for different colors and things that we carry over so we do have a style guide that really needs updated right now so i kind of don't even want to give you the address to it because it needs updated so badly but that also is the idea behind it is to include some css that you can reuse on on other projects and and make all the websites will have the same kind of like standard look and ui so that users you know they don't have to re-learn how your ui works for every different site you know it shouldn't be like that and within one organization there should be some standardization you know for the sake of of uh lessening the confusion of the users and for for brand identity purposes um let's see john hanson says internet explorer is at 2.8 percent worldwide oh i'm glad i'm glad it's it's only 2.8 percent uh java bats also says svgs are always a problem for me on internet explorer interesting i'll have to check that out i haven't to take the truth i don't really test on internet explorer very much anymore so i just haven't noticed if my svgs are working john hanson is talking about says inline svgs have less problems on ie maybe that's why i do like to use inline svgs whenever i can java says thanks for the answer oh yeah no problem no problem um all right cool i think i got through everything if i miss your question for some reason just uh put in the comments or send it to me some other way and i'll try to give you a good answer if i can uh i do believe i'll be able to stream tomorrow not sure what time yet i'll let you know tomorrow morning at some point um and if you subscribe to the free code camp channel and turn on notifications you'll get notified whenever i do a live stream i also do live streams and videos on my own channel so if you're interested you can subscribe and get notifications on that channel as well i i'm gonna get ready to put out a new video soon because it's been since the beginning of march since i've done a video on my own channel so it's coming up soon if anybody really really wants me to do a video on a specific topic uh let me know somehow uh within the next day or two because i i want to get a video out here soon um let's see other than that i do announce on twitter and usually on instagram when i'm gonna stream so whatever method you prefer to get your news uh please you know follow me on those places and that's the best way to find out what time i'm streaming um yeah all right that's it for me thank you all again for watching and for being involved in the chat and for all your your help as always and i'll be back tomorrow until then have a wonderful day