Hello guys!
I've recently returned after a break in study and I've done this challenge to remind myself that I can still do it an not all hope is lost, however, I would really appreciate some insight on my solution and anything that I could do to improve because I feel like I've forgotten a lot of things.
Thanks a lot!
Hi Mihailescu,
good job on getting back on track and keep coding. Your solution looks good when implemented and you can improve your code even more. First thing to work on is HTML semantics. In your case class card-summary would have article and children inside would mostly be divs. You shouldn't use section inside this card element, but card element can be used inside section. Try to go through MDN reference of HTML semantics to really understand why and when to use different ones. Second thing that you can improve is making classes more clear, structured. There are many ways to do it, one of them is using BEM (follow link to learn more: https://sparkbox.com/foundry/bem_by_example). With a more structured approach you make it easier and clearer to apply styles to components, you can better avoid clashing of class names in bigger projects and other people will have easier time managing the same code (+ your future self).
Keep coding and focus on the fundamental. Enjoy
Hello, everyone. Finally back to coding after a long time. Please give review of my codes. Also please share some blogs or articles about how I can make interactive elements more accessible.
Hi Abdur,
I have tested your little app using keyboard, screen reader and accessibility tool. The only issue that I have found is too low color-contrast and this issue is fault of the design that you were following.
I also looked through your code and it looks clear with high level of effort in the direction of a11y. I am impressed by your code. Really good job with this project.
In the end, thank you for learning me a new thing, that is prefers-reduced-motion inside media queries.
Keep up the good work and enjoy
My search filter is working perfectly in the desktop browser but not functionally correct on mobile? Any feedback would be very much appreciated.
Hi MT-LE,
I had a look into your code and it needs some improvements. Below I will make a list of what you can do to make your code better:
useEffect(() => {
window.addEventListener("resize", handleResize);
return window.addEventListener("resize", handleResize);
}, []);
It turns out that it is quite a long list. Take your time with improvements are try to understand why it should be done in a different way. It takes hard work to improve yourself as developer and only you can make it work.
Have fun on your journey
I'm pretty new to typescript and I want to fix this one thing. Currently in the notification.type.ts the data property of the notification type is any. I want this data type to change depending on the given notificationType.
For example: if the type of notification is 'private-message' i want the type of 'data' to be { message: { content: String } } How can I achieve this? Thanks in advance
Hi Richard,
one way you could replace type any is with the following type:
type Data = {
post?: {
id: number;
picture?: string;
title?: string;
};
message?: {
data: string;
};
group?: {
id: number;
name: string;
};
};
This way you have all the different types covered.
Regarding the other code I can only suggest refactoring files inside NotificationItems. Some notifications seems really similar and could be merged into one file with some props added to them.
Have fun improving your little project.
Any feedback is welcome :)
Hi Osman,
I had a look at your project and its code and saw some possibilities to improve your coding skills.
Your deployed site breaks when viewing from the mobile. You could easily fix that with using flex instead of grid for card container. Code on GitHub looks good and it is structured well. Some comments were left out inside main.scss that don't belong in the high quality code. Also, your way of writing CSS classes looks similar to BEM methodology, but it isn't quite there yet. In the case of using BEM you would write something like "container__item" instead of currently used "container__cards__item". So, if you want to learn it better have a look at this great resource https://sparkbox.com/foundry/bem_by_example.
Hope that you learn something new from my comment.
Any feedback is appreciated
Overall your design is quite good, but you can improve it a little bit. Possible improvements:
