Skip to content
OverviewSolutions
0
Comments
2
P
EidenRain
@EidenRain

All comments

  • Victoria Azola Silva•1,290
    @VickyAzolaSubmitted 11 months ago

    Hi there, 👋 it's been a long time since I uploaded something here. I was learning some new things, like frameworks and how to use them.

    In this challenge, I use Vue.js to create a simple static page. Since I'm new to this, I wanted to start with something easy. Any feedback on how to improve my code and general good practices for the use of frameworks is appreciated. Thanks! 🤗

    Huddle Landing Page

    1
    EidenRain•40
    @EidenRainPosted 11 months ago

    Great work! I've got some feedback.

    Vue.js has a neat style guide, that helps with being on the same page when working in team, but is also best practice in general. One example of a 'Strongly Recommended' rule would be 'Single-instance component names'. Components that will only be used once on the page should be prefixed. For example, 'TheHeader' or 'TheFooter'. Maybe you can find some other useful rules in the style guide, like the 'Use multi-word component names'!

    Two more apparent things I noticed:

    1. You've seen that there are a few buttons on the page looking nearly the same, and created a component. Great! But the component should be more flexible. It's currently called 'ButtonPink' and it's used two times. But there is one more Button on the page! The white on in the upper right corner. That one is hard-coded inside the 'Header.vue'. I think it makes sense to have a single Button component, called something like 'BaseButton' or 'AppButton' (Following the 'Base component names' rule in the style guide). Either it will accept props like 'backgroundColor' and 'textColor', or an even better way is to have a prop called something like 'variant' or 'type' and managing the 'style type' inside the button component. This way, if you want to change all buttons across the page, you only have to change it in one spot! Let yourself be inspired by component libraries like Vuetify or Naive Ui!
    2. You are using tailwind colors like 'bg-[#00252e]'. I think a better practice would be to define these colors inside the tailwind.config and use them! This way the names a more descriptive.

    A tiny, small thing I noticed is the hover state of the social media icons. When hovering inside them, but not exactly above the SVG, the border gets pink, but the SVG doesn't! This can be a common use case. Using tailwind you can apply a 'group' to the parent element and the 'group-modifier' to the child element and voilà, the SVG changes its colors, while only hovering above the parent.

    Marked as helpful
    0
  • Nick•160
    @HarmoniaCodesSubmitted almost 2 years ago

    When using the randomly generated link from the adviceslip API, the javascript that I wrote would fetch the URI once, then would not reload a different message even if the function was called again. To workaround this, I created a random number generator. This random number is appended to the end of the API uri to get a pseudo-random URI. Is there a better way to do this? What would best practices be?

    Advice Generator App using AdviceSlip API

    1
    EidenRain•40
    @EidenRainPosted almost 2 years ago

    First of all... great work!

    I'll try to answer the question. If the API wouldn't support fetching a random question, your solution would be just fine, I think (even though you limited these great advices to 100 :P).

    Try out the 'api.adviceslip.com/advice' endpoint! No '/' at the end.

    Marked as helpful
    1