Random Quotes React + Redux

Hello dear friends,

I finished my first project for Front Web Development Libraries. Below is the link :slight_smile:

https://codepen.io/pavoninushka/pen/GRNdRgj

Please could you give me you opinions / advices on what to add / approve there.

Thank you a lot and have a great evening!

1 Like

Great job with this!!

I like the fact that you are using reducers. I also like that you are using bootstrap. I think the app looks clean.

Here are 2 suggestions for you to consider.

So my big suggestion would be to use the fetch API instead of jquery. I think that would look better for jobs. Then again, a lot of companies still use jquery.

You also might want to consider using react hooks instead of the class-based components because they are more popular these days.

Hi dear Noah!
Thank you a lot for your comments! Very useful. Will update and let you know.
Have a very nice day.
Galina

If you want to use a lib for the fetching I would suggest Axios. Using jQuery just for ajax isn’t great because you are bringing in a lot more code than just that. But there is nothing wrong with using something like Axios, or some other utility lib (e.g. ky).

But as suggested learning to use the Fetch API is a good idea as well (MDN Using Fetch).

As an aside, I’m not sure using the default case in the reducer as an initial state is really the correct approach. It might be better to pass the reducer an initial state and just return the current state unchanged in the default case. But I’m not really into Redux so take this with a grain of salt.

Thank you a lot Lasse!
I am on my way to finish updating my code following your advices.
Will send the updated link in the following dates.
Take care,
Galina

Hi dear Noah!

Finally after struggling with React Hooks seems like I managed to conquer them =)

Please have a look and let me know you thoughts.
Thank you again for your very appreciated advices!

https://codepen.io/pavoninushka/pen/yLVdgMP

Hi dear Lasse!

Hope you are doing great!
Following you kind recomendations I updated my code using Fetch API. Let me know if you think it is fine.

Take care! :relaxed:

https://codepen.io/pavoninushka/pen/yLVdgMP

Nice, you switched to using hooks as well. It looks very clean now. :+1:

I would maybe suggest you look at how to use fetch with async/await as well (not that there is anything wrong with using .then).

Maybe also expanding the “successful check” to include checking the .ok property on the response (MDN).

Also, just personally I would add a tiny bit of margin left/right to the quote icons so they do not sit so close to the quote text.

Great job, keep it up!

Hi Lasse! Ok! Will update accordingly. Many thanks :blush:

Nice job overall. A few things I would recommend:

  • Put a max-width on the quote box. Some of the quotes are rather long and longer lines of text can be hard for some people to read. Don’t use px though, use something like em or even ch. That way the max-width will take into account the font size.

  • I think your HTML could be a little more semantically descriptive. These are quotes, so at the minimum you could use <q> for the quote itself. But I would be tempted to say this is more of a <blockquote>. Take a look at how MDN marks up a blockquote to give you some ideas.

  • Think about wrapping your content in a <main>.

  • The color contrast on your buttons is not quite enough to meet AA accessibility standards. Use the WebAIM color contrast checker to make sure you have enough contrast.

  • Personally, I would add actual text to the twitter link and visually hide it. Perhaps something like “Tweet this quote.” I know that the most popular screen readers will now announce the content in the title attribute if there is no accessible name for the link, but I’m not sure all of them will (especially older versions that people may still be using), so having actual text in the link is the best way to ensure that everyone will know what the link does.

  • Also, a lot of accessibility experts will tell you not to use the title attribute on links since only people who can hover over the link with a mouse will be able to see it (by default at least, there are ways using JS to make the title attribute accessible to keyboard users). In general, if your icon isn’t good enough to describe to the user what it represents then you should have actual text on the page explaining what it does and thus you wouldn’t need the title attribute in the first place. I’m not telling you to remove the title attribute. I’m going to give the benefit of the doubt that almost everyone recognizes the twitter icon and thus the title attribute is just redundant in this case. I just wanted to make you aware that relying on the title attribute in general to convey important information is not a great idea unless you go to the trouble to make it accessible for everyone.

Hi dear Bruce!
These are very good advices! Thank you a lot. I am going work on them and update you as soon as I finish!
Thank you again and have a great day! :slight_smile:

Hi dear Bruce! Hope you are doing great.

Please have a look at the changes I did following your kind advices :
https://codepen.io/pavoninushka/pen/yLVdgMP

Thanks a lot again and have a great day.
Galina

Hi @Galina, this looks great. I just have a few extra suggestions. These are pretty picky, but if you are a perfectionist like me you might appreciate them :slight_smile:

  • The <figcaption> element should be inside of a <figure>. Furthermore, it should be either the first or last child of the <figure>. So you’ll want to remove the <div> around it. If you need a <div> for extra styling you can put it inside of the <figcaption>.

  • When I narrow the browser, the Twitter icon jumps up higher then the New Quote button and centers itself while the New Quote button stays at the lower right. Not sure if this is intentional, but it seems like there is still plenty of room for the buttons to be aligned side by side at the same height.

Keep up the good work.

Hi @Bruce! How are you. I made changes as per your suggestions.

I will read more about Bootstrap styles in order to make buttons to be aligned side by side.

Thank you again a lot!
Take care,
Galina