P
@sophia-seeSubmitted 3 months ago
Latest solutions
- Submitted 4 months ago
Accessible React Tic Tac Toe Game
#accessibility#react#react-router#redux#typescript- HTML
- CSS
- JS
Latest comments
- P@NikitaVologdinPosted about 2 months ago
Great job @sophia-see! A few things to mention:
- check lighthouse metrics (last tab in google chrome dev tools) it will help you to make some small improvements crucial for the SEO.
- for time-saving, you may use an opacity: 50% for the inline elements to match the Figma design rather than save colours to CSS variables.
- In React also, layout changes can be achieved by changing flex and grid properties in the CSS media queries, so there is no need to get viewport sizes using JS.
- Home Layout looks much better if switch off
/* height: calc(100dvh - 112px);from .container. - In Dialog you may remove the gap between elements because you have quite big padding there. By the way if you did it for accessibility purposes (fat finger problem), 15px padding should be enough. To follow the design you can take a gap from there 32px and subtract 15px, the result is a gap value for the flex container.
Love your work, thank you for reading, I hope I have been a bit helpful.
Marked as helpful1 - P@Wannika123Submitted 2 months agoWhat are you most proud of, and what would you do differently next time?
Instead of using the static stars that's provided as svg file. I generate them with JS, I also create the animation that makes them look as though they're shimmering. It probably affects the performance, I don't know, but I'm just having fun.
What challenges did you encounter, and how did you overcome them?This project is much harder that it looks.
What specific areas of your project would you like help with?Is there a way to fix the countdown glitch? I think it's not because of the stars (it already glitches even before I add the stars), but I think it's because
setStateis asynchronous, so there's some delay before the screen is updated. (I'm not sure)P@NikitaVologdinPosted 2 months agoI assume that the glitch might be because of the rerender, which is called by setState. Great job, though!
1 - P@NikitaVologdinSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
Responsive and accessible Room homepage layout with optimized fonts and images. React components:
- Animated slider
- Dialog
- Slider controls
- Dynamic article
P@NikitaVologdinPosted 2 months agoNice to see you again @elisilk!
- Resolved your notice by giving position absolute for the button to keep paddings for a better user experience (easier tap with finger)
- I Always had this issue with images, thanks to you, I finally understood to take sizes from image properties, not Figma design.
Thank you for your time, detailed feedback and provided article.
Best, Nikita.
0 - P@makogeborisSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I’m thrilled to have completed my first React project! Excited to keep improving and explore more advanced concepts. Feedback and suggestions are greatly appreciated!
P@NikitaVologdinPosted 3 months ago- Layout:
- I am suggesting to increase with of the decoration elements to follow the design. But since you are using img tag to render svg from the figma it is impossible. So i suggest:
- use inline svg and with css control its width.
- or make a div and use border radiuses (this option you can checked in my work, it is still not perfect though). I believe this approach is more preferable due to less document size.
- "get it on firefox button on hover needed to be transparent"
- In the accordion component no bottom border for the last child.
- Animations:
- Tabs section. Cool animation idea though, but should look more smooth. Know framer motion not easy, just highlighting for further discussion.
- Animation glitch when start using tabs section for the first time.
- In the same section distance between left viewport border and decoration element I think can be fixed by the
- Accordion works funny when expanding items. They like expand in opposite direction.
- Also I believe you can add animation for error status on the email input.
- Responsiveness
- Dialog menu can be scrolled to the overflow on x,y axis. I suggest use css:
body:has(.dialog[open]) { overflow: hidden; }- Download items looks odd from 672px width of the viewport.
- Performance
- Suggest you to check you app in the lighthouse. Can be found in chrome dev tools. You can improve performance hosting fonts, optimising images and etc.
Flawless work with the accessibility. Awesome layout implementation. Cool animation ideas. Very like your work. Thank you for reading.
Best, Nikita
0 - I am suggesting to increase with of the decoration elements to follow the design. But since you are using img tag to render svg from the figma it is impossible. So i suggest:
- @wendyhamelSubmitted over 2 years agoP@NikitaVologdinPosted 3 months ago
Hi wendy!
- I want to mention that the layout doesn't look good on the 995px px.
- I like your decision to group bottom images on the lower breakpoint, just think that slider control buttons and dark image are not the best match.
- On clicking the previous image button app crashes.
- Slider image shrinks way much on the tablet screens.
- On the opened hamburger menu layout, elements can be tabbed.
- Cool animations but they look a bit much for the article.
0 - P@elisilkSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
This was my first time using Sass, and I really only scratched the most basic surface level of it so far. But it was good to get it up and running, and I definitely have ideas for areas of Sass I can utilize in future projects. I also continued to try on CUBE CSS, but probably implemented some aspects of that methodology more faithfully than others. But progress, not perfection. Will be great to keep getting more experience with both CUBE CSS and Sass in future challenges.
P@NikitaVologdinPosted 3 months ago- Job includes semantic HTML
- 100 accessible on the lighthouse
- Layout looks great on all screen sizes
- When I completed the mockup I received an error about the second nav element on the page.
- Also, lighthouse metrics (chrome dev tools) can be improved by using static fonts in modern formats .wof2 and images can be converted to the .webp.
ImageMagick CLI for converting images
Great job, as always! I would be happy to collaborate on any project.
Best, Nikita.
Marked as helpful1
