Dynamic Time Tracking Dashboard - Built w/ Codux (React and TS)
Design comparison
Solution retrospective
Feedback is always great but please be kind to my React code if you do.
I recently heard of Codux by Wix, a visual IDE for React components and as soon as I saw this tool, I wanted to build something. I decided to build this Frontend Mentor challenge as my first one using React.
I also learned a bit about TypeScript while using Codux since TypeScript is primarily used with this program.
Give me some things I could have done differently when looking at my React code.
Thank you, everyone.
PS. I know about the accessibility landmark warnings. Codux is challenging.
Community feedback
- @maiaflowPosted over 1 year ago
impressive, Eric! i have very little understanding of what Codux, React, IDE, TypeScript are, but that makes this all the more impressive! that H accessibility one has gotten me in the past, definitely interesting that they want you to go in order. well done as always!
Marked as helpful1@ericsalviPosted over 1 year ago@maiaflow I actually realized what I did wrong.
In my hour cards I had the top category title set as an
h3
and the actual large hour set as anh2
. That makes sense with the order I had in the warnings. So it was easily fixed by swapping the header levels.0 - @0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
HTML 🏷️:
- This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to
non-semantic
markup, which causes lacking of landmark for a webpage
- So fix it by replacing the
<div id="root">
element with the semantic element<main>
in yourindex.html
file to improve accessibility and organization of your page.
- What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like
<div>
or<span>
- They convey the structure of your page. For example, the
<main>
element should include all content directly related to the page's main idea, so there should only be one per page
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful1@ericsalviPosted over 1 year agoThank you @0xAbdulKhalid
Codux is a newer program that is also new to me. It has limitations that I was not able to find when constructing this project. It has a built-in library of common HTML components so I'll need to check to see if it has the option to add semantic ones and not the
div
orspan
ones.I did start going back in assigning
roles
instead but have yet to generate a new report.I'll go in and check to see if I can update the main
div
to amain
and fingers crossed that things won't break.Thanks again.
0@ericsalviPosted over 1 year ago@0xAbdulKhalid
All fixed. Thanks for that insight. Just replacing the main div for the App ID to
<main>
fixed a bunch.Also in my Chromes Axe Dev Tools, I realized I didn't have best practices so It didn't show those warnings before I submitted.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord