React, Node, and the Salesforce API Part 2 (P5D93) - Live Coding with Jesse

Key Takeaways

hey everybody welcome to live coding with jesse i'm jesse and i'm really glad to be back i missed you all uh i was in new york city for free code camp top contributor party and then before that i was in salt lake city for react rally so if anybody has any questions about how all that went let me know i can answer that when we do question answer sessions and then at the end of the stream um i am still a little bit exhausted from it all because it was really awesome but i had very little sleep uh from basically like wednesday until yesterday that's a small amount of sleep but i did so much awesome stuff uh and so i'm kind of excited for what we're working on today uh it's it's pretty cool um we're gonna continue on with what we're doing in the last stream so in case you didn't see the last stream i'll give you a quick recap and also uh if if you're totally new and you haven't seen any of my streams let me take a minute just to explain what we do here so i am a full-time front-end developer employed by a small university and this i live stream my daily work so these projects are projects that i'm actually working on the project we're currently working on is the new main website for the university so it will be franciscan.edu when it launches these are not exactly tutorials although i hope that you all learned something from them i certainly learn a lot from you when i do them and so as you watch it really the value in this is just seeing what what it's like for me as a front-end developer and seeing how many mistakes that i actually make every day and i still manage to keep my job and how i work through those mistakes and and how i make decisions for projects so i do my best to explain things as i go along and feel free to ask you know any questions i don't think i've ever had anybody ask anything that i didn't want to answer so feel free to ask questions pretty much nothing offends me um i think that's it oh so i do pomodoro sessions for the stream so we'll do 25 minutes of coding and i won't really answer questions during that time and then i'll take five minutes to answer questions we'll do another 25 minutes uh session of coding and then at the end of the stream i'll take all the remaining time to answer any questions that you all have so if you ask a question it seems like i'm kind of ignoring you don't worry i'm only ignoring you for a little bit i'll get to you at some point uh okay so here's what we're working on today so we have a react project okay so a website progressive web app that's running react which is a javascript library and we need to create a contact form that when a user fills it out they put in their first name last name email and then whether they want to be uh undergrad graduate or online student at this university we need that data to be sent to salesforce and automatically create a new record for that student uh in our our sales force uh database or you know however you want to call it so last week our last stream we successfully created records okay but we we didn't make the form yet we just kind of did it all and hard-coded it in the back end with in our with node.js in our server.js file okay so today what we're going to do is we're number one we're actually going to create the correct records because if you remember we did get to send data over but it it went to the wrong place so we're going to try to go to the right place this time and we're going to try to actually create the form so that we can fill out the form on the site hit submit and hopefully have it have everything work okay so that's the plan for today we'll see how much of it we can get done and i'm going to go through real quick and just say hi and see if there's any questions i should answer right away before we get started and okay so hey everybody i see some some new people some old people i'm just going to say hi all at once because there's a lot of people saying hi um oh cool uh sore app says they use salesforce a lot to automate stuff awesome so uh maybe you can you can help me out as we're going through this uh what's up um all in all ask what type of job i'm doing i think i kind of explained that let me know if i didn't if you have anything more specific that you'd like to ask um let's see steven asked why i didn't get interviewed at the meet and greet for free code camp we just ran out of time that was all and i kind of wanted to hang back because i figured you all get to hear me talk all the time uh some of the other people you know are just kind of behind the scenes so i figured it'd be cool if they had a chance uh so i kind of waited and thought if we have time i'll get on there otherwise you know y'all can ask me whatever you want okay so let's get started i should show you my screen first that would help all right so here's what i've been working on and let's see all right so the latest thing that i've done that's different from the last time is i've um i've changed out a few things so number one i got these environment variables working so they weren't working the last time and there's a good reason why they weren't working because i didn't require this this dot end okay so i needed to to bring in that package first for this all to work so once i did that now it works so our file with the environment variables now works now what this does mean is if you're working on this project locally this will not work for you so once we get the form up and running if you try to actually submit the form it won't work because you won't have salesforce login info which there's not really anything i can do about that if you wanted to kind of use this on your own project you'll have to have your own salesforce account uh and and set that up and down here what i've done is i've put all this code that we use to send data inside this server.post and the the path now is inquiry hyphen submit so we're going to send from our front end we're going to send a post request to inquiry hyphen submit and then it's going to take that data that we send and it's going to use it here so for now i'm just hard coding because we're going to test it out with some hard-coded stuff just to make sure that it's creating a record in the right place with the right information and i didn't start my pomodoro timer let me start that and uh while we're here i just wanted to show off so a colleague of mine liz uh who's awesome and uh super smart showed me this website that she made when she was i don't know like 10 or 11 so i just wanted to show it off i'm i'm kind of impressed this was from 2001 like i don't even think i had a computer when i was 10 years old so i mean she was already making websites using html i like it so i thought i'd just show that show that off so shout out to liz thank you for sharing and thanks for giving me permission to show this on the stream so if any of you like are struggling with some design ideas you know feel free to use this as an example all right back to the code let me make this a bit bigger for you it's probably way too small i should probably start the server uh you're in dev i think it's dead all right that is probably big enough for now so i think before we were sending we're sending the the data as i don't know what it was it's something else i think the correct thing to send it as is contact so we're gonna hopefully that'll work and i have all the fields here except the last field which is going to be either graduate undergrad or online but i'm not sure what that field is exactly so i'm going to leave that blank for now because that's just going to take me like going through all the fields possible and trying to figure out which one matches up i'm not going to do that on the stream because that's super boring and we don't really need that to prove that this will work right so let me save this uh i was hoping we'd get some auto formatting on this but i guess not yet this is okay though why i really thought we would get a lot better auto formatting anyway i'm just going to change this to single quotes just to get rid of these squiggly lines because they always red squiggly lines always look so angry you know oh now we have some formatting okay cool so our our next step here i guess what we can do now is just like move this out of here and just call it like right away so let's do that so what we'll do is grab [Music] basically we'll grab all of this i'm just going to copy it and then paste it here will that work maybe actually let's let's take it out of there i'm gonna put it up here so this should just run right which is we're like automatically just calling all this so this should run as soon as the server restarts and then we can check well we'll see what comes up we should get an error message if it doesn't work so this will be our first check if it works then let's we'll move on and we'll actually create the form okay if not we'll switch it up try to make it work so let's save it this should auto restart all right cool we got some stuff in here invalid login all right then let me i have my end file open on my other screen all right so let me double check that i have the right stuff in there so unfortunately i'm not going to be able to show you this because then you'd have my password so it'll just take a second okay and so just put my password in and now i'm gonna get a security token so when you go to put in your your password here uh that it needs so like up here this is actually going to be if you're trying to do this on your own your salesforce password that you log in with and then you're gonna combine that with your security token and that will be what you use so let me um i'm just going to completely shut this server down for a second and then start it back up we're still getting it invalid username password security token huh all right that's a little bit weird because we this worked before um hmm the only other thing i could think of is uh resetting the security token also why i have this check out this swag i got it reactor alley so apple was there giving out free stuff and so i got a cool cup i have some iced coffee in there right now um all right let's do this so i i do have two different security tokens one of them i thought was invalid and i i thought i was using the right one let me try the other one if neither one of them works then i'll try to create a new security token and i know i have it up somewhere on my other screen sorry i have to do all this on my other screen there's really no no other way around this i think i deleted the email with my security tokens where's the trash there we go deleted items where are you that would have been what day thursday yeah i think we created that first token on thursday oh where is it all right i don't know what happened to it so i guess we're not going to try the old the old one do you know what i may have had it saved let me go back to that info see if i can just go back to the original see if it'll work all right i'm gonna save that now and see this will work hmm oh you know what i know why it's not working and this is silly so um in my m-file originally on the last time we streamed which you know what it wasn't thursday because i was at that conference it was probably monday wow it's been a while so last monday i just named them username and password but when i i redid some stuff in here and i changed the name to salesforce username and salesforce password uh because i thought you know maybe i'll have to put more stuff in this m file and i i want to make sure that it's clear that these are the salesforce username and password so [Music] i'm going to change the names here and then everything should work all right and i think i need to type in there we are cool a different error nice all right so here we are we we went in successfully and it looks like we have an invalid field all right i was i was a little bit worried about this there's no such column as first name okay all right let's scroll down here so um all right let me look in salesforce and i'll see if i can show you i'll um i'll pull this over and show you but if there's any student information i can't so actually yeah you know what i i think i may end up looking at student information so i'm not going to show that live uh i'll just like describe what what i'm doing here so my music stopped on spotify so let's go back okay um all right let's bump this down so good all right so let's try to just do this let's say name let's try to run it with this name invalid field why is it still it's still saying first name uh why i just changed that oops you know what i probably changed it in the wrong spot that's why and we uh we copied and pasted it up here so maybe that's why now no that was the right spot all right let's try it again oops oops let me totally shut the server down and start it up oh no i had this one run going too that's why i kept running everything twice let's get rid of that okay okay all right let me check to see if this even you know came in at all all right so i don't think anything was created let me check my time all right we still about nine more minutes until i'll go back and answer questions all right so let me look at this a bit more hmm hmm if i had name or was it capitalized i can't remember if it was originally capitalized or not so i'm going to try it out with being capitalized see if it does makes any difference at all and it doesn't look like it does please check the security settings of this field okay um i wonder if i can add i need to find in salesforce where the state is going all right we might just skip might just skip to the actually making the fields in react because at this point i mean we know we know we're connecting to salesforce the problem is just making sure that we're we have the right keys for our key value pairs uh for our data so that's that's just gonna have to be me going through salesforce and trying to figure out exactly what uh what these keys are because to be honest it's not exactly clear and i'm not the one that set it all up so maybe i just have to get a hold of somebody else uh so let's switch it up a bit and what we can do now is get rid of get rid of this so we don't have this run every time we uh we save something okay all right let's get rid of that and let's go to where's this going to be you know what let's make a totally new component for this because i think we'll have this on on multiple pages so let's go in here and check out our components so our components folder and we're gonna make a new file and we'll call this um inquiry.js because it's going to be the inquiry form and let's just pull in some code from another component maybe let's just pull in the code from this this hero component just something just give us a little boiler plate right and we'll take out we'll probably want grid we'll definitely want button uh styles probably don't need typography we'll leave it in for now though just in case uh all right cool so we can leave that alone we'll come back to these in a minute what i want to do really with this is move this down to the bottom so we've been doing that with all our components moving all our styles down to the bottom so as we as we edit things we're doing that a little bit easier when you first go into the component to figure out what's happening if you don't have to scroll down through all the styles first let's change our name so instead of this component being hero we're going to make it oops not going to be able to do that here we're going to make an inquiry so we have to change it here and then also down here inquiry okay um right now it's we're passing in a lot of props for now i don't anticipate this component having any props so let's get rid of all these props okay and we can get rid of a lot of this so all these options and okay and now within our return we can really get rid of pretty much most of it right almost all of this uh so yeah tell me we have our basic stuff here we're gonna leave let's leave these button styles just in case we um we want to reuse them i'm not going to need this parallax actually now that i think about it there is going to be we're probably going to have one prop but i'm not going to worry about it right now the prop is going to have to do with if we place the form on a section of the website that has a white background we're going to need the button to look different than if we place the form on a section of the website that has a dark background not only the button but all the the color for all the font and everything so those might be the only options we might basically have like a light and a dark theme for this form uh but for now let's just get it get it working so we're going to start out with a grid component and this is going to be container and inside of that we're going to have some more grid stuff so we're going to do a grid and we're going to give it oops that's my timer all right we'll stop here let me take a short break and go to the chat i'm going to scroll all the way up to the top of the chat and try to get through as much as i can steven says that dry erase board is nowhere near big enough just saying so i have a dry eraser behind me you can't see it in this view but yeah actually i haven't used that dry erase board for i prob at least a year so i don't really use it that much i used to like sketch things out on it but i right i just use paper now see uh all in all says all of your courses are really cool thanks for everything you did for free oh you're welcome you're welcome thanks for saying that i appreciate that let's see andre says hello from portugal hey how's it going thanks for joining us let's see um niranjan says hi how to be a front-end developer and what should i have to study um if you want to be a front-end developer i would start out with the free code camp lessons start with those and then kind of branch out from there and supplement with youtube videos and books as you go on but that'll give you like it'll ease you into things very nicely and it'll hit a bunch of topics that you will need to know uh and then figure out what you like and then you can specialize from there but that's that's my advice to get started uh ezekiel says how are you john hanson says uh hi how's the hand uh so my hand if you don't know i had surgery on my wrist a few weeks back and um it still hurts i think it's going to hurt for a couple more months before it's really better so um it's okay i made it through carrying bags and stuff through lots of different airports um and i could do it i mean it hurt but i could do it so in terms of like having the strength to actually do things it's it's there uh so i think i'm gonna try to start like working out a little bit and just see how much i could do uh probably this week so i started back on my my diet again this week and um i'm gonna i'm not gonna be so extreme like the last time i went on a diet i was really trying to lose weight and i dropped like i don't like 15 pounds uh this time i'm i'm not really gonna try to lose weight very fast uh just kind of like kind of slow and maybe just worry just worried about like eating healthy building muscle and things like that but i'm gonna see how much i can do with this wrist for now uh vpool says what's this 93rd part of project 5 or just part 2 of the title okay so it's part two of us working on with the salesforce api but it is the 93rd installment of project five here so yeah we've been working on this for quite a while uh sanjay says hey it's been a while since i caught up with the stream uh what project are you working on currently uh this is the main website for franciscan university so it's a react project um it's using react node wordpress for content management next js so we got some server side rendering going on custom routing so that's that's what we're working on uh john hanson says high five for building a new component cool yeah i think um it's always cool to i think on the stream to build a new component um especially for those who are starting out and are new with react uh because like the more times you go through that process and see it just the more comfortable you'll be with with doing it and for me too like if i get like i haven't really done much coding for the last week so uh i don't want to get too rusty at kind of doing things although i rarely code a component from scratch i'm always copying and pasting things which which i think is a good way to do it it's efficient all right uh neeraj says how do you learn programming um well there's a lot of different ways to start out if you're interested in doing the kind of stuff that i'm doing here i would definitely start with the free code camp exercises so check out freecodecamp.org and go through that uh but there's so many different types of programming it kind of depends on what you want to do so if you let me know what you're really interested in maybe i give you something more specific uh you know somewhere to start out but all right cool so my timer is up and i'm gonna go back now and we're going to do one more pomodoro session working on this before i go back and answer some more questions and that'll probably be the only coding we do for for today it'll just be this next 25 minutes uh so let's go into this grid and now that i'm looking at this i think it's probably easier if i copy and paste some grid stuff from somewhere else so i don't have to try to remember or look up what to say uh extra small classes all right so you extra small i'm trying to find a grid that has everything that we need here um all right i guess i'll just copy this for now and i'll guess at the other one so what i mean in particular is this like for extra small screens we want this to be 12 and then i'm guessing small is the next one let's try uh six for small you'll see why i'm doing this in a second if you're not um sure what what we're doing this for um let's see and then within here this we're going to want to put some form elements so let's check out do i have i guess i don't have any uh any windows here so let me pull over actually i could use this let's pull this out and uh now that i have this dark theme on here i can't see where this corner is there we go all right let's go to material dot ui.com so we're using material ui for a lot of our design for this site it comes with a lot of pre-made components in the material design style and what we want to find now is our inputs so let's go this is going to show us the api but really what i want is a demo so we want the text field demo first let me make this bigger so you all can see and we can actually make this like really big we'll do full screen and this is what i want i want these components but i want to do the controlled version so i believe it's down here oh maybe they changed it um customized input all right well let's just start with something basic um so we'll just grab i need a placeholder probably not i don't really need a placeholder so we'll just grab a basic text field and we'll move it over oops move it over here and so we want to import this text field component and then we're going to bring in the text field here's what we need and i guess we could put this all within a form or not i don't really think it matters for the way we're doing this but let's check this out for now we'll just bring in a text field and nope okay so our text field here let's clean this up a bit we're going to say given an idea first name and a label of first name and [Music] we don't have classes for text field yet i guess we could import those we could copy and paste them over value is going to be this state first first name about we'll just do like this first name like that this one change this handle change first name okay so that looks good let's pull some of this stuff over so we definitely need the handle change and we need our state so let's pull this up [Music] and let's see currencies all right we'll get our styles too in just a second and we'll pull those in is that where i'm supposed to do this yeah um we don't need so we have to change these up a bit so we're going to have first first name and then we're gonna end up having last name oops last name and then this will be email and this will be um student type i'm not sure what to call that yet but eventually we will have that and for now these are all just going to be blank and actually did we have an example with control component is that what i just saw uh let's also grab that text field here and pop that down here okay this set state great all right so that should work we don't have classes stewie uh we need to uh set our prob there we go please ask questions if i'm going too fast or skipping through this way too fast but for this this is just going to allow us to instead of having to type this props all the time now we can just type classes it just saves a little bit of space and then if we add any other props which we probably will we can just add them in here and then we can just use them straight away like that so um i believe this is called object destructuring and i think it's an es6 thing all right i'm going to take a breath for a second because i just went a little bit you know fast so i'm going to take a breath and explain a little bit about what's going on here so we have our text field the value of our text field is going to be determined by the value of first name in state but what will happen is when we type in this field on change so every time we type something in here it's going to call this function called handle change and it's going to pass in first name and what this will do is say okay we'll take the name right of whatever input that is because we're going to have more than one and we're going to set state to whatever that value is now so whatever is typed into that input is now going to become the state here in this case our first name state so anytime state changes in react it causes a re-render of the component so it's going to re-render and when this component goes to re-render it's going to say okay what's our value and it's going to look back in state and now our updated value and state is going to be the value for this so that's the way the flow goes when you use a component it's called a a controlled input right uh controlled component right so that the value is actually controlled by the states so a little bit different uh than if you're just have i mean even if you were to control things through javascript maybe if you're using jquery the value would be read and change directly but in this case it's it's state that really gets changed and then everything flows from there so we don't change the value directly we change state state causes state change causes re-render and then value comes from state hopefully that makes a little bit of sense um once you use it a few times if if you're not if you don't already understand what's happening if you use it a few times you'll you'll understand it it makes a lot more sense okay so now that we have that one in here let's copy and paste and we're going to use three of these inputs and we'll just switch up the names here uh so this is this one will be easy we'll just switch it to last name oops last name and then this one will be email okay so let's save that and see what it looks like um so i am i'm running this right yeah so let's go to localhost logo is 3000 and oops we actually need to use this component so let's add this component right onto our home page and see what it looks like so i don't think i have a home page up here let's go to our index and on our index first we'll import this so let's just grab this for now copy and paste it and then change this to inquiry inquiry and then now down here we'll just pick a section let's see what this looks like see we should put it um i guess we could just throw it right below one of these top sections degrees yeah this is going to have its own grid so let's put it inside yeah let's just add it as another text section there's another section here and it's going to be inquiry and we have no props to pass in right now so let's see what happens cool and here it is pretty terrible right now but at least we we have our inputs let's type and we could see hey it's working things things go in there if we really wanted to we could look in devtools and see that the state is actually changing but i'm just going to trust that the state works right now since otherwise we may not even really see anything so great so we have our fields the style of this is awful right now right but we're not worried about the style we want it to work first so let's add our last section in which is going to be a drop down so first we can just make now let's first let's go to material ui uh the documentation again and let's find let's see there's got to be one for drop down or select so that this menu selects there we go so you want to put in one of these selects it's just going to look like this so we're going to do kind of the same thing again i'm going to grab some of these so we'll import this select and select empty i don't know if we'll need that or not yeah and this handle changes actually it's made a little bit different so we'll probably have to change up the way we're doing things hmm i think i might like this way better we'll see if we switch it to that way because then it's one less thing we have to pass in here so let's see we have our actually let's let's get this this whole thing here and we'll probably have to pull over form control as well but we're going to go with another grid there we go and we're going to do the same thing here that we did with the other ones all right these are just the columns so on an extra small screen this will take up 12 out of 12 columns on a small screen and up it will take up only 6 out of 12 columns so it'll be 50 width and then over here 100 width uh we also need to import form control import label and menu item let's go up here and i'll just grab these i don't need the helper text okay we'll just verify that that's actually showing up yep it shows up and see we can check here now we can change things up a bit so our name is going to be we call this student type we'll give it an id of student type and our values um so this will say under undergraduate graduate and online and then we'll replace these undergraduate graduates and online okay all right now you remember i said we're gonna have to change something so currently our handle change is expecting us to pass in the name but what we could do labels first name so here for input pros we are giving it a name of student type all right let's let's just do it then like like this i kind of wanted to switch it up so that the text inputs use the same thing as this one but for now i think this will be the fastest way to get it working student type okay and let's save that oops keep going the wrong way oops i forgot to change age so instead of age let's go with um student type and we need to change it here student type and one more time student type okay whoa and this is way too small let's pull over i guess some of the styles for this i mean maybe the form control will pull over let's see what that does for us there we are okay so now we have this so this is all that we need in terms of inputs for our form we will need a submit button okay and let me check my time oh about five minutes okay uh let's let me grab some code from a previous project to speed things up so in the um the resource center project that we did that was a react project we we have a form on there it's a much more complicated form but we can use the same thing so we had a handle form data so let's put this in here and it's going to be crazy at first right but here's we're going to do handle form data we're going to create a new why is form data is not defined anyway we'll see how much of this we can get working before the timer's up probably not going to get it completely working uh but you know at least we have something on the page now for key values hmm all right see how i had we had the state structured here okay i see so we actually had the form we don't need any of this file stuff right because we're not uploading files okay this will be cool actually to have a a loading thing come up so we'll leave that in even though we don't have this in the page yet we're also going to leave this this fetch in there and our upload url will be for now what did we set it in our server what was this inquiry submit so upload url will be and resubmit okay and we're going to send a post request and then the data we're going to send is just going to be data right so this const this new form data okay and then we're going to do some stuff depending on the response that we get we're going to do some different things open success true cool uh we're gonna have to add in some of this dialogue stuff which i'll probably just copy and paste from so if if you want to check out the full code of what we were doing it's the service request.js is the file name and that's in the resource center project under the views folder so it's service request.js i'll just copy and paste the link in case anybody wants like the big picture of of how it all fits together okay all right cool so the mainly the part the only part in here that i'm really worried about right now that will actually do anything or work at this point is this here right this is going to what's going to send the data to our back end um now this particular way of doing things with the form data it's it's gonna work no matter what we add with a form this small we could probably just hard code like here's what i want to send in there and just form that object ourselves but we'll since this is already in there and it it should work we'll leave it in there what we will need to do though is adjust the way the state is structured here so instead of just state like right off the bat we'll have to say form and then within form then have all these right so it's going to mess up our controlled components for a little bit we'd have to set it and make sure that uh we have uh we're getting the state from the right place see hear the wind pushing yeah this is a lot more complicated if you check out that link you can see that that's a much more complicated form so definitely more than we need for this one and my timer is up so i'm just going to save this for now even though the changes i just made are gonna it doesn't look like it's broken but in reality it it's breaking some stuff behind the scenes uh now i'm gonna go to the chat and i'm going to answer whatever questions remain in the live chat and then we'll finish things up um niraj says how can you help me in programming uh well if you watch this stream i'm sure hopefully you'll pick up something helpful there are a lot of tutorial videos though on this youtube channel that may be more helpful to you if you're just starting out so check those out for sure um jam punks is built from windows now i'm i'm actually developing on a mac right now uh oh oolu i'm really sorry if i mispronounce your name uh let me know how i should pronounce that i'll do my best next time uh but anyway that says what so what exactly you're trying to develop uh in this particular stream i'm trying to create a form that sends data uh to our nodejs backend and then from there it sends the data into salesforce overall for the entire project we're creating a a website for university with react node graphql wordpress for content management so that's that's the overall project victor says you are awesome jesse thank you i appreciate that uh jay charles is here charles says hello how's it going charles let's see david says coding live is the best exercise awesome cool i'm glad you glad you like it it's definitely uh i hope it's useful for you all it's it's so helpful for me i learned so much from you all and just having to explain what i'm doing also makes me really think about like why am i doing it like this and it kind of keeps me like really honest and stops me from stagnating you know like if if there's a better way to do something in a newer way like i'm gonna try to use it uh just to save myself the embarrassment of being caught you know live in front of all of you using uh you know outdated stuff okay um programmer says remove the forum it gives you an error the colon i think programmer i'm i'm not sure i'm not sure exactly what you were referring to then is this when this was here i i assume you're talking about form like f-o-r-m so i know yeah this will cause trouble for now i'll need to adjust some things to get this to work or i can go back and and not do it this way i'll see i'm not sure what i want to do david sands is you are the best programmer here i i kind of doubt i appreciate you saying that but i i definitely doubt that i know there are a lot of you that watch the stream that are just awesome you know uh i'm just i'm a programmer that's willing to show everything that i do and let you all see all my mistakes and everything uh so if there's anything unique about me you're good about my programming that's it it's just i'm uh i'm willing to put it all out there and that might not even be a great idea to do but that's that's what i'm doing and i hope it helps you out and it also in terms of like being a good programmer to be honest with you there's so much information out there to i think it's more accurate to say like this person is really good at this particular thing you know um it's it's so hard to judge like a good programmer you know like what do you measure that by so uh it's more like you know what's your expertise you know certain people are better at certain things and it's it would be i don't know if i want to say impossible because you never know but it'd be really hard for one programmer to be the best at a lot of different things you know so i think the the goal for for those companies that can afford it having a team of programmers who each specialize in certain things is the best way to go and just realize that one person is not going to be able to do it all you know um let's see uh zack kz ack says are you using xjs i am i'm using next uh lamia says hey hey how's it going kushi says remove this warnings uh i'm not sure what warnings you're talking about uh so let let me know and i'll i'll check into it um razva says mob x yeah and i'm not using mobx uh so that would be like for like state management so you could use mobx or redux actually we're not we don't really need that right now it'd be kind of overkill for what we're doing right now since we're using apollo though we can use apollo to do very similar things to which you would be using mobx or redux for so that's probably what we would go with alexandria says what theme do you use this theme is called seti s eti steven says i feel differently it's not that i learn from you as much as i gain an understanding of how you use it at work and that the struggles you have are the same that i have i see the work in the actual work setting gains more insight than just another tutorial it's not that i don't learn stuff it's more job insight on how you work with it cool i i i'm glad you said that stephen i i totally think that that's that's the value of what i do is not necessarily that you'll learn a programming concept you might but the the goal more or less is just to see how how i do things like really at my job you know because there are a ton of tutorials that are pre-recorded and edited and and really kind of efficient that can teach you a certain programming concept better than this stream will but for this stream you know you'll you'll see what my process is actually like i mean i don't know if i'm like the average dev or not i i really have no idea but you at least get a view into how i do things and hopefully you know you'll you may think hey well you know if this guy can get paid full time to be a developer then certainly i can right you know it might help you get a little insight a little confidence you know and uh especially for all you or maybe freelancing or programming on your own remotely or something you don't really have the experience of working with other developers like like pretty much that's been my experience as well so i think it just it's just cool to see how other people do things all right cool so i finished up with all the questions so i'm gonna wrap things up here and thank you all so much for watching oh i got a few more questions let me answer this last question and then i'll wrap things up steven says so how much time outside of work do you spend on work it really depends on what's what's happening um so if i have a side project excuse me if i have a side project that i'm working on then i may spend you know hours every day after work actually doing work like right now i don't have a side project that i'm getting paid for i take that back i have a very minor kind of ongoing like project that i do with a client just like maintenance stuff you know uh but that's only like literally like maybe like a half hour a month or it's less than an hour a month i do on that so that's that's not a big deal uh so at the moment i'm really not doing anything outside of work uh so i'm taking a little break i finished up a different a project so uh we'll see but it just it totally depends on what i happen to be working on uh let's see uh julio says working on project for school setting as well excited to learn thanks for sharing knowledge uh yeah no problem uh rozva says do you like expressjs more than sales.js or adonisjas i like express but i've never used sales or adonis so i i can't really give a fair assessment there so those may be awesome i just don't know i've never used them but i i do like working with this express i've been able to figure everything i've wanted to do with it i've been able to figure out how to do it so i mean i i can't really ask much more from you know a package or framework you know steven says being new to development i find myself working a lot at home yeah i mean it's it i think to be honest with you i would work a lot more from home if i didn't have a wife and kids really because i love what i do and i love learning more and making cool things so i would probably be spending almost all of my time uh developing things like literally i would probably uh if i was trying to be healthy i would have a workout in there which i should every day and i would have time to eat but other than that all my time would probably be spent programming right so it's good to try not to get burnt out and to make sure that you know you have some other aspects to your life just you know kind of manage stress and things like that um so but it's definitely that what that's going to look like is going to be different for different people and whether or not that's healthy is going to be different for different people right so um it's hard to say like overall you know what how many hours or too many hours right because it just it depends on a lot of factors so like for me working all day is not healthy for my family right probably not healthy for me but you know even more so it's not healthy for my family if i didn't have that if i was single you know then maybe it might not be as as big of a deal maybe i could work longer hours and that would that would be fine because it's not like it's work for that long it's something i enjoy doing uh sure i've said step by step explain docker and jenkins please sir um i don't know that i'm that i know enough about docker and jenkins to explain them step by step so you probably don't want me doing that uh maybe try to find some videos um there may be some videos about that on our free code camp youtube channel but check out learn code academy their youtube channel so it's um i can't believe i forget his name i forget the name of the guy who does that channel but the channel name is learn code academy uh will stern i think his name is will stern um i know that will has some videos on docker and i think he has some on jenkins so check those out they're a little bit old but the concepts are still the same so those may help you out uh charles says what are your tips for getting a developer job uh all right so just a few tips i'm not claiming to be an expert here but these are things that i've found are helpful so always be working on projects that you have on github and that you can put up there people can actually see them okay so employers do like to see that you've worked on projects right to definitely do that try to network with as many people as you can if you can meet people in person great if not twitter is a great place to get in touch with other developers you can then if you there's a job at a place where another developer you like let's say you have a relationship with another developer on twitter right and then you notice like hey they work at this company and you want to work there you could then ask them for a recommendation and that recommendation will get you farther right so for instance like at google if you submit an application no one's even going to see it at first it's going to go through their program that kind of weeds people out so a real person may never even see your resume but if you have a recommendation they have a process where that resume is guaranteed to get in the hands of somebody to look at so you've already kind of skipped that first step by having that so that's a great way to kind of get in there then i would say like apply for as many jobs as you can be smart about it don't spend all your time doing that so get on places like linkedin um or like indeed.com uh stackoverflow and set it up so that you can do like the one click apply for jobs so you know have like a generic type of resume and then go through and every job that's one click apply so not every job is going to let you do that but every job lets you do that that's even remotely in your range of skills apply apply to everything it'll only take you a second just to click and that way like hey you you might get in you might get an interview even if you end up not taking that job at least it's good experience to go through the interview process okay so that's my advice if you do find a job that you really really want then there's kind of more strategies that you can take to get that job so like tailoring a project just for that company for that job based on what they do uh you know maybe getting in touch with more people that work there and figuring out you know what you need to do so like but it's in general if you're just trying to get a job and not a like a specific job at a certain company i think the advice i just gave will be okay and there are probably a lot of other things you can do but uh just from the top of my head that that would be my advice okay uh elvis says oops i'm sorry i skipped some questions uh david says how many programming languages do you know i'm new with this i'm learning python now but i want to learn another programming language in the future uh i really i know javascript pretty well i have done things with php with python with c plus plus with c sharp and with java also with solidity yeah and i think that's it so i have a very basic familiarity with a lot of programming languages i wouldn't be confident to say i'm going to build all this stuff but i'm confident enough to say like i could kind of figure out what's going on if i see some of that code but for me i'm focusing on being really good at javascript which seems to me like it will help me in my career more than knowing being like average at a lot of languages or below average in a lot of languages so but it depends on what you want to do with your career so it may make sense for you to learn more than one language but for me i'm like i know a little bit about you know maybe five or so languages and i'm trying to focus mainly on one elvis says what's the best friend in validation you'd recommend um i don't remember we used something on some previous projects i forget what we use so i'm i'm blanking if i remember in the next few minutes i'll let you know but i can't remember what we'd used before i don't remember what it's called check you can check out some of our previous projects on the the github uh repo uh so it's it's linked in the description so if you just check out like the whole github organization and look back at some of the projects maybe you'll find what we've used uh steven says yeah i have a wife and kid it's been hard at times but being the only front-end developer you have to learn it at some point i find that at home i'm a little better at learning new stuff yeah i mean that's um like i said that's just some balance that you're gonna have to make with yourself and you know your family to figure out like what's a reasonable amount of time to spend doing this right because you know you like you need to be able to pay the bills and provide for your family so you need to be good enough at your job that you're going to be able to keep your job and and progress but you also want to actually spend time with your family too so that's a hard balance like i don't have that figured out uh you know we just you should do the best you can i just try to do the best i can and sometimes i do a good job and sometimes i don't so i can't really give a lot of advice other than just keep trying and keep talking your wife and figuring out what's working for her and um you know just try to try to work through that uh ins says uh node.js versus php what's your opinion i'm a rookie back-end i personally prefer node.js to php um but it really depends on what you're trying to do so in terms of learning php like if you get a job that has to do with wordpress or drupal or joomla or anything like that you're gonna need to learn php uh if you have the opportunity to build new stuff and you don't have to worry about all that then i would go with node because if you're gonna be full stack like why not learn node you can only you can learn javascript really well and just use javascript front and back end uh so it yeah it really depends so i mean i don't know all this you know specific details about which one's faster more efficient i don't know about that but i i prefer note stephen says totally was not qualified for this job they took a chance and decided to give me a shot loving the change so much way less stress more freedom to watch it that's cool well i'm glad you like this job and you know uh do your best to keep keep learning i mean if they decided to give you a shot i mean at least they have a little bit of patience right that so hopefully you know they'll let you learn and and start to get really good at it mark lynch says have you ever have you used mongodb before i'm trying to figure out how to build my schema so it's easier to work with can you recommend some vids of yours or others uh also any vids on testing since i know nothing so we have done some stuff with testing on some of my previous videos but i'm no expert on testing we have done some stuff with i don't think we've done it on a video though i think it's on a side project that i work with it so i would say in both cases you probably want to find some other videos check out free code camp uh just do a search through the free code camp videos to see what they have uh i do know that once again will stearns youtube channel called learn code academy does have some videos on and i also believe on testing so you may want to check that out uh with most of his videos they are a little bit kind of older but the concepts are still you know pretty solid so i i like his style and in his videos it helps me out uh aki says what's the demand for vue.js react and angular i'm from a beginner i don't really know to be honest with you there's i would say out of the three react is growing really fast and there's a lot of jobs to react but angular also has a lot of jobs but it's not growing as much so i don't know which one is in first in terms of total jobs react or angular but it's close and it seems like if react's not already in the lead it's going to be in the lead soon vue definitely comes in third in terms of total jobs but it's also growing really fast uh so that's that's my take on it right so i and that's just from what i've seen i haven't really done a lot of research into that so if somebody knows better than that please let us know in the chat okay cool i'm gonna finish up for real this time thank you all so much for watching and uh i'm gonna try i'll probably be able to stream tomorrow i'll be back in the office so um i'm thinking maybe around the same time tomorrow and [Music] yeah so until then have a great day