Skip to content
OverviewSolutions
44
Comments
25

Connor Z

@zuolizhuNew York5,115 points

Frontend Developer @Crizit.

I’m currently learning...

React, NestJS

Latest solutions

View more solutions

Latest comments

  • Connor Z•5,115
    @zuolizhu

    Hey APG! Yooooo dat loading screen 😯😯😯 is dope 🤩! It just brings your work to another level! And the way you managed the animations is so smart 🥳!

    I'm glad to hear you still like Svelte 😆, Svelte also supports component-scoped scss 😏, just few steps and it will just work, check out this article. (This is the scss setup I found before, if there is a simpler way to do, please let me know😝)

    keep coding and happy coding 🙌!

  • Connor Z•5,115
    @zuolizhu

    Hey Owolabi,

    You didn't put your assets (css files and image files) into the folder, that's why you got 404 errors on the live site.

    Try to change your

    <link rel="stylesheet" href="css/styles.css">

    to

    <link rel="stylesheet" href="/styles.css">

    Same for your images, remove ./images.

    And checkout the result 😉.

    Happy coding!

  • Connor Z•5,115
    @zuolizhu

    Hey @buchi,

    Nice job on this challenge 🙌! prop drilling itself is not effective at all 😂, that's why people created state management tools for handling passing props crossing components.

    However, if you want to stick with props and not introducing extra complex, you can do state lifting, 👉 official doc you can check it out. In your example, instead of fetching all the countries in your Country.jsx, you can fetching it in the upper components, which is your App.js component, and then passing down to other components.

    Another tool you can try (and I highly recommended) is Zustand for global statement management, super easy to setup and works just fine 👌.

    You can also use some tools like React Query or SWR, those tools have built in cache you can use, so instead of save the fetched data into state, save it as cache and use it in your components.

    Hope my answer helps and happy coding 😆!

  • Connor Z•5,115
    @zuolizhu

    Hey APG!

    Finally someone tried the Svelte and I told you it is an amazing framework (well, actually it is a compiler LOL) right ? 😝 @mattstuddert I bet £1 you will fall in love with Svelte 😏. It is a good starting point for anyone just learned HTML, CSS, basic javascript and wants to try out some frameworks.

    I was about to asking how you did the drag and drop list, and then I just found you used sortablejs, nice package 🤩! I think you need to add the event listener called onEnd: function (event) {} for the Sortable object, within that function, you can grab the new ordered list and save into the local storage.

    I love the Christmas theme 🎄 you designed, so cuuuuute!!

    I don't think you need to redo this challenge, it is already perfect! Just keep it in there as a footprint, maybe few years latter you can watch back and see how you improved 🤪.

    Happy coding and happy holiday 🙌!

  • Connor Z•5,115
    @zuolizhu

    Hey APG! Happy Friday 😆🍻!

    I saw your outlines of the elements for :focus, nice improvement 🙌!

    The shaking animation of the two buttons on the hero are so cute 🤩!! The animation just changed the whole feeling when using the website. Love it so much!

    Personally I would hide the tab border when :focus, then show the tab border when out of focus. Because from design perspective, both outline and border are served for the same purpose (to indicate focused or not). 🤔 So why would use two effects on one element at the same time. But this is just my personal opinion, hope it doesn't bother you 🤣.

    I am also a big fan of the material design, although it has too many rules to follow 🤯 ( for example, by default Material uses capitalized button text, and avoid using two contained buttons next to one another etc.) For me those rules violate "happing coding", so I just won't use it in my code 🤣. But I'm happy to see your creativity on it 👍!

    I noticed the new attribution you did and the sound effect to it! That's so cute hahahaha! Everyone should try it!

    I was surprised how fast you've improved your skills through out building these amazing solutions, keep doing it 💪! Most importantly, happy coding 🙌!

  • Connor Z•5,115
    @zuolizhu

    Coming from your comment on my solution 😏 I really love your design on the scales up and down, it just looks amazing 👏! One little detail you can try next time, when using tab navigating on those buttons, you can add

    :focus {
    outline: rgb(104, 190, 205) dotted 3px;
}

    (This is how frontendmentor.io did on their buttons and input box 🤓)

    I think your skills of HTML CSS and JavaScript are solid enough, you could try some frameworks (I highly recommend Svelte since it's not that different from no-framework) to help you manage your code, e.g. for this project, you can split the index.html into header, carousel, about etc components, and makes it a lot much easier to maintain when you keep adding details latter on 😎.

    As always, keep coding 💪 and happy coding 🙌!!

View more comments