Skip to content
OverviewSolutions
5
Comments
5

Tomodachi-01

@Tomodachi-0150 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Tomodachi-01•50
    @Tomodachi-01Posted about 1 month ago

    wow it looks nice i also did the same sizing mistake

    0
  • Tomodachi-01•50
    @Tomodachi-01Posted about 1 month ago

    its nice vro

    0
  • zlowram•90
    @zlowramSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I'm quite happy with the outcome!

    What challenges did you encounter, and how did you overcome them?

    The main challenge I had was making the links to expand to the entire <li> element. I initially had the main CSS bound to the <li> elements and then I realized I had to shift it to the links and use display:block.

    What specific areas of your project would you like help with?

    Any feedback to improve the solution is welcome! Specially around HTML semantics, accessibility, or optimizing the CSS.

    Responsive social links profile using flexbox and media queries

    1
    Tomodachi-01•50
    @Tomodachi-01Posted about 1 month ago

    its nice bruv

    1
  • jdrodriguez2707•170
    @jdrodriguez2707Submitted about 1 month ago
    What challenges did you encounter, and how did you overcome them?

    I couldn't find a way to reduce the text size in smaller screens like it was required in the design without using media queries. But at the end, GitHub Copilot helped me and I could use some CSS functions like clamp() and calc() to overcome this. And now the card and the text is responsive without using any media queries.

    What specific areas of your project would you like help with?

    I wonder if it's right to use the property aspect-ratio in this case. Does it have some effect on the images? For example:

    .author-avatar {
  width: 3.2rem;
  height: 3.2rem;
  max-width: 64px;
  max-height: 65px;
  aspect-ratio: 64 / 65;
}

    I'd appreciate any feedback about this. Thanks!

    Responsive blog preview card

    1
    Tomodachi-01•50
    @Tomodachi-01Posted about 1 month ago

    Niceeee

    1
  • Visavilwa Daisy•40
    @visavilwa1Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I’m most proud of successfully implementing a responsive and visually appealing QR code scanner UI while ensuring smooth functionality. The project helped me improve my HTML, CSS, and JavaScript skills, particularly in handling user interactions and optimizing layouts for different screen sizes. I also enjoyed working with modern frontend tools and frameworks to enhance the design and user experience.

    What challenges did you encounter, and how did you overcome them?

    1. Handling Camera Access and Permissions Challenge: Some browsers and devices blocked access to the camera, making real-time QR code scanning difficult. Solution: I implemented proper permission requests and provided fallback options like manual QR code uploads. Testing across different browsers helped identify and resolve compatibility issues.

    2. Optimizing QR Code Detection Challenge: The scanner struggled with low-quality or distorted QR codes, affecting accuracy. Solution: I improved image processing techniques, adjusted lighting conditions, and optimized JavaScript libraries like qr-scanner to enhance detection.

    3. Ensuring Responsive Design Challenge: The layout did not adapt well to smaller screens, making it difficult to use on mobile devices. Solution: I used CSS media queries and flexible grid layouts to create a seamless user experience across all screen sizes.

    4. Improving Performance Challenge: The scanner lagged when processing multiple QR codes in real time. Solution: I optimized JavaScript execution by throttling scans, reducing re-rendering, and using Web Workers for better performance.

    What specific areas of your project would you like help with?

    Optimizing QR Code Detection: How can I improve scanning accuracy, especially for blurry or low-light QR codes? Enhancing Performance: Are there better ways to reduce lag when processing multiple QR codes in real time? Improving Mobile Responsiveness: What are the best practices for ensuring smooth scanning and UI on smaller screens? Security Considerations: How can I prevent potential security risks, such as malicious QR codes or camera access vulnerabilities?

    QR Scanner Code

    1
    Tomodachi-01•50
    @Tomodachi-01Posted about 1 month ago

    You did everything great dude also to resolve sizing issue you can see figma file

    0