Skip to content
OverviewSolutions
39
Comments
5

Clark Tolosa

@clakrPhilippines550 points

ambitious. passionate. developer.

Latest solutions

View more solutions

Latest comments

  • Moussa•540
    @Mahmoud974
    What are you most proud of, and what would you do differently next time?

    I created this mockup with Vite.js; there was no need to use Next.js. I used TypeScript and shadcn. Look at :)

    Recipe page

    #typescript#vite#tailwind-css
    1
    Clark Tolosa•550
    @clakr

    Hi! 🙋‍♂️ Congrats on completing the challenge.

    I like the approach where you're just importing the contents of the recipe from a .ts file, I think it's a good practice since it promotes a single source of truth.

    If you have questions, concerns, feel free to bump me through this thread! 😁

  • Nitin Srivastava•40
    @nitindev3d
    What are you most proud of, and what would you do differently next time?

    I learned how to setup a tailwind CSS project with react + vite + typescript.

    Main challenge was to get started with the tailwind CSS that I tried for the first time.

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

    Main challenge was to setup the project configuration in vite and tsconfig file for tailwind css.

    Response Social Links page

    #react#typescript#vite#tailwind-css
    1
    Clark Tolosa•550
    @clakr

    Hi! 🙋‍♂️ Congrats on completing the challenge.

    I suggest moving the variable buttons outside of the App component so it doesn't need to be recreated every time the App re-renders, maybe a bit irrelevant since the value isn't big of a data but I think it's a good practice to start a habit of saving processes when re-rendering ;)

    When iterating an element in React, it's best to have a key with a unique value attribute in the elements since this also saves processes of diffing the DOM tree when the App re-renders.

    I've been using Tailwind for a while now and I am curious what's your experience of using it in this project?

    If you have questions, concerns, feel free to bump me through this thread! 😁

  • P
    Aaron Deimund•70
    @Aaron-Deimund
    What are you most proud of, and what would you do differently next time?

    I used Vite for the first time on this one. I also feel like I did a good job with the semantic layout. I tried some visually hidden headers to maintain the hierarchy, and I'd be interested to know how other people would structure the data.

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

    Getting Vite to deploy to a folder Github pages could see. I ended up putting it into a docs folder, which is the other place Github allows you to serve from by default. I saw there was some documentation on using .htaccess to change the root folder, but I couldn't get it to work. I also saw documentation on Vite for Github specific builds after I already set up this repo.

    I also had problems getting the blog preview image to display in the flex-box card without a container div. I feel like the container div on the image is unnecessary, but I couldn't get it to maintain its width without it.

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

    How others handle the hierarchy of headers. the blog title was clearly not an H1, but that's where you have to start. I ended up just setting some headers and organizing things with hidden elements.

    Blog Preview

    #vite
    1
    Clark Tolosa•550
    @clakr

    Hi! 🙋‍♂️ Congrats on completing the challenge.

    I did not know about the Vite and GitHub Pages issue so thank you for sharing what you have experienced to the community, your experience sheds a light and potentially be helpful to someone.

    Your approach with the semantic layouts and hiding them visually is what most would do, even I. But if you really want to set the blog title as an <H1 />, you can use the order CSS Property. It is a tradeoff though, as you will sacrifice code readability for semantic layout.

    If you have questions, concerns, feel free to bump me through this thread! 😁

    Marked as helpful
  • Clark Tolosa•550
    @clakr

    Hi! 🙋‍♂️ Congrats on completing the challenge.

    I have some suggestions that you can try on your next challenges:

    Again, good job on completing the challenge, and we're glad to have you in this community!

    If you have questions, concerns, feel free to bump me through this thread! 😁

  • Clark Tolosa•550
    @clakr

    Hi! 🙋‍♂️ Congrats on completing the challenge.

    I've done this challenge through using display: grid on default (smaller screens / < 1440px) and providing grid-template-columns: on bigger screens, however this approach uses @media screen or basically media queries and if you want an alternative solution, there's that.

    However, if you don't want to use @media for whatever reasons, I suggest looking into @container queries, and these are some resources that are helpful.

    The only caveat for this is, it's still in development for Firefox, Firefox for Android, and Samsung Internet, but it's fully supported by other modern browsers. You can look into @container's Browser Compatibility.

    If you have questions, concerns, feel free to bump me through this thread! 😁

    Marked as helpful