React UI Updates (P4D16) - Live Coding with Jesse

Key Takeaways

hey everybody welcome to live coding with jesse today we're gonna handle some ui stuff in particular the first thing i'd like to go over is this uh search input here so i'd like to add a little icon so that a user could close the search uh let's see we had something like this on another project let me show you what i'm what i'm thinking about yes um so i think it'd be something like this uh you know what i think we have a bug right now but you'll be able to see it maybe no oh well basically what i'd like to happen is you click this it pops out and then there's an icon to close it and you can also click on the search icon and that will initiate a search so that's the idea all right so we don't need that project up right now let's get that out of the way um we do have a getter channel now so if you're interested in that um check out i don't know what link to give i guess let me give you this link i think that'll work i'm gonna paste this in the live chat now oh all right see now the uh the camera's frozen from uh goodness all right let's move that out of the way let me grab this one which is way too big let's see if we can shrink it i must have uh i think i was messing with this at some point and got the dimensions all messed up it's kind of odd that it just started happening it hasn't happened in a really long time wow oh well um so we'll have to make do with this camera angle i'll try to remember to look uh over here if i can um but here let me i'm gonna have to sit in a different spot okay um all right so that camera and that's that's too big let's try to shrink that a bit maybe okay all right that looks better um okay cool so anyway i pasted the link to that getter channel uh in the in the live chat if i remember i'm gonna have to put that in the description i keep forgetting to do that but in case you're watching and you can't see the link you're maybe you're watching later on or uh just listening it's getter.i am slash live coding with jesse oh i'm sorry it's live coding with jesse free code camp so all of that all right and um just want to show you before we get started a project that one of you made so harshit who is a frequent contributor so i don't know what maybe for the last month or so very frequent contributor and uh so he has made a pomodoro timer you all know that i um that i use a pomodoro timer and i use the tomato timer well he's made the same functionality if not more than the tomato timer and he's done it in react with gatsby and then published it with now which uh if you're not familiar with now it's it's from the same people that made next uh js so i think it's i think it's zeit is the company anyway really really useful probably i can't really think of an easier way aside from github pages to deploy something get up pages is somewhat limited but now it's just a super super easy way to do it and anyway so if you haven't used that before i recommend it anyway uh so you can see pomodoro timer can start it stop it take long breaks reset right so it's pretty cool pretty cool so anyway thanks for sharing that hardship and also the uh repo is available um so everybody wants to check that out um pomodoro hyphen gatsby is the name of the repo but looks pretty cool the file that has most of the the most stuff going on is the timer.js so that's that's where all the the logic is i suppose anyway really cool so maybe uh let's use harshet's timer today shrink it down a bit and put it up here in the corner and since we've started here may as well get started we're going to do two pomodoro sessions today and then questions after um yeah we'll actually we'll see i need to be done in about an hour or so so i can go to a meeting and i keep forgetting that i'm on a different uh screen now let me see trying to let me aim this camera better there we go all right that's more centered okay um okay well i am getting a call so sorry about this hold on hello yes all right sorry about that uh now's a great time to give my disclaimer about this i haven't given this in a long time but live coding with jesse is all about showing what my day-to-day life is like as a front-end developer so mistakes included interruptions included so sometimes i will have somebody knock on my door at my office and i have to go talk to him or i'll get a phone call so that happens i really don't like when it's that long of a delay because that's no fun for for you all but is a good indication uh so i'm going to take a minute and just explain why i think this phone call was actually ended up being a good thing so that phone call which took i don't know 10 minutes maybe was all about the login system for the bulletin so one of the reasons why we're redoing the bulletin so we're redoing this and we have a new hopefully better login system and eventually we we may even tie it in with the single sign-on system for the university so it should be even better is because i get calls like that and trying to walk people through how to sign in in this case it was an old version of internet explorer that was the problem but then even when switching to chrome there was still some confusion and that's why it took so long so i think um my my co-worker here who is trying to access the bulletin can access it now but i'm still there there was some trouble so i'm still going to set up a time tomorrow or the next day to go over and check out her computer so you could see how a lot of my time ends up being spent on that that login so i think it definitely merits a a redo of the bulletin and this has been out for a year now uh just about a year and so for the whole year i've been you know getting these these types of calls so there were a lot more when it first came out so i'd say the first six months there were a lot more calls than this last six months but still um you know certainly interrupts the whatever i'm working on and and can take up a lot of a lot of time uh so anyway i guess the [Music] the the moral of the story is if you do things right the first time it'll save you a lot of time in the long run not that i did it wrong i don't think it's just i i guess at the time i didn't realize how many people on campus were using very old versions of browsers so that was most of the calls that i get the solution is simply well don't use internet explorer 8 anymore or something like that or firefox 4 so anyway all right so let's um let's get started all right someone had said turn the mic on is you all can hear me now right i did turn the mic on um yeah i thought about leaving the mic on for that call but then i thought well maybe this person wouldn't want their conversation here but uh i actu i could have actually there is not really anything that i said that would have even given away uh any secrets you know okay cool okay so the mic my mic is on now so i just wanted to verify before i did anything important all right i tell you what next time i get a call if it's a call like that i'll turn the mic on and uh then you all can hear uh how i how i deal with um i guess troubleshooting uh issues over the phone all right so let's go in now and uh let's go into our code and figure out where this component is and let's try to get some of that functionality like i was explaining uh earlier so uh here in what is this at bar dot js and app.js.js we have we're bringing in this icon button and that's our search icon okay and then we have a handle search toggle okay and that happens when that happens let's see let's see if this handle search toggle there we go okay so here's where it comes up so if you're not familiar uh with this in react uh if you're not familiar with react at all or maybe you're just starting out with react one of the i think it's a cool thing but it's also can sometimes be a confusing thing is that you can actually pass up actions up to parent components and then have the functions that you'd like to be called on that action actually reside in an entirely different component and that's what we have going on here so we had in an app bar right we have on click handle search toggle but when we try to find handle search toggle right the only other place on the page where we have that is where we're passing in right all of this so and actually that might be is is that a style for search title or these are our profs i think actually these are our props okay so it's just a prop we need to go up to the parent component which in this case is index.js for our layout folder and we have you can see our top bar component so in our for our top bar component we're passing down right this function and let's see where we have handle [Music] handle search toggle so this is what really gets called even though it doesn't actually live in that um component um okay harsh destructuring that's the word for it uh i always forget that that's the word for it so when you break down the props like we just saw um so you don't basically you don't have to pre type in this props and then the prop name every single time it's really useful if you have a lot of props uh you can just destructure and have all the props get passed into the component you don't have to worry about using this props so uh very useful but here's basically what what happens and this is really what we want to um what we want to work on so we change the styles for our search icon and our search styles let's see so let's check out our state here's our search styles search icon styles so in this case this says so we start out with display non-display block okay and let's let's go back let's let's see it in action all right so we're going to inspect now i have um the react dev tools there we go okay so with our dev tools let's go to this component which was okay this was our index component so we should be able to go can we go top bar oh no we want to go up state there we go okay so here's is our state right now so hopefully you can see that over here in the corner let me make sure i'm not covering it up okay i'm not all right so just check this out so in real time we can see what our state is on that that top component all right it's not in terms of the layout folder it's the root component so we can see our search icon styles and then our search styles okay and we can watch them change actually i should uh let's see if i can get him to change by clicking there we go okay so let's inspect again and go to correct i have to go down a bit oh yeah am i too far down route stay all right let's go back to the it was home page simpler there okay there we go it's fine apollo home yeah there we go so we're in layout i probably could have found it on the other one i just wasn't patient enough to click through uh if anybody knows of an easier way to open all this stuff and get down to a component let me know is search the the only way that's really easy to do that i know i've i have used a search before but i mean i guess i could find it down here oh well um okay so now let's let's see the change happen so right now search icon styles this display block search styles display none and then when we click this right they flip okay so that's that's how we do that transition in in react right um so let's see let's go back here and let's go to first thing we need to do i guess is put in those elements that we want right no sense in putting in a new state and everything if there's nothing for it to change see gps icon so let me check this where are we at top left okay this is is this what you are talking about this icon select the rack element in the page to inspect it cool and it takes you right to it i like that cool i never knew that awesome thanks for the advice uh harshit and john that's really cool so if you want to just be able to click something and go right to it and react you can click the target and then let's go up to here this one and then click right on that element and it'll take you right to it really cool let's see okay so let's go into our at bar dot js and now we want to we want to add in we need to add in a close icon and we're going to need to change some of the styles for the search icon okay so let me see switch please okay my timer ran out uh thanks for reminding me to check the timer so um so any so harsh it on on your timer i guess you don't have a sound i wasn't prompted to allow allow sounds or anything or allow notifications yeah so i didn't hear any audio it's possible that i just i missed it i wasn't paying attention um but uh okay so let's take a short break right now um in between coding sessions we take a five minute break and i go in the live chat and answer questions and then at the end i answer anything that i wasn't able to get to in our little five minute session so let me scroll through and let's see oh rob was able to make it uh awesome so i'm really glad that you could make it um rob had commented earlier on one of the videos about not not being able to make it for the live uh stream so really awesome that you you did get to make it uh let's see oh okay so on harsh it's i'm assuming with the pomodoro clock you're talking about uh has a bug with github pages that it it redirects um to the main page uh redirects request the main profile which causes conflicts okay yeah there are actually i there is a it's a little weird when you're trying to use some some types of things with like some types of sites with github pages i've had some issues before i i believe i've found some workarounds for that but um yeah it's not 100 straightforward let's see her should ask if anyone has ever has tried firefox developer edition says it's really very cool i actually haven't i haven't tried that so maybe i'll have to try that out okay so uh anthony asks what are the topics on this live stream and uh some of the responses where material ui and react node.js um express yeah yeah definitely i mean that pretty much covers it um but i guess we use create react app to you know scaffold the thing but um other than that i think that does cover everything eventually when we make this live uh it's gonna sit behind um engine x acting as a reverse proxy so we may do a little bit of configuration with nginx but just very minimal let's see uh josh modian says do you use visual studio code i do use visual studio code sometimes did i never actually start this no i didn't uh oh i did something okay now it's working i mean obviously i've already taken up several minutes but um okay cool harsh is saying we just swapped the displays yeah i just i kind of wanted to show um show it like in the react dev tools just number one just in case somebody's never used them uh but then also just to get the idea for people coming from like a um like a jquery mentality more to react that like we're not we're not directly manipulating the stuff on the page like we're changing state and then based on that state react does its thing so um i know when i was first starting with react that was a shift like i i had to get used to that so anyway so i mean hopefully it was it was helpful uh josh rhodey and what program do you use oh um right now i'm using adam as my editor uh joshua says what do you mainly use i mainly use adam so right right now adam's my primary editor and then sometimes visual studio code uh so i i keep thinking about switching to being having visual studio code be my primary one i just haven't made that switch yet um so it's possibility it might happen let's see okay so i've gotten through everything in the live chat right now and i've probably gone over my five minutes at this point i'm not sure because this this isn't the the right time so uh i'm gonna go back now okay so it's about nine minutes after 2 p.m my time uh so yeah so let's do one i guess we'll try to get in one more pomodoro session um okay uh let's go back here and okay so we need to bring in a search icon or i'm sorry a close icon uh where are we bringing in our icons okay let's just import another one here and i'm just gonna guess and say close and we'll see if it works if anybody else happens to know what the real name is let me know otherwise we might be able to save a few minutes by just putting that in and uh let's see oh we have one more question so matt matt correct me if i'm pronouncing this wrong is it matija or matija i don't know uh let me know i really want to get it right so jesse will wrap you here in the future what do you personally think um if if by future you mean the next like three years one to three years then yes definitely if we're talking more like five years probably uh but five to ten years who knows right i mean it's that's just in computer time it's just way um way too long so harsh is saying reload the timer page i did i reloaded it and started again oh you know what maybe it's the delay in the video so you might be seeing you might not have seen it yet so uh sorry about that let's see i lost my train of thought oh okay we have that icon so let's throw this icon in and [Music] now we're just gonna see if this this even does anything if it even works so yep it did great so it was named close awesome okay so we now have that close icon and the search icon we don't want the close icon to be visible by default though so what we need to do let's see how we're doing this style switch icon styles and then we have okay it was matia awesome i'm glad i got it right uh all right and that goes for anybody if ever if i ever pronounce any of your names wrong please uh call me out on it let me know all right so sorry for kind of looking around on this harshit actually made this part i believe yeah you did the search right harshi um so harsha did this so i've seen this only once whenever i reviewed the pull request and that was a little while ago should apply input styles see an input okay um yeah where's our input here it is search styles okay so let's go can i throw this style right let's try to throw it right on the icon oh okay so matthias uh it's croatian okay cool i don't think i've had any experience with uh with croatian before so uh that's really it's really cool um style okay so i i know i've said this before but in case you you haven't been around or you know to hear this there are many ways to handle styles in react so this is one of the ways that we're doing it we're passing around styles like they're variables uh we're bringing them into our components so we certainly could style with regular css like we're doing here all right but we're choosing to do it another way and um i don't know that it's settled that there is a number one best way to do styles yet and react it's still kind of wide open so um which is fun it's it's fun we get to try a lot of different things there's a lot of different opinions on on how to do it search icon style nope that's not what i wanted i wanted search styles there we go all right let's save that we'll go back here and check it out we should see yep we see that let's open it okay and we now have i believe conflicting styles so let's let's actually remove this it makes sense to remove this and you know what let's just let's copy all of this all right and put it here and what we want is to change this to search styles and i'm going to leave this on click for now but we we may end up changing that and then we're going to add our close icon here and let me get rid of some of this space because it just annoys me and um there we go oops that's all right okay all right so let's check out uh what it looks like now we should be able to see the close icon yes we can all right the placement of that icon is actually not bad i had envisioned it as being on the line here so i guess within the input but that works and we can certainly take care of that as well with a little bit of positioning um yeah but for now just trying to get the functionality what we want to happen when we click that oh is it already in there yes i wondered if that would happen i i was hopeful i didn't want to say it because i didn't want to sound even more like i don't know what i'm talking about uh but i was hopeful that the way harshit made the handle search toggle that it would just do the opposite right of the styles which is exactly what he did so that was awesome and look at that so this is the functionality that we want the only other thing that i'm thinking about and i'm not sure about but let me run it by you all and let me know what you think um previously on some of my projects i've included a search icon sometimes on this side sometimes on this side i can't remember which which side i usually do but i include a search icon uh my thinking being uh someone may want to click especially on mobile maybe they would prefer to to try to click some sort of icon do you think that's a reasonable um do you think it's a reasonable thing to think or am i just trying to build in things that are unnecessary here um i uh i want to hear what you all think because i wouldn't want to add anything into the ui and add functionality that is not going to improve what we have right then it just complicates things so i i'm kind of really lean towards minimalistic you know is that everything there should have a purpose it for being there and it should be useful to the user so um anyway uh so i'll um i'll just keep checking the live chat to see if anyone has any um any input let's see okay so dessal rollo de serolo uh says i think it's not necessary okay actually let me change before i forget i just forgot to change the title for this uh oops um this is gonna be close search close search yeah let's do let's say close search um i would i would much rather be more specific here i don't i don't want anyone thinking that if they click it it would close everything out uh because you know we we do have a lot of people that uh that view the bulletin that are very unfamiliar with computers so i'd like to be as specific as i can actually now what i think about it i want to change the font size for those tool tips because the people who really need those tooltips probably also need larger font sizes so we'll have to look up in uh material ui if they've already thought of some way like to pass a prop or something if not we can just change it with css but i really i think it could be be a little larger okay let's see definitely oh okay so blake's in favor of the search icon oh okay rook rook mentions uh auto focus on the search bar that's a great idea let's see okay john hanson says mobile logic for ui can be tricky only way to really know if a button or icon to click for a function is by using something like google tag manager actually yeah i mean we could we could put click handlers uh um click tracking on there just to see we put uh on that resource center project that we we did before this i put uh click tracking i think i did it it could have been somebody a pull request if so uh sorry i've i i'm not giving you credit here um but i think i put click tracking through google analytics on everything and it was pretty simple um actually i was just checking the analytics earlier today and we got a lot of good data on clicks and things uh our says will you set up analytics for this yeah we'll definitely set up analytics for this so my the head of my department has to go to sometimes to the president of the the college the president university or just in general like the board and report on how these websites are doing so she really likes to have data like this like how many people clicked to download this and how many people went here right so so i always try to give as much data as i can sometimes i never use the data but it's good if i have it if she comes into my office and says hey i got a meeting in 10 minutes can i have this data then i have it and it makes me look good and it makes her look good so we're definitely going to do analytics right so auto focus search icon autofocus tricky sometimes before you scroll ahead somewhere you don't want add placeholder okay all right so we have a a lot of good ideas let me try to get them all here and just explain it so uh a placeholder when you open this up that definitely makes sense i have a placeholder here i like that we have some conflicting opinions on whether or not we should put a search icon in there so let's save that for last we may not even have time to do it no matter what uh for today's stream but let's save that for last since we're still somewhat undecided on it and then also we're talking about auto focus which there's some discussion about auto focus as well because it can mess up the scroll sometimes i really do like the idea of auto focus because you know you have to click you click search and then you have to click here i i tell you what i'm going to go with auto focus but i'm going to keep in mind when we're testing and try to make sure that it's not messing up the scroll but i i know i would really appreciate in auto focus because if i'm clicking that search icon i want to search so auto focus would be great so let's do that let's so we'll do two things for sure assuming we have time we'll set up auto focus on click and then we will put in some placeholder text there okay let's see and i actually want to i may just check this out on my other screen quickly i just want to look at what the search thing looks like currently on the current bulletin and it looks like okay we actually do let me let me just show you this now i guess so in the current bulletin when you click the search icon so we actually we change the entire uh nav to the search but we do actually have a search icon and a close i wonder you know what i think my search icon isn't even clickable i don't think it's clickable so i think if we just put a placeholder that says search that'll be fine i don't think we need the icon now we do obviously include the close but the search happens when the user stops typing or sometimes even as they're typing depending on how fast they're typing so i just want it to be familiar to the users who are used to that search so the look of it is going to be slightly different because we're not going with this huge search bar that changes the whole nav but i'd like the functionality to be you know identical if possible if not at least as close as possible just to make the transition you know a little bit more smooth all right so let's add where's our text field let's see if we can just say placeholder i don't know i don't know what it is for material ui um which is the the ui framework that we're using but let's try placeholder because that makes sense if it works then we don't have to look it up and save some time yay that works okay so we have the placeholder it goes away when you type perfect and it comes back we don't type excellent all right that was a great idea i think it was hardship that had the idea for the placeholder so awesome um let's see so that was easy it didn't take very much time what was the other autofocus so autofocus may take a bit more time i don't know that i've ever done auto focus and react no i take that back i did i have done it before but it's been i think i did it in march so it's been quite a while so i will have to look that up so let me i'll look this up and all right let's see let me see if anyone has anything to say about the autofocus okay if anyone has implemented autofocus recently in react uh any help would be appreciated otherwise i'm going to try to look it up um let's see also he said uh so we have now let me know if i'm pronouncing your name wrong because it's written in characters i'm not familiar with so i'm arabic i think but is it uh ibrahim so let me know if that's wrong but i think it's ibrahim um but like i said the characters are in arabic so i i could definitely be mistaken but anyway abraham says i love your channel it's very active uh and then have a heart on there so awesome i'm really glad you you love the channel and uh thanks for watching and joining in in the live chat okay so harshit says we could just make a ref and call focus on click oh okay rook that's a that's a good idea so harshit's suggestion will definitely work rook has another idea that could save us a lot of time uh auto focus as a prop so let's try to put autofocus as a prop on the search bar rook saying because it only appears when you click the search icon it should be fine right um yeah yeah you're right it should be fine because it it won't exist in the dom at all until you click so there's no real danger of it accidentally being auto focused and not visible all right let's try that all right it could work it's it's such an easy fix it's worth a try even if it doesn't work okay so it didn't work um but still that was good thinking though uh eunice says how did you learn arabic i didn't google translate learned arabic so i just think it's polite to try to figure out someone's name even if i don't know the characters so um i know for me it would i would feel good if somebody took the time to do that so anyway so i think it's worth it so on my other screen i google translated it so unfortunately i i don't know arabic um oh harsh it you're right you're right um my mistake i missed i mistakenly said that this wouldn't exist but it in fact it does because um the way harsh it made it it's it's only using display none it's not actually um removing a component so my mistake i usually do stuff like that uh where i i make the components actually completely be gone you know be rendered or not rendered based on on the prop so anyway so yeah so that might be an issue but let's try i guess i guess it's worth the shot just to check material ui and see if they have some built-in way of handling something like this it could save us some time um let's try it out text field let's see that's what we're using right text field yes okay auto focus oh okay um cool so autofocus does work we just needed to camel case it so let's see let's try this again auto focus you know what that's not going to work because it auto focuses when the component mounts but then i'm clicking away so that should that will undo the focus so actually let's let's see i wonder if this will work no it didn't i was wondering if when i typed it would actually go in here um even before so let's let's switch this up a bit um no i'm not gonna have time for this shoot okay so in case i don't do this on the stream and i do it before tomorrow stream um actually i'm not going to stream tomorrow i'll give you more info about that in a second i'm not going to have enough time before my meeting to implement this but here's my plan right now when you do handle search toggle when when you click uh a button that fires off handle search toggle it's just changing uh the css from display block to display none you know back and forth what i want to have happen instead is that this text field actually renders on you know on uh on click so what we'll end up having and we'll have to pass down let's see we'll have to change up a little bit about what's going on with our state and then make sure we pass it down like we're doing with these search styles and then we're going to have to adjust our handle search toggle function that resides in our index.js within our layout folder but the end result is going to be that we're going to end up having some sort of uh ternary that is going to check the state which the state and might end up being like show show search um input or something which would just be a boolean and so we'll end up having something like show search um and then if we are showing search we'll put all of that in here right we'll show this otherwise we'll show this so actually i won't do it like this i'll end up doing it like uh question mark okay i am hearing the beeping sound now so my pomodoro session is up and then we'll put this in i actually might have time to do this uh so this is what'll end up happening and so right now it's going to break because i don't actually have so show search being passed down as a prop but what we'll end up doing is in index we'll add show search by default it's going to be false okay so and then where we have our top bar we're going to pass on so show search equals this dot state dot show search and then now what's this video uh tool to title a closed search uh we gotta wrap it um yes we can't have this so let's just wrap this in a div oops and this should be good yeah sure it's just not defined and i didn't bring it in here so let's let's destructure a little bit here show search all right now it should work okay so we had something happen which i'm going to take as a win right now since i just tried to do that as fast as i possibly could um yeah which should happen so this is search yeah i don't know what went wrong but i don't have time to check it out right now but you can see basically the the concept that i'm trying to go for um and the reason being i think we could get this auto focus to work if um if we can have this actually this component render when you click the search icon because i believe this auto focus fires when the component mounts so we want to delay the mounting until the user actually clicks on that icon so anyway that's the idea obviously something's weird about it right now since it's not showing at all but we'll get that fixed it could be something as simple as wrapping it in a div somehow change the styles not sure okay uh let me try quickly to go through the live chat and answer all your questions and let's see i'm trying to find where i left off okay so hardship has pasted a link to a gist that's has a debate about css uh and react and and how to use it so anyway it looks really really helpful let's check and bring it over here so i'll i'll paste the link in the chat as well so it's clickable for you all it's way too long of a link for me to actually read out to anybody that that can't see the live chat so sorry for that um if someone wants to put in a comment to the video that would be awesome um i'll make sure it gets approved a lot of times uh if you try to paste a link in a comment to a video it gets flagged as spam but i'll go in and approve it okay so look at all the different ways to do this so really cool thanks for sharing that harshit uh abstract cats says this seems like a cool learn session as well for those of us just learning i started learning web design about 10 years ago and got distracted but now going full steam ahead awesome awesome that's that that kind of sounds like like me as well um i learned uh some some web development in um in high school and then didn't really do that much with it until too much later on so i'm trying to think actually 10 years might be it might be about the same 10 years so uh yeah well hopefully you learn stuff i do my best to try to explain things that i think might be confusing to people who are just starting out or not familiar with react so you know i don't always i'm sure i i just skip over some things and don't realize that it's i should probably explain but when i when i remember i really uh try to explain as well as i can please all right let's see i'm scrolling through the chat here there's not a whole lot of questions there's a lot of um a lot of stuff i already kind of went over when we were um kind of going back and forth trying to find solutions to this auto focus thing josh modian says for the closed search you could try to make it so that when the user clicks off it closes um yeah yeah definitely i think that's um i actually have thought about that i'm gonna think when i was thinking about it earlier and uh i there was some reason why i thought maybe i shouldn't do it and i can't remember now i can't believe i can't remember i've just tried to think about it but that's that's actually not a bad idea um let's see oh harsha said it it should have played the audio it did it did play the audio this time so that that pomodoro timer i i heard it um oh okay john b says try auto focus true i could try that yeah i mean i i assumed that i could just put it in there and it would automatically be true um usually you can do that uh okay yeah so maybe uh um i'll try that out probably sometime tomorrow um let's see immediately i click a post all right harsha says commit this pr immediately so have you did you submit a pull request now no let's see what time it is okay um philip says i haven't started i started learning javascript but went probably too fast since i missed a lot of the vanilla javascript um but i work full-time with react now should i fill my missing basic javascript knowledge um yeah i i think it's it's always good to have a good knowledge of of javascript um so if you if you can get your work done and it's good work then i wouldn't make it you know a huge priority to fill that in but it might not be a bad idea to just go through some of the basics a little bit every day even if it's only a few minutes i think that you know that would be good because you never know react is is certainly relevant now and i think it will be for at least a few more years but you never know what will happen in the future and the more javascript plain vanilla javascript you know uh the better you'll be able to adapt to any javascript based system that that comes up uh so yeah so probably don't need to learn it right now you know not this month or not even this year but if you do a little bit at a time you i think you'll set yourself up to be able to to adapt uh to changes and make sure that you know you could still do good work uh no matter what happens oh okay how should i get it harsh is saying i should commit this okay cool um yeah let me commit this then and um then i'm gonna have to wrap things up because i have to go to my meeting but um okay that looks good tomorrow i'm not gonna stream so i was looking at my calendar earlier and uh i just have so many meetings tomorrow uh that in and they're spaced out so that i have like an hour between meetings so there's not really a great time for me to uh to do a stream i mean the only possibility would be if somehow i got into work really early and then did a morning stream i don't think that's gonna happen um so on the off chance that i do get in really early maybe i'll do that otherwise most likely not gonna stream but wednesday is looking good for a stream i currently have no meetings scheduled so i think wednesday's like nearly for sure there's going to be a stream unless something weird happens but tomorrow probably no stream uh and if there is one it will probably be in early morning eastern time so anyway i have to go take okay harsha just said get push origin master thanks i i may have forgotten that actually i probably would have just immediately gone right to my meeting and forgotten to push that so um oh cool um all right gideon's back uh so gideon says been away for a while it's not easy meeting up with internet connection and consistencies i missed everyone but it's good to be back home uh awesome hey uh really glad to see you uh in the chat i hope everything's going well for you um okay so now i do have to go i have to go to a meeting in a few minutes but i really enjoyed uh this live stream um it was really cool definitely um a lot of new people in the chat that i haven't gotten to talk to yet so i'm really excited about that and uh yeah so hopefully you learned something and uh i we got some cool stuff done um so yeah so i guess i'll see you most likely on wednesday and uh until then have a great two days