@AbbasSaad27Submitted over 3 years ago
Hi guys!! This is my first time completing a frontendmentor challenge using js. Had quite fun doing this challenge!! Any feedback would be really appreciated!
Oleh Tovkaniuk
@OlehTovkaniukAll comments
- @OlehTovkaniukPosted over 3 years ago
On mobile the main banner is closing view of the map. Also the application doesn't work in Opera or Brave since those browsers blocking it by adblockers
1 - @MatthiasSmithSubmitted over 3 years ago
First time using styled components outside of a tutorial.
I added loading and error states for when the API is fetching and/or returns unsuccessfully.
Learned a lot about leaflet. And getting environment variables to work in a production environment. Guess I relied on dev-ops folks too much in the past. 😅
@OlehTovkaniukPosted over 3 years agoDid you have any issues with AdBlocker in Opera and Brave browsers??
0 - @ByKyZoSubmitted over 3 years ago
I tried to make the application more complete by adding an edit system, all feedback is appreciated! :D
@OlehTovkaniukPosted over 3 years agoI see you put some decent work in this challage. And even made functionality for data cashing in local storage. And all those animations. And feature for editing todos. Great efforts, great work!
1 - @DrallasSubmitted over 3 years ago
This is my 3rd newbie challenge submit and I enjoyed the process of hacking this card component together. Building such a 'simple' card component isn't easy for a 'Newbie' and it requires some time to think over before trying to do it properly.
Feedback would be welcome How is the responsive experience; what can / should I improve (*see Note)? I try to use BEM but still have doubt if i used it correctly Anything else that I missed or should improve.
Note: Related to BEM I recommend this video: https://www.youtube.com/watch?v=iyR6RXUZFQ8 it's quite good and explains it in visual detail.
Where I struggle is how should elements be named when there are multiple levels of nesting.
<div class="card__mid"> <div class="card__text"> <div class="card__name">Victor Crest <span> 26</span></div> <div class="card__location">London</div> </div> </div>@OlehTovkaniukPosted over 3 years agoyou could make width of your card block be "max-width", then it would look good at 350px screen resolution and lower
0 - @MatthiasSmithSubmitted over 3 years ago
First time using styled components outside of a tutorial.
I added loading and error states for when the API is fetching and/or returns unsuccessfully.
Learned a lot about leaflet. And getting environment variables to work in a production environment. Guess I relied on dev-ops folks too much in the past. 😅
@OlehTovkaniukPosted over 3 years agoAre you aware that enviroment variable doesn't secure your API key? Here is discussion about this theme: https://stackoverflow.com/questions/48699820/how-do-i-hide-api-key-in-create-react-app
1 - @KlekarSubmitted almost 4 years ago
Any feedback is welcome. I noticed that at some resolutions the moving part of the counter makes slight (like 1px) move to the right for the duration of the animation (Opera browser), which I assume is side product of rendering "transform: rotateX()", is that correct? If so, is there an easy way to control/fix how it renders?
@OlehTovkaniukPosted almost 4 years agoYou've done some great job, Klekar. You've inspired me to try this challange though I think it won't be an easy nut for me.
0 - @Arnob-007Submitted almost 4 years ago
Any suggestion on mobile drag & drop functionalities will be much appreciated.
@OlehTovkaniukPosted almost 4 years agoAs for me everything looks ok except that drag & drop doesn't work on mobile. But this is the way how Html drag and drop API work. You could use library Sortable for this purpose. It is really easy to connect and customize.
0 - @abhik-bSubmitted almost 4 years ago
I have used SortableJS for making drag n drop available for mobile devices Please provide a feedback on how I should improve this 🙏
If you are new to frontend mentor and you are struggling with this challenge then I have also created youtube video while creating this solution which can be used as a reference:https://youtu.be/lZE0Qydl4ko
* This video shows pure javascript way for drag n drop and also array sorting after drag n drop
@OlehTovkaniukPosted almost 4 years agoGood job! There are some bugs but good work! I'll take some ideas from your solution, thank you Abhik
1 - @JulianaOliveiraMeloSubmitted about 4 years ago
Hello! 👋 My first challenge on FrontEnd Mentor 🥳🎉🍾 I'm still learning and all feadback ould be appreciated. Thanks 🤗
@OlehTovkaniukPosted about 4 years agoWow, I like it. Text animation is cute. The container doesn't change it sizes when I click a dropdown. Though you have some adaptivity twerks at 1024x1366 resolution(iPad Pro resolution). You can fix it if you want 🙂.
3 - @OlehTovkaniukSubmitted about 4 years ago
I had hard time with positioning background images of the first section - showcase block). Mobile view looks ok but desktop view is quite tricky on different resolutions. It is hard to position so these background images looks good on any desktop resolution. Still I'm not happy with the solution that I made because it is quite different from the design. I would be grateful for any help with this issue.
@OlehTovkaniukPosted about 4 years agoAlso I would like to notice that the screenshot of the site in the design comparison somehow is not correct. Those buttons that were shown broken in the screenshot in real are looking correctly. You can see it by the link "PREVIEW SITE"
0 - @cornelia-schulzSubmitted about 4 years ago@OlehTovkaniukPosted about 4 years ago
I can't judge your code because I'm not into React and moreover Typescript. But I like what I see in terms of responsiveness.
0 - @abdelmawlaSouatSubmitted about 4 years ago
For the responsive design, you need to refresh the page..
@OlehTovkaniukPosted about 4 years agoAccordion works just fine. Have gotten the answers to drop down without shifting the entire list both up and down. How do you achieve this?
0
