As this is our capstone project, I wanted to bring up a few key considerations that are a culmination of observations of our previous projects that I think we can improve on:
Code readability - We should strive to keep our code uniform and readable by properly indenting. This makes it easier for us to spot errors in our HTML/JSX markup for things like missed closing tags. In Javascript code, this is especially helpful for identifying things like missing closing brackets and parenthesis. Tabbing is a great tool for this as VSCode handles where to put the next tab for you.
Component naming - Our components should be named something descriptive. For a login form, a good component name could be LoginForm. Following that, the name of the file should be LoginForm.js and the name of the class or function should be LoginForm. This makes it easy for us to find components in our file easily, especially in this case where there may be lots of components. Also keep in mind, React requires you to capitalize the first letter of your component, always doing so will eliminate the issue of that.
Unused code - As you're testing different bits of functionality, some broken and others not. You may find yourself commenting out code to disable broken functionality for now. If by the time you've finished your feature and ready to commit and merge, you should remove all unused bits of code in comments.
Utilizing feature branches more - We want to reduce pushing to the master branch as often as possible. Sometimes it's okay for small files and such that aren't that big of a deal but for the most part, if you're working from a feature, it's good practice to put it in a new branch. If you started a new feature and realize you're still in the master branch and have not committed, no worries! You can still git checkout -b <branch> and switch to another branch and commit there.
Component attributes/props syntax - We should try and keep our attribute/prop names consistent and also readable. Attributes should be set like <Component variant=""> or <Component my={5}>. Take note of the spacing. When adding a lot of attributes, it can be helpful to put them on a new line like
This helps reduce having to scroll horizontally in the file and making all of the component attributes visible at a glance.
Descriptive validation messages - Validation messages should be descriptive like Username is too long. Must be below 50 characters or Password too short. Must be above 10 characters. Notice the name of the field is mentioned and the error as well. Although this may seem redundant as the error message will be placed under the field, it can help the user to differentiate as well as when you're debugging and maybe printing errors out into the console. It's much easier to tell the username field is not valid when it's verbose like that vs Invalid
These are some things that you can apply later on in other code projects that will help ensure consistency and make your lives easier! Let's knock this project out!
As this is our capstone project, I wanted to bring up a few key considerations that are a culmination of observations of our previous projects that I think we can improve on:
git checkout -b <branch>and switch to another branch and commit there.<Component variant="">or<Component my={5}>. Take note of the spacing. When adding a lot of attributes, it can be helpful to put them on a new line likeThis helps reduce having to scroll horizontally in the file and making all of the component attributes visible at a glance.
Username is too long. Must be below 50 charactersorPassword too short. Must be above 10 characters. Notice the name of the field is mentioned and the error as well. Although this may seem redundant as the error message will be placed under the field, it can help the user to differentiate as well as when you're debugging and maybe printing errors out into the console. It's much easier to tell the username field is not valid when it's verbose like that vsInvalidThese are some things that you can apply later on in other code projects that will help ensure consistency and make your lives easier! Let's knock this project out!