Skip to content
OverviewSolutions
28
Comments
7
Achref KS
@AchrefFast

All comments

  • Achref KS•530
    @AchrefFastPosted over 2 years ago

    Hey Cosmo , nice work on this one. The layout for both desktop and mobile is great. The hover states look nice as well. The error message when there are any input fields empty works fine.

    There is only one thing I guess you forget: the error message when the email address is not formatted correctly. When I write an invalid email format, a message error should show up.

    Overall, great work. Keep it up.

    Happy coding.

    Marked as helpful
    1
  • Achref KS•530
    @AchrefFastSubmitted almost 3 years ago

    Hi everyone,

    I would like to know if my way of loading the JSON file is right. I feel like there is some kind of delay when the page is loaded the first time.I believe the reason is because the await fetch() I used to load the JSON data.

    Is there any way to avoid such behavior?

    Any suggestion, advice or feedback would be really appreciated.

    Thanks.

    Mobile-first Workflow, Javascript with JSON file, CSS Grid and Flexbox

    2
    Achref KS•530
    @AchrefFastPosted almost 3 years ago

    Hi gusfoca,

    Thanks for your reply, I really appreciate it.

    Concerning the XMLHTTPRequest, I did some research and I found that the fetch() is actually faster than the XMLHTTPRequest especially when it comes to decode JSON data.

    Resource: https://gomakethings.com/the-fetch-api-performance-vs.-xhr-in-vanilla-js/ .

    So, it seems that this is not what causing the problem.

    Regarding the insertAdjacentHTML : In my solution I used the append method instead of the insertAdjacentHTML. I wasn't sure which one is more performant, so I did some digging and from what I found, it seems that the append method is slightly more performant than insertAdjacentHTML.

    Resources:

    • https://www.measurethat.net/Benchmarks/Show/11738/0/insertadjacenthtml-vs-append#latest_results_block

    • https://medium.com/codex/what-is-faster-to-insert-into-dom-html-or-dom-nodes-ff11586f8570

    Finally, I took a look at the Reflow / Repaint subject that you mentioned. It seems that in my solution I used a lot of Reflow by updating the container of the fields and appending a new node for each property in the JSON file. So, in order to confirm if that is the cause of the problem, I changed the data from being a JSON data to a simple array that contains the same array in the JSON file. And by doing that the problem disappeared and what that means is that the Reflow isn't the cause of the problem, but instead the loading of the JSON file is.

    Thank you so much for your suggestions, they made me learn many new things and deepen my understanding of others.

    Thanks again 😃.

    0
  • Achref KS•530
    @AchrefFastPosted almost 3 years ago

    Hi Alex,

    Thank you so much for taking the time to look into my solution, I really appreciate that.

    When working with grid ,I always get confused between the place-items and place-content properties, and I end up using both of them to make sure that everything is centered.Actually, I didn't know that the place-items could result in breaking the layout when it used the wrong way. Thank you for letting me know.

    Concerning the place-content with the fraction unit , can you please clarify why the place-content has no effect.

    Thank you kindly.

    0
  • Achref KS•530
    @AchrefFastPosted almost 3 years ago

    Hi @techanthere,

    Thank you so much for taking the time to look into my solution, I really appreciate that.

    Considering the list items, I used anchors because I assumed that each item is a link to a specific subject. I actually wasn't sure, since I don't have the design file.

    About the "30 day,....", I didn't notice I used h2, thank you for mentioning that.

    This was a big help. Thanks again.

    1
  • Achref KS•530
    @AchrefFastSubmitted almost 3 years ago

    Hi everyone,

    I tried to make my solution look as close to the design as possible, but I'm not sure about the social media share links part.

    Any suggestion, advice or feedback would be appreciated.

    Thanks.

    Mobile-first workflow with CSS Flexbox and Grid

    2
    Achref KS•530
    @AchrefFastPosted almost 3 years ago

    Hi Aakash,

    I truly appreciate your reply. I'm relieved that there is no problem in the solution.

    Thank you kindly .

    0
  • Achref KS•530
    @AchrefFastSubmitted almost 3 years ago

    Hi everyone,

    The way I handled the "Hide/Show the answer to a question when the question is clicked" part with JavaScript seemed to me not straightforward. Is there any better way to deal with it?

    Any advice, suggestion or feedback would be a big help.

    Thanks.

    Mobile First Workflow FAQ According Card Solution with CSS Grid

    3
    Achref KS•530
    @AchrefFastPosted almost 3 years ago

    Hi Dave,

    I really appreciate your time for giving me your feedback, this was a big help.

    Actually I didn't know about the details element before, this was the first time I heard of it, so thank you for mentioning it.

    As a result, I decided to use your approach instead of the simple div, and working with it everything became much easier. I didn't have to worry about the hide/show feature anymore, since its embedded within the details element by default. Also, adding the animation come to be more simpler with the help of the details[open] attribute selector.

    I managed to add these features to my solution:

    1. Keyboard access functionality.
    2. Animate the opening of the question.
    3. Show the selected question and hide the others.

    Thank you so much for your advice and sharing your experience, this helped me a lot.

    Best Regards,

    Achref

    0
  • Achref KS•530
    @AchrefFastPosted almost 3 years ago

    Hi David,

    After some research, I found that the cause of the problem was that Chrome doesn't support the background-clip: text; property ,and I actually used it to create the stars.

    In my case I didn't really need the background-clip: text. So instead, I just removed it and used the color property to color my stars, and that fixed the problem.

    Thanks for your reply.

    0