Chris Bolson Posts - Answer Overflow

Chris Bolson

•Created by Chris Bolson on 6/7/2023 in #front-end

Strange difference between ::before and ::after

I was taking a look at this post https://discord.com/channels/436251713830125568/1115936302458736711/1115936302458736711 by @Pat66 regarding an issue they were having with a pseudo element. Asides from their issue (which @mannix_ quickly provided a solution for) I noticed something else. Pat66 had set text-transform: capitalize; on the "a" tag. This worked correctly on the first link but not on the second link. If I removed the pseudo after element the capitalise worked as expected. This led me to assume that something was broken in the CSS of the pseudo element however, if I changed it to a "::before" rather than an "::after", the capitalisation worked correctly. In summary, ::after appears to break the capitalisation on all but the first <a> element. Observations: - This appears to only affect <a> tags. - text-transform: lowercase; works as expected (I haven't tried other variations) Does anybody know why this might be? It is probably something obvious but I can't see it... I have set up a bare-bones codepen to demonstrate the issue: https://codepen.io/cbolson/pen/BaGaxdv This is not something that I need to resolve, I just found it interesting.

10 replies

KPCKevin Powell - Community

•Created by Chris Bolson on 5/9/2023 in #front-end

Defining TypeScript type or interface for array within object

I am at the beginning of my TypeScript learning curve and am currently struggling as to how to create an interface (or type?) for an array within an object. This is within a React component. I have the following object:

{
  "word": "clumsy",
  "phonetic": "/ˈklʌmzi/",
  "meanings": [
    {
      "partOfSpeech": "noun",
      "definitions": [
        {
          "definition": "A clumsy person.",
          "synonyms": [],
          "antonyms": []
        }
      ],
      "synonyms": ["butterfingers", "galoot", "klutz"],
      "antonyms": []
    },
}

{
  "word": "clumsy",
  "phonetic": "/ˈklʌmzi/",
  "meanings": [
    {
      "partOfSpeech": "noun",
      "definitions": [
        {
          "definition": "A clumsy person.",
          "synonyms": [],
          "antonyms": []
        }
      ],
      "synonyms": ["butterfingers", "galoot", "klutz"],
      "antonyms": []
    },
}

I have defined the types for the object like this:

interface dataProps{
  word: string;
  phonetic: string;
  meanings: [];
}

interface dataProps{
  word: string;
  phonetic: string;
  meanings: [];
}

And am implementing them when I create the useState() for this object: const [fetchedData, setFetchedData] = useState<dataProps[]>([]); I am then able to use the strings "word" and "phonetic" without TypeScript yelling at me. I am also able to loop through the array "meanings" using map() and am able to display "partOfSpeech", again without upsetting TypeScript. The issue I have is when It try to do map "definitions": definitions.map((definition) => ( TypeScript kindly informs me that "Property 'map' does not exist on type 'never'" and also that "Parameter 'definition' implicitly has an 'any' type." I understand the reason for the errors but have so far not been able to work out how to define the type(s) for this array and it's data. I have tried adding more types to the interface but can't work out the correct syntax and I have a feeling that I may even need to define them separately. (tagged as React as there is no TypeScript tag)

6 replies

Gaming

Programming