Skip to content
OverviewSolutions
6
Comments
6

∀lex

@VlekzanderBelgium70 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

  • fuergloria•140
    @fuergloriaSubmitted 11 days ago
    What challenges did you encounter, and how did you overcome them?

    wanted to build everything reusable and made a function to build the different testimonials with the needed structure. I had the data in a separate file and imported it. For the different colors I initally gave each graduate a keyword as props and wanted to build the classes dynamically, which tailwind doesn't support. so I made different color scheme objects, which each had a key and then the different classes for text color, backgroundcolor,.. This solved the problem of the dynamically made classes, since they were known at buildtime now. each graduate had the key for a color scheme in its object. but in order that it is recognized as key and not as a simple string, I had to export the interface to my data file. This worked if I ran it on my development server, but when I wanted to build the project with vercel, It told me I couldn't export the interface. So I moved all my data to the page.tsx

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

    maybe some insights or tips about the problems I encountered

    responsive grid layout change - testimonials

    #next#tailwind-css
    1
    ∀lex•70
    @VlekzanderPosted 6 days ago

    Super project! I love the way you implement this! Great job.

    0
  • ∀lex•70
    @VlekzanderPosted 7 days ago

    Clean result and close to perfection!

    0
  • ∀lex•70
    @VlekzanderPosted 8 days ago

    You're really close to the final result, congratulations! Just a few micro adjustments will be enough to get a perfectly identical rendering!

    0
  • Nguyễn Thanh Sang•60
    @Lux0702Submitted 9 days ago
    What are you most proud of, and what would you do differently next time?

    A clean, structured layout with Tailwind CSS. Dynamic button generation with JavaScript. Smooth hover and transition effects. Next time : Use innerHTML cautiously to avoid performance issues (better to use appendChild). Improve accessibility by adding aria-labels to buttons.

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

    Tailwind didn’t recognize hover:bg-green-custom because utility classes in @layer don’t automatically generate hover variants. Using innerHTML += can cause performance issues and overwrite event listeners. How I Overcame Them: Explicitly defined .hover:bg-green-custom:hover inside @layer utilities. Switched from innerHTML += to createElement and appendChild for better performance.

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

    Improving Accessibility – Adding ARIA attributes for better usability.

    Social links profile

    #firebase#tailwind-css
    1
    ∀lex•70
    @VlekzanderPosted 9 days ago

    Nice project ! You are very close ! :)

    0
  • P
    BlonoBuccellati•60
    @BlonoBuccellatiSubmitted 23 days ago
    What are you most proud of, and what would you do differently next time?

    I take pride in the fact that I've gotten used to UI development in just a few days. This time, I introduced "prettier-plugin-tailwindcss." Next time, I want to customize the elements listed in the design system to make them more suitable.

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

    The first challenge was with the Image tag from Next.js's next/image. Since the height and width were automatically adjusted, I had to set fill, but controlling its behavior was quite difficult. I found a YouTube video explaining how to use it, which helped me resolve the issue.

    The second challenge was customizing Tailwind CSS. I solved this by reading several articles and the Tailwind documentation. However, I realized that my knowledge is still far from sufficient.

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

    Since my knowledge of React, Next.js, and Tailwind is still shallow, I appreciate any kind of feedback.

    What I’m particularly concerned about is how much and how to customize the design system. I understand that in the Utility-First approach, premature abstraction should be avoided, but I’m not sure how to strike the right balance. If you have any insights, I would greatly appreciate it.

    Blog preview card using tailwindcss, next.js, flexbox

    #next#tailwind-css#react
    1
    ∀lex•70
    @VlekzanderPosted 13 days ago

    Great project, you're really close!

    0
  • NunoJDMachado•100
    @NunoJDMachadoSubmitted 14 days ago
    What are you most proud of, and what would you do differently next time?

    Things I'm proud of:

    • Learning to install tailwindcss on a new project
    • Using flexbox efficiently
    • Extending custom CSS classes to tailwindcss

    Things I'd do differently next time:

    • Avoid fixed widths
    • Download font files from google fonts
    What challenges did you encounter, and how did you overcome them?

    • Tried installing tailwindcss using vite but ran into some error. Using tailwind CLI worked.

    • Was initially using classes like w-1/4, w-1/2, etc., but noticed that on smaller screen sizes the card was getting too narrow. Went for fixed width instead.

    What specific areas of your project would you like help with?
    • I would like to know whether this approach of using fixed widths is valid. I just tried to eyeball the width of the card from the design screenshot and typed some width in pixels. Upon testing it seems to be working on all screen sizes, but surely there must be a more optimal way? Is there a better practice like using min width, percentages or something?

    QR code card using tailwindcss

    #tailwind-css
    1
    ∀lex•70
    @VlekzanderPosted 13 days ago

    The project looks great, you're almost there! All you have to do is adjust the color and dimensions and it's perfect!

    0