Skip to content
OverviewSolutions
11
Comments
5

Oleg

@o-gtkv350 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Oleg•350
    @o-gtkv

    Hi, Xqu1shy

    "Any tips on naming classes? I'm so bad at it :("

    There's no need to get upset about it. In fact, this is one of the most difficult things about learning CSS :) There is no magical advice here. Only practice and read the code of more experienced developers. It is also useful to use some methodology for naming classes, such as BEM. But it helps to put things in order rather than coming up with the "right" names for the classes.

    And a note about the code. Don't put any text inside the alt attribute if the image is used solely for decorative purposes, like here

    <img src="./images/icon-todo.svg" alt="#">

    Just specify alt="". This is important in terms of accessibility.

    Hope you will find this helpful. Happy coding!

    Marked as helpful
  • Oleg•350
    @o-gtkv

    Hi, Jakub

    Some tips on your code.

    <img class="patternDivider desktopOnly" src="images/pattern-divider-desktop.svg" alt="">

    <img class="patternDivider mobileOnly" src="images/pattern-divider-mobile.svg" alt="">

    You don't need css here, use the picture tag instead.

    <button class="diceButton"> <img src="images/icon-dice.svg" alt=""> </button>

    For images inside buttons you should always specify a non-empty alt attribute. This is important for accessibility purposes.

    Hope this helps. Happy coding!

    Marked as helpful
  • Oleg•350
    @o-gtkv

    Hi, Ahmed

    Some notes on your code:

    1. You can use useEffect hook to initially load the data, as shown here.
    2. You don't need React.Fragment(<>) and the key attribute.
    3. It is important to keep the structure of your document correct: the heading, then the regular text, but not vice versa :) You should`t use <h1> and <p> based on text size, for example. This can always be changed through styles.

    Hope you will find this helpful. Happy coding!

    Marked as helpful
  • Oleg•350
    @o-gtkv

    Hi, ERICKA

    "Ps.: Me perdi no HTML, por incrível que pareça não consegui deixar o botão sobressaído como no designer"

    Just use the box-shadow property, like this:

    .button-dice:hover {
    box-shadow: 0 0 0 20px hsl(150, 100%, 66%);
}

    And to position the button as in the design, add the following styles:

    .button-dice {
    /*position this element relative to its closest positioned ancestor. In this case it is a div with the card class (the card class specifies *position: relative) */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
}

    "O que meu código pode melhorar?"

    1. First of all, use English and only English for naming in your source code.
    2. Your solution will not work in Firefox just like it does in Chrome. Why and how to fix it can be seen here.
  • Oleg•350
    @o-gtkv

    Hi, Riley

    "Not sure what in my JavaScript is causing the Firefox issue (maybe something missing from my code?)."

    It's all about caching. After first fetch call, all following requests get data from cache, not from server. And so it will be until the cache will be expired. When exactly this happens depends on server's response, namely on HTTP header Cache-Control, and directive max-age. Its value can be seen on the Network tab in DevTools. So, in the server response it is listed twice as

    • cache-control: max-age=2
    • cache-control: max-age=600

    2 seconds and 10 minutes. A server-side bug, apparently. Chrome takes the first value and ignores the second. Firefox vice versa (you can see the exact cache expiration time in about:cache). That is, everything works in Firefox too, but only once every ten minutes :) This can be fixed by passing, for example, { cache: "no-store" } object as second parameter to fetch. (more details here and here)

    Hope this helps )

    Marked as helpful