Skip to content
OverviewSolutions
4
Comments
5

JdccDev

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

  • Recipe Page

    #astro
    JdccDev•60
    Submitted 8 months ago

    One thing I am interested in knowing is...

    If we turned the recipe page into more of a web app, where users can upload their own Recipes, how would you structure the data? In Astro, it looks like we could pull the Markdown or HTML representation of the recipe, and apply some rendering on top of it. However, I am curious to hear what type of data structure would be used to force a clean consistent structure between recipes.

    e.g.

    recipe: { 
  title: string,
  description: string,
  preptime: string, // expect markdown and apply the purple styling on here
  ingredients: string,
  instruction: string,
  nutrition: array

    Would this be on the right track? Is it over engineered? Any feedback would be appreciated! Thanks

    0 comments

  • Social Links Profile

    #astro
    JdccDev•60
    Submitted 9 months ago

    Would like to hear some opinions on the way I componentized the social profile. The idea is the data could be managed somewhere and updated without any updates needed for the UI

    A slightly modified version of the component from the code:
    1 comment

  • Blog Preview Card

    #astro
    JdccDev•60
    Submitted 9 months ago

    If anyone has any hints on how to truncate the edges of the image, I would like to hear the secret behind the magic trick :)

    Thanks for reading!

    1 comment

  • Initial QR Code Challenge

    #eleventy
    JdccDev•60
    Submitted 9 months ago

    If you have time to leave a comment, I would like to hear what you think about the most "lightweight" way to get a simple demo app like this up and ready.

    Building muscle memory around getting a quick demo app up and running could be very helpful when trying to do development on a small vertical of a larger project. What is your strategy for a quick feedback loop when working in a large codebase?

    1 comment

Latest comments

  • AndreeaKiara•40
    @AndreeaKiara
    What specific areas of your project would you like help with?

    Facing some issues with the margins not showing properly on screenshot, looks okay on the deployed site. Will look into it

    Recipe page using styling variables

    1
    JdccDev•60
    @jdcc1024

    Hi Andreea,

    I took a look at your margin issues. On my screen the deployed app looks similar to what was shown in your chalenge screenshot. Maybe it has to do with our screen resolution?

    It seems some of the code you added in the beginning could be causing the problem. Removing this fixes your recipe card's y-axis placement.

    /*    3. Allow percentage-based heights in the application  */
html,
body {
  height: 100%;
}

    Then you can adjust the margin-top of the card class to make it look closer to the screenshot.

    Another suggestion you can look into is using the <table> element for your nutrition list at the end. a table with 100% width will look closer to the example as well :)

    Keep up the great work!

    Marked as helpful
  • JdccDev•60
    @jdcc1024

    Love the naming scheme you used for your colors in the recipe-page astro file!

  • Mario Chico•70
    @Mario-chico
    What are you most proud of, and what would you do differently next time?

    Reuse the qr component for this project and didn't break that one. I think css have room for improvement.

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

    The re-utilization of components

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

    Component composition

    Blogpreview on Astro components

    #astro
    1
    JdccDev•60
    @jdcc1024

    Love the idea of reusing your components from the previous project. You'll have your own version of shadcn in no time :)

  • Ayhem18•40
    @ayhem18
    What are you most proud of, and what would you do differently next time?

    I think the solution is good enough for a Newbie Challenge. I focused mainly on the site's structure and ensuring all components behave as expected.

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

    I would mainly like some feedback on my structure:

    1. setting a container for the 3 components: (the image and the 2 paragraphs) such that:
    • position: 'fixed'
    • 40% to the left and 40% to the right of the viewport
    • width=20% and the element is centered nicely
    1. each sub-component will be of width: 90% and of margin: 5% so each sub-component will be centered nicely within the container

    What are other better alternatives, for example? What are the potential issues with my approach?

    Simple Solution using CSS and HTML

    2
    JdccDev•60
    @jdcc1024

    Hey Ayhem! Congrats on getting your challenge up and running! I saw your feedback questions while scrolling through my feed.

    An alternative to the solution you used (absolute positioning, viewport percentages, etc) is to use the flexbox concept. In my experience, flexbox is a lot closer to what you will encounter from UX developer designs and responsive layouts in the future.

    For the QR code challenge, take a look at flexbox, flex-direction, justify-content, and align-items. These 4 css settings will allow you to center your QR code card into the middle of the screen.

    { display: flex, flex-direction: column, justify-content: center, align-items: center }

    In your current solution, one drawback to using % is the look of the page. By using absolute and % based size calculations, your design may look very different to what your future customers see, depending on their window size. You can see it for yourself if you open your page and shrink the width of the window. The QR code will shrink, and you will end up with too much whitespace on a smaller-width screen.

    Make sure to build the habit of testing your UI at different window sizes :) Keep up the good work!

  • JdccDev•60
    @jdcc1024

    Love the use of css vars!

    You can consider moving some of the doc images into a docs folder instead of the assets folder.

    Great work!