Write Clean Code Comments #1 | Clean Code Tutorial
Skills:
AI-Assisted Code Review80%
Key Takeaways
Writes clean code comments in JavaScript using best practices
Full Transcript
okay visual markers so why are visual markers oftentimes a bad practice well usually what they're doing is they're either providing information that is very apparent and there's no need to provide that information or it's trying to make sense of something that probably should be in a different file right and so oftentimes you'll see i'm in one of two ways you'll see them with the the dots let's have something like this where like you know by convention for instance your dependencies usually go at the top of the file and you know most of our linters and things like that will take care of that so there's really no reason to even have a comment like that and then you have super unnecessary ones where take a example of our class here where you just go properties right properties almost always go first and our linters will even ensure that and it's very apparent that that's not really necessary now in a case where you have multiple files like this you might even see user class admin class things like this to show a distinction between the two this is a good example of where instead of actually having a common getting rid of it go and create a new file right go and do your admin.class.js or something like that and instead take this gut it out in one file put in another file of course get rid of the the comment and get rid of this one as well because really at the end of the day you know there's a little bit of disagreement on this depending on who you ask but in my opinion you want to have a single file per class and that'll make your life a little bit easier and also eliminate some of these visual cues that really at the end of the day are good indicators of a anti-pattern to showcase that hey maybe our file here has multiple purposes and that is an issue in itself so when you see those visual cues think about it see how you might be able to break it up to make it so they don't need it and make your life a little bit easier one last thing i wanted to add on here i didn't really need a entire screencast for it is don't leave to do's in in your code you know you might have even before put to do move into two files right something like that at the end of the day priorities change you things change and just be like nike and do it no more to do so keep that in mind
Original Description
🎓 View our courses: https://scrimba.com/links/all-courses
In this scrim, we take a look at why people use visual markers and how to avoid them.
Learning clean code is one of the best career investments you can make. By spending one hour to learn the fundamentals, you get to reap the benefits across all your future code bases. It's 10x the payoff for the effort.
🔧 Play with this code on Scrimba:
https://scrimba.com/learn/cleancode
💻 Check out Scrimba’s interactive learning platform:
https://scrimba.com/
🌲 Linktree:
https://scrimba.com/links/linktree
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Scrimba · Scrimba · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
CSS Grid Course: Learn the Basics in 3 Minutes
Scrimba
CSS Grid Course: Positioning Items
Scrimba
CSS Grid Course: Why Learn It And How It Compares To Bootstrap
Scrimba
CSS Grid Course: auto-fit & minmax
Scrimba
CSS Grid Course: Implicit Rows
Scrimba
CSS Grid Course: Fraction Units And Repeat
Scrimba
CSS Grid Course: Justify Items and Align Items
Scrimba
CSS Grid Course: An Awesome Image Grid
Scrimba
CSS Grid Course: Named Lines
Scrimba
CSS Grid Course: auto-fit vs auto-fill
Scrimba
CSS Grid Course: Justify Content and Align Content
Scrimba
CSS Grid Course: Template areas
Scrimba
27. Setting up the structure - Responsive CSS Tutorial
Scrimba
25. Making the navigation responsive - Responsive CSS Tutorial
Scrimba
36. Playing with the title's position and negative margins - Responsive CSS Tutorial
Scrimba
31. Starting the CSS for our page - Responsive CSS Tutorial
Scrimba
26. Taking a look at the rest of the project - Responsive CSS Tutorial
Scrimba
15. Spacing out the columns - Responsive CSS Tutorial
Scrimba
33. Starting to think mobile first - Responsive CSS Tutorial
Scrimba
22. Making our navigation look good - Responsive CSS Tutorial
Scrimba
37. Changing image size with object-fit - Responsive CSS Tutorial
Scrimba
44. Module Wrap up - Responsive CSS Tutorial
Scrimba
16. Controlling the vertical position of flex items - Responsive CSS Tutorial
Scrimba
39. Setting up the widgets and talking breakpoints - Responsive CSS Tutorial
Scrimba
42. Setting up the About Me page - Responsive CSS Tutorial
Scrimba
35. Changing the visual order with flexbox - Responsive CSS Tutorial
Scrimba
23. Adding the underline - Responsive CSS Tutorial
Scrimba
21. Using flexbox to start styling our navigation - Responsive CSS Tutorial
Scrimba
20. Creating a navigation - Responsive CSS Tutorial
Scrimba
40. Using a new pseudo class to wrap up the homepage - Responsive CSS Tutorial
Scrimba
43. Fixing up some loose ends - Responsive CSS Tutorial
Scrimba
32. Starting the layout. Looking at the big picture - Responsive CSS Tutorial
Scrimba
24. A more complicated navigation - Responsive CSS Tutorial
Scrimba
28. Feature article structure - Responsive CSS Tutorial
Scrimba
34. Styling the featured article - Responsive CSS Tutorial
Scrimba
18. Making layout responsive with flex direction - Responsive CSS Tutorial
Scrimba
19. flex direction explained - Responsive CSS Tutorial
Scrimba
41. Creating the recent posts page - Responsive CSS Tutorial
Scrimba
17. Media Query basics - Responsive CSS Tutorial
Scrimba
30. Home Page. HTML for the aside - Responsive CSS Tutorial
Scrimba
38. Styling recent articles for large screens - Responsive CSS Tutorial
Scrimba
29. The home page. HTML for the recent articles - Responsive CSS Tutorial
Scrimba
10. ems and rems an example - Responsive CSS Tutorial
Scrimba
1. Starting to think responsively - Responsive CSS Tutorial
Scrimba
4. Controlling the width of images - Responsive CSS Tutorial
Scrimba
5. min width and max width - Responsive CSS Tutorial
Scrimba
3 CSS Units. Percentage - Responsive CSS Tutorial
Scrimba
11. Flexbox refresher and setting up some HTML - Responsive CSS Tutorial
Scrimba
12. Basic Styles and setting up the columns - Responsive CSS Tutorial
Scrimba
8. The Solution Rems - Responsive CSS Tutorial
Scrimba
14. Setting the columns widths - Responsive CSS Tutorial
Scrimba
2 CSS Units - Responsive CSS Tutorial
Scrimba
7. The problem with ems - Responsive CSS Tutorial
Scrimba
6. CSS Units. The em unit - Responsive CSS Tutorial
Scrimba
13. Adding the background color - Responsive CSS Tutorial
Scrimba
9. Picking which unit to use - Responsive CSS Tutorial
Scrimba
Tutorial to Learn Alpine JS - Full Course for Beginners
Scrimba
Guide To Algorithms in Javascript [Binary Search] - Full Course / Tutorial
Scrimba
Learn UI Design [7 Fundamentals Tutorial] - Full Course for Beginners
Scrimba
Javascript Tutorial for Beginners [From 0 to ES6+] - Full Course
Scrimba
More on: AI-Assisted Code Review
View skill →
🎓
Tutor Explanation
DeepCamp AI