Working with React, Express, and GraphQL (P5D26) - Live Coding with Jesse

Key Takeaways

hey everybody welcome to live coding with jesse i'm jesse and today we're going to get to work on this main website that we've been working on with react and we're pulling data from the wordpress api we're using graphql the wp graphql plugin we're going to pull it in to our react site using apollo and we're going to make some components and we need to set up some custom routes we are using next.js so they have some routing built in but we need a little bit more functionality which is cool because they've built next in such a way that it's really easy to add additional routing features if you need to and we always end up needing to i don't know i don't remember a project where we didn't need to do that all um hey everyone i see some of you in the live chat now uh let's see oh one question before we start i've been thinking about um it's 9am or just it is no it's not 9am where i'm at it's uh 12 noon so 12pm where i am so i'm in uh united states uh like east coast time so eastern time so anyway i have a question i think i brought this up a while ago in the stream but i've been thinking about doing again uh maybe like i'm gonna put some info somewhere i don't know if it'll be on my website or wherever i'll put it but it's basically just going to have some referral codes for products that i use or ways to donate i just wanted to throw it out there to see do you all think this is an okay thing to do or is this like in bad taste does it seem like i i just don't want to i'm doing this stuff you know for free like i want to help you all out and you all already helped me out a lot so i don't want to seem like i'm begging for donations or anything like that um and it's like with the referral codes a lot of them you know whoever uses it will get some something as well as me so i mean let me just show you i guess what i have and you let me know if it seems in bad taste or if it'd be okay i'll make it a bit bigger so like this is what i'm thinking so like coinbase is where i do my uh like crypto trading and stuff so you get 10 bucks on on coinbase these are my wallets for the different coins that i have um i get closed through trunk club so i was gonna put the link there uh you get i don't remember what you get on trunk club i haven't used it in a while like digitalocean you'll get a 10 credit if you use that and i think i get 10 or i can't remember what i get siteground i host some sites there as well um trello uh i think you get like three months of trellos like paid plan so anyway these are all the ones i could just think of um they're probably probably might might be able to do more but anyway let me know in the live chat which you think if you're watching this later let me know in the uh in the comments because i don't i don't want to do anything that would get like hurt the stream so i'm not planning on getting rich off of this i was just you know throwing it out there let's see all right it looks like alright looks like uh at least a few of you think that that's cool to do so uh maybe i'll it's not a high priority right now but i'll get that up somewhere um someone asked larry asked what my website is it's jesseweigle.com but i haven't updated it in like five years so uh now i take that back i did do a slight content update like three years ago or two and a half years ago but the site was actually built at least five years ago so it needs updated i just haven't decided what direction i want to go with it should it be a straight portfolio should it be a blog um i don't know but that probably would be a good place to put stuff like this uh i could maybe put it somewhere in my youtube channel as well i'm definitely not gonna put it anywhere in the free code camp channel because i i want you know donations or anything to go to free code camp and not to me on on that channel so anyway thank you all for um for giving me feedback on that i appreciate it uh okay sergio does have an important question i'm gonna adjust now before we get started uh sergio says i'm following uh project five which is this project um day three so so far this project is with material react material ui next or gatsby so we ended up going with next i know early on in the project i had said i thought it would be cool to develop both uh with gatsby and material ui and then compare uh i just i still think it would be cool to do that but we need to get the site launched in time and i think i'm i'm gonna need all the time i can get so we decided not to do that i still left the branch open for gatsby in case anybody loves gatsby and really wanted to try to build some stuff out in gatsby that's that's still an option and i'll still show it on the stream if somebody really wanted to but we ended up going with with next okay okay um nikki has a good point it says that that stuff meaning the referral codes and things are fine as long as you don't start off every video with a buy my stuff plug oh yeah i definitely won't i'll probably like if i do it i'll just mention it one time say like hey i did this here it is and i won't talk about it again [Music] uh on free code camp i won't talk about it maybe i'll talk about it on my channel too so uh we'll see but yeah i definitely don't want to start off with that i think that i don't know it just like i don't i don't have a problem when other people do it i guess you know you gotta you know people are giving their time to make videos so why why not you know be compensated for it but i just kind of don't want it to be i don't know like that for me see oh christian um is asking what is this been a subscriber for a while but i don't know what this live thing is all right so i'm at work and i am a front-end developer and i'm working on a real project that i have to do for work so whatever i need to do in a particular day i just share you know an hour or two of my work and then i answer any questions along the way uh that you might have so and then we collaborate so you all have a chance to add code if you'd like and yeah so that's pretty much what the stream is i was just kind of hoping that people would see what my day-to-day like life is like as a developer and see me make mistakes and try to recover from that so anyway so stick around for a little bit we're about to start some coding now just to kind of see you know how we do this i usually hold off and do the questions answer questions towards the end but if you don't if you can't stick around right now then you know maybe you can always watch the recording later but if you do watch it live it's cool because you can actually ask questions and comment and kind of interact with everyone in the live chat and with me all right uh louise again says uh think about creating a udemy course yeah you know what i i'm still thinking about doing that i just i don't have a lot of time right now maybe after we get this site launched then i can have a little bit of time for that uh coding and caffeine is here hey i got that covered i got my g fuel and i have a half of a mug of lukewarm coffee that is a day old so i got all the caffeine i need all right let's get started let me show you let's get the site up here i have ngrok running i never turned it off from yesterday so let me paste that in the live chat here for you all if you click on this link that i just put in the live chat that'll take you to the website that's running locally on my machine and you can inspect it in dev tools and you know navigate to different pages whatever you want and oops i was migrating a lot of stuff over so just to give you a heads up i've added a few more custom post types so we have custom post types now in the wordpress installation for directories so or i'm sorry departments so faculty departments we have ones for majors which we've had the majors in there for a while uh but i can't remember if we had it on if i did it on the stream and we have a custom post type for human resources content and also for campus security content so i brought over i migrated all the content for departments all the content for majors and some content for human resources i don't think i found it all in the database and i just saw we have a request to share this pomodoro timer i'm going to start this up now so i break up everything in a 25 minute chunks and then we take a break for five minutes do some question and answer and then go back and do another 25 minutes and let's see all right so this is the site if you remember i've decided that i think we ought to focus on the mobile view first so we're going to be in this mobile view most of the time and then we'll expand and double check and make sure things look alright when we have a a wider screen and let's go to the code now so what we need to do is get pull in some of that new data that i migrated from our sql server database over to the mysql database and we're going to pull that out with graphql and we need to bring it over so the first thing we need then is what we need a component to bring the data into but we also need a query a graphql query so let's do that now i we have so we just did this one the last time we were messing around with graphql we made this component and we made a query for it so this is going to be an ideal component for us to copy we didn't do a lot of custom things with it so this will be kind of our our template we're going to copy this and then we'll paste we'll make another page so this is the the pages folder in in next normally anything in this folder automatically becomes a route so if i went to like slash faculty.js it would take me to a page it take me to this this faculty page right it would treat the the component as like the root page there but you'll see in a minute we're going to do some custom routing and we'll have to work on that too to get everything to work right so we do have a little bit different stuff going on here so first things first let's make this component i'm using visual studio code here in case anyone is wondering and let's see i have the seti theme running why can't i find this because it's not there i'm just trying to make a new file there we are uh department.js there we are and now let's change the name here yes we'll let's actually grab this right up here and all right and i don't want this capitalization here so i'm going to get rid of that right now and i'm going to get rid of it here all right so we have this ready and what it'll give us is the content so let me explain i guess i'll explain this briefly since we have it up here we there's a lot of other stuff that kind of went into this so i'm not going to go over every piece of it if you want to know more about that you can look at the code it's available on our github repo the links in the description you can watch previous uh episodes previous streams if you want to figure out kind of more of how we set this up we didn't set up everything on the stream but i do believe we went over everything on the stream so basically when a user goes to a certain route which we will set up so it'll be like departments slash english right for let's say we go to the english department page so you type in franciscan.edu departments slash english and what will happen first is the router will pass the id which in this case would be the slug english will pass it to our component right so we have id passed in the id is then going to get passed to our query which we're going to write in a minute that query based on the id is going to ask for that specific information we need to render this page from our wp graphql plugin that we have running with wordpress and our mysql database we're going to get the data back it's going to get rendered potentially server side could possibly also render client side that's what kind of this get initial props function allows that to happen then our data is going to be available uh to us through props right so we've already we have this prop set here for data so we don't need to use it down here but basically we go this props data departments edges and edges as it erase we need to get the first element in the array node and then content that gives us our content that lives in the mysql database right so we pulled all that in and then it will render that specific content for the english department because that's the route we went to so that's how it's all going to happen we have one part of this done we need two other parts for this to really work so let's set up our query and then let's set up our route and it should work so we can take go to our queries where i have these at let me shrink some of these folders here so we can see what we're dealing with components lib queries good all right so we're going to make a new file and we're going to call this we'll also call this department.js and let's take what we had in major and let's copy it and go back to department and paste it alright so this is what a graphql query looks like you can do a lot of other things with graphql queries but this is what we need to do for this one so let's change the name here so we need department so we have this department query we're exporting this as a constant right and then we import into our component as we saw earlier and that's why we can use it in a component but it's going to grab that that string so we're passing in what we have here is as name we're passing in that id that that slug if you want to use the the term that wordpress uses for their posts we're passing that in so it's going to look in departments where the name is equal to in our example case we're going to say english so where the name is english so what we'll have in our database is there's only going to be one depart piece of data that has department or has the slug of english okay so we're going to make sure it's always just one and then within that we got to go down some some levels that's just the way the data is set up but then we want to get the id of that post we want to get the title the slug and the content there are other things we could get as well but we don't we don't need it we don't need to display that on on this page so if you want to go to the repo you can check out our other queries sometimes we're getting other things if you just want to see some some different examples they're there but for now this is all we need and you see we actually aren't even using these yet but i was pulling them in because i anticipated potentially needing them at some point if we get closer to the site launch or even after we launch and we find that we don't need this we can always get rid of these and then we'll just save a little bit of data coming in so let me save that so we have two of our three parts done now we have our component we have our query now let's go to our server and let's put this route in so we have our server.js file and you can see how we did this with major right so we're doing server.get major and then we have this id here right and that's kind of the variable part and then we're making sure that the component that gets rendered is major right so it matches up in this case sometimes we have difference i think so in this case our url is going to be contact but we're actually sending it to the directory component so you can name your components in your route something entirely different and still direct it to the right place generally though i'm trying to keep things the same so i had some other things here i think that were tests okay yeah so we're gonna need to let's grab this one and i need i need to split this up a bit make some comments majors unfortunately our router is going to get huge we need to try to keep the urls intact from the old the current site and the new site that we're building uh so that's that's kind of proving a little bit difficult that's why our router is gonna be a bit of a mess unless we can figure out some other solution to this but right now some of the content is just we're just gonna manually have to make these routes all right so let me go with department so we have department and then id is going to go to department i what i actually want too is i want another route so i'm just going to put it in here right now although we're not going to do anything with it yet i want if we have department with nothing at the end i want that to go to let's call it department department list so we're gonna have to make that component basically i want department to have a list of all the departments and then you can click on that so that's how we're gonna do that i'm i'm pretty sure that'll work i have done it before but i haven't looked at the code for it for a few months all right so now when a user goes to in our case localhost 3000 3002 or something maybe we're under 3 000. localhost 3000 uh and then department and in our case we were going to say english it'll route that send that id to department grab the data that it needs and then render it all right make sure that saved whoops there we are all right so that's saved we have a query we have our component let's try it out there's actually one more thing i need to do i imported the data but unfortunately we need to manually go in and change the slugs to make this work there's really no way around that so i think i'm going to have one of my colleagues go in and do this or a a student worker do it because it's certainly something i could do but there's other things that only i can do so it's better if i use my time for that and this is something that really anyone could do if if you just tell them how to do it so right now on my other screen i guess i could bring this over i'll bring it over so y'all can see it won't be as boring so here's that the wordpress site where we have all our different post types we're only using wordpress for the content management alright so this is a normal wordpress site where we'd go in and have a theme and all that we just want the content management it's basically just a ui for users to be able to very easily put data into a mysql database that's all we're using it for um majors let's find english oh no we're doing departments aren't we yeah departments so we're going to search see uh the admin section here with wordpress is actually pretty nice so you know why why reinvent an admin uh thing if we could just use wordpress it's not exactly the way that it's intended to use wordpress but it works english department text yeah this is it this is what we want okay so we need to go into slug so by default you don't see slug on wordpress i need to enable that so now that i've enabled it i can see the slug so i'm going to change that to just english so now that the slug is just english it should work so let's go back to our site and i'm going to do departments i'm sorry department singular english no oh you know what i might need to restart the server let me try that first i think yeah i think that was uh an issue last time i was working on this all right let's see hey look now hey we got a different error that's progress uh let's see to lowercase element type to lowercase it's not a function hmm all right let's check out our code to see what's going on all right our server department department list i'm going to take this out i don't think this is the problem but just in case let's take it out because this was kind of the only new thing we had in the server that i wasn't sure about so let's take that out first and restart just to be sure if this works it'll be an easy fix so it's worth trying out first so let's let that restart should only take a second all right we're still getting the same error yep okay and that's fine let me see i should look at the live chat to see if anybody noticed all right let's see if anybody noticed the mistake that i had made so what do we need department pages let's make sure that i got i'm guessing that maybe i didn't copy i didn't change every instance of major to department department query department um i wonder maybe apartments and all right harsh is saying test the query i wonder if i need to refresh where's my wordpress install here it is cities all right okay i didn't know there was some issue with uh wordpress that i i needed to i don't even remember what it was called i needed to mess like uh flush the permalinks i think or something like that so i just wanted to double check that uh the error showing two error in the component okay harshit says visual studio code is showing aaron errors in the component okay and then render missing space before function parentheses all right uh all right the error is it not saved is that the problem oh i just uh nikki is saying i didn't save it all right let's let's see if that was the problem all right i feel a little silly but i'm really glad that was no that wasn't the problem well it kind of was it kind of was we have a different error now so it's saying edges is undefined okay so that probably means we're not getting the data back that we should be getting uh so go down here saying edges is undefined so i wonder i'm gonna change from uh plural to singular see if that makes a difference all right so i don't think that was the case in my query let me change from plural to singular here see if it makes a difference hmm no i know that that fixed something the last time um all right so we have department pages save server server okay i don't think i want this route i don't know if this is what's messing us up but i definitely don't want this in here so i'm going to comment it out for now just in case i i realized later that i wanted it in there um let's see so while that refreshes i'm just going to show you this was taking basically anything that that was put in here after a slash and treating it like an id and then sending it to the component major and i did not want that to happen and that potentially could have been messing things up all right let's just no still still a problem okay department english so i am saying department right yeah departments and departments all right so i'm sending that to the right place all right okay let's let's then test uh so a little earlier harshit had the good idea to test the query so let's do that so where i can never remember how to get back to there it is i had my cursor right on there i just could never remember what the icon was okay all right so we are yeah we're at the right end point and let's run that oh okay not working no schema that's that's odd we don't have anything i wonder if any of our routes are working go to something that um yeah let's go to a faculty members page oh okay so something's wrong with everything so it's not just that that query so what is going on let's check our plugins wp graphql and check the version 0.0.22 it looks like there's no breaking changes so at least nothing labeled as a breaking change so you might want to just update see if that makes a difference my all right harshit is put in scc that's wp make sure to see the night i should just put in a different url here yeah that url should work hard but this one this one's been working for me as well i'll try out the other one though let's do that quickly before we go uh do some questions actually where are we actually that's what we have been using let's try to switch that out for for this and see if it makes a difference no no difference it's just let's see all right well let me go to rook says faculty.js is also unsaved oh it shouldn't i haven't done any work on faculty.js for a long time so it should be fun and we we had it um we had it working oh yeah let me answer let me take a break answer some questions maybe this will help clear my mind a bit as well all right so we're going to take five minutes and i'm going to scroll all the way up to the top of the live chat let's see milo says i've been following your previous live stream great videos thank you i really appreciate you saying that thanks for watching lucas says hi jesse i'm from brazil and i'm a software developer i like so much your live streams awesome thank you for saying that uh uh adrian that's what the timer was for i think i did explain at the beginning um i'll just explain it quickly again i it likes it breaks up my work so i use it throughout the day to break up my work into small chunks it just makes things more manageable you make sure you you get a break and the breaks are nice because you stop and think you know sometimes you get into doing something and it's you keep working at it working at it if you take time to stop and think you might find like oh well i'm even doing this i could have done it this way and it would be so much better or you know maybe we just go with something completely different so um it lets you stop and just think about what the best use of your time can be but anyway on the show i i on the stream we break it up so i do 25 minutes of coding in five minutes in the live chat 25 minutes of coding like back and forth and that way i don't ignore the live chat for too long but then also i don't get caught up in just talking the whole time and not uh getting anything done with the code globber as what's the graphql client you use so we're using apollo with our react app and then on the uh wordpress installation we're using a plug-in called wp graphql that just gets all that data out of wordpress for us without you know we don't really have to set up very much of anything christian says this is open source cool yep everything i do here is is open source almost everything there was like one project we did a little bit of work on that was a private repo nabig says hi everyone hey how's it going uh michael asked if in the link that i posted are those m's or r's followed by ends not sure i want to click on that i don't even know what what would it be oh i see what you mean now michael yeah don't want to click on that if it was if it was the latter case inna hello how's it going i haven't seen you in the stream for a while i'm glad uh glad you could join us today hopefully i'm pronouncing that right says jesse could you say how much of a challenge it would be to make an api in node that a front-end react application could use to read and write a database i mean i guess it it somewhat depends on the details right uh but making an api like that is not it's not really that big of a deal so i mean it depends like if you've done it before if you're good with nodes there's a lot of different factors that could make it take longer but uh like a very simple node api is is not really uh that difficult hardship uh would be a better one to know exactly because he handles a lot of back end stuff he's uh i'll harsh it would you say you're mostly a back end developer i mean you're pretty you're pretty full stacked though so um but anyway har should set up a lot more stuff like that than i have so um maybe he could you know give a better answer uh bastawa says i'm using wordpress also as a content management data source awesome awesome yeah it's it's way more common now i remember like a couple years ago people were talking about it but it was like who's who's really using this in production and i was very curious about it because i had been doing wordpress sites before like the normal way and so i kind of messed around with it a little bit and i did end up doing sites for clients with it when it was still like kind of new but now i i think it's more like people are aware of it you know larger sites are using it in production so it's kind of like mainstream now i guess uh but it's still a weird concept for some people like i'm pretty sure some of my bosses like think that i'm making a just a regular wordpress site um it's just hard i guess it's hard to explain um this unless you're doing it like you're in the the process of creating it you know maybe a little bit difficult to understand why it's like we're using wordpress but it's not a wordpress site right all right my five minute timer is up so i'm gonna write down where i left off here in the live chat and let's figure out what the problem is here i think we're really close to getting this to work all right so we're not getting any data from wordpress so let's try this so we've already tested out both these urls but i do want to grab this url again and let's go over here where we're testing this out let me make this a lot bigger for you all and we can actually expand that there we are all right so i'm gonna put in this and see what happens when we set that end point all right yeah we have server errors for both and double check set endpoint servers all right um so let's let's upgrade then let's upgrade our plug-in and see if it if it helps i'd like to upgrade the plug-in anyway so now's a good time to do it if it fixes our problem great if it doesn't then at least we've updated our plug-in okay oh harsh it says try reverting the changes in the plug-in which which plug-in are we talking about the the custom post types one i'm just scanning this plug in quickly just to see if something stands out as a mistake all right everything looks okay just from a quick scan it looks okay in terms of the stuff that i've changed uh that's weird was it okay now i guess we can check where did i bring that up over here huh all right let's see all right i'm going to go to wordpress and let's upload this plugin let's go to the plugins let's let's get rid of this version let's install the new one all right so now we have to do is just upload this zip file um and we'll activate the plugin wonderful i am going to go back in here to the permalinks and this uh at least it did say in the documentation for this plug-in maybe it's different now but at one time it said you had to flush the permalinks for everything to work i don't know of any other way to flush the permalinks other than to do this i'm sure there's probably some some other way but this works for me and it only takes a few seconds all right let's see what we have now i guess i could just check right here or right here um hmm all right let me check out some of this i usually pass input terms as part of object velocitation okay check the console i should say check the console um oh you mean the uh devtools console all right let's get rid of this and refresh okay that's a lot of stuff 500 internal server error so harsh it's saying check the console in graphic ul har i was just i was just saying if the schema would come up i mean i could put a query in i guess yeah it's still the same hmm i mean i'm well i'd say we've narrowed it down the problem is something with wordpress i'm going to check the issues all right this doesn't look like the error that we're getting let's see all right nikki's hanging a type error all right let's check out wordpress let me i'm going to comment out a lot of the custom stuff that i just did today just in case i've messed something up here actually do i really want to do this am i going to lose my data i can't remember if i lose the data or not all right let me think i'm scrolling through the live chat comments here just to make sure i i'm trying everything that you are suggesting oh okay all right harsh it says revert plug-in uh harshit which plug-in the custom one or the wp graphql one all right i'm gonna wait for clarification here for just a few seconds the custom one okay all right let's revert the custom one yeah if i okay editor some types test this out all right oops all right we got something different oh obviously that okay so there was some problem with what i put in the plugin now we know that all right so let me undo that and let's go through so basically from news on down it was didn't work so i'm going to try to narrow it down as much as we can so news works let's leave department type in there and comment out everything else all right this is going to be a little bit tedious but not too bad all right cool still working oh actually okay now let's undo this one create major so okay cool i should get i want to see if i get if i take this out if i can still at least get a schema yeah okay i get the schema so that all works all right now let's try this one human resources all right there we go we got the internal server error back yes so let's check out what happened here that's different your okay uh i'm changing this to camel case just in case uh graphql the wp graphql plug-in does not like the the hyphens yes all right cool that's the problem we can't put hyphens i ca i slightly remember uh do you remember when um the guy who built the wp graphql plug-in was in here i remember talking about some issue with these hyphens man why can't i remember his name now i gotta i i gotta give him credit for this plug-in so you gotta figure out his name he was just here on this issue anybody remember jason that's it jason was in here in the live chat a while back jason ball yeah thanks nikki um all right cool so all i have to do now is uncomment this and hope that i did not like really lose my data here i don't think i did but if i did that's a lot of migration that i have to do ever again all right cool it's there yeah all right everything's still there awesome now let's double check yay all right cool now let's go back here i hope i didn't mess it up while i was trying to get everything to work and see what's happening yeah it works awesome okay let's go back yay english department nice we've got the text here for the english department sweet all right that was cool just gotta comment things out you find the problem awesome all right this definitely needs a title let's let's add that title in in our react component let's think we save some time yeah almost three minutes let's do this let's go in here with uh h2 and let's get this and i don't need double curlies all right let's see if i did that right i typed content in let's go title ah no i don't want english department text no you gotta be kidding me oh cool my co-worker got me a burrito for lunch and i was streaming instead of eating it so thank you i appreciate it all right let's see what am i looking for oh the wordpress thing i want to see depart where i'm at departments english department texts i want to bring in all right this is where it's actually going to be really useful that i brought in the slug oops because now i'm gonna do slug this should give us a all right english and then all we need to do is uh change the padding on that and make it uh uppercase and we can add department in at the end right so we can go like english can i do this i'm not sure if i can do that let's see oh cool i can um yeah so we'll just clean that up a bit and then basically that's it that's all we need now this isn't really a lot of content there's some other stuff pieces of data that i could pull in so i don't know if you noticed um here like we have a program list uh the header is really specific to the the um old content management system so we'll probably get rid of that uh i'm gonna have somebody else i think come in here and clean all this up and just leave what we need uh we have some this slider we're not gonna need because it won't work uh with the new system i'm not sure if the links will work so potentially we could add in a few other things on that page but for right now at least we have a url that matches up with the url on the current site and we have some content some relevant content there that's all we need for launch we can always add things later on uh i'd rather have things be super fast and really clean clean looking maybe risking being like bare or too plain then try to add in a bunch of stuff not make our launch date and have things loading slow all right so my timer went off again let me go back to the live chat i'm going to pick up right where i left off i'm going to go through i'm going to answer all your questions i'll read out some comments too if you have any questions now please put them in the live chat if you're watching this recording later and you have a question please put it in the comments or you can uh talk to me on twitter or instagram or whatever uh facebook however you want to find me i'm pretty easy to find on the internet all right let's see 12 39 now i'm getting hungry now that i know there's a burrito waiting for me all right cool also i talked yesterday a little bit about mental health and i just wanted to give you another little update so i don't know some of you might be bored when i talk about stuff like this but i know some of you told me that you you struggle with mental health issues like depression anxiety as well so i thought i'd just bring this up um so this morning i was up super early like 4 00 am and i got up i worked out um i i work out on like an exercise bike so i played some zelda on the nintendo switch and um checked my my twitter you know my instagram and all that uh i even did some weights i have a little weight bench in the basement so i haven't done like free weights and probably since summer like early summer because i hurt my wrist i was kind of afraid to mess it up but if i keep it really straight you know put the weight in the right spot it doesn't hurt my my wrist so that's good to know anyway i did all that i felt really good um when i went to sleep last night it was like i could stay up and you know do what watch netflix or something uh or i could go to bed early and i was excited to wake up in the morning early like that never happens for me usually i'm feeling down i get to the end of the night it's like i can't sleep i want to stay up because for some reason i feel like worthless like i didn't get anything done that day and so it's somehow like extending the day will make it better but it never does it just makes me like look at the clock and say like oh tomorrow's going to be terrible because i'm gonna have to wake up and i won't get enough sleep it's like this cycle right but now with the help of some melatonin i can go to sleep early and then my body naturally wakes me up my alarm was set for six i woke up at four uh and i felt great i got like seven hours like seven and a half hours of sleep i was in bed early so i had my feet up on something and they just fell off so that was why i just jerked so um so anyway i just kind of wanted to share that i'm sure that's not a solution for everybody we're all different but it's working for me so far this has been almost two weeks that i've been doing this and like my body finally got in a routine where it's starting to happen like naturally and i feel good um i started to feel tired a lot earlier in the day but you know that's okay when i need to be awake for work and then you know i come home play with my kids for a little bit i have enough energy so anyway just wanted to share that all right i'm going to go back to the live chat now um and as always let me know your opinion on stuff if you want me to share more or less or the same amount of this kind of stuff please let me know i'll try to wait till the end to share it then that way if you just are here for the code you can take off but anyway i i always want to make the streams better uh so i do appreciate feedback uh christian says why don't you use keystone js we actually thought about using keystone we read up on that uh it's just keystone i believe keystone was the one that looked really promising but it hadn't been updated for a long time it just seemed like it wasn't really that actively maintained so i was nervous about using something that might not be maintained um that's why we ended up not going with keystone and we looked at some other things like keystone uh but everything was like in betas though i just i didn't want to use it for this site jake asks if this is a project for a client well it's for my employers so i do have some clients on the side that i do work for um but this particular site is for my employer which is franciscan university so i'm employed here in the marketing department as a front-end developer and this is their going to be their main website so it's a big deal it's the biggest project that i've worked on for them a lot of people are i wouldn't say a lot of people but the people that know what i'm doing are like kind of excited which is kind of which is cool they they've seen my other work and so they're i think they have high expectations for this so i don't want to let anybody down mainly their expectations are it's going to be clean and it's going to be really fast and it's going to be easy to navigate from from the people i've talked to that's like the things that they're expecting from this so that's what i want to deliver jake also asks uh did they request reacts seems a bit overkill for a university website unless i'm missing something which i probably am that's a really good question i think we addressed some of this earlier uh maybe not with this project but with some previous projects that i thought i tended to agree possibly did not need react but here's my feeling on that number one all the projects that i do here tend to grow there's like so much scope creep and since this isn't my client that i can just walk away from when our contract is over uh i'm still here i'm always here i'm gonna have to maintain what i build so projects like this i've done before here in like just plain javascript jquery and stuff and then as the additions pile up it gets to be a mess we saw two days ago i showed everyone the example of my my spaghetti code jquery single page app that is just it's hard to maintain so going with something like react which has these components in a structure makes it a lot easier to maintain in my opinion also by doing react we're kind of going react all across the board unless we're doing something really simple we're using react um my my colleague that works next to me is using uh wordpress with with themes uh as well so he has like a custom theme that works with our branding so if we need a like a single page site or something up really quickly he can just use that theme and he has it all on like a sub domain so he could just pop up another page in that wordpress installation so we do use that uh for some small things but ultimately by using react with everything we can have this wealth of components and code that can be easily copied and pasted in a project so you can kind of see the progression that we just kind of roll over the same code into the next project reuse a lot so it's like immediately we go into a project and we have so much done already so it's kind of nice to do it like that also i would like to get better with react i would like our students here in the computer science department to get better with react because it's it's in such high demand so i do have some interns well i have at least one intern work that's going to work with me this semester and then i have some other students that are going to do maybe some projects for a class so not officially an internship so anyway i thought hey i i can choose whatever i want to use for this why not choose something that's going to help out in a lot of different ways i also figure if we end up hiring like let's say my department grew most likely i would turn into maybe somewhat like of a project manager and i would have or maybe a lead developer or something and out of people working under me it's i think much more attractive if i go to job put out a job description to say hey like come work with react graphql just the latest like we want to stay on top of things versus hey let's work with this old extron cms and some jquery like that's that's great and then i'm gonna have to put like i need somebody that knows uh asp.net and sql server and my sql and php and c-sharp and right so i'm basically gonna say like i want a full stack developer that knows multiple languages but i'm going to pay you as much as um i don't know like i don't even know what the salary like and i don't even want to say an intern because anyway we're small universities so we can't compete on salary with with uh most companies that are hiring developers so i'm trying to look ahead to the future and say at one place we can compete is if we can guarantee developers that we are open to using the latest technology so that at least if you're not making the money you want now you come here build up your skills work on some projects then you'll be in a position to get hired and make more money if you want those are my thoughts hopefully it makes a little bit more sense as to why i went with react i do agree that for this site based on what we're doing now with the site not 100 necessary to use react we could have just used straight wordpress and it would have worked it would definitely not have been as fast as what we're doing uh or i think as as versatile wordpress can be really versatile but i i love being able to have complete control over things full stack javascript i mean albeit there's some php going on in the background you know with wordpress but basically our routing and everything we're doing javascript so um also the odds of this site staying like it is and not having additional things built into it that it would be nice to have react for are really small like this is nothing ever just stays as is somebody always has an idea it's like can we do this so it's nice that i can say like sure we can do that and i know i'll know exactly how to do it um with react would be easier than let's say with with wordpress i have experience with wordpress but i just hate to keep like add new plugins all the time my php is not good enough to custom code it and i don't really want to learn that much more php anyway that went off in a big tangent on that but i haven't really spoke about that for a long time like i'm thinking months so i figured it was a good good time to explain my reasoning behind that all right i see there were a lot of suggestions that you all gave on trying to find that error i really appreciate that world says maybe you broke the internet hey we got that wp graphql plugin upgraded too that was a nice little bonus i didn't i didn't plan on doing that today but it seemed like nothing broke it all worked alexi says hey everybody hey lexi thanks for joining us stephen said maybe you need some coffee i see uh nikki and michael or making some i.t jokes and stuff throughout here so it makes more sense now i glanced over and just saw these like random comments like what are they talking about our noticed how happy i was when i got the errors um yeah i was so hap because then we found it right like we were trying to find what piece of code made the error so anyway sometimes like getting a different error is also really exciting because you know you did something right like you made some progress it's like a different era har should ask if sitemaps help in seo uh yeah i would definitely do a site map seo is it's difficult to say exactly how much something helps in seo mainly because search engines usually don't tell you their formula if you knew their formula it would be really easy to like play the system right like people used to stuff their meta tags with stuff you know like their site would be about i don't know like skateboards right they sell skateboards but they would stuff their meta tags with like everything that was really interesting that that was the top search terms um so now like meta tags are basically worthless um so with the meta keywords tag is like worthless now uh so anyway that being said i think it's still good practice to have a site map i haven't really been into seo for a while i used to be really knowledgeable about seo like that was one of the things that i promised well i you can never promise right but one of the things that i would tell clients is that you know i'm going to try to get you on the front page of google search results and i was i was successful i could with their main search terms i could get every company that i ever tried with uh on the first page of google they were all local businesses though which is in my opinion it's not that hard to get a small local business up higher in their area like in a limited geographic area nationally or globally ranking somebody is that's the real trick but anyway site maps help as far as i know uh let's see oh christian says what was the bug okay christian the specific bug was uh i was using so in graphql i had this hyphenated so i had campus hyphen security and you can't use hyphens when i give a graphql name for these things you have to use uh camel case or all lowercase you know something like that that was the issue so that that was the bug among other things like the first bug we had was i forgot to save the file the next bug we had was i don't even remember i think we had some like intermediary bug between then but then finally the the ultimate problem was that uh that i wasn't supposed to have a hyphen there and now that i may have to go in and change some queries oh you know what i didn't even make queries for these yet so i don't have to change anything i just have to remember when i do these queries to camel cases world says burritos are good for mental health too i would agree with that i'm not a doctor so don't don't take that as medical advice wow martin said i slept 12 i slept 19 hours two days ago it was bad 19 hours that's a lot of sleep i can't i couldn't get 19 hours i have too many kids for that somebody would wake me up for sure i'm lucky if i can get like just a regular night's sleep like seven hours without some kid waking up and needing something enjoy sleep while you can if you don't have kids i love them though i wouldn't trade it for sleep all right so nikki says the updates like the mental health updates are great uh interesting too topic that is often avoided all right cool i won't talk about it every day but i'll bring it up you know occasionally uh world says is franciscan university named after the current pope francis uh no it's named after um saint francis from 12th or 13th i think 13th century um so yeah so i think it was saint francis was you know he was around italy in that that general area in the 13th century so he did a lot of really cool stuff um if you check out check out his story it's pretty good really wealthy gave up everything he once went visited a a muslim sultan and talked to him about catholicism like really just kind of exciting cool stuff happened um yeah and so anyway he started a religious order that eventually became known as the franciscans it's really the fr order of friars minor is the official name he didn't name it after himself um but now we just call him the franciscans for short so that's why so the university is run by members of the order of friars minor who are like spiritual descendants of saint francis so this university has been around since the 40s or 50s i think 50s so definitely predates um the current pope but anyway good question thanks uh michael says definitely share more about your depression slash anxiety i'm going uh to a psych uh for one uh psychologist or psychiatrist and taking medicine for the other having tried melatonin because of the depression sleep isn't a problem for me um yeah yeah it's kind of weird right like so for me at least when i'm feeling depressed like i just want to sleep but then if i stay up to a certain point like i i won't sleep right it's like in the morning i don't want to get out of bed but at night i feel so depressed and feeling like i wasted a day i just don't want to sleep um it's weird it's it's kind of like a a weird point for me there so that's why the melatonin is easy like it doesn't i've taken the sleeping pills before that are like you know medical stuff that you can get addicted to and those work i feel groggy though like the sleep i get with those i don't really like as much there was one thing i had though that was prescription and that was amazing um but melatonin is nice it just helps you get to sleep i feel okay the next morning and uh it's non-habit forming so like i said again i'm not a doctor so don't don't listen to anything i'm saying you know as good medical advice but melatonin is pretty safe at least from what i've my experience uh let's see uh michael says scope creep um yeah scope creep like so like you have your initial like uh requirements for your project and then as your project goes on the client will add on extra things like oh can we make it do that can we make it do that and then you have scope creep so the project scope the requirements the project all of a sudden get bigger when i'm working here it's okay like i still get paid no matter what but for a client it can be problematic because you have your contract set out and if it's a flat rate for let's say like i'm gonna make your website i'm gonna charge you ten thousand dollars and it's gonna do this and then the clients are saying well i wanted to do this this and this at that point you need to say that's outside the scope of our initial agreement if you want to do that we're either going to have to amend our first contract or we're going to have to bring you know make a new contract and sometimes like i've had to say that before to clients and sometimes the client says okay well that's outside of our budget sometimes they say all right let's let's amend it other times i've had clients like compromising okay well this is how much more we can spend what can we get for that and so we don't add all the features we just kind of prioritize like all right we'll do this and then maybe later on if you have the money like come back we'll add the other features so that's that's why i mean my scope creep so like i said for me it's not a problem but since i'm gonna have to maintain it i just have to kind of say like okay how can i build this project knowing that it will probably have new features added later on so i just try to build it from the outset in a way that will be easy to add things onto martin s are react angular and view roughly equally easy to scale and maintain to be honest i can't really answer that because i i don't have much experience with angular or vue from what i know though from what other devs say and from what i've heard they're all they're all pretty easy like they're all nice frameworks they all scale they're all you know somewhat easy to maintain but it does depend on how you build it right you can use react angular review and make a site that's terrible and a mess or you can you know you can use vanilla javascript to make something amazing so it does depend on you know how you build them but i can't really give you like you know something from my experience for angular review though let's see oh okay i didn't i didn't notice that nikki already gave you an answer to the scope creep thing michael so uh sorry for the the double answer there oh world says that makes sense i think the current pope is named after saint francis too yep yep that is that's where he took his name from which was unique he's the first pope to take the name francis let's see michael says please minimize that dev tools window it's kind of hard to concentrate on you oh was i this is the devtools huge sorry um ghana says react with a heart yeah for sure we love react on this this stream i don't say that uh as in to put down any other frameworks i think you know everything has its place and can be useful in different situations but lately we found react to be a very good tool for for what we're doing uh umberto says i think i've slept 19 hours since monday um let's see devex says is c or java better for uh career making uh language in the field um mandela says c sharp and java are good in the usa uh vivec says i think i have to switch to java umberto says which which field for web i would say c-sharp graphics and gaming it's a toss-up between c and c sharp with unity vivek says i'm in university but i want to make a career in a.i so artificial intelligence umberto says for ai python and c c plus plus for robotics vivec says yes i'm learning python but java is currently in my course umberto says java is good foundation for learning object oriented programming really good for establishing principles and patterns and coding in my opinion let's see that's why once let's just see that uh i pretty much agree with umberto's assessment there as well in terms of what uh what languages uh to use like i mean basically you can do you can do a lot in pretty much any language but there are certain languages that seem to be used more uh with with other things like if you're gonna do anything on the web you probably need to learn some javascript um it seems like yeah python is really big in like machine learning ai stuff now so um yeah i guess it just really all depends on what you want to do and what whether you like it's you don't have to do python if you want to get into machine learning or ai like you can do in other languages it i mean the odds of like maybe finding like a company that's into that that's using the language you like might be smaller but if you learn one language well it's not too as difficult to switch to another language so i wouldn't worry too much about what language you're learning because you can't always switch you know i wouldn't say it's like entirely easy to switch but it's a lot easier if you have the basic principles down uh rook says what is the lore mipsum text actually about all latin i got in high school is long gone here um well this lorem ipsum text is bacon ipsum so it's sprinkled in with names of different meats so this probably means nothing i can't remember what the normal laura mipsum is it's a passage from i i believe like uh classic work of literature but i can't remember which so yeah i can't remember which so i did teach latin but that was years ago and i taught ecclesiastical latin so like i can tell you a lot of like um let's say like latin poems and prayers written in the middle ages or certain like passages from um let's say from like the the latin vulgate which is like the latin translation of the bible made in like uh like fifth century fourth century somewhere around there um so when it comes to reading classical latin literature like we're talking like roman empire stuff uh i i'm not i don't really feel at all qualified to to do that kind of thing chris asks why do those fields prefer those particular languages to be honest with you chris i'm not really sure i don't know if there's anything intrinsic to those languages that make them better suited to that or not or it just so happened that kind of the pioneers in those fields use those languages so there's kind of more of an ecosystem build up around them i i don't really know alberto says i believe it's because they were either created specifically for certain platforms or because they work better to tackle problems in in those fields vivek says i want a career in ai and machine learning but c in java in my course and currently i'm learning algorithms so i'm confused uh that i continue with java c uh yet yes sorry if i'm mispronouncing that let me know how i should pronounce it um since i'm planning to make a recommendation system using machine learning and i think python is the only way what do you think about it have you ever done something similar i haven't done anything with machine learning yet i think it's awesome and i'd love to get into it but i'd have to think of some way probably to work it into my current job and then maybe i could really learn it um yeah so i i can't say much about it i think python is fine uh it's a good language i i liked it when i the very little that i've ever done with python i liked it um and i've heard from a lot of a lot of different sources that python is the way to go uh although you can do machine learning in other languages so you're not you're not tied down to python if you really don't want to use it okay alberto says like c c plus plus allows more granular control over memory management okay cool that's that's a good example i really couldn't think of an example but that's an example of how one language might have be good at something and that would matter for a particular application bastawa says good points on react i've heard many times it's overkill haven't used it myself so far do you think is really so uh requested um i see a lot of jobs for react now maybe i'm seeing those jobs because on stack overflow they know that i'm into react and so they show me react jobs it could be that uh but i've i've seen in other places that they say like react jobs are in really high demand right now so um i think you know why not do that and the fact that react so versatile i think is um is a plus as well so some of the sites that we've done before that didn't really need react it was good that we did it with react because now we're converting them to desktop apps and to mobile apps which means we can use react native and it makes it a lot easier to just like port something over uh to to mobile um and then there's also other things you can do with react like you know there are people doing vr stuff and react um trying to think what else was that what else people are doing i don't know i saw a list before of all the things that weird things that people were doing with react and it was it was long there's a lot of stuff so it does have advantages like beyond just what it can do on on the web let's see uh borna says what framework will be best in five years time if we don't look at the ones that will come i don't know i haven't i mean i have no idea how to how to answer that i mean in five years probably all the same languages will still be around maybe we'll have we'll have a new one i i don't really know um yeah who who could know i don't really know divek um about and what's my opinion about java or c i i don't know i've used both very minimally like i'm talking like hello world type stuff um so i don't think i know enough to really have a qualified opinion about either one i'll tell you what it in regard to the question about what will be the best uh what framework will be the best in five years i'm sorry i misread that question i think i misread it at first about what language what framework um yeah i'm in five years i think we'll probably have a new framework but there's gonna be react stuff around just because of and angular because they're companies that invested a lot of money in switching over to that and they're not going to be really happy to completely switch again anytime soon i hope that react is still around and one of the best because if i i'm trying to learn react well and then it'll be good for me but if it's another one you know i just learned the other one that's that's kind of that's how this business works um let's see yet yeah dave says thanks i have a non-coding question what pc do you have uh and were there any projects where you actually needed a really powerful pc i'm actually on an imac right now uh so my imac has 32 gigs of ram i think i upgraded to 32 i don't really know what the other specs on it are but i've never had a problem the only issue i've ever had with this is sometimes uh i've dropped some frames if i've had some really uh like kind of heavy things running but in my actual work like i'm talking about the live stream i dropped some frames so with my actual work i've never had an issue trying to live stream and work at the same time i have had an issue um i do have a pc at home but i haven't used it in so long i can't even remember what the specs are on it i have um a macbook pro that i mostly use at home and with that i i tell you i don't really know the specs are either sorry i really i should know more but um i used to be in the like building and like modifying computers and stuff but lately it's harder it's a lot harder to do with macs anyway and i just haven't had a lot of free time to mess around with it at home so nor have i really had the need to the need was mostly like how do i make my computer run games better but i don't really have a lot of time for uh like pc games lately vvx says what type of coding do you do live it's javascript mostly javascript usually with the react library um vivec says what what is react or angular um they're they're a way that you can structure your javascript um to make applications so um yeah i guess that's kind of like the most generic way to uh to answer that that question usually they're made for like single page applications progressive web apps like things like that your encoder says cloud9 is amazing yeah cloud9 is really cool i do like cloud9 uh cloud9 is like a like a cloud development environment where you basically have like you're like connected to your own linux machine uh like but in the cloud so you could use it from anywhere um it's really good like if you run a chromebook then cloud9 is the way to go if you want to develop things on a chromebook borna says what do you think about blockchain technology uh greens is tired of hearing about blockchain yeah honestly i think blockchain is going to change a lot of things i think all the hype around blockchain right now um misses the point like the stuff in mainstream media um that blockchain like obviously i have money in some cryptocurrency right like what why not you know um not a lot just a little bit and that's cool all the speculation and the price fluctuations like that stuff's fun but that's not really what blockchain is all about i think the the the idea of having different systems that right now are either controlled by governments or corporations now be trustworthy without having anyone in control that's like a game changer uh when we see like a let's say a country's currency gets destabilized and then all of a sudden like their main method of buying and selling things becomes some form of cryptocurrency like that's a game changer right um now all of a sudden like that government has no control over monetary policy um you know they're out of the currency business like how is that gonna work it change things um how would that then affect like the imports and exports for that country tourism for that country uh it is just so many things that are different uh that are gonna change the same way with like uh social media you could have social media networks that are distributed on blockchain and now one company doesn't decide how things work on there same way for messaging right a government can't go to a company now and demand that they have all the records of whatever somebody said because there is no one to go to so you see there's a lot of stuff and that's you know there's a lot of other implications for that that i think will be like as time goes on it could potentially change um communications and economics like financial systems quite a bit i'm not an expert on blockchain i've just done a little reading on it um borna says absolutely i agree uh green coder says how many hours do you code usually um on my streamer in a day on my stream i usually code for like an hour uh and then do question and answers uh session during a day it does kind of depend on like how many meetings i have and what i'm working on but um i would say average if you count my coding on the stream too maybe like like four out of the seven hours that i'm here i definitely code some days i do more other days especially if i have meetings i do less so i work like a seven hour day so it's like eight hours but with an hour for lunch so within that time period um i'd say i'm like for sure coding um other time is filled up with like talking to my boss um talk like catching up on emails and different things like that maybe like reading about frameworks like documentation and things so um during work now if i have a project on the side at home i could be coding for a lot longer than that vivek says is there any relation between java and javascript uh java and javascript have the same relation as ham and hamster do they just share a similar sounding name and that's it that's it i mean they're both they're both coding um languages but that's it they're both programming languages uh vivec says you have your own company or you're doing a job uh i i'd like kind of have my own side company that i don't do much with at all so jesse weigel digital marketing is is my like kind of like media company um but i don't advertise at all i left the website up but i don't do much i have some clients uh but really minimal work right now um and then i work for a university uh so i'm a front-end developer full-time at university uh at peruva says how to make sure about security for remote work let me know software app for remote work and safety measures um it just kind of depends um for remote stuff like what type of stuff you're doing you're working on um yeah i would say i mean it does it it just really depends honestly i found that the clients are usually way too trusting like i have access to way too much stuff from clients and i just i worry because i'm thinking like if if they do business with somebody who doesn't really have that much of a conscience um they're gonna be in trouble uh generally it i would think like larger companies might i would hope have things better security measures in place but like small business clients they have no idea like you they give you access to everything that they have um because they just don't know they don't know what anything does you just say all right i need passwords and they give you everything plain text over email just here it is um so usually i ask permission and uh sometimes get it to change all the passwords at least to something a bit more secure than normally it's like the name of the business is the password uh so yeah but i i don't know that i don't know how great of an answer that is but that's been my experience with uh like remote freelance work uh bastawa says i have the same uh can't wake up feeling in the morning um and then a night can't get to sleep yeah it's crazy it was crazy how that works uh winkle says what's the best way to learn about react um there are some free resources on codecademy and a lot of free like youtube video resources the react documentation is pretty good as well if you want to pay for a course react has or udacity has a react nanodegree that i did that i liked so that would be my suggestions vivek says how do you earn money well i mean i get a salary from my main job and then you know from my freelancing work i get some money on the side they're really minimal um world says do you use agile at your work is it useful i do something called agile for one so it's not exactly agile but it uses some of the techniques from agile um i find it to be very useful but it's not you can't really do like agile with one person like exactly the same way all right let's see um albert says any senior developers here interested in building a website for 50 equity of the company um i am not i don't have the time to do anything right now maybe after i finish this project i have some time freed up nikki says gotta go thanks for the stream uh bye everyone hey see you later thanks for watching all right you have some more questions i'm gonna just take a few more questions i'm after wrap thing things up um vvx says uh okay now a non-technical question how many desktops you have for coding and also you play pc games uh i i code with three screens three monitors my main monitor is uh like a 27 inch i think 27 inch 5k screen my secondary is the same size but it's a 2k and then my third screen is just like a like re lower res screen but i have it tilted on its side um so it's like you know going up and down i used to use four screens when i had my did most of my work at home i i really like that i wish i still had four um bonuses how much is paid course or boot camp worth the udacity uh paid course was four i think four hundred dollars let's see uh rick adams has created a repo with um a road map of resources to learn java php react sql um cool uh that's really cool thanks for uh for letting us know rick um let's see world says that burrito is probably frozen now yeah i'm gonna have to warm it up um says i know mean stack uh how useful is react how much time we'll learn to take i don't know it um i don't really know it really depends on everybody learns at a different rate so i mean if you're pretty pretty good with javascript you know you could probably pick up react you know pretty really quickly if you can spend the time on it so i don't really want to put a time frame on it because it's just so many factors to take into account um all right i'm gonna go now because i am really hungry and i have food waiting and uh we're over the two hour mark now for the stream so thank you all so much if you have any more questions join me next week in some live streams or message me some other way um thank you all so much for watching for all your help definitely uh like to have the help when we had to do all our debugging and uh thanks you know all the comments and questions everything uh i love it uh so i'll be back next week and until then have a great weekend