@aouintihouariSubmitted 2 months ago
P
Marc Francis
@marcfrancissAll comments
- @Jameell-AdjeiSubmitted over 1 year ago
Two questions I did have is for people who didn't use a 3rd party library for the masonry grid. How did you accomplish it? What was your thought process while creating the grid?
Any feedback would be appreciated and thank you for taking the time to look at my solution.
Galleria site created with React, TypeScript, SCSS, and Macy.js
#react#sass/scss#typescript#vite#framer-motion - @echocode1Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
it was success trying out react for the first time after a react course
What challenges did you encounter, and how did you overcome them?the issue I had was deploying basically with GitHub since, I haven't deployed a react project before and don't know how it works .but after some research I was able to do it
What specific areas of your project would you like help with?creating components and how to structure my react project well .i will love input on that
- @poissonfouSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of making the website more accessible by making it possible to interact with the accordion and the tabs section through the keyboard. I'm also happy to have implemented a simple and intuitive solution to create the accordion section.
What challenges did you encounter, and how did you overcome them?I've had issues with the layout jumping when I added hover effects to elements like buttons, because it would add a border to those elements when they previously didn't have them. I solved it by adding a transparent border to those element in their default style.
What specific areas of your project would you like help with?I still struggle to properly name my classes. I've tried to implement a BEM architecture but ended up breaking it a few time because I thought the class names were becoming to verbose. I would appreciate if someone could point out how I could've better name my classes and implemented BEM.
- @imandreansSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud that I can design the mobile view first. Next time I need to pay attention more to the resolution and the layout.
What challenges did you encounter, and how did you overcome them?It's really hard to make the grid of screen view, so I kept trying till I get it right.
I also had a hard time to build the slide effect when click the arrow button. I solved it by asking claude AI for a code. After I implemented the code, I analyze the code.
What specific areas of your project would you like help with?I think more on the design, because there a lot of things I want to fix on this current design.
- @poissonfouSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I am happy that I was able to utilize pseudo elements to create some of the pages elements, and to also have implemented a mobile first approach. It was also my first time using SASS and I was happy to see how easy it is to use it.
What challenges did you encounter, and how did you overcome them?When I started the project I styled the page for desktop first and found it hard to make it responsive for smaller devices. By using a mobile-first approch, I managed to overcome this issue.
What specific areas of your project would you like help with?I had issues making the creations grid section align with the rest of the design in desktop screens, I would appreciate if someone would point my mistake and give an ideia for making the design work
- @porumbachanovSubmitted 3 months agoWhat specific areas of your project would you like help with?
I tried to use the BEM methodology, would appreciate some feedback if I'm using it correctly.
- @srijanssSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
- I learned new aria roles and attributes to make the game accessible, like grid, gridcell etc.
- I learned how to use aria-live attribute to make the player turn live for screen readers.
- I learned how to use CSS :not() pseudo-class to style the cells that are not occupied by a mark.
- I learned how to use CSS :hover and :focus pseudo-classes to style the cells when hovered or focused.
- I learned how to use CSS :before pseudo-element to add an icon to the cells when hovered or focused.
- I learned how to use CSS variables to set the icon size and position.
- I learned how to use aria-label attribute to provide a label for the grid cells.
- I learned how to use aria-describedby attribute to associate the instructions with the grid cells.
- I learned how to change cell state using data attributes.
- I learned how to use Javascript's map method to render the cells.
- I separated the game logic and data store from the UI components to make the code more modular and maintainable.
- I learned how to use Javascript's every method to check if the game is a tie.
- I learned how to use Javascript's filter method to filter the cells that match the active mark.
- I learned how to use Math functions to generate a random number.
- It was challenging to make the game status, turns, modal data live for screen reader users. Use of aria-live for turns and aria-describedby for modals and menu which points to visually hidden element in the div helped
- I have used header, main and footer inside web-components. Is it a best practice to do it this way ? Does this satisfy the accessibility requirement?
- Any feedbacks regarding a11y are welcome
- @lapprantiSubmitted 6 months ago@marcfrancissPosted 3 months ago
Impressive solution to this challenge! 💯
Marked as helpful0 - @danmlarsenSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I'm happy that I was able to make a working app without relying on frameworks.
What challenges did you encounter, and how did you overcome them?I recently learned typescript so I had some challenges adjusting to the somewhat stricter rules. But it was mostly enjoyable and a great learning experience.
What specific areas of your project would you like help with?I appreciate any helpful feedback.
- @kaamiikSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I’m most proud of how I focused on accessibility this time around. I ensured that my components and the hamburger menu in the mobile view were accessible, which is something I put a lot of effort into. If I were to do this project again, I would use a more robust framework like React to handle the state management and interactivity in a more scalable way.
What challenges did you encounter, and how did you overcome them?The main challenge was implementing the CSS layout for the desktop version, especially using CSS Grid and subgrid to achieve the desired design. To tackle this, I broke down the layout into smaller, manageable components and used a combination of Astro's component structure and SASS for styling. I also faced difficulties in making the hamburger menu accessible, so I researched best practices and ensured it worked seamlessly with keyboard navigation and screen readers.
What specific areas of your project would you like help with?I’d like feedback on the accessibility aspects of my project, particularly regarding the implementation of the hamburger menu. I want to make sure it meets all accessibility standards and provides a smooth experience for users with assistive technologies.
- @35degreesSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I didn't nail the a11y this time but I worked out a decent solution with keyboard navigation and screen reader.
What challenges did you encounter, and how did you overcome them?Lots of reading about a11y form best practices. It was hard to combine what I've learned to this point with how to structure a11y syntax. It's a long process to synthesize the two.
What specific areas of your project would you like help with?more fluent a11y code
