P
@sophia-seeSubmitted 3 months ago
P
Nikita Vologdin
@NikitaVologdinAll 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 - @KapteynUniverseSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I did this challenge to try tailwind. Also used tailwind and deployed to netlify for the first time.
What challenges did you encounter, and how did you overcome them?Keeping the opacity of the view icon while giving the NFT img a pale background was difficult at first then i found group styling of tailwind.
What specific areas of your project would you like help with?Any feedback is appreciated but i would like to get feedback about accesibility and semantics. Also i can see font family is correct on computed tab of the dev tools and can toggle on styles but for some reason on console there is a 404 error for the font.
P@NikitaVologdinPosted 4 months ago-A bit strange h1 heading for the screen readers "scam dot com" in the main. -For accessibility purpose, I used a <button> instead of the <a> tag link to expand the nft image. Because <a> tag is used for the hyperlinks.
0 - P@danmlarsenSubmitted 5 months agoP@NikitaVologdinPosted 4 months ago
Great job here! –Semantic HTML is included –Nice work with accessibility. Everything is perfect –Responsive according to the design file –Well-structured code and app hierarchy –Top-notch implementation
1 - P@elisilkSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
This challenge was trickier than I had anticipated, especially with respect to the layout. But I learned a lot trying to figure out how to get CSS grid to be responsive and deal with overlapping elements and things like that. So it ended up being a lot of fun to work through those things.
What specific areas of your project would you like help with?Comparing the design to my solution, the background gradient color in the top hero section is definitely off. The design has much more of the lighter blue and my solution has much more of the darker blue. I attempted to use the gradient parameters directly out of the settings from the Figma file, but given how off it is, I clearly didn't do that correctly. I also tried using the Figma Solid and Gradient to CSS plugin to translate the gradient in the Figma design directly into CSS, but that didn't give me great results either. I'd appreciate hearing how others figured out the best gradient for this design, and more generally about a better process for translating Figma design gradients into CSS. Thanks in advance.
P@NikitaVologdinPosted 4 months agoHi @elisilk! I agree that this one was tough! You did a great job with the pixel-perfect nothing to mention. It's a controversial form though.
- I suggest adding "overflow: hidden" to the span with the result and also using the
<output>tag instead of the span for accessibility reasons. - You could also add padding-right to the input fields to prevent the value from overlapping with its label. By the way, I like the idea of using label tags for the units.
- You implemented BMI calculation, but it's not quite accurate for very high input values.
Just opened your GitHub, and the overview is a masterpiece. Every section of it is breathtaking. The "What I learned" section is like reading a magazine.
Marked as helpful1 - I suggest adding "overflow: hidden" to the span with the result and also using the
- @samuel-aduSubmitted 9 months agoWhat challenges did you encounter, and how did you overcome them?
I struggled with the lightbox because I didn't use any libraries. I welcome any solutions that would help me achieve a better lightbox slider.
What specific areas of your project would you like help with?I want help with the lightbox as i feel its not good enough.
P@NikitaVologdinPosted 4 months agoHi @samuel-adu!
-Well-structured semantic HTML. -Well-accessible. -Looks great on desktop, tablet and mobile. -Readable and reusable code. -According to design only a few icon sizes can be improved.
Great work! Wish all the best in the next one.
0 - P@roidzuhSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
React, Tailwind CSS, mobile-first approach
What challenges did you encounter, and how did you overcome them?none.
What specific areas of your project would you like help with?Any feedback is welcome!
P@NikitaVologdinPosted 5 months agoHi @roidzuh! Nice job. Layout looks top-notch! A few details to mention: – No hover for the menu-items – No hover for the read-more button – No "cursor: pointer" on clickable elements – Can't click read-more button because it is covered by the menu with the opacity: 0. But it is still present on the layout. – Accessibility could be better. Impossible to open the menu without a trackpad or a mouse. Assistive technologies would not understand that the hamburger menu is the button which opens navigation and is clickable.
Best, Nikita.
0 - @wyasynSubmitted 10 months agoP@NikitaVologdinPosted 5 months ago
Hi @wyasyn! –Semantic HTML –LightHouse (chrome dev tools) rates accessibility at 89 / 100 points. I believe there could be made some improvements. –Looks nice on big screens –Well structured code –Fits design
Great job!
0 - @ansarstellarSubmitted 6 months ago
- P@FixitoSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
P@NikitaVologdinPosted 5 months agoHi @Fixito! Nice job!
I want to mention a few issues with the desktop version: –paddings –margins –radio inputs layout alignment
It looks sharp on the mobile version though!
0 - P@juliengDevSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I'm particularly proud of the additional complexity I introduced to this project by challenging myself to avoid using React Router for navigation. Instead, I implemented a sophisticated state management system using the Context API and a reducer function. This approach allowed me to create a conditional rendering system for components based on the application's state, demonstrating my ability to architect complex, production-grade code structures.
The decision to use Context API for global state management, while keeping it local to the UI, showcases my understanding of when to apply different state management solutions. This approach is perfectly suited for managing UI-specific state without the overhead of more complex state management libraries.
I'm also pleased with how I tackled styling the application using Styled Components, especially when it came to dynamically styling components based on different answer behaviors. This required a deep dive into the capabilities of Styled Components and pushed me to expand my skills in creating flexible, reusable styled components.
Another aspect I'm proud of is the implementation of a dark/light mode theme from scratch. By choosing not to rely on a third-party library, I gained valuable experience in creating a theme system. While I acknowledge that my implementation might not be optimal, I remain open to feedback and improvements.
To enhance the user experience beyond the initial challenge requirements, I incorporated animation effects using Framer Motion. This addition, along with the confetti celebration at the end of each quiz, brings a dynamic and visually appealing element to the application.
For future projects, I might consider exploring more efficient ways to implement theming, possibly by researching best practices or leveraging existing libraries while maintaining a deep understanding of the underlying principles.
What challenges did you encounter, and how did you overcome them?One of the main challenges was applying the principles of "Thinking in React" to this project, especially given the additional complexity I introduced. The process involved:
- Breaking the UI into a Component Hierarchy
- Identifying the Minimal Set of App State
- Determining Which Component Owns the State
- Using Props to Flow Data Down the Component Hierarchy
- Adding Interactivity and Handling State Changes
This approach required significant reflection and planning, particularly due to the self-imposed constraints. It was an iterative process that demanded numerous modifications throughout the development cycle. Each step presented its own challenges, from deciding on the optimal component structure to determining the most efficient way to manage and propagate state changes.
Implementing the theme provider for the entire application also presented some difficulties. Ensuring that the theme was consistently applied across all components and that theme changes were smoothly reflected throughout the UI required careful consideration of component structure and state management.
What specific areas of your project would you like help with?I'm particularly interested in receiving feedback on my implementation of the dark/light theme system. If there are more efficient or elegant methodologies for implementing theme switching in React applications, I would be eager to learn about them. I'm always looking to improve my code and adopt best practices, so any insights into optimizing theme management or alternative approaches would be greatly appreciated.
Frontend_Quiz_app_React_Styled-Components_Framer-motion
#framer-motion#react#styled-components#contentfulP@NikitaVologdinPosted 5 months agoHi @juliengDev! Great work overall! Your solution: – Contains semantic HTML – Robust accessibility – Layout looks perfect across different screen sizes – Well structured code
According to dark mode, I decided to add a class on the body in the theme-switcher component when dark mode is on and remove it when it is off. My dark mode implementation looks like this:
body.dark background-color: variables.$slate-900 color: white .theme-switcher &__icon svg fill: white .introduction &__title color: white &__info color: variables.$blue .options &__item background-color: variables.$slate-600 color: white .final &__title color: white .score background-color: variables.$slate-600 &__points color: white &__questions-amount color: variables.$blue0 - P@NikitaVologdinSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I paid a lot of attention to details. Results can display numbers with up to 8 digits without breaking the layout. The app displays error messages according to validation results. I believe JS is written according to best practices and is easily scalable. I have tried to use pure functions as much as possible.
P@NikitaVologdinPosted 5 months agoHi @webdevbynight! Thank you for your detailed feedback!
- According to the Figma file, it's quite difficult to say what the designer meant with the reset button. However, I like your suggested approach more than mine.
- For me, everything works. You just need to lose focus from the custom tip input.
- Thank you for noticing. I have fixed that and didn't know about reset type. Thank you for sharing.
- Thank you for the provided article. Indeed, I am very interested in accessibility and improving it with every work. I'm looking forward to my next learning path here, which is accessibility.
- That's a good idea for the background image for icons. However, my thoughts were about accessibility: how do users find out what kind of information to enter? I thought that headlines like "bill" might not be enough for everyone, so I decided to provide alt text for the icons.
- I used
anyfor the user inputs, but after your notice, I realized that the entered inputs are always strings. - Yes, but I was sure that the elements I was looking for would be in my HTML.
- I don't understand why I should add JS files to my
.gitignore. Can you explain pls ?
0 - P@juliengDevSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
For this project, I focused on implementing a clear and well-structured logic. Each functionality is encapsulated in distinct functions with clearly defined responsibilities, such as password generation, strength evaluation, and security bar updates. This approach ensures that the code is both maintainable and easily extensible for future improvements.
I also paid close attention to thoroughly commenting the code, making it easier to understand and follow for anyone who might work on it.
The event management is well-structured as well. Event listeners are properly attached to the DOM elements, with clear conditions for activating the different options. The handling of password state and its related options is efficient, with synchronized updates to the interface.
Overall, the project is built to be both robust and user-friendly.
What challenges did you encounter, and how did you overcome them?One of the main challenges I encountered was the thought process behind the implementation, which required careful planning. I spent time ensuring that I followed best practices to deliver solid, maintainable, and readable code.
I had to do some research to implement certain features, particularly the password generation logic, the dynamic visual updates when manipulating the slider, and the rendering of the security level bars. Additionally, I looked into how to implement the copy-to-clipboard functionality, ensuring it worked seamlessly within the app. Overcoming these challenges involved learning and applying new techniques while maintaining code quality.
What specific areas of your project would you like help with?I would like to get a review on the logic part of the code, specifically to see if there might be an alternative approach that could improve it.
P@NikitaVologdinPosted 5 months agoThe layout looks great! Just for perfection: – The gap between checkboxes and labels might be decreased a bit. – Hover effect for the thumb of the range input for now it works only for active state. – For me, the max range input value looks more 20 then 16. – On sm screen resolution fonts look way bigger and label checkboxes wrap on the second line. – The "To week!" state overlaps with neighbour elements. – The white color for the copy button should be on the active state not hover – The "Copied" notification looks too little. The app works well and is nice! Logic part: – With no selected checkboxes the app gives the "Medium" state. – The app doesn't generate a password with the selected options if the character length is set to less than 6 (included). – With no selected options or length = 0 the copy button copies placeholder text to the clipboard. But it might be not a bug, but the feature =))
Sorry for such amount of comments I know it is annoying after well-completed work. But it is what it is. I believe you noticed most of them yourself, but I hope you fond something knew.
Thank you for reading Best, Nikita
Marked as helpful1 - @KapteynUniverseSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I might try React for a similar project next time, as the useState hook would probably help a lot. Even tho here are some bugs and improvements needed, as well as some repeated code but proud to finished it.
P@NikitaVologdinPosted 6 months agoHi @KapteynUniverse! I was also considering a React approach for this challenge. It seems like it would be more efficient. After reviewing your feedback, I understand that you've identified some bugs in your app, and I'm confident you'll address them. Great work on completing the challenge!
I appreciate how your app responds dynamically to each input. While I'm curious about your choice to use a "keyup" listener, I suggest considering a "change" listener for a more responsive experience. Your focus on reactivity aligns with my approach, and I'll likely incorporate similar techniques.
Finally, if I were in your position, I'd explore removing the step attribute from the input elements.
Best, Nikita.
1
