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! 🤗
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:
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.
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?
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.
