Chill Live coding and Q/A stream

all right so hopefully um people will start coming into the stream soon but um the idea of this stream is exactly what the title is saying so if you have a project that you want me to help you debug and it's like an easier easier bug i'll be glad to do that you just need to make sure that the code is hosted on github or codepen so i can actually like look at it um other than that i mean you could just ask questions if you have questions about stuff but that's this live stream is going to be pretty chill nothing too serious let me see if i can log in here real quick i need to update my web browser it's getting out of date what's up kenny yeah what issues do you have i could be your pocket psychologist for today are you like taking a trip with um what's the other youtuber's name i already forgot his name but i saw you like doing uh that like 100 thing with other people around like colleges are you just like are you all just driving around the colleges right now are you back home nick white that's his name sorry i forgot his name yeah so uh if anyone wants help with anything feel free to ask me in the chat other than helping you with issues in your life you know some people make some cool stuff on codepen what did this guy do lp thankfully so it sounds like did you not have fun doing that whole trip thing seemed like it was really cold every place you went looked like it was freezing so i'd probably be a lot more happy to be home in the heat cool all right we got uh five people six people watching now again the the idea of this stream is if you need help with anything that's maybe hosted on github or codepen let me know i can help you debug it maybe we can just all struggle together with trying to figure out what you're doing if the bugs not like super impossible i might spend the whole the whole stream just trying to fix one bug but sometimes that happens what's this going on this is gonna like crash my computer wow what the heck how do people do this is even using canvas they got some shader stuff going on here this must be like webgl some people are making like some cool stuff like i need to actually start doing stuff like this instead of just making buttons on screens and tables on screens fetch data from a back end like some people are working on some really cool technologies and building cool projects mod says i have a question why you can't get proper offset with when js inject after that css is there a way to solve this i'm using webpack and react why can't you get proper offset with when js inject after the i'm not even sure what that means so offset with when js inject first after that css if you can maybe rephrase this question or if someone else in chat can actually like understand what this is i'm guessing like there's javascript that's creating a dom element injecting it in the page i don't know if you have to happen to have like a codepen link or a github link for what you're trying to solve erdos i could try to help you out but i don't know exactly what you're trying to solve here yep to be honest anyone in the stream i'm not really doing anything serious i'm just right now i'm just poking around codepen to see what people have made but if you have a project that you want me to like load up and try to like do something with like we can even implement a feature if you have a small project and you want to implement a feature together like that'd be cool but i never done this type of stream before where i'm just like helping people on their projects so i don't know if anyone's gonna have anything that was pretty cool this one's canvas and what are they doing here i built a couple of cool things using canvas and like 3d objects and stuff but what is this this dot project let's see if we can find ways to like modify this guy's code to make it change globe radius that's probably one thing that i could change that'd be pretty cool okay that didn't seem like it did anything feel the view i feel like these changes aren't actually doing anything oh i have to resize it okay that's pretty cool a cpu fan is going uh crazy right now so let me get off of this webpage oh wow yeah there's like so much cool stuff that you can build on using like webgl and canvas and stuff you must have some type of like glow shader going on here all right i might just switch up the stream doesn't seem like many people actually have a project that they want help on so maybe i'll just like live code something i don't even know what i live code i guess i could share with what i'm kind of working on let's see where's my bs code all right so let me try to kind of show you what i've been working on just for fun sometimes go ahead and make open this folder let me go ahead and rename this stream ain't only got projects they're working on all right we'll just have to come back to the chat every once in a while it says what i mean is i can't get proper with is it because i need to load css first next will be bundle.js i mean when the if the dom element is on the page it should have a width and a height right so there should be some type of offset width if you can actually inspect the element let me open the right one if you inspect the element and you can look at it i mean it should have some type of width flash height to it right you should be able to go to the computed and see like what the width is so if it's not on the page then you probably want to be able to get an offset width so i'm not too sure like what you're trying to do so he says this so the css will at the top js will be at the footer is that the real flow to get a proper div offset let's just try to help you out real quick if i can do this um [Music] what should i do this on all right i'm probably pretty pretty disorganized for this stream i'll be honest with you all let's open up a new window all right so i'm going to try to answer this from faridos's question but i don't know if i can actually answer it so i'll try okay i have live server installed but for some reason it's not like showing up stop live server start live server yeah what is the command get live server going open with live server all right let's get this going so let's make the yeah so the proper way to do i mean i don't know if it's the proper way but one way you can do is you could have your script just be near the bottom like of your body and if you needed to get the computed offset width so you have some type of style here i would say my box and that has like a width of 50 pixels height of 40 pixels or 400 pixels 500 and 400 pixels and i could just add like a a div that's a class of my box let me make the background color of blue so we can actually see it you can get the box here i can say box is equal to document dot get element by id hit the box add an idea box here and let's just go ahead and debug and print out what boxes all right so we have the box we should be able to look at the sources here yeah i have a discord channel you're welcome to join um i think just in this description in this video there should be a description that has a link to it it's like the second link goes to discord i guess i could paste it for you and be a useful streamer um i think you just go to my about page and i should have like a discord link you'll see copy link and paste this too long but you should just go to my channel click about go down here click discord or click on discord there's like a little globe icon here for my webpage but what am i trying to do again sources let the zoom out there's like not enough space here all right so you're asking something about like the offset with i should be able to like use that box variable here the offset width and it's 500. i guess i'm not really sure what you're asking because if there's an element on the page like if you can actually see it and hover over it with your inspector and you actually see it has like some type of width and height here then the offset width should actually be set correctly i'm not really or if the answer is your question but i mean yeah like this is how you can structure a web app or at least a web page usually the script has to come after all your dom elements have been created i think you can also do like if you want to do a script tag up here you can do that i think you just need to put like defer is it defer and that'll make the script like run after all the dom has been actually like created so that it'll have like an offset with maybe i could be wrong with that maybe it's async i don't even know no okay maybe okay so if you put the script up here i think you actually have to as you can tell i don't even know the javascript too much but you're usually like react in bundler or something but it won't work so i think it through like document add event listener like on ready or something like that i'd have to google this to be honest with you but i think once like this event listener will fire when it's done rendering out all the dom elements so i think if i did this i think this would actually have the box defined document on ready html it's called unload window on load document okay so i'm used to using jquery's ready method but i think you can do window on load so the ready event occurs after the document has been loaded while the onload event occurs later when all the content has also been loaded so it kind of depends i would probably use onload because stuff is going to shift around your page as the images are loading in i believe oh what is it it's just like window.onload this is probably some type of function that you have to like change the reference to let's try that okay so we have box um and then you what are we looking for it's called offset with okay so that's how you can do it if you want to put the script tag at the top or if you're kind of loading in scripts from external files like if you did let's say index.js here and this was actually trying to load in index.js i believe you'd have to make sure that you have window.onload set up or else it's not going to actually have access to the box does that make sense what's up jay this is dope i'm glad you find this little whatever i'm doing fun yeah so i mean if anyone has questions that you want me to help um help you out with if like something that you need to help with debugging or just whatever random questions feel free to ask otherwise i was just going to just try to code on something a little bit for today yeah i used to use jquery a lot when i was just doing used like vanilla javascript and they have like an onload method or a ready method it's funny how everyone hates on jquery but like it has so many useful functions that help you build applications faster like i used to do this document ready and then you know that like all the dom elements are on the page but i guess everyone uses vanilla javascript so you can use onload all right so what am i working on where's my as you can tell i'm kind of i just kind of woke up kind of tired what is the difference between onload and use effect so use effect is going to be it's a react hook right so you want to make sure that if you need to like do something when the react component mounts then you'd usually use a head use effect with like an empty array it's kind of it's not even like related to on load if you're using a react i'd never use the onload method in react so uh again you're doing like the bundler using like webpack and react so i'm not sure what you're trying to do but they have like man they have different hooks if you're using functional react is the hooks page so use effect you can call this and pass it an empty array as a second argument and then that's only going to run when this component mounts okay and i believe you'll have access to dom elements because this runs at the very end of the life cycle so you should be able to compute um the widths of different things but if you need to actually do like some type of offset with you probably want to use like a ref there's like a use ref book that you can use and uh you put it on your dom element and then you can like you can do some hackery to like know when the dom element is actually on the page i try to show that but what is your chrome color scheme uh i don't think i have a color scheme set up i'm just using i just installed chrome that's it you're talking about vs code i'm using shades of purple on vs code um so someone's asking appending multiple children per event firing okay i could try to do that um pinned multiple children per event firing so silver i don't i don't know what you're actually asking i could try and answer this like there's not really much context in your question but you're saying append multiple children per event firing so what type of event are you talking about it could be a button event so like if we had a button here um let me just refactor this the button and what we could do is make this a button here we could have this called like click me and we could have this have an on click listener that says like do stuff so as long as this function is declared in my index file on the other page i should be able to invoke it let me just print out that and let me go back here refresh the page and if i click it and go to my console which actually is down here so let's zoom in a little bit we see that the console log is printing out it's out here and you're saying you want to append multiple children for event filing firing so let's say we also had um [Music] we have the body so we could just append stuff to the body if you want to like make a bunch of different dom elements um let's just do a for loop lesson 10 i plus plus i'm struggling this morning all right so let's make 10 dom elements and for each one i'm going to say like document.create element forget what you need to pass here maybe you can just do divs let's go ahead and make sure this works click it i think it worked let's make a div and then we can say l dot enter html is equal to let's just give it like a sp not a span let's do like a div that says like hello world and give it the index so far does this make sense i'm basically just let me scroll over some you got a button you click it it calls this function this is going to loop 10 times create 10 divs each div is going to have an inner html that says hello world and then it's going to say the index and i can say body dot append child i believe like that uh see body is not defined i think it's document.body let's try that there we go so is that what you're asking i don't know if that even answered what you're asking but that's how you can have an event append multiple children per event firing pretty cool huh and you do this a lot when you're like doing like dynamic content like let's say you want to have a javascript page load fetch some data and then for every record that comes back you need to append those things onto the page this is kind of a common approach cool any more questions anyone want me to do some more javascript vanilla javascript stuff do most people work on vanilla javascript are you guys like in the realm of using react in single page applications for those of you who are on the stream right now like what is what is your learning path what are you currently on by the way let me show you a little project that i'm trying to work on but i probably will never finish because i just never finish these projects that i start up but i have a i'm trying to build like a minecraft server hosting sas all right so you could basically go to the software let me go to the client and start this no i typed it in wrong what's going on it's like frozen npm dart so that'll start my client and then i'm on my api here so i can say npm start on my api and then i'm on my agent so let me npm start that so basically what i have is i have um an api a ui and then something called agents and the plan is that you have like a bunch of different servers and each of these have like an agent running on them and whenever someone decides that they want to buy a minecraft server the api is going to basically update a record in the database and tell like which agent should host that minecraft server so hopefully this all starts i don't know why it's not printing anything probably broke something hmm i noticed this last night when i do npm start like nothing ever runs it doesn't print anything there's like a permissions issue this sucks i kind of wanted to demo this little app for you all maybe i need to close this and kind of reopen it let me just close all of this stuff real quick let me go ahead and just all this stuff here that's cluttering my desktop yep you guys got to watch me rearrange my icons and also what i want to do is i don't want to show external drives on my desktop all right right what am i trying to do i'm trying to load vs code to show you my project but it's not working so you have docker installed i do but i don't want that extension so let's go back to that firestone hosting site i have go to the server go to the client folder let me reload this on the right thing go to the client npm run start or just npm start and it just sits here and doesn't print anything so i'm not sure what happened sorry all the stream is whack i don't even know what i'm streaming about my npm does not seem to work like does node even work this has to be a security issue let me go to like terminal here let me go to my workspace it's like even this isn't working maybe this thing is like breaking something let me turn this off wow okay well everything seems to be broken so i'm not sure what's going on here like i can't even run node my terminal doesn't seem like it doesn't load up like i can't type commands on my terminal so what i'm going to do is just not show you that project and i can't use vs code you know maybe it says live server stuff the moment i installed this like stuff stopped working let me uninstall this real quick this is the stuff that you run into as a programmer you're trying to debug a small little bug and you spend the entire day trying to fix it and honestly i could probably restart my computer and this will fix this issue i don't know what's going on there must be some type of like security thing set up that's not allowing my terminals to access my disk or to access anything but yeah i mean if you guys have questions i'll just answer those questions instead of showing you what i'm working on that's disappointing all right close out of this go back to this all right you all want to ask react questions you we can just mess around with react if you want let me go to get pod maybe we can just create a react project here and just play around with react or javascript whatever you want add a workspace i don't know what the difference between workspaces and projects are i don't know a workspace and let's go to if there's a react one they do have some react workspaces but i just want like if i need to make a new project i just want a blank project oh nevermind so this gitpod is a pretty cool site where you can just like point this to any github repository and it creates like a docker container behind the scenes where you can do work with vs code on the browser but as i'm using it it's like why don't i have the ability to just create a blank project like i don't want all these templates i guess i could just make one template type script node i can make this one with the react and just delete everything if you wanted me to but all right so this should be making a react server and we can actually like play with it inside of this editor let's see if i can show you what uh use effect is if you're even still here we can play around with these effect so we have an app component so in react you have a bunch of different components right and when the component is actually mounted to the page you need it to kind of execute code and what we can typically do is we use the use effect hook unexpected token here we go let's say you wanted this to fetch some data from somewhere you could use a use effect hook to call some code and then make sure you pass it this empty array so that it only runs once when you mount and then you can do whatever you want here you like you could just fetch from an api and then you could store that in state and have that displayed in your component here but if you're dealing with actual like dom nodes you typically need to use like a ref so i could do like um do ref here [Music] and i just i recently figured this out at work like you can't use use effect for refs like you can't put the ref as the dependency inside the dependency array you actually have to use like a use callback it's really weird i don't really understand it but this is called like a used callback ref so if you wanted to know when exactly that dominum is on the page you can do this and like console log that node out if this works use callback is not defined go ahead and import that what's it complaining about i guess i need to pass it some type of dependency array all right so i mean this should at least print out something if i go to my console down here what is this this is opening a new tab let's do that might be better all right so notice that we printed out the hello dom node and kind of going back to your original question which you asked at the start of the stream like if you wanted to actually in react get the width of this you could just say offset width this is the actual dom node which could be null or defined depending on if it's this components on mounting or mounting so let's go back to this page here not that one this one and notice it actually prints out the width here 237 so this is one way that you can do it and this is the way i would recommend doing it use a callback ref pass it here and then this will be defined when the node is actually on the page and you can do stuff with it but in most cases you shouldn't be i think even in the react docs it says like using ref should be like a last resort if you need to actually access a lot of stuff on your dom nodes if you need to change stuff on your dom nodes you should use properties but sometimes you do actually need to access the um the elements of a dom node [Music] oh cool all right anyone have any more questions anything that you want me to help answer are you all just staring me staring at me just mess around with react right now use state hooks you can go through here maybe one thing i think that a lot of people don't do is read through the docs and i i'm kind of guilty of this as well like a lot of people could probably save themselves hours if not days of debugging issues if they just read through the docs and like try to understand everything that they're saying but the issue with the react docs is that most of these examples are using like class-based components but then like you read all this stuff that's not even relevant to like what you're learning and it's also a lot of like lower level stuff that's really not like you shouldn't be learning about how react works under the hood when you first like read through the docs so that's my bash on react in their docs what tina you should come up here let me uh let you go on the stream for a little bit i don't really know what i'm talking about and my code won't run on my machine right now so i should just change the title to helping you with whatever javascript issues you might have people seem to join when i do that let me just do that let me see is there any drawback forms by using id instead of ref what do you mean by id as in like i love it okay hold on so let's say you had an id here called like hello and you're saying that is there any draw like performance issues with doing this so when the component mounts i want to do [Music] document.getelement by id hello and then that should hopefully print something out go to the page and that prints out the dom node yeah i don't know if there's any performance issues it's probably like not that big of an issue if you're doing this inside your react components but it just seems kind of dirty especially since they provide you features in react that allow you to grab dom elements directly so i mean i wouldn't recommend doing this i would recommend either using just use the ref attribute if you need to grab that dom node because it might work better with like how react works under the hood in the life cycle um but yeah i can't tell you offhand if there's any issues with doing this if it works and it solves your problem then go ahead and do it but yeah i don't know if it's guaranteed that this is always defined like react i don't know if react always executes when it's supposed to so like you don't know if this is going to be defined doing this approach versus if you have the ref then it's going to follow the react framework and kind of always be defined when you expect it to be defined but maybe this is fine ref attributes same like id right i'm not sure what you're asking farrados but hopefully i answered it yeah i mean i wouldn't recommend doing this in react since there's a way to do it with riffs but that's just my opinion i've been trying to do more typescript as well like i think typescript helps you write better code but when you start using typescript it's just like a big pain because now you have like errors that pop up everywhere in your code and you actually spend like eight hours just fixing all these typescript errors so it's like a trade-off but i would definitely recommend looking at the typescript for anyone who's kind of new maybe we can try to build something does anyone have like an idea of what we could try to build like is there a free rest api that we can just like grab data and show it public apis anime art blockchain books go to books so there's a pretty cool github page it basically has like all the links to a bunch of rest apis that you can use if you just want to like build something random so if we find one for like books and check make sure we don't need auth we can do https and courses yes i don't even know what language this is probably like something else so let's just try to find poetry db no yes yes this one looks good let's click it and let's see what they'll give us poetry db is an api for internet poets let's see so it looks like i can just go to this url and let's see what they'll actually give us okay it took us back to the exact same page but we could try doing this i think you have to know like the author name i'm not sure how you just know a bunch of authors yeah i could use axios to do this slash author will give you back a list of authors let's go here slash author a good way to learn by the way is just experimenting with stuff and as you get better at coding like you'll you'll know kind of like what you need to experiment with to know if stuff works but if you kind of read through this these docs it's not really apparent how you grab the authors like they just tell you i mean obviously they say slash author but they should probably have the full url to their api to tell you how to get the authors or something like that because they did it on the first example down here just show you how to get the lines but then you scroll through their docs and they don't really give you a full url of how to like get the author but then you just go here and you're like okay well let's just experiment and go to slash author and we get back a bunch of authors so what we could do is let's do a fetch request to this url and we can kind of share that so we want when the app mounts again we have a use effect that's going to fire once and only once and we can use axios to get that data back so let's just go ahead and put like authors in point go ahead and paste that in and what we could do is i think i also need to open up any terminal and just npm install actually they might already have axios here no they don't oh no don't leave the site npm install axios so this should install axios because someone asked if i could do an axios thing and while that's loading i'm not sure how long it's going to take we could import that so i'll say import axios from axios and this is a library you can use for fetching data from the backend or kind of pushing data using post requests to the backend and we're going to use that insider use effect so i'm say axios.git i'm going to paste in that endpoint and since this is a constant i'm going to say author's endpoint here i'll do a get request to the author's endpoint hopefully this code is not too small i change the theme here yikes oh why it was too bright all right so we can do a get request to the endpoint and we should be able to get back some data and one thing i don't like about react and the use effect hook is that they don't like you using asynchronous like calls here so what they recommend doing is like you have to make a function here that's async and then you have to call it really stupid i don't know why they do this but there's probably a good reason but it'll complain if you don't do this like little hack approach so i'm going to do that i'm going to get back to data which just just the axios get request returns an object that has data on it so i'm going to say data and i'm going to go ahead and destructure that into a author's variable and if we wanted to kind of display that on the page and loop through all the authors and show them we probably need some type of state because react doesn't know when to re-render unless you actually like change state variables on the component so i'm going to say cons authors and set authors and i'm going to say use state so hopefully you understand how like state hooks work i need to auto import that uh one thing that you need to be careful of if you're like naming variables that happen to be like also defined at a higher level i would recommend that you never do that it can cause a lot of bugs and you'll waste time trying to debug that so i'm just going to say authors from endpoint and we are going to say set authors of that and always double check like what the data comes back as you notice that this actually is an object that has authors on it so we need to say authors from endpoint dot arthurs that's what we need to do all right so far does this make sense we do a get request using axios to that endpoint that endpoint is going to return us data that looks just like this we need to grab the property authors from that data which we're doing here we set it on state which means react is going to kick off a re-render which means we can actually do some type of map here so let's just go ahead and do some curly braces this is how you interpolate stuff inside a react let me make sure i zoom in correctly i guess you can't okay is this is this big enough is this font big enough for you all right so we want to map over every single author we got back and we can get back like their name and we can just go ahead and return a div that has their name in it and assuming i don't have like a thousand syntax errors this should hopefully work too much on one line another thing is make sure your code is like split up into different lines to make it easier to read because right there that was all one line and very hard to understand which means that debugging it would also be very difficult uh has implicit type of any okay so i'm using a typescript template so it's going to complain because i didn't like type this stuff so this is one reason why typescript can be kind of confusing for beginners but it's good to know so i'm going to say type of author is equal to and then this just has a string so yeah i need to go back and this just needs to be a string so let me just actually go back here so in typescript you can actually like do these type of brackets to say that everything that's stored in this state variable is actually going to be an array of strings so that later on when i say set authors it should know that this is going to be an array of strings i might need to cast it why is this still complaining though i need to do that as you can tell like i'm a typescript noob but i would think that this should work we're telling that this is going to be an array of strings we're mapping over it so this typescript should know that this is going to be a string but i guess i need to do this what's up kendall all right what is going on here could not find a declarative file for module implicit has any type what is this complaining about um i should just switch this to actually use like javascript and not type script why is this complaining let me just try to rerun this and see what happens all right when in doubt go to stack overflow types react router it's not a react router issue i might just put this hack in to make it not complain about that because yes config allow any types i need to be in compiler options i think if i add that it'll stop complaining about it okay here we go try set in declarations dts um yeah i don't even have a declarations d i guess i could make one i guess the question is i created this project using a template that was provided by git pod and off the bat like it's complaining about the react import so it's like i'm not sure why it's complaining because if you look at the types i do have types of react here so it i would think it shouldn't be complaining but i don't know i'm a typescript noob i'll be honest with you all i'm trying to learn it i'm trying to force myself to use it more but let's see if this actually works undefined greedy map oh okay maybe it's because i didn't declare this state i wonder if that was the issue totally forgot to like put some state in that all right let's go back and just turn this back on and just see what happens in our app i think that was it nope okay if the react package actually exposes this module consider consider pulling a okay whatever so again what i'm trying to do for you all is just show you how to do axios to fetch some data from endpoint getting caught up in some typescript stuff but if we go back to our app you'll see that all those names rendered out and let me just go ahead and go to the network tab where's network here it is and by the way if my head's blocking anything just let me know it should be good though so let's go back and just clear this make sure we have a filter for xhr requests and if i refresh the page you'll see that it did a request to the author endpoint and this endpoint gave us back all that data okay so this is what we're rendering to our page using that whole flow of axios and stuff like that let me try to come through and answer uh answer some questions so rizzaz is i pronounce your name i love your content i want to know what makes a node.js app handle more than 20 million concurrent users what does this mean and how can one test this concurrency with their express node.js app i don't know if it can actually handle 20 concurrent users that seems like a lot to be honest with you for one server to handle that many users but i'm not a i'm not really big into like the um i'm just going to say i'm not knowledgeable in terms of like operations so i don't really know how much traffic certain web apis and frameworks can handle but maybe this is possible if your node app is just taking in requests and returning back some data like not fetching from a database but if you actually have a real endpoint that's doing some computation like fetching from multiple doing multiple database queries and like maybe aggregating that data and returning it back i highly not highly i i honestly don't think it can handle 20 million concurrent users at the same time but i mean 20 million concurrent maybe that's different from requests per second but to test this you could use some type of um load testing software like i've used artillery at my job where you can basically set up a test and this is going to just hit your back and endpoint with like a ton of requests and you can kind of do stuff to verify that hey the backend didn't crash or the responses were within a certain threshold of response time there's artillery and there's another one called um gatlin load testing i've also used this i work this is another one that you can use but in all honesty like i wouldn't worry about how many concurrent users your app can handle because you just scale it horizontally right you just keep on adding more node servers and put that behind a load balancer so it's like it doesn't really matter if you're using node or python or uh and it'll go like you're just going to end up scaling it anyway and most of the times when i say scale it you don't do any of that work you're going to use a cloud service like amazon who's going to scale all your servers for you or you're using containers with like kubernetes that'll scale your containers for you so it's like a lot of stuff doesn't really you don't really care about it that much unless you're really trying to like save money um so if you can if you have like a huge company where you need to like really shave off some dollars because you have too many servers running then yeah you could kind of like do this research to figure out which one is going to handle the most traffic which i think is going to be go i think goes supposed to be like one of the most performant ones all right um can you show us how to use react reout react route oh my gosh i can't even speak can you show us how to use react router preamps i have a project that i need to use it and i don't really understand it all right so uh yeah yaya um let me see if i can do that for you all with the same project we got going so react router so let's see if this even has react router it doesn't so let's just go ahead and install that real quick npm install and react router actually just like released a new version so let me go to react router because i don't know what they changed installation i guess i should use yarn i think this thing is using yarn alright so install react router 6 and to use the params bring in the browser router so in our app we could simply bring in browser router and still installing so let's give it a second and they're saying you can wrap your app with this browser router component so let's go back to our app and technically they're wrapping their app with it i think we can just do this i don't think we have to like wrap it if not we'll find out soon enough if this is actually going to break so wrap that code and then once you've wrapped it anything inside of this should be able to access something called routes let's do that let's make an author's endpoint which is just going to basically do this logic let me go down here i wonder if you can pass it a callback function again this is like the newest version of react router so i don't know if it's going to answer your question exactly because every every time they release a new version of react router they seem to break everything with the api that was for the previous version for no apparent reason like this is used to be called like component now it's element why did they change that because they wanted to i guess all right this one cannot take a function so i guess i need to go over here and myself live hopefully all right let's just go ahead and make a page called authors page js or tsx and we are going to go ahead and just do all that author's logic here instead so get rid of the browser router get rid of all this get rid of all this sorry i know there's a couple of questions in chat that i'm like way behind on but i want to answer this one person's question about react router and this linter is messed up all right here we go all right so again what i'm trying to do is i'm just setting up react router right now so if i go back to app we should probably get rid of all that use effect stuff and the author stuff since that's actually embedded inside another page and what we could do is import that page which i think i called it authors page and go back to the app import that i think that's a is that a default export it is so i need to not put curly braces from pages slash authors page sorry all for being like all over the place on this stream but i don't really have a plan of what i'm working on is that good we have an author's page let's go ahead and delete that so the first thing i would do is make sure that this works so let's go back to our app and watch it crash can i find app css so i think i'm importing a file that is not even needed for this page let's try that again cannot result typescript node babel loader index what is this and this is usually why i end up just going back to javascript because when you run a run into enough like really annoying typescript errors i just get annoyed and i'm like i'm gonna install typescript and i don't know if this is actually a typescript error cannot resolved template typescript react node babel loader index um what is going on here sometimes you have to just restart your server so maybe that's what's going on i think it's working now but if i just need to go to slash authors i should load up the author data okay all right the router's working and the question that we're trying to originally ask is how do you do route params so i don't know if that person is even in the chat anymore but let's just try to do that let's say you had another path called like authors slash author name we can go to a different page called author page which we didn't even create yet so let's copy and paste this whole thing rename it and do some more refactoring make sure we export that and we don't need to do like all this right now so i'm just going to print hello don't need the state don't need that don't need axios so the question is is how do we access that author page right so if someone goes to author slash shakespeare or something how do we actually get what they typed into the url so it turns out in react router i go to the docs because i don't remember how to do it i think it's just called use params or they used to be called use params but go down here for [Music] man these okay let's look through here how do you do this why are there docs like let me let me slow down and look through all this stuff because there must be something that i'm just not seeing tutorial let's look for params reading url params okay it still is use params so i just want to make sure i saw that in the docs because they did change their api for some stuff but there's a hook called i go to the author page there's a hook called use params i can say use params here and any component that's like nested inside your router should have access to those params let me import that and now what i could do is i could actually print out the author name here on that page okay so call the use params hook that's going to fetch it from the url which we had here and how do we import this real quick go back to our app and see if it crashes oh it's already crashing right here did you mean authors page can i find name author page what's this complaining about i have a component here called author page that i'm exporting and maybe i didn't save it expected an assignment or function call instead selling expression okay i don't know why but like i thought the file was saved it wasn't saved so i saved the file it's good now but what i'm trying to show you here if i just type in like this person alan seeger whoever that is and go to slash allen seeger you'll see that we actually have access to that name that was defined up in the url okay so that 10 minute overview was all to show you how to basically grab the name from the parameter so yeah i hope you're you're even in the stream still but that's how you do it that took me a long time to do i'm kind of out of my element right now because i'm using git pod because my my computer just won't run any of my node applications in vs code so i don't know if i need to reinstall vs code or restart my computer i'm doing stuff in a different environment i'm not really used to and also using typescript which i'm not really used to all right so yeah this one i answered this question so hopefully that helps you all right do you think i don't know if i pronounced that right do you think reactdev should have to use typescript i think if you're on a large project with a lot of people you should use typescript because it helps your team easily be able to manage your code but i mean at my job we have like nine or eight developers working on a project that's been going on for like three years and we just use javascript there's a lot of stuff in typescript that you just get hung up on and it's just really frustrating um but that comes with all types languages you just get a bunch of syntax error all the time in your your vs code editor or whatever editor you're using and you end up spending a lot of time like making sure everything is typed you end up writing a lot more code just to like add types to your state and your objects and all that stuff like interfaces to your functions but there is a benefit to it like if someone else comes into your project they can easily know like what i need to pass around um but yeah i don't think you need to know it but i think it's useful to understand like the benefits of a typed language versus a dynamically typed language all right let me try to etch up please make a video for d app i don't know df at all and i don't i guess at this point i don't really even see the true benefits to it i think there's a lot of hype going around for this type of stuff where there are some cool problems that like decentralized applications are really solving but i think people are like taking this technology and just tried to shove everything into it which i mean i guess that's cool but i'm not really interested kindle says how does the thumbnail automatically change with recent stream chat did you make a program for that to happen or is there a setting in youtube i'm not sure i understand that question what thumbnail are you talking about my thumbnail or your thumbnail i didn't do anything with this chat i haven't i haven't modified any type of code or plugin with chat so whatever you're seeing it must be something that's built into youtube uh yeah yeah is saying i need to add key for author that is correct i don't know if that was what i was complaining about maybe that is i wonder if that's actually what i was complaining about i doubt it though complaining about something else i think i hope that's what it is complaining about let me try that going back to this saying that the truth and going back um so i set ts config back to true and it's not complaining i think you might have fixed it you're a genius actually that's it's still not complaining so i don't you all remember this was complaining to me before something about typescript errors but now it's not like i have no idea why it's already it's like fixed all of a sudden i think it's because i'm using this get pod site and like that's just not working that's the way i think it would all right so tell me how my website looks you have a link to your website i don't know if i want to open a link to a random website on a live stream but you could do it on a different computer and check it out and then see if it's good i've been streaming for an hour and 12 minutes so han says react location comes out i think i saw another youtuber make a video on this um this approach reminds me a lot of like angular where you have like a big array of all your different routes and endpoints and stuff if that's even what this is no that's not what no i think there's like a different react location this is what you're talking about yeah what's that youtuber who made a video about this like two days ago or yesterday i watched through stuff it seemed it seems like it's pretty cool i just don't know like what the benefit is over just using react router it's just a like a different declarative way to define your routes but i kind of like the fact that i can easily in my router like if i wanted to if i go back to my main page like i could just put a condition here or a guard or an authorization guard here and that route will never be available to anyone versus i think if you have like a declarative array of a bunch of different routes up here and you pass it to your router like is there a way to do conditions on it and if it is like that would be cool i don't know i really like that all right yeah gary says yep d apps have use cases but not every app needs to be a d app is it worth upgrading to react router dom v6 and if so what is the best feature or enhancement it is in it that you are finding helpful in your projects i mean i've just upgraded it to like a personal project a couple of days ago and i don't see many changes other than they changed the api so you have to like go back and refactor some how your api is working but i don't know what the the benefits are honestly it seems like it's mainly the same you still have like a browser router and then you have routes and then you still have like use params i think you still have like use history and stuff like that it really seems like the exact same thing but they just like changed the api to make it so we had to refactor code so i can't really i'm just being negative i can't really say much about it like the fact that they changed this from component to element why did they do that maybe they explain it somewhere but honestly it doesn't seem like it's really that important to change the api do not have component anymore i think another thing they changed was exact like you know how typically you have a path let's see if i can find that let's go back typically like you you'd have to put a path and put exact on here now you don't have to because that's like defaulted but i think that was actually pretty cool because i mean i didn't like how i had to put exact on all these paths it should have just been exact to begin with so that's kind of a benefit to upgrading but all in all it's like i'm not sure what the main changes are i haven't looked into it explorer baduk said can you show example of socket io unsubscribe it is very easy to subscribe to events but there isn't but shown on the internet about unsubscribing from events would be much much appreciated um unsubscribe from events i don't know how to do that let's see what they have because typically you have like the socket object and you say dot on and then you do stuff with that but i don't know if there's a way to unsubscribe there should be how do you do that client events on and off is that it off socket remove listener remove all listener of news yeah i guess what is your use case like why is that you want to unsubscribe to the event for some reason because if you just want to like listen in for one single message you can use soccer.once and then once you've gotten that event it just kind of deletes the subscription from it but i'm not sure why you'd want to unsubscribe from it but it looks like there's a remove all listeners and a remove listeners function if this is actually up to date let's click on this and see where it takes us so you can use socket off if you have a reference to the function itself you can say socket off and then pass it the the key and then also pass it the function that'll kind of disable it or unsubscribe it or you could say socket remove all listeners pass it the key and then your socket will no longer listen to that one or if you just want to clear from everything so that's how you use it i don't know what your your use case is but duke but anis says the slash is not necessary so i think he's saying this is not necessary but again it's like i kind of like the slash to be honest with you all i think it'll still work without the slash maybe in the other react router like you had to have the forward slash but now you don't need it but i personally like having the slash unless maybe this will break something i have to go back to the real react router docs and see if there's no forward slash yeah they just have like the path without the slashes one of those things where i should probably spend a whole day or like a couple of hours reading through all the docs see what's changed but i'm never going to do that because no one ever reads two docs lame i'm just kidding you should probably read through the docs see what they actually changed but does anyone have any more questions i'll make sure i didn't miss anyone process of creating a private route or authenticated react okay yeah i can do that one so i'm not gonna actually like pull in the full like you just have to use your imagination i'm not gonna explain how to do authentication and stuff but when you log in let's say you have a like a login form typically when you log in successfully the backend returns you a token or some type of confirmation right and when that confirmation comes back you can store that somewhere in state so let's do this and make a statement boolean and i'm going to set the false just to kind of show you but if you want to have like a private route one way you can do it is you can make like a guard so basically a route that like wraps another route and check if you're logged in or not because typically if you're not like authenticated you want to redirect them back to another page now there might be a better way to do this with the new version of react router but how i've done it in the past so correct me anyone's in the stream correct me if i'm doing something that's like not the best approach but i can make like an is authenticated route and i think i could literally just check like if we're logged in how would i do this i think you say if you're logged in you could probably just display this route here so you'd have to pass in a route um let me do this i'm not too sure if i'm doing this right let me do something like this maybe i can do that so if we're logged in return the component or null we're going to kind of refactor this but i just want to see if this will work so you could do something like this and say like um why is this not working let me do this maybe that'll be better all right i don't know if this is actually going to work but if this is false it shouldn't even show this route so like if i try to go here to authors it's going to what's it doing that's doing that implicit any stuff again uh hate this yeah i'm gonna turn that off i just can't i can't deal with this by any element children implicitly has any type okay but i just i just removed that so why is this still complaining about it okay here we go must be a route or react fragment is not a route component all children must have okay i guess you can't actually do that let's just look it up then i've done this before but maybe the the changes of react router i can't do it like i used to yeah they have a bunch of routes here okay and then required off okay i guess you do it here now you have to do it here but we could try doing that again we're just learning the new versions of react router together so what i'm going to do is i'm going to basically cut this put it here and put this inside of that component or that element property hopefully watching me struggle is helping you learn how to code because i'll be honest there's this is a live coding so i struggle a lot with just like random stuff so the idea is was that how they're doing it let's just go look at what they're doing help with that if you're authorized return to children otherwise navigate okay so i was kind of on the right path i think i was about to do that instead of returning null but i think this might actually just if you go here just won't display anything because you're not authenticated but i think what you want to do instead is you want to navigate which i believe is another component from react router back to the home page cannot find navigate let me see if that actually exists let me try to import it so if we're logged in it should work if not we should get redirected back to the home page so let's try it again authors you'll see in the url it redirect me back to the home page we are seeing some errors here manifest json i don't think that's related to our code though and so that's basically how you do it and if this is actually authenticated if you're like logged in if you try to go back to slash authors it'll work okay so i hope that makes sense i know i kind of stumbled a little bit on it but it looks like with react router 6 all you do is the element that you're passing to your route you just need to wrap your component with like another component that checks if you're authenticated or not so inside of here you could maybe grab a token from context or check if the user is logged in which would be stored in context or redux or whatever state management library you want to use and if you are logged in you want to return the children which would be the actual like page otherwise you redirect the user to like a please login dashboard or something my nose is running handle says what made you learn coding um i played a lot of video games as a kid and i was always kind of curious like how games were made and i started like looking into how to build plug-ins so like there's a game called half-life i'm assuming you've heard of it but there's a lot of like custom mods for half-life where people kind of build their own like subset of a game using half-life and i was big into a game called zombie panic and i had my own server and stuff in my own like clan and there's like a plug-in that i made or that i hacked at to basically allow people to have custom models so if you gave me five dollars you can have a custom model and walk around the server with like a model of um i don't know elmo from like the sesame street or big bird or you can have like custom zombie models i got into like doing like little scripting to be honest i had no idea what i was doing but i just like took code and hacked at it to get stuff to work and that's kind of how i got into it i just kind of got curious about building games i just then i started like trying to make my own games with like the browser in java and then i realized that web development's pretty fun and you can get a good job with web development so i kind of switch careers paths so just do that all right oh yeah i don't i don't do that with the thumbnail i think youtube just changes the thumbnail every so often of like what i'm working on and then people can join in this like if they see what they like or they like what they see let's see thanks how do you take care of fitness as a developer um honestly i like standing right now i'm standing i have a standing desk that's one way you can do it you just have to make sure you're not sitting all the time i think that's really bad for your health and your back but other than that i mean like just try to exercise i don't really exercise that much i'm lazy but i would try to exercise just like any other normal person like it doesn't matter if you're a developer or any type of office job it's always good to just do some exercise and eat healthy but i'm not a i'm not going to preach about that because i don't really eat that healthy and i don't exercise so i used to kindle does coding dot dq all right let's check it out seems like it's good what does gq stand for all right so first off top left the logo is that supposed to be transparent i would definitely make that transparent or something here we go let's see what is this an image to a jpeg yeah i would just make this transparent and not have it be like a little square here but that's just i'm not a ux person i'm not a designer so i don't know if i should even give you feedback about this but let's see you got a youtube button you got a github button let's see if they do anything cool you got a github page got some code let's critique your code on a live stream oh you got to put this in a formatter man got too much white space going on my review of your code but so far i mean it's pretty cool let me go back to your actual website um i'm gonna assume the youtube you have actually a youtube channel okay cool you got one youtube channel let me subscribe make you have three subscribers okay you got a little pop-up that says reply this is actually like talk to you i'd be curious to know what plugging you use here this is pretty cool um yeah maybe put like a picture of yourself here or something or do something code related or something but it looks nice about me my name is kendall i'm a software developer encoder i've made a bunch of programs in various languages like python javascript and what i'm using to make a website you got your projects here if you click them go cool i don't know what's going on down here this little contact me form that's in a scroll bar like are you using some type of uh plugin for this i would definitely like make this not be in a is this like an iframe what's going on here so the problem with streaming is i have to zoom in really really far so that you all can see yeah it's an iframe so i'm assuming that you're using some type of like plug in here but this just looks janky and it's not really good user experience probably add some white space it's just very cluttered and see what your projects are password generator so instead my feedback would be instead of just saying project one two three four five six seven eight name your projects and when you click it have it go to another page that's like shows you screenshots of the projects and kind of shows you like you talk about what you've learned from this project what like what did you actually learn while doing this project and what did you get stuck on like what struggles did you have on it um also it's kind of squeezed in because i guess i'm really zoomed in but you see how these like view heres are kind of like all over the place it'd be cool if they were consistent so maybe give this like a fixed height and limit the number of characters you have in the description because i would like to be able to click on the project without actually going to another page but i mean it's a good start i'm not a designer but it looks pretty cool chatra i'd also focus on getting one big project like instead of having all these small little projects here like tic tac what is this tic tac toe a mold game i would maybe start with one big project that i would like start working on now so that that is like the main thing that someone sees when they go to your site um not that these little projects are not cool but oh yeah tina i'll take a protest i'm probably gonna end the stream here in a second i've been going for a while but yeah i'll be down to i have some protest and some chicken [Music] are the girls still asleep what's this okay this is pretty cool what is this written in what stage of the first official american baseball game take place i'm gonna say new jersey what is the largest country in the world uh russia what does pirro mean in english is that cat or dog what is the population of switzerland uh a million i don't know so you made this quiz by yourself this is pretty cool chrome plug-in what is it made in software developers you guys know that extension like chrome extension finding what a page was created with used to have an extension where i go to a page you know tell me exactly like what technology was used to build this page is it built with [Music] i don't think that's it [Music] what was it called i like web web analyzer here it is you know sometimes you try to think of something and then like it just randomly comes your head ah yes thank you fair dos exactly what i was looking for i think i thought of it right before your message came up all right i'm just trying to go back to a little quiz and just see what it was made in so click on this button no technology is detected huh posted on netlify so you really just isn't a vanilla.js that's pretty cool art did you let's see i used a template from your channel but i added my custom questions your friend did a tutorial on i believe wait i did a quiz app i don't remember at this point i've done so many different random videos template from your channel did i do a multi-choice quiz i know i i'm not saying i don't believe you but like i just don't remember making one but was it like this one the math quiz one cool awesome yeah so is this one even on your web page where's this quiz thing so you made a quiz but you don't have it displayed here in your projects i would definitely put it in your projects section so that you can kind of show it off because it's pretty cool password generator project seven basic youtube stats website you can do a lot of edits on it but for the moment i'm leaving it as is all right is there anything else you want me to check out i mean i can keep on clicking this stuff if anyone has any like react questions we can go back to react oh yeah i want to ask about this does it just go to your email or like does it go to your phone when people actually type into that chat box or does it go to slack or can you kind of configure it to go wherever you want it to go computing okay so it looks like i can go to slack or i can go to oh it looks i can go straight to your texts oh you know this is like please have a look at my comment above yeah my bad let's see i like to have a high level knowledge of things so while implementing things i find myself referring to several docs does it that make me less of a developer um no the fact that you're actually diving into the docs means that you're pretty advanced in my opinion like a lot of people seem to have an aversion of going to the docks um but they'll struggle for like hours trying to do something when it's like dude you could probably go to the docks and just read it for five minutes and like fix your issue but yeah i think if you're referring to docs all day that's cool i mean everyone refers to docs especially when you're starting off or if you're using a piece of technology that you haven't actually used before so like in this example with react router um you saw that we referred to the docs a lot and we also went to like just random sites to figure stuff out that's literally what i do on my day job if i'm doing something i haven't done before but once you've done it and it's in your code then like your code base becomes your docs because you remember in your back your head you're like oh i've done this before on this tsx file so then you'll go to your app tsx and you're like read through it and you're like oh yeah this is how i did the authentication stuff or what ends up happening is if you have a bunch of github projects you will remember that oh in this repository i did something similar so you'll go to your own code base look to your code and that becomes like your your source of truth for your docs assuming that you keep it up to date um but yeah i mean i don't think anyone remembers all the stuff in the top of their head and especially when you start working with more complex types of technology like terraform or kubernetes and stuff like i was trying to learn kubernetes the other day and it's like there's no way someone can memorize all this stuff like it's just too much but i think if you get good at like referring to docs and understanding like when you should look it up versus go to your own code base i think that's a good start i don't know if that actually helps answer your question uh see yeah so it goes to their website you can make an email and afford it to your email and if they give you name all the emails will come with chatra email section and you can reply from there but i'm mainly using it just a web chat reach out cool well thanks for sharing on that little widget it's pretty cool i know there's a couple of companies out there there might be a lot of companies out there that kind of make this similar widget yeah i think i've ever actually needed that widget i'd probably look into using that as well on my websites or something but i don't really have any type of website where people need to contact us do a little widget like that i think it probably works best for like if you're trying to sell something like marketing or get people to like sign up for their insurance and stuff okay i'm kind of out of ideas of what i should work on so anyone has anything let me know whether you want to learn together or what not i'm running out of steam as you can probably tell um what are your views on implementing css using hit and try approach what does that mean hit and try approach is that just like randomly trying stuff until it works trial and error okay yeah i think the um the term for is trial and error at least in our at least in america the culture that i'm familiar with but i mean i think it's good to do trial and error but i like to do trial and error a lot but the downside is that like you sometimes try things and you get stuck in this like tunnel vision of like not trying to correct things like you'll just keep on trying this one path and you'll think the issue is related to this one path but really the issue is like over here and you haven't tried it so i think you need to try for a little bit but then reach out and try to find other resources like stack overflow go to the docs read through the docs there's so many times when i'm trying something and then like i'll go to the actual documentation and like right there at the top of the the docs i'll have one sentence that explains exactly what i'm doing wrong it's like man if i just read through the docs before i even tried anything i probably would have saved myself two hours but i personally like like experimental i think someone commented and said that i like to teach in a way that's like experimental learning so like we'll just try something see what happens fix the bug if it crashes and to kind of go back but there's a lot of um i've saved i've i think i could say i've saved time doing trial and error as well because sometimes like as a beginner you'll run into a bug and you'll just like not know what to do and some people just don't even try anything they're just like stuck and they're like well have i tried this have you tried that have you tried this other approach and they haven't tried anything so it's good to like get into the get comfortable with trying new things just so you can maybe fix the issue but it's also not good to do it blindly like you should have kind of intuition or some type of hints of what you should try next you saw that iframe can you help me i have a sign that has moved there if the mouse becomes bigger instead of them typo there all right y'all well i hope you guys enjoy this stream i'm actually gonna wrap this up i'm pretty tired and i think my kids might be awake so be sure to give me a thumbs up on the stream if you haven't done so already because i think it helps with the algorithm or something like that or leave a comment on the video itself but yeah i'll try to stream every saturday around like nine or ten i started kind of late today but if you have an idea or a suggestion of what i should stream next week i might just go back to a javascript stream because a lot of people join those versus um i think we had like nine people average on this stream so yeah just let me know i try to make these things to help you guys learn so if you have something that you're struck stuck on or struggling with get some ideas going maybe go to my discord and just paste them for video ideas and i can try to address them in a video or a live stream all right well

Channel: Web Dev Junkie

Views: 327

Keywords: web development, programming, coding, code, learn to code, tutorial, software engineering, javascript, live, help with javascript, javascript tutor, learning javascript

Id: SHLgaD5oCUk

Length: 108min 30sec (6510 seconds)

Published: Sat Nov 20 2021