Skip to content
OverviewSolutions
4
Comments
2
Yevhenii Kozhevin
@DexLuthor

All comments

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarSubmitted almost 2 years ago

    Hi there 👋, I’m Melvin and this is my solution for this challenge. 🚀

    Questions:

    • In React, what is the most popular class naming convention?
    • I've read that it's not recommended to have three or more nested folders within a project, so what's the most common way to organize files in React?

    Features:

    • 🔧 Focus on button using forwarding references
    • 🔧 Using localStorage to save url
    • 🔒 Form validation with react-hook-form
    • 🔔 Notifications with react-toastify
    • 🎨 Custom scrollbar

    Built With:

    • React-JS
    • SASS modules
    • BEM naming convention
    • Axios - Dotenv
    • react-hook-form
    • react-toastify
    • Yarn - Vite

    Any feedback on how I can improve and reduce unnecessary code is welcome!

    Thank you. 😊✌️

    URL shortening API landing page (React 🚀 + SASS modules + Axios)

    4
    Yevhenii Kozhevin•40
    @DexLuthorPosted almost 2 years ago

    I'm very skeptical about 3 folders rule 🤔

    From my experience when, for smaller projects we do have low nesting.

    emmet syntax following to depict

    src>components>compa+compb^services+guards+guards+...

    for medium+ projects we do modules federation in first place. then for every federated module we have src folder.

    src>modules>module-a>components+pages+...> and it can go endlessly deep.

    Only depends on how complex your pages are. this typically happens to bloody enterprise :D

    0
  • Marko•80
    @smarko-webSubmitted almost 2 years ago

    Hi, The main question I have is why does my view-icon share the opacity of my overlay? any other feedback is appreciated!!!

    Thanks in advance.

    NFT card for mobile first

    1
    Yevhenii Kozhevin•40
    @DexLuthorPosted almost 2 years ago

    Hey man👋 Great job done there :)

    I have a few nitpickings, if you don't mind:

    • I can see there a whole bunch of empty alt="" or srcset="". Maybe it would make sense to either make them work or get rid of them, if you consider them to be useless in your case
    • you've used <hr>, but if you zoom in you will see it looks quite ugly (that's the default styling of it). Consider e.g.
    hr {
    border: none;
    height: 1px;
    background-color: var(--Verydarkblue);
}
    • some1 has also mentioned to me that using gap for flex isn't supported (supported by 93% of users) everywhere currently. Consider margins/paddings instead
    • you have the styles below twice for overlay 👻
        height: 100%;
    width: 100%;
    • with respect to your question now. AFAIK opacity property is being inherited. So when you set opacity to .overlay to 0.5 your img inside that div inherits the same opacity. Another way to work it around is to use background-color: rgba(r,g,b, opacity). This won't be inherited
    0