I really get more out of live refactoring than a tutorial or the creation of a small new project. This requires alot of thought process to figure out what its doing and then design a way to make it work like how it worked previously except being much cleaner. Great work!
Watching this video made me realize how much I've longed and wanting a video like this. I try to consume tutorials and all that as much as I can but I learnt so much more from this and I'm not even that far into the video. Thanks a bunch from a webdev uni student
This video is the right format for learning for most people. Well done! I started my channel just to help people by refactoring real projects live on RU-vid. I hope this is going to be valuable enough for junior as well as experienced engineers/devs
Great video! One thing that I think can be highlighted more is the need of tests, particularly for services. Tests are good for make more robust your software and document the behavior of it
When you think you are losing people in the middle of a hard refactor, don't forget to mention the fact that such a refactor gradually makes the code more complex before it eventually makes it drastically simpler. This is expected because there are so much things to change or fix. Also, I would advise to keep your intermediate working steps in git commits, in a refactor branch. That way you can easily roll back. -- Oh and by the way, keyboard events have a "key" property that is more appropriate than "which". you may check `event.key == "Enter"` instead of `event.which == 13`.
This is your first live refactoring video im watching. You might know this by now since this video is over 1 year old but at 59:53 you could mark and edit multiple lines at the same time in VSCode by using scroll click and dragging or pressing ctrl+alt+arrow down. Then you can mark all lines at the same time by ctrl+shift+arrow left then copy and paste the variable names for all lines simultaneously.
watched the whole thing, great vid!! ps: you can spread JSX props like `` but tbh idk how widespread (pun intended) this is. i rarely see it in the wild but i personally love it, though i can kinda see how the “{...{” could turn people off to it.
Some more things that should likely be refactored: The board does not need to know about tasks, this should probably be state in the column which would remove some props. Likewise all the places where the columns are being refetched can likely just be be solved just by having the columns be state in the board and adding it to the dependency array of useEffect.
Loving these videos really useful to see what type of stuff you pick up on, what extension are you using that shows the warnings inline with the code ?
@@blakelarson5005 lol the systems and codebases here are written in php from like 2005. using sql server 2000 on their billing software. re-wrote a lot of it to work on new php. a lot of vanilla js on the front end though
Nice video, dude. So good! Hey, did you know that if you press F2 with your cursor on top of a variable, you can rename it and the new name will be replaced everywhere?
Very helpful video, I'm an aspiring junior dev working with React as well. I learned a lot from your critique but am also happy that I could see some of this project's issues, what/how I may think about improving it (this person still did a good job and I appreciate it being shared!). Do you think a person with this level of code quality is ready to begin applying to junior level jobs?
I think writing clean code take a while to learn and typically you learn it on the job when people start denying your changes in code review because they are too sloppy. I think showing you’re able to build a larger project on your own the best way to demonstrate your skills. This app in the video is consider “small”, so I’d expect him to keep adding features until it at least felt medium
@@WebDevCody Great response, thank you. I've built a couple small applications and am in the process of a more medium sized one now. I try hard to keep it clean but it's imperfect. It's a constant learning process as you know but I'm enjoying it. Your content is very helpful!
For the for loop you can make it functional by filtering and return the result, which is essentially what the person is doing. columns.filter(col-> col.data.id == parse) Easier to read Wrote that before I saw you did that. Great job
Great video, unfortunately you changed every line of code when you auto formatted the files. When you commit your changes, the whole file history becomes unreadable! This is the reason to share prettier, lint configs or disable auto formatting on save.
This is where you make a separate PR with just the style changes and make sure to indicate its JUST style changes. The refactoring can be added as a separate PR after that and you actually get a meaningful diff.
Why don't you use vs code softwrap? In the beginning you said that you eslint on save which is perfectly fine, but you also mentioned the tailwind classes being silly on their own, soft wrapping them helps a lot in my opinion, but would like to hear why you don't :)
Why would you auto-like comments tho? It doesn't make sense when you like a comment with a question and then just don't answer it :p Nonetheless, I liked your video, it's cool to see how other people take on tasks like these.
Not to Monday morning quarterback what you were doing too much but personally I would have moved those DB functions out first thing as I believe database functions in a UI component is a major major smell. Edit: ah, I see you did this around 30:40
I’d have to ask my subscriber since it isn’t my code. Join my discord and ask for who’s code was in this video and I’ll connect you with the subscriber
I am new to Linux user and having some shortcut issue with VS code. I can go to fun by alt + click or Ctrl + click when using window but in Linux It doesn't work . Any Idea guys ? That problem found when I use vs code terminal and it solved with Ctrl alt click. still need others solution for finding fun etc...
What is "fun"? What are you trying to achieve? If you want to use the default Windows keybindings on Linux, there is a VS Code extension called (unsurprisingly) Windows Default Keybindings. It'll map the keybindings to what you would use on Windows (ctrl + d for finding duplicates, alt + shift + up/down arrows to copy/paste highlighted lines, etc). I don't know if it will do what you're asking.
@@igorswies5913 Well... yes? I don't see the point of adding anything other than text inside of a button to begin with. If you feel like it, you can use a label and hide the actual submit button. You might want some SVG image as well, but you can honestly do a lot of that stuff with CSS.
I made a mini php framework for a LOL project, and named all functions by human names same for vars etc so i had lines like if(charles=helene) { amanda = pamela;} And then had it reviewd by a friend and he was like how to fuck do u even remember what name does what and how is this working xo
Really hate to see in React components with classes long as the entire screen use goddamn style components be more clean while also allowing easy use of animations.
Styled components kind of suck imo. Components should be there to abstract logic. When you make a ton of components to abstract styles you’re doing it wrong.
Tailwind is such an insult to CSS. I've never been strongly against anything in my long career, except for that insult of a thing. When I'm hiring I always see a recurring problem: those who use Tailwind never understand HTML and CSS. What a sad state of affairs to see it used so much. As if the DRY-concept is entirely gone AND the users of it go in repetition overdrive.
I don’t think you can use tailwind without knowing css. Everything in tailwind is basically a shortcut to css properties. It has the exact same concepts as flex, grid, etc. Ive seen many css classes with repeated styles sprinkled all inside of the class properties, so it goes the same both ways. If your devs don’t know how to dry code up, it’ll always be a mess
Service names are too specific and should be nouns. Instead of "getTasks" service rather have "tasks.service" which holds all I/O on tasks. Then we would have: tasks.create(); tasks.get(id); tasks.all(); tasks.findOne(); tasks.findMany(); tasks.delete(id)...
It ends up being the same thing. getTasks vs tasks.getAll, literally the same thing. The only thing that achieves is you now have a bunch of independent files grouped together into the same file for no reason and now I have to scroll around a longer file to find the exact method I want filled with noise. I rather have a single file per method and only see the exact imports related to that method. Just preference.
@@maurov2104 I know how to use vscode short cuts, that’s not my point. At some point we have to decide what functions belong in a file. We don’t put 10 react components in the same file, so why put 10 controller methods in the same file. There are also tons of imports at the top and you don’t know which function they are required in at a glance. To each their own. Separation of concerns is a thing
