https://www.frontendmentor.io/solutions/planetsfactsite-using-angular-17-gOP497seth this is the first project I have done with angular I am trying to develop best practices using this tool, what issues do I have or how I can improve the project?
#first project
crisp phoenix
urban tartan
@import syntax of scss is going to be deprecated in favor of @use
It only hasn't been deprecated yet, because some libraries like bootstrap haven't moved on yet, and they don't want to pop warnings in like every web project ever.
Everytime you @import the same file, it will create a duplicate in your output css. For example your _variables.scss
2: look up how to use the new control flow syntax. @for can be as much as 90% faster than *ngFor.
There's also an experimental migration
Ah, pardon me. You did use it. But you missed some.
3: I suggest you make some scss mixins or variables for your media breakpoints. If you repeat them in every single scss file, you'll have a hard time if you ever need to change them
4: there's a lot redundant css selectors. Like a, a:before, a:after, a:hover, a:hover:before.
Use scss nesting to make this more readable. Nesting is about to be supported by native css too. It's very useful to learn.
crisp phoenix
4: there's a lot redundant css selectors. Like a, a:before, a:after, a:hover, a:...
Thank you man for taking the time to review my code I really appreciate it I will refactor my code soon
urban tartan
Not really issues, just things I noticed:
- I feel like you could've implemented the individual planets/pages with less redundancy, since they seem relatively similar (didn't compare them line for line)
- if you want to add support for multiple locales, you'll probably want a pipe for your distances and temperates, that converts between imperial and metric units, depending on the locale