React Search Filters (P5D90) - Live Coding with Jesse

Key Takeaways

everybody welcome to lab coding with Jesse I'm Jesse and I'm so glad to be back after it's been a while I think the last time I streamed was the 19th of July so if you don't know I had surgery on my wrist and I will spare you the sight of my my scars for my surgery I just got my stitches out this morning and so it's been a little rough trying to type my wrist is finally getting to the point where it's strong enough that I could tight for a while so doctor said probably like six weeks before it's actually starts to feel better than it did before the surgery and probably won't be like really feeling back back to normal for about three months so I'm just gonna take it easy not lift lift heavy weights or anything like that but you know typing should be okay I was able to do some work from home so I'm gonna catch you up on what I've done and then we'll get to it and we'll start working on this the search component that we worked on a while ago and then we just kind of left it there because we needed some work with the data before we could really finish it so we finally got that work done now we're gonna go back and finish it so hey everyone see a lot of people saying hi Julia so glad that you could make it to to a stream so that's awesome Phoenix hey I guess I'm just gonna say hi to everybody all right cool so for those of you who are new this is how it goes after I do a little explanation of what's been done since the last stream we're gonna do a 25-minute Pomodoro session of coding and then I'll take a five-minute break and answer all your questions will do another 25-minute Pomodoro session of coding and then after that we'll just do a question and answer session where I'll answer all your questions until there are no more so if you do have a question and it seems like I'm ignoring you I am but just for 25 minutes and then I'll answer you okay so let me let me think what I've done all right so here's some stuff that may be important for you to know if you are actively working on this project locally I upgraded a lot of things a lot of packages so I've upgraded next I've upgraded react I've upgraded material UI so you definitely need to run yarn or npm install if you're going to pull this down if you've already had it because a lot of things have changed I've been working mainly with I guess the menus right so the side menu if you notice has all new navigation and almost all of the links work now there's some that I just don't have content for yet but that that's pretty much sorted out now that took a while I've also moved I've got a little bit more organized I went back to using the Trello board so let me know if anybody's interested in and having a link to the Trello board to see where we're at and what still needs done in the project I can definitely share that I took care of some of the issues on github and I also added a few more issues so if you're interested in helping out a contributing check out the issues there there may be some new ones that you know you you may be interested in helping with okay that's that's an okay summary I'm sure I'm forgetting a lot of things but of course you can all check out the commit log on github if you really want to know you know specifically what's changed let me get my face off the screen here and look at some code all right I'm gonna start my Pomodoro timer and I'm also gonna start what do we have and grok let me make sure I have this yeah have the dev server server running let's start n Gras I'm about to paste this link in the live chat if you click on this link or copy and paste it in your browser you will be able to see the website and it will update as I'm changing it locally so you'll be able to click around go to any page that you want inspect it with your own dev tools it kind of makes it a little bit more interactive than just me coding and in you watching okay so let's go to this search page I haven't had been able to do any coding yet this morning I've been doing mostly paperwork since I had this is the first day back in the office since the 19th so I'm late on some of my paperwork let's see okay so here's the search page let me make this a bit bigger also not sure if any of you are from or around Salt Lake City Utah but I'm gonna be there for react rally is it next week it can't be next week that'd be I think it is though alright so I think next week I'm gonna leave I think the 13th my flight goes out so I'll be in Salt Lake City for a couple days so let me know if if you're there if you're in the area if you want to hang out or something and then I'll be in New York right after that so if anybody is I'll be staying in Brooklyn for a couple days so let me know if anybody's in that area wants to hang out you know we try to get together have some coffee do some coding or whatever okay I don't need this right now so let's kind of move that over and make some room let me know if this font needs to be even bigger okay so here's what's going on in this component so you can see we've already done quite a lot with this just to break it down we're using the WordPress API to get data from WordPress which we're using as our content management system and this search base let me show you the the front-end how this looks so I don't have a link to it so you need to manually type in search so at the end of that end Rock link that i typed in if you do slash search you'll come to the search page alright and this is just a live search so so as you type it will pop up with the results it should it's actually going quite slow so I may have to think about some way to fix that I think because we've added so many different post types but if you remember how it was before now there's a lot more information different post types that are now showing up in the search and then we have this sorting but we also have these filters and these are the ones that we put in a while ago so you see we can filter and just get you know what we want here so we need to add a lot more filters now that we have a lot more content types right so that's what we're gonna do I want to try to accomplish that now there's still a few other things I'd like to do with this page but the primary thing now are getting these filters in there okay so here's what's happened so far we have I've added in some things into state our initial state under these check boxes but then I thought hmmm sorry about that I've been trying to hold back a yawn for a couple of minutes now my sleep schedule has been all messed up since I've been off so I didn't get that much sleep last night so what I was thinking is instead of manually entering a lot of these different types in here you know maybe we could do something programmatically so I down at the bottom of this component we can see all the different post types that we have now so I don't think we need to filter by all of these post types some of them are things that it's not really likely that somebody would even filter by that but a lot of these will become filters okay so I think I have two check boxes in the state to create the form controller so I think what we're gonna do is actually let's look at this are these the only ones I want to have now let's try it out on here so we already have Department major and faculty that are check boxes but what I'd like to do is instead of just having these let's say manually put in which I'll scroll down a second to show you what I mean by that I'd like to just map over these and create the check box elements out of that so let's scroll down and find that I really want to refactor this it's too big it's not necessary right now just need to get it to work first and then we can refactor all right where's uh here's our filters so you can see we have these form control labels so right now I have three form control labels here so it's it's hard coded but I think what we could do what makes a lot more sense is just map over the the check box labels that the names that we have in state and then we'll have them all in there later on if we want to add more it will make it easier it'll cut down on the overall size of this component so that's the that's the plan for now I just happened to glance over and I at the live chat and no beer says a long time do you remember yeah for sure I remember so how's it going over here thanks for joining us okay so here's what we're gonna do we're gonna say this state it's going to JavaScript land first if you're in react and you put these little curly braces here then you can write JavaScript inside of those curly braces so we're gonna do map oops this state checkboxes dot map okay so map is gonna kind of like a loop right it's going to loop over everything and let us do stuff inside of there so we get to when we use a map the the first word that we're gonna put the first string or variable let's say that we're gonna put in here is basically anything we want it to be but that's gonna be the name for each item okay that I maps over so in this case I you know what I think I'll just put item a thing about putting checkbox but that's kind of long I like item better here and we're gonna use an arrow function okay and that arrow function when we use that it's going to automatically return whatever is in there so you don't need to actually write the word return and have it have it go in there okay so now we have the form control label and we need to use this item to get what we need so states so we want to keep that this state but it's gonna be actually we know we may have this maybe a little bit more tricky than I thought let me see yeah we're gonna need to do it like this yeah so let's just copy this for now so I'll explain this in a second I'm glad I caught that earlier okay so here's what you really need to do so you do to object entries this state checkboxes and we're going to map over them here okay and then we're going to get the key and the value okay that's gonna allow us to so the first way I believe what was going to happen is we were just going to get a bunch of falses as our initial values we weren't going to get the actual name that we wanted for the checkboxes in this case we're going to get the name so the key is going to be the name so let's let's get rid of this stuff okay all right so we have our form controller let me hit save so we get what does it sound cheap Rob so mad because I don't have a key all right let's give it a key so our key in this case is just going to be key okay and then all right these are just the indentation things right yeah all right now we could say for checked so we need to check to see if this check box is supposed to be checked and these are I can't believe just slip my mind controlled components I believe that's called let me know if you know what I'm trying to say and I'm saying it wrong but I believe it's controlled components basically what the value of this check box is determined by the state so when you click the check box it doesn't immediately cause a check what it does is it changes state and then a state change triggers re-render of the react component and when that rerender happens this check box this value for checked it goes to state to see whether it should be checked or not whether it should be true or false okay then that's when the the check box will actually get checked or not so from a user's perspective nothing changes but in the background it definitely is a different flow all right so I'm wondering if now let's just let's keep it like this so I think this will work once I really sure but let's try it he whoops I'll see if that works and then on change this handle change and we need to pass it the the name here so we're going to say key and for value we're also gonna say key and then for our label we're gonna say key and we'll use a CSS to make that capitalized for now it's just gonna be all lowercase just like it is in state okay now we can remove these two form form control labels and oops I think I deleted a form group yep I did okay let me know if you have any questions about that I seems like I went through kind of fast and there is quite a bit to this component if you've never seen it before so just let me know and I can definitely go back over it a little bit more slowly and let's see trailing spaces all right for whatever reason my Auto formatting indentation is not fixing this those red lines are just for indentation so hey cool look at that so our checkboxes are there now for our filters let's see if it actually does anything though so first of all I'm just going to check for an error when we want to use the checkboxes cool so check out console it's warning me about a key for up here let me remove this first let's refresh this may have been old warnings all right cool so we don't really have those warnings those are old so we have fixed that hmm area okay so it seems like this is going a little bit slow okay all right but that part works so that's cool that was actually the most complicated part of what I wanted to do today let me check my time oh yeah we're good at plenty of time let's clean this up then with a little bit of CSS and we just need to have this capitalized so we can test it out right now should be what is it text oops text transform capitalize there we go yep that's it okay yeah so let's go ahead put a text transform capitalize on these and we can do it right here on the well actually let's see if we could do it on here these components are material UI components I'm assuming that it'll just pass that style prop on down but I'm not exactly sure and the reason I'm going to do this in line is because it's only one thing we're adding on there usually I don't like to put a like make a whole nother class for one thing and react it's actually I mean it's arguable here but it's somewhat easier to read if you see the whole component here with the in line style and you can you can do it but if it starts are going to be two three four and line styles that's way too much it clutters things up and in that case we would end up putting it down here with the rest of our style C so we can add you know a lot of them and it's not really a huge deal in terms of clutter okay so in this case we'll do text transform and we'll say capitalize all right I'm assuming I spelled that right we'll find out in a second yeah all right cool Department made your factory isn't it awesome all right so this is basically our search page right now I'm not like a hundred percent thrilled with the way this looks it looks super plain so any ideas you all have to make this page look a little bit nicer I'm definitely open for that I do want to talk I guess for a second about why this is so slow and see if any of you all have any ideas for how we can make this faster so it was way faster originally and here's what I think happened so let's go up to our search string so we're adding on to the end of this string like all these different post types right so we actually have to say I want to search each individual post type like we can't just do a search for all of them at once the API doesn't allow that so this is how I had to do it so what that ends up creating hope leus was shown and that word she's the that should be trying to get this there we got one of those two faculty no I don't want that right now let me refresh so we we get rid of a lot of this there we go all right look how long this is I'm gonna copy this area all right let me copy this and just throw it in here in wow I have so much stuff all right so look at this look how long this is look at how many different post types it has to go through and I'm talking about on the WordPress side of things with the API it has to go through all of this so I think that's what's slowing it down so if anybody is knows about PHP databases WordPress and has any ideas of how we can make this faster let me know let me share with you one idea that I have so from what I've heard okay from other people that do kind of really advanced things with WordPress the folder structure in the WordPress database it's a my sequel database so sorry I don't mean that the table structure is not as efficient as it could be so potentially what's possible and I know people have done this is to change the structure to make it work more efficiently I'd really would not like to get into doing that but that's maybe one possible solution to basically customize the the database for this type of thing for search right I don't know let me know if anybody has ever even heard of that being done or what you think I know there is a plugin that was shared with me certainly if you did that Christian may have shared I don't know if he's here right now in the stream but I believe he shared it on one of the issues and in the github repo I think so I'll have to go back through and find it so we may be able to use a wordpress plugin to do this and not have to like manually manipulate the database so I think the speed is just it's a problem it's it should definitely not be that slow all right let me check it time like five minutes all right to know about five minutes I'm going to go to the live chat and answer all your questions so hang in there if you have if you have questions oh wait a second Rohan says cache the output of the WordPress API and say that server-side okay actually I kind of like that idea all right let's think about that idea also I just saw Jeff said there's a graphic you'll plug in we are using the graph QL plug-in but unfortunately the graph QL plug-in does not support search like this so that's why we had to use the API so basically for the rest of this app we are using graph QL and then for the search we're using the WordPress API we may have to use it in some other places too which we'll probably get into that in a different stream all right let's let's clean this up just a bit while we're waiting for the the timer to go off here I mean we can potentially try to save a little bit of time with this debounce I mean if we drop this debounce down to 300 milliseconds it could save us some time I don't think it's good I don't think that's the problem though it's not it's not the debounce it's a problem let's make down so see yeah it's still not does that even change it okay that was a little bit better you know what we also probably should do is put in loading indicator I mean that's it it would at least indicate to the user that something's happening so let's let's check that out do we have loading somewhere else we do where else are using loading I think on some of the pages so the timer's going off right now when we come back we'll probably end up doing is adding in some sort of loading indicator because regardless of whether we get the speed thing fixed it's still a good idea all right let's do five minute break so I'm not sure what kind of music y'all are into but there's a really good eighties playlist I've been listening to on Spotify it's called all-out 80s so if you enjoyed in the 80s check that out right now that's what I'm listening to you right now okay I'm gonna scroll all the way up to the top and work my way down and get through as much as I can in these five minutes probably won't get to everything because there's a lot but just hang in there and then after the next pummelo recession I'll go through everything yeah so alright yes some people asking if I'm okay so yeah my wrist is okay the surgery was successful is just gonna take me a while to get fully recovered so for now it actually feels worse than it did before the surgery but I'm hoping it will get better the thing that kind of stinks is like I was finally getting back into exercise and lifting and now like I won't be able to lift anything heavy so I won't be getting swole anytime soon okay an AK says can someone point me to the best way to learn Python please okay I personally don't know Python I've used it a little bit I know the Udacity intro to computer science course it does use Python so that might be a decent way to get into Python because you would learn Python at the same time that you would learn computer science principles so I would check that out of here if you like the Udacity style of course you can do it for free so that's the only resource that I know that I've used and learned a bit of Python from brotherman Britt says what programming language do I learn to start off okay well I personally would recommend JavaScript I really like JavaScript I think it's useful for so many different things because you can you can pretty much make anything with JavaScript there they're not a lot of other programming language is where you could easily do that so I would recommend JavaScript even to get started with it you can run it in your dev tools console so you don't even need anything special you don't need to load anything on your machine so that's what I'd recommend but if you have something you really want to do and another language is better suited to that then maybe try that out okay so if you're really into I don't listen machine learning Python seems to be where it's at right now with machine learning so maybe you want to learn Python first so there's not really going to be a one-size-fits-all answer to that question but I can at least give you what what my answer would be for you know what what I think is good it may not work for you though let's see yes says how to design a suggestion box and Daedalus I don't know how to answer if you want to you can DM me on Twitter or something - and we could talk more like specifically about your particular case that Brown says I'm working on the HTML cat photos I'm new to coding need some help okay so I'm assuming that's the free code camp cat photos things so again Browns if you want you can DME and I'll try to help up full stop says hi from Nepal hey how's it going thanks for joining us Blake says glad you're back I'm glad I'm happy to be back I missed your Anna says loved to contribute if I can Oh awesome and if you want more details on like what I need feel free to check out the issues on github leave comments there to get more details if you want you could DM me like definitely happy to if you would like to contribute I'm I'm happy to help with that Nimisha says hi from India I'm really sorry if I'm mispronouncing your name but house would go on there in India thanks for watching Robert says can you teach us MATLAB program please I don't I don't know anything about MATLAB so I'm not going to be the person that you want to teach you that if anybody in the chat now or even watching later you could put in the comments if you're in a MATLAB and interested in helping out with that or if you know of any good tutorials you know please let us know Rashid says hi Jesse from Indonesia hey how's it going what time is it in Indonesia right now I'm not sure what time zone that is but it's got to be late right I mean yeah it's got to be close to midnight over there Yeah right anyway okay I didn't get through everything but I got pretty far I'm gonna write down where I left off at cuz there's a lot going on in the chat today and I don't want to be able to get back to my place here okay all right so I'm gonna get back to the chat I know I didn't get through everything so just hang in there for a little bit longer if for some reason you can't stick around to hear my answer I'll still answer your question you can always watch the the recording of this video later on okay all right one more Pomodoro session let's try to get a little loading indicator and to speed this up I'm gonna check out another page where we are you already using a loading indicator and try to maybe take that code and see if we can use it maybe modify a little bit that'll be a good start so do we have it on it not on index page judge is there we go oh I see what we're doing okay so we're using graph QL in this case and it says if the result is loading hmm sorry about all these yawns then we just do the loading indicator okay okay I don't know that we're going to be able to just take this so it's that's not a big deal though let's let's do our own thing okay so here's what we need to do okay so we have this fetch search term so what if we did we could put something in state alright let's add in the state loading and this would be SB you know true or false for loading so we'll set it to false by default okay and what we can do here then is say let me see if there's somewhere better to put this I don't think there is but I think it's worth a shot okay alright so the first thing we'll do here when we go to fetch a search term with this set state and it'll say loading loading true it's about right away as soon as it starts the search will set loading to true and then then here see if we can this at state data data and then although loading false I think I can do that we'll see it's not worth looking it up at this point I think it's worth just saving it and seeing what happens actually let's let's put in something down here that'll actually show up so that we can get a nice visual so the container I wanted to go below all right so this is what it'll be here it'll say loading oops this states loading so this state loading and let's just put will just do just like we did in the other thing looting okay all right so what this will do is check for this state loading if this state loading is true then it'll go to N and it'll check what's here and in that case it'll actually render this but if this state loading is false it'll just stop there and it won't even check the end because this statement will have failed immediately right see if it works okay so no immediate I want to see the console here let's clear that console out and we'll try to search nice okay let's see if we get the same thing here okay cool so we do have that loading that pops up and it stays here I mean that does look a little bit weird but I think that I mean that's not bad I don't know what's up with me today so for everything I've tried has worked it's just it's amazing it's never happens okay all right well that works for now it would be kind of cool to have a nicer looking loader so let's just let's check out material UI just to see if AB a loader I don't think they do the last time I checked they didn't but maybe they've got something with an update so you're loading indicate what is this Oh progress blur nice that's cool they have them now all right what do you think I really like these circular things but let's check out some of the other things just to be sure the linear indicators are kind of cool hmm alright let me know what you think I'm gonna give everybody 30 seconds to let me know whether you want the circle loader or the linear progress it's a progress bar right progress indicators so let me know circular or linear I'm gonna look at the code for it while I'm waiting I'm gonna estimate 30 seconds so I'm not really gonna count to 30 I'm starting to get some oh okay well linear linear linear linear circuit is too common do the linear michael says circular if the Lund years often cost for station I thought that too but we could do the indeterminate linear so that the you know there they won't so the linear determinant would indicate that like we're actually gonna get results when it hits the end and I don't want to mess with that I mean that would kind of be cool but I don't want to mess with that but we could do this indeterminate so it's just saying like hey something's gonna happen we're not telling you in though alright so it seems overwhelming that we're gonna go linear indeterminate so that's cool I I was surprised by that I was leaning more towards the circle but let's go with the linear indeterminate so we've never used one of these before in any of the projects so this will be cool so first of all let's grab this and import this linear let me make this bigger a little bit bigger so we're gonna import linear progress let's go all the way up here there's so many imports on this page and then I can't wait till we can refactor that number mats there we go okay now we don't even oh cool we don't even need to add any the the styles we can just grab this linear progress and that's nice this is super simple wow this is even easier than the circular so we're gonna pray replace this h1 loading with our linear progress save that and see how it looks nice oh I like that I like that what do y'all think Wow that I really like that that's cool honestly that I don't know if it how it felt to you but to me it felt like the load times were actually faster I don't think they were faster it wouldn't make any sense we didn't do anything but just that that indication seemed like it went faster to me so that's that's really cool I didn't know I mean to click on that but let's see if this page actually works to be good and it did not since hmm all right so evidently our news face doesn't work yeah nothing you know I had somebody working on this I thought they got through all of them but maybe they didn't but I'm not getting into air or anything let's see how much time I have 13 minutes okay cool actually this is a good opportunity to show you a little bit of how the wordpress side looks on this so let me there we go let me go on here make this a bit bigger so here's the wordpress you see we have a ton of custom post types happening here if you want to see how we did that check out the repository for the fus wordpress plugin it's in the same github organization as the repository for this project is links in the description let's go into or yet news I can find it I really need to alphabetize these there we are things just grow sometimes you know you have a short list you can find everything and then you just keep adding a little by little and eventually without even realizing it's it's a mess and it started finding it so what was that news counting students see we can find this yeah there we go hmm okay so this obviously has continent let's check the slug so what should happen is based on that slug it should be able to find this this information so accounting students to assist local residents with accidents accounting students to assist local residents with taxes yeah it should work right news good students hmm okay so I don't think it's a problem with the way these were done in WordPress this looks looks good so I mean I know we're going kind of off off the topic of what I set out for this dream but if you don't mind let's check out what's going on with our graph QL queries for the for the news pages so go to news real quick and let's see we're doing where's our query so we're using Apollo to help us with our our graph QL stuff and we're using page query and then we're passing it the name okay so let's go to our page query there's all our graph QL queries page page we're type did we not pass a type I don't think we passed the type you're okay we're not passing a type that's why I didn't work okay let's let's figure out a place where we are passing a tight area no wait we are we are to the query what am I thinking we are passing a type oh no that's the page go back to news no we definitely are my fault I don't know why I didn't see that okay so we're passing a type to the page query we're passing the ID let me check this data for secondary you've got too much stuff one I wonder if I wonder if any of this is is messing it up I did have an issue at some point where depending on if if one of these were found it would just basically not doing anything would freeze up let's check our check our stuff in here accounting sues justice local residents okay yeah that's definitely it's definitely the right stuff I mean make try to make this bigger for you so we can directly look at what our state and props are at any given point here with our reactive tools so that's what we're doing right now just to get an idea of where where the problem lies like if we're getting the data back and it is stored in props then we know that the issue is kind of like after that point so this will help narrow it down for us okay there's our ID okay cool here's our query where name equals accounting students let's see did we get alright cool so we're getting we have this content so we have it all right we have the content we have the title okay all right so let's actually I want to take this title out we don't need that in here I want to leave this it's double check okay we're putting the content in there so our content data edges no consonants all right so we've got the data the problem I guess is somewhere in here I'm gonna check the live chat in case you are seeing something that I am NOT I just see we had a comment from who here though I'm probably mess your name up I'm really sorry let me know how to pronounce it and I'll say it right the next time but anyway the comment says I like you so it just caught my eye there Thanks thanks for watching I appreciate the government alright alright let's try to do instead of content let's maybe directly do let's try this let's go with div and let's see what we're getting and I want to just say data area okay little sloppy here but okay so we go we are getting this data it's under news edges node news edges node title okay all right let's make sure we're doing that right okay so under data should have news this site okay I see what's happening do we need that so if the data already yeah we will have to say news what's the type though that we're getting let's go back to to this I want to see what the type is okay the type is a news and this says a news all right so that should work so you should be able to get data with this drop stage let's just verify that that would work all right that did work I'm just gonna go down the chain here and see what we're messing up edges zero yep that works edges zero one let's just do it node node and this good title there we go yep that should be there why is the title on isn't it anyway okay all right so that's working maybe it's because we're going dangerously set innerhtml yeah let's switch this up hmm that's a little weird how they're organizing that but okay so something's happening with this the straight title all right that's really weird but if we do this so weird alright so evidently something I'm doing here is it's messing this up probably because I'm doing it like this and I bet this works now yep that works all right here's the problem I apologies if you notice this and we're trying to tell me in the chat and I didn't see it but I don't I have no idea why I didn't see this I wasn't actually creating like these direct variables right so I'd probably just copy and pasted this result you know this conch data and I left the the brackets around it right but I wasn't trying to get like an object right this I wanted to be an object I didn't want these to be objects but I was that's what I was making them so anyway that was the problem so I don't know I tried to be systematic about finding that error and that's usually a good way to go you'll find it in this case if I would have just jumped in and just took a look at the code maybe I would have saw that and changed it I don't know but anyway that works now my timer did go off but let's commit some of this and get it up to get up that way y'all can check it out let me alright let's see my my node want has been doing weird stuff where it just keeps refreshing all the time and it won't let me run my tests so we'll see if it does that we may have to just kind of manually start the server just for the test but for now let's do a git status as soon as I push this up to get up I'm gonna go back to the questions and answer all your questions alright cool so these are the only two pages that we did work with so that's good first let's do a git commit and we're gonna commit the search page loops pages search I'm sorry what am I thinking I need to do it get ad there we are I'm going to do yarn CM okay because we have it set up to help us out making our commit messages otherwise you could just do a git commit and then add your message so let's add a new feature and we'll say add checkboxes let's say filter and what LC Oh loader a loading indicator and I don't think we had any that attach to an issue so I'm just gonna skip that okay so hopefully all the tests run I can start answering questions now while we let these tests are on if they'll pass then we'll move on and make the next commit I'll push those up to get up and then everything we've done today will be available to you all on the github repo so let me scroll back up to where I left off in the chat oh cool those all passed let's get let's add the news page now yeah and we're gonna say this is definitely gonna be a fix [Music] so say 6c dispense the ISP you spelled displace hey Ron this place yeah that's it isn't it weird out just simple words sometimes like you know you spelled them a million times but all of a sudden you just you forget anyway content now displays properly okay oh man Phil Collins just playing right now I'm on Spotify in the air tonight it's my favorite Phil Collins song if you see my head moving like if that's why all right cool that's ready we'll do a get push and it'll all be up to github great okay so where were we okay an access how long of a time usually does it take the average person to learn Python I really have no idea and I haven't learned Python myself and really it it definitely depends on like your your natural ability like how much knowledge you have coming into it and then how much time you have to dedicate you know each day to learning it so that's that's going to be a question that even for yourself will be hard to answer you know and you'd know better than anybody which your capabilities are manju says how to start learn coding or other programming yeah it kind of depends on your preference for how you learn let's assume you're going to start with JavaScript okay if you wanted to start with JavaScript you could try out the free code camp curriculum that'd be a great way just keep doing those exercises if you prefer that like video learning style you could try out something like Udacity and do some of their free courses they come with a lot of videos if you wanted to just do videos no exercises you could certainly go on youtube and watch like buh buh Karns has a whole video series on the free code camp YouTube about learning JavaScript you could check that out if you like to read you can get the eloquent JavaScript book or the you don't know J S series those are both available for free to read online or you can get the the print copies if that's what you like so those would be my to get started all right michael says why not programmatically build the filter list from the the hits after you get the search results like only add the topics that show up oh that's interesting okay I'm have to think about that hmm yeah that would kind of be a nice feature I don't know that that's something that is necessary to get in before we launch but I do like that yeah I really like that that's a good idea oh by the way the launch date I mean obviously launch day it keeps getting pushed back for this thing I still need to have a meeting with some people from another department to get the okay for this to launch that meeting had to get pushed back now I'd like twice it's just hard to get all those people together and then because of my surgery we had to push it back so I believe the meeting now is set for the end of August so I'm thinking there's no way the site's gonna launch until at the earliest the very end of August maybe beginning of September so we'll be working on it for a little while but I mean that's not bad we have more time to make it look the way we want to optimize it you know add more features so I I kind of really want to launch it I've been wanting to launch it for a while but just can't I just I gotta wait for approval so that's where we're at in terms of launch Oh Sean asked what are we doing here today I assumed I was Sean that you figured it out at this point because you asked that quite a while ago so I'm vaga to go over it again okay ocean said it's a controlled component alright so when I was trying to say I don't even remember what I said if I said it right or not but when we're talking about our inputs in particular checkboxes there was a controlled component when I was mentioning that when you click it it doesn't actually directly change the check state of the checkbox what it does is it changes the states in react in your component and then the checked attribute of that checkbox is getting its value from state and the the update is triggered any time there's a react state change Julie asked to forget a playlist for these yeah yeah for sure so if you check out the free code camp playlist you'll see I have several playlists now so there's one main playlist that has all the videos I've ever done in the live coding with Jessie series and that's huge so I don't know if that's for everybody but this project has its own playlist and it's project five so if you check out the project 5 playlist it's just for this project this is stream 90 of that playlist so there's quite a lot here so it'd be kind of crazy to have watch everything at this point I definitely recommend worth watching on like to time speed I think you can definitely understand me still a two times feed just slow it down is there something interesting I guess and maybe like skip around it to some of the videos over there topics that you're interested in I mean unless you really have a lot of time to kill and want to watch them all but it's it's a lot of time at this point no Bo says it's not really tutorials it's like group work in public yeah yeah yeah yeah it's true I know these aren't exactly tutorials because I don't like go through systematically and try to teach something but I hope that we all learn something though I definitely learn stuff from you all the time Christian Brown says don't forget shoutouts oh okay actually let me do that let's go to get up repo for a second get up I know I probably have this github repo open in 3 other places right now but what I'm not signed into github are you serious that's crazy I haven't had to sign into forever and now I have to do my authentication all right let's see get Oh No don't you hate when the phone Authenticator changes right in the middle are you trying to put the code in okay so what I want to do is give shoutouts to those you that actually did submit pull requests recently so let's go here okay so Christopher brown has several pull requests so let's see the green keeper stuff is a bot that automatically sends pull requests when packages need updated so yes so Chris added these title elements to things so this is for accessibility purposes so thank you for that Chris let's see the faculty also this get faculty graph key to return a purple response y'all can check out the details of these of course if you want I mean this is a public repo Daniel and I'm not sure with the dates I'm getting kind of back a little bit more so yeah these are older ones I think we've already gone over but anyway and then just to show you all since I haven't done this for a while here's all the contributors to the project so thank you everyone who's contributed if you're interested in contributing just check out the issues you know let me know which one you're interested in so obviously me Nikki Harshit Chris are bought SDA Blandy elbow I know I wish I like could remember everybody's real names as opposed to their github names but Michael so there we are lots of contributors so far 12 contributors of which only one is not really a person so really awesome thank you Julia said I loved it thank you I appreciate that Roland said some SVG art assuming you're talking about sgv art for the for the progress indicator if that's the case actually I love SVG art I just don't really know how to do it I haven't spent time trying to do it but to have like a custom SVG loader the loading indicator would be super cool Oshin says what plug-in is that on the wordpress side sending you json data actually the the rest api for wordpress is built into WordPress core now so you don't need a plug-in anymore to get multiple posts though you need to get the the multiple post plug-in let's see which one that one is let's go to our plugins so we have the WP REST API v2 multiple post types plug-in okay so that's going to allow you to put in search for multiple post types in one API request rod huh says hi hey how's it going thanks for watching Marino says what what did you had that was bad in your wrist I had some torn like a torn ligament they needed repaired as soon as says what is your recommended best way to style reacts style components standard CSS I use a variety of things to be honest with you I'm not sure which one I like best so I'm still trying out I'm trying things out you know and I'm open to trying to find the best way so I haven't decided yet which one I like the best 5 vibe Huff says say something interesting about progressive web apps ok alright so for any of you don't know what progressive web apps are I guess I'll just explain really briefly so they're usually abbreviated PWA but a progressive web app would be like a web app that could potentially work offline so everything that would be needed for that could be stored like in a serviceworker so the serviceworker is a special javascript file that sits in the in the browser in between your website and your server and it can intercept Network requests so potentially if you had everything you need to run your app in your serviceworker the requests would go to the serviceworker which still lives right there in the browser serviceworker would send back the response and it would never have to leave the browser or go to the server so if there was no internet it could still work so if you've ever used anything online that still works offline it's probably done using that type of service workers I'm thinking things like like Google Docs you can still use Google Docs even if you don't have an internet connection in your browser right so and we call it a progressive web app because you can't have everything there right depending on what your app is without connections so what would happen is like your base app functionality would work without a connection and then it would progressively get more functional as you had a better better connection so that's what we mean by progressive web apps so that's kind of the way to go now so if you can build your site and as a progressive web app then you probably should what we're building right now will work as a progressive web app aster says why do people use typescript with graph QL do you I don't use typescript with graph QL I recently saw a video about Peggy raises Cameron boy last name is but she works on the Apollo team and she was talking about using typescript with graph QL and so I assume like it's something that's encouraged by like Apollo and I'm not 100% sure what the benefits of doing it that way are I just I haven't used typescript that much at all I can definitely see value in it but for the stuff that I've been doing it just hasn't really been a big deal to try to use typescript so if anybody else knows better like why what advantage there would be to using typescript with graph QL please let us know Aster's is how did you learn graph QL not only just reading documentation tutorials and things really harsh it one of the viewers that that contributes a lot to projects really wanted to use graph QL and started using it with Apollo and he did a lot of you know in terms of pull requests and I would look through what he was doing and try to understand what he was going so I learned a lot that way just by reading his code and then editing it like taking what he did and then applying it to a different component and so that's that's I kind of really learned like hands-on you know and there's still so much I don't know about it I was just watching a tutorial on it this morning our tge 34 says if I wanted to be a UX designer what degree would you recommend I don't really know for a design degree hmm I touch you I'm not sure I don't know what like what it would be called you know and different schools would would probably have different degrees available so and that seems like a job you may not even need a degree for so sorry I can't answer that better but maybe it's just slip in my mind but yeah I don't know sergey serb says does he even read comments on youtube I do try to read the comments I know I'm behind on the on the comments but I do I think I try to go back when I get a chance and try to look and see with who's who commented and so I do apologize if I've missed a comment aster says how many react projects do you recommend a junior dev have before applying at least one I would say and then after that apply Reigate this is a similar question that I get is how do you know when you're ready to apply for jobs and I would say you're ready to have a job whenever you can convince somebody that you're ready right you go into that that interview if you get an interview and you convince somebody that you are you are ready you can bring value to their organization alright you can do good work and then if you if you can convince them and get the job then you are def right that's so there's no magic number right obviously more projects are going to see more impressive but that's also really kind of it depends like what kind of projects are they whether the quality of them the complexity so you can't really give a number that t0 t0 says does coding and being a programmer make you socially isolated actually not at all it's been the opposite for me hmm Wow so time I didn't have any G fuel today that's the problem let's blame it on that yeah so it's been the opposite for me I've actually through programming I've met people from all over the world and talked to them and I'd never be able to do that if I had I don't know let's say a different kind of job where I would just you know go into my normal work and I just interact with the people around me this has kind of opened things up to just so many more people right no not everybody's gonna have that right like I do the show I'm common somewhat active on Twitter and Instagram with other programmers I go to conferences so you kind of have to put in a little bit of effort so you can definitely do this job and be isolated right let's say you're a freelancer you don't work with anybody and you sit at your house yeah you could be isolated but it depends on how you want to you want to do it right so I think it's it's easier to be isolated in this job than in some other jobs but it doesn't have to be like that nobody says what if you change the structure like all the post type tabs horizontal after the search bar and also have all the post types search tabs user will manually search and it will reduce website bandwidth and I think it would quite fast but all the post types and the tabs you can add loading yeah you know beer that's actually that's not a bad idea I'm gonna think about that yeah I'll think about that Stephen says what's going on I sent you a paycheck created using some JavaScript to navigate floorplans models and pop up let me know what you think okay cool I'll check that out yeah thanks for for sending that over see Phoenix says today I made my first pull request on get up alright congratulations that's awesome let's see what was the what was the pull request okay I see farther down it's a design based pull request for the free code camp Top Contributors badge Oh awesome awesome awesome Oh way to sing it did I tell you all about the stickers that we have now let me show you okay so if you follow me on instagram you've probably seen this already but let's see if we can get this let me change the camera and show you this so Phoenix says design a sticker so we have this live coding with Jesse sticker now so I have like I think a hundred of them I mean - a couple that are on my laptop's but my stickers now so I'm not sure the best way to get these stickers out to people who want them I mean postage for these stickers will cost I mean just depends on where you're at I guess so I don't know I mean for sure like if anybody really wants one mailed to me and you like just send me you know a dollar or something for postage I can send one out I'll probably take them around with me wherever I go to conferences or meetups or anything - so if you all have any better ideas for what I should do with these stickers let me know see okay we got a question about the font it's um feet fiery font Fira and let's see a lien anonymous says I love the DMX and Phil Collins song but the original is good too oh wait I don't think I've ever heard that one how did I not hear about that I'll have to check that out haha Julia put my misspelling of displays so she she definitely caught me attempting to spelled this place with an IES at the end yeah spelling is not my strong suit like I definitely like I check everything that I put out there before I hit Send especially on tweets because my spelling is terrible I cashed his best language to learn for beginners alright so we actually had that question earlier on so I'm not going to go through a big thing about it but I personally recommend JavaScript if you want to know why watch the replay of this video and go back I don't know about a half hour before what I'm this point and I answer that kind of an in-depth work Omar asks where to learn react and master it you can start out with some of the free code camp stuff to learn react code Academy has a react course Udacity has a paid react course that's good so I would recommend those places if you can and then there's react training it's pretty good as well I've I've done like a little bit of their coursework I don't think I've ever gotten through an entire course not because it wasn't good just because I kind of got busy and forgot about it but those places are good also the react documentation is great so if you can check out the documentation and just read a little bit every day that would be good too and then work on projects that keep practicing and trying to do you know try to expand to do more things with reacts you know every every day if you can Roland said SVG is easy with Illustrator or Adobe XD I can do some if you've got some ideas on what you need okay I don't know I'll have to think about that I don't have any ideas right now but yeah let me think about it Julius says in response to where to learn reacted master at watch all his lashing videos haha yeah that's quite a lot let me think yes so did Project five itself now has ninety videos so and that's project five right so we've been through a lot this is definitely the longest project but I mean we've got to be approaching 200 videos now right and each one of those is at least an hour long sometimes longer so I mean we're talking like maybe 300 hours of content I don't know maybe more it's a lot so anyway you don't definitely don't you will not be a master to react even if you do watch all my videos I don't I'm not a master myself but you may you may find something helpful oh okay Julie have some good advice about the we had a question earlier about what degrees should I get if I want to be a UX designer Julius's don't worry about the degree mentor under a UX designer that's a great idea I've been hearing more about this like idea of mentoring I think I listen to a podcast about this recently I can't remember which podcast it was the they sent this idea of the master and apprentice in InDesign in programming and I actually really like that ideas you know you have this kind of master apprentice and then it evolves into kind of like a mentor mentee relationship I think that's that's a great way to do it I kind of wish I've had various kind of like mentors before but never someone like that was clearly like I was apprentice to and I think that would have helped me to get better faster avoid a lot of mistakes so I I really like that idea shut chat Jana says hey hey how's it going sorry if I messed up your name please let me know let's see ambition says Monday and already waiting for Friday I don't know I mean I've been I haven't been doing that much work the last couple weeks because of my wrist thing so I'm ready to do some work I'm not ready for Friday yet Julius says for your next project you should create a forum for coders actually I'm another Julia I don't know if you saw anything about the JavaScript AF project so I bought the domain name JavaScript AF and yeah it's kind of a side project we've been working on it and one of the things that we want to have is something like a forum so we have we have some features already ready so I believe if you do go to JavaScript AF you can see it I'm gonna go to it on my my other screen here to see if it's up you know what it's not working right now I wonder if all right so we don't have it up right now too bad hearts just not watching but anyway we have project that's like kind of like that so we'll see I definitely need to do an update because we I haven't done an update on that project for a while aster says do you understand JavaScript closures call apply blind methods I can understand closures when I need to and I read about them but it's not like like if somebody asked me an interview question right now about it I'd probably be a mess right so yeah that's things like that usually I look at a lot of programming stuff like there are concepts in programming that you know you don't always you're not always able to just explain right but when you have to use them for project you can do them because you'll most likely look that look it up right there's so much that you don't just wing it you know you look it up first so sometimes I think like coding interviews are a bit I don't want to say unfair but it's just not realistic to be able to just rattle off like definitions of things like that because it's it's not what we do right we we get an idea and we make it happen by looking at what's already been done building on that and stuff so anyway if I were like going to go on an interview I'd probably be studying up on all that stuff so I would have answers cuz I mean that's just the way it works with interviews but yeah for now I have you asked me that question I'd look it up and I would say you know what I know exactly where to find the answer and you can find it here and that would that would really be my answer even if I was doing an interview right now that's what I would say Anna says I cloned the repository but don't know how to start it in the browser I used to work with create react app and NPM run only do I need to install web pack or something you should be able to run well make sure sorry if you've already done this I'm just I'm trying to go over the basics okay so I'm not assuming that you don't know this already but for anybody that wants to do the repo I believe there are some instructions in the readme or the contributing MD file but in case it doesn't cover this you know clone the repo locally maybe like if you want to fork it first and then clone it and then you want to do a you want to run yarn or an NPM install depending on which one you use make sure everything gets installed and then just start it up you want to run NPM run dev or yarn dev that's going to get everything started and then it should work from there so those steps should get you started if that's not working for you let me know see in walks a c-sharp developer or Jas developer I'm a JavaScript developer we have done a bit of c-sharp on this stream before because we were working with some legacy code but we don't really have to work with it anymore Julius says the mentor-mentee relationship is how I learned programming I dropped out of university yeah for sure I really think if somebody wants to be a programmer my take on it is you should only go to university if you have scholarships that are paying for it or let's say like your parents are going to pay for it otherwise it just doesn't make sense financially because it's unnecessary to get a job as a programmer you'll put yourself in a lot of debt basically for something that's not going to really give you a return right the amount you can make as a self-taught programmer versus the amount you can make as a programmer with the degree is not there's not that much difference right there potentially could be no difference at all right depending on how good you get in what your connections are so you know not only are you taking extra time in like four years or more but you're spending all this money and you're not gonna get a return so it's just it doesn't make sense financially right if we were analyzing this as like an investment opportunity it would make any sense right so it only makes sense really if you're getting your education paid for by somebody and then you know I think about going for it but only if I didn't already have to pay for stuff like you know if I already had a family or something I bills to pay like even if they're paying for my college I wouldn't do it right because I need to be able to make money I could learn the same a lot of the same stuff I've learned in college by actually doing projects and getting paid for it and learning while I'm doing so anyway and I work in universities so I mean I fully understand the benefits of a university but in this particular field it's it's just not necessary hey harsh sincere harsh it um I have a question do we have JavaScript AF running anywhere like the dead version of it I just tried to go to JavaScript AF in it it wasn't up and running so hello okay I see it's cut it's down because your card expired or something because it's needs a five dollar fee to be up where it is all right what account is that that we're running that on and it just if you want hard if you can DM me the info or something I'll get that up and running again let's see almost the end there live chat here so if you have any questions get them in now cuz we'll probably end pretty soon here are says by the way I'm on holiday just saw your story in Instagram and I had a look okay well enjoy enjoy your holiday are I don't want to don't worry about JavaScript AF I don't know what you have to do any work just enjoy your stuff and yeah have a good time also good to see you good to talk to you I haven't haven't talked to you for a while okay so and I just saw your message that you saw the yarn install your on dev thing okay cool yeah let me know how it goes and feel free to you know DM me on Twitter or Instagram or whatever to if if you have questions Renee says sometimes depending on where you live it may be required to have a degree you know that's a really good point that's a good point so I'm speaking generally from the perspective of somebody living in the United States so I don't know what the situation is in other countries so yeah so take what I'm saying and maybe just apply it to your situation right so I shouldn't make blanket statements like that your your country it may be different maybe a degree would be more important to trying to get in so here in the United States right now the way things are going you don't really need a degree but like I said if you can get a degree without going into a lot of debt it's it's not a bad idea right you never know how things are gonna be ten years from now right it's things could change right maybe people want a degree maybe you never know you never know what could happen so I just personally think in in the United States right now it costs so much money that it's just it's too much it's just too much debt my my young says I'm new here how's it going thanks thanks for watching we're kind of wrapping things up here but feel free to catch the recording and you ask any questions if you want phoenixes do you have any ideas for a Big Data project uh yeah actually I do have some ideas I'm just not sure where to get all the data I need but I have some ideas so yeah maybe we could talk about that though I Phoenix is I'm unable to decide on one I need to make one for my final year project I don't know if anybody has any ideas for Phoenix let us know oh okay Harsha's saying it's in the open-source plan but you still need $5 to keep it up okay because we're using the custom URL right I'll do that you know what I I cancelled I dropped us down to a lower plan I think not realizing that it would totally shut it off as I said if you are 18 and thinking about what you are doing with your life in terms of employment what a I scare you me no I mean I'm not I'm not scared of a I'm really hopeful for the opportunities for a and I would be my outlook basically is like okay I may take over a lot of jobs but you still need somebody to make the AI right you need I mean there are a lot of people that are super hopeful about what AI can do but the terms of like the general artificial intelligence like based on what I've heard from people who are actually doing the work for AI not just like fans of AI we're not close to that we're nowhere near close to that so it's going to be a long time before we actually have like AI that doesn't need people involved at all so my my thought process would be okay well I'm not going to try to get one of those jobs that's likely to be taken over I want to be one of the people that's guiding it so and if I was eighteen that you know I'd be in shape to say alright I'm gonna try to get into like one of the top test tech schools like here in the United States maybe like Carnegie Mellon in Pittsburgh or maybe like MIT or something that's what I would shoot for I try to get in there and try to do a lot of work now that I'm married I have kids and stuff responsibilities I can't I can't do that right so I'm the one I'm doing I really like what I'm doing but yes if any of you are younger and they're thinking about it that's the route I would take and you know you you can make a huge impact on the world with that kind of stuff it's uber says what's the best books to learn design patterns oh man I I can't nothing's coming to mind right now like I vaguely remember there being something about design patterns some book but I can't remember it right now I'm sorry sam says react fibre what are your thoughts I think it's awesome I mean from what I've seen I don't know well like the technical stuff about it but it's it's gonna make things faster right and that's always good Harshit says still need to train models and tensorflow for the AI to work yeah you're right I mean I don't think people who don't like know about the process of how you get AI working don't realize how much human input is actually needed to guide this stuff right and and how narrow the field is right so I mean there's a lot of cool things AI can do but it's not at like the sci-fi movie level at all yet and it's in my mind like I'm not even sure we can get to that level realistically and if we can it's going to take a really long time like I'm not trying to be a pessimist or downer about it but just like based on what I know about the technology it's it's not it's not simple to get a general general artificial intelligence even from a hardware side of things like that much computing power it's going to be insane and then from a software like programming point there's it's also an immense amount of work that's going to happen have to happen in an immense amount of data that would be needed oh yeah that's right hard good so react fiber is already out it's in react sixteen so so react fiber is is there okay Laura said are you asking about suspense yes suspense is not out yet and it seems amazing check out damn it it's a Dan Abramov I think its DNA or most talk on react like suspense when did he give it it was this past year I can't remember what conference he gave it at but check it out it's amazing alright so that's the end of the chat and yeah we've been one almost two hours now so I think it's a good place to kind of wrap things up so thank you all so much for watching hopefully you found this useful thanks for all the interaction in the chat this is awesome and I'm gonna try to stream a little bit more oh good news I am I think I'm gonna be getting a new computer a new PC for free which I should be able to use to make it basically make it I can stream from home I don't know if y'all so the last time I tried to stream from home but the it was terrible like the quality was terrible so I think what I'm gonna be able to do is route the actual streaming through this PC to free up all the computing power on my macbook for just programming and I think that should solve the issue so once I get that computer in and I get it all configured I think I should be able to stream better streams from home and I'll be more consistent with it because right now it's like it's just really easy for me to say I don't feel like the one at today the quality is probably not gonna be good anyway and I don't write so I want to get back to streaming like more regularly so anyway that's coming I just don't know when I'm gonna get the laptop but hopefully sometime soon all right yeah so thank you all again and yeah so hopefully I can stream tomorrow but we'll see I'll be home tomorrow so so until next time have a great day