Skip to content
OverviewSolutions
28
Comments
7

Achref KS

@AchrefFastTunisia530 points

"Success is not final; failure is not fatal: It is the courage to continue that counts."

I’m currently learning...

MERN Stack

Latest solutions

View more solutions

Latest comments

  • Achref KS•530
    @AchrefFast

    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
  • Achref KS•530
    @AchrefFast

    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 😃.

  • Achref KS•530
    @AchrefFast

    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.

  • Achref KS•530
    @AchrefFast

    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.

  • Achref KS•530
    @AchrefFast

    Hi Aakash,

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

    Thank you kindly .

  • Achref KS•530
    @AchrefFast

    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

View more comments