Stop excusing yourself for doing what you are doing. You are doing great, everything you've done in this refactor I would have done myself. Don't be so hard on yourself. Great video, keep them coming!
Love this type of content. I'm worse than you at coding, the only thing that came to my mind while you were refactoring is that it seemed that the random anime page was returning JSON detials for all the animes, which made the call to get the data again for individual anime seem a bit redundant. I think, in a perfect world, when opening the individual component I would've had something like an optional prop with data if I'm coming from the random anime page, if there is no prop then I make the request with the id.
4:56 - I'd say, make an array of objects, which would include the path and the element that you want to render. Then, you would simply map it in the return statement.
Ive been having this bug when I login it goes into a infinite loop. It should go to a home page but its not. If I manually go to the other routes then the whole app works fine.
There is a card component which has 4 props being passed into it. What I would do is to pass only one prop to it called "anime" and destructure what I need inside the component. Tho the reasoning behind different props is probably because there is a lot of data inside "anime" object which makes it pointless to pass entire anime object, but if that wasn't the case I would pass only 1 prop and destructure.
that works as well, one issue I have with that is if you anime card only need to display 4 things, but your Anime object has 30 properties, you don't want to expose all that extra data to your card object since that increases coupling between your anime object and UI card component.
I would agree for this example, but on an application with 30 different endpoints, it makes it hard to refactor a url if everything is hard coded to point to that url, but yes maybe this approach isn’t the best 😅
if you dont have typescript in a project then you can use jsdoc comments to annotate the code and get better intellisense support, also add jsconfig to the project to get vscode to provide even better guard rails. to get jsconfing with little effort , try `npx jsconfig.json`, then confirm checkJS is true, you could also set that in vscode itself somewhere
For me, it’s better to come up with criteria for selecting projects, because this project in the video is full of ***, for example, the url should go through -, then don’t use the id, use the slug, because there weren’t such stupid movements as downloading absolutely all things that are not displayed, otherwise you will drown in shit, and you will constantly be asked to help and help. The type from the video needs to take some kind of course for beginners, where they will explain what to do, what to think, what to optimize, think about traffic, etc.
![[LIVE] : ONE ลุมพินี 85 | คู่เอก "ยอดเหล็กเพชร vs ผึ้งหลวง"](http://i.ytimg.com/vi/Qq_19bnnxEo/mqdefault.jpg)
Stop excusing yourself for doing what you are doing. You are doing great, everything you've done in this refactor I would have done myself. Don't be so hard on yourself. Great video, keep them coming!
I often self doubt my abilities, but yes I agree, I need to just own it
These refactoring sessions are awesome to learn from, thank you so much!
This is really helpful for new programmers like me, it feels like a PR review. And lots of new insights
most of his fixes is stuff hes breaking lol
@@Nodsaibot doesn't matter for anyone is getting any value out of it
Dammmnn bro, you always make very helpful videos about coding and way of working. Keep up
At last someone experienced making a video
Your videos are chill and informative, specially the live code refactoring streams. Love them!
One thing I would say is to use lowercased words separated by hyphens for css classes. So instead of heroContainer, make it hero-container.
that doesnt work with react if they use module any idea how would you deal with that?
@@saitech2452 you would have use it like styles['hero-container'] in the jsx but It's pretty uggly so I prefer to use camelCase.
@@madtin ye same I just use camel case I'm still looking for improvements but so far nothing found
I believe the problem was the missing “:” at 6:37 before the ${id}
Great video bro!
Very useful hope you make more videos like this
Great video idea man, learning a ton.
Love to watch more of this kind of videos.
Love this type of content. I'm worse than you at coding, the only thing that came to my mind while you were refactoring is that it seemed that the random anime page was returning JSON detials for all the animes, which made the call to get the data again for individual anime seem a bit redundant. I think, in a perfect world, when opening the individual component I would've had something like an optional prop with data if I'm coming from the random anime page, if there is no prop then I make the request with the id.
React-router has GeneratePath method for generating paths with params . Better approach then GOTO usage.
Illl need to check that out thanks for sharing
4:56 - I'd say, make an array of objects, which would include the path and the element that you want to render. Then, you would simply map it in the return statement.
Love your content @Web Dev Junkie. I am a junior developer and most of the things that you say actually help me get better. Thank you!
I think mapping would take much time.
5:00 What if we have a nested route?
Which VScode theme are you using?
Good job babe!!!!!
What Xcode theme, with font and text color scheme are you using
I love to watch videos like these
Thanks!
Ive been having this bug when I login it goes into a infinite loop. It should go to a home page but its not. If I manually go to the other routes then the whole app works fine.
I really love watch your videos and the way you think 🖤
Nice video man. What extension shows the errors while you code?
What is better to render if u wanna display nothing. A react fragment or null?
the answer within the question
There is a card component which has 4 props being passed into it. What I would do is to pass only one prop to it called "anime" and destructure what I need inside the component. Tho the reasoning behind different props is probably because there is a lot of data inside "anime" object which makes it pointless to pass entire anime object, but if that wasn't the case I would pass only 1 prop and destructure.
that works as well, one issue I have with that is if you anime card only need to display 4 things, but your Anime object has 30 properties, you don't want to expose all that extra data to your card object since that increases coupling between your anime object and UI card component.
@@WebDevCody Yeah I agree. That is basically what I said.
@@raygo44 nice ok we’re on the same page!
You can also set the base_url on axios instance itself by doing something like axios.defaults.baseURL = "YOUR_URL"';
How you directly importing anything by pressing some key in vs code ? please share
install auto import extension on vscode, when you type something it autocompletes for you and then autoimports it.
How can we submit apps for these refactoring videos?
My discord
Maybe have 1 function for getAnimes/getAnime? Return all data if id is undefined?
That’s an option for sure
What vscode extension you are using to show live errors on set of coding ? thank you in advance!
Its name is Error Lens
what vscode theme did u use in this video?
Could you share the extensions you use for React?
Thanks
Did you heart my question without answering it? That's odd, no?
@@vintage8 I laughed.
export page slug from page component
The routing approach just makes it more complicated. But other than that, this is cool!
I would agree for this example, but on an application with 30 different endpoints, it makes it hard to refactor a url if everything is hard coded to point to that url, but yes maybe this approach isn’t the best 😅
Warning: Hypthons in URLs are frowned upon in SEO
Edit: ignore the above, it's only for domain names, rather than URLs.
The first google result says google recommends using hyphens since they are more human readable
@@WebDevCody ammended as it's only relevant for domain names.
if you dont have typescript in a project then you can use jsdoc comments to annotate the code and get better intellisense support, also add jsconfig to the project to get vscode to provide even better guard rails. to get jsconfing with little effort , try `npx jsconfig.json`, then confirm checkJS is true, you could also set that in vscode itself somewhere
For me, it’s better to come up with criteria for selecting projects, because this project in the video is full of ***, for example, the url should go through -, then don’t use the id, use the slug, because there weren’t such stupid movements as downloading absolutely all things that are not displayed, otherwise you will drown in shit, and you will constantly be asked to help and help. The type from the video needs to take some kind of course for beginners, where they will explain what to do, what to think, what to optimize, think about traffic, etc.
I didn’t really understand what you’re ranting about to be honest. Are you insulting my subscribers code because he is a beginner?