Design comparison
Solution retrospective
Since this project has a simply layout and somewhat straightforward functionality, I was able to finish it within 3 hours.
What challenges did you encounter, and how did you overcome them?I had difficulty updating the map and marker location when user inputs a new ip address, took some time googling and going through the LeafletJS docs and found out there are different methods to set up the map and set a new view with the existing map.
What specific areas of your project would you like help with?With the scale of the project in mind, I started without using any framework or server-side runtime. However, I have learned that it is not ideal to store api keys directly in JS files. I could not find a way to protect the key in pure client side code. Next time, I might do it differently so that I have protection of the api key.
Community feedback
- @DanijelAdrinekPosted 8 months ago
As a frontend developer, I will give you some advice on how to become better and do better work, my job is to make the results as much as the design as I possibly can, with only few pixels of variation, and to do that, we take the design we get in figma, we lower the size of our browser to that size so it matches, we take a screenshot of our work, we paste it figma, reduce its opacity to 50%, and we see if what we created literally matches the design in few pixels of difference.
Another suggestion I would give is to use JSDoc to document your code, it will make your code much more readable, here is a link to get you started: Writing Well Documented JSDoc code - Linkedin
also, as for the issue with API key, I have a solution for you, idk if you wanna implement it this way, or some other way, but I hope this helps you: How to use environment variables in vanilla JS
Edit: node_module should never be added to your github, you need to add that folder to your .gitignore file, the person copying the folder from github will still have package.json file, and after writing
npm installthe folder will be automatically installed with all the dependencies to the person's PC like that.
also, if you need a template for your README.md files that looks good, feel free to take a look at my README.md file here!
Marked as helpful0@jaymiyamPosted 8 months ago@DanijelAdrinek
Hello Danijel, thank you so much for your feedback! It is so kind of you to take your time to help and I am grateful. All of your advices are very helpful and I have read through them all, especially the .env article and your README file :)! Will definitely try to improve these aspect on my next try.
Thanks again and all the best to you!
1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord