IP Address Tracker using React + Tailwind + Leaflet + Express

Community feedback

• 

  Abdul Khaliq 🚀•72,460

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  COMPONENT MEASUREMENTS 📐:

  • The h-[100dvh] utility class is used to define height: 100dvh, But we want to use min-height: 100dvh for div instead of height: 100dvh. Setting the height: 100dvh may result in the component being cut off on smaller screens.

  ---

  • For example; if we set height: 100dvh then the body will have 100dvh height no matter what. Even if the content spans more than 100dvh.

  ---

  • But if we set min-height: 100dvh then the div will start at 100dvh, if the content pushes the div beyond 100dvh it will continue growing. However if you have content that takes less than 100dvh it will still take 100dvh in space.

  ---

  • So we want to use min-h-[100dvh] utility class to define min-height: 100dvh

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1

  ---

  

  Rashid Shamloo•570

  @rashidshamlooPosted over 1 year ago

  @0xAbdulKhalid Thanks for your feedback. while what you said is generally true and I use min-height in my other challenges as well, in this challenge, the content does not expand more than 100dvh and there's a quirk with Leaflet that the containing element has to have a defined height:

  from this page:

  " Make sure your map container has a defined height "

  So If I change h-[100dvh] to min-h-[100dvh] the map won't render at all.

  The app should work fine down to around 600px height. but still, for the edge case of height being less than that, I've added min-h-[40rem] on top of h-[100dvh] which will make the app have at least 640px height.

  *There's also the option of removing height and min-height from the parent div, and setting them on the direct map container element instead using h-[calc(100dvh-17.5rem)] min-h-[22.5rem] which archives the same result. (17.5rem is the height of the header element and 40rem-17.5rem = 22.5rem)

  0
• 

  Kamlesh Rajesh Yadav•5,040

  @Kamlesh0007Posted over 1 year ago

  Congratulations on completing the challenge! Your hard work and dedication are truly admirable. As you continue to hone your skills, here are a few suggestions that may be helpful:

  1. Keep practicing and learning new things. The more you challenge yourself, the more you'll grow as a developer.

  2. Seek feedback from others. It's always helpful to get a fresh perspective on your work and learn from constructive criticism.

  3. Collaborate with other developers. Working with others can help you learn new techniques and improve your coding skills.

  Again, congratulations on completing the challenge, and I wish you continued success in your coding journey! 😁

  0