snxxwyy Posts - Answer Overflow

snxxwyy

Posts Comments

KPCKevin Powell - Community

•Created by snxxwyy on 7/6/2024 in #front-end

Input design method

15 replies

KPCKevin Powell - Community

•Created by snxxwyy on 7/4/2024 in #front-end

@keyframes steps difference

Hey, Is there a difference between these two keyframes? Does the to and from mean something different compared to the percentages?

@keyframes xyz {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes xyz {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes xyz {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes xyz {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

Thanks in advance.

7 replies

KPCKevin Powell - Community

•Created by snxxwyy on 7/4/2024 in #front-end

Grid rows automatically created when no template rows defined?

Hey, I have 3 items in a grid container and haven't defined any grid-template-rows however it's automatically created some (3) to hold the content. 1. Is this normal behavior? 2. Are these automatic rows something you can do things with such as make the elements share the same grid cell etc? https://codepen.io/deerCabin/pen/MWMgmGL Thanks in advance.

3 replies

KPCKevin Powell - Community

•Created by snxxwyy on 7/4/2024 in #front-end

why does margin-top auto only work if parent is a flex container

Hey, i made this example for someone and i'm not quite sure the in depth reasoning as to why setting margin-top: auto; on a child (in this case nav) doesn't work unless the parent is a flex container (in this case .site-container), i just know it works and i'd like to understand a little more. I'd appreciate any help, thanks in advance. https://codepen.io/deerCabin/pen/OJeLPYW

3 replies

KPCKevin Powell - Community

•Created by snxxwyy on 7/3/2024 in #front-end

Grid children not stretching + centering children alignment

Hey, i have two questions regarding this issue. 1. Why do the grid items not stretch to be the same size as eachother even though that's the default behaviour? Is that something you're unable to do with an auto-fit grid? 2. There are two different types of cards in this example, a regular one and one with a banner, what method would be best to center the icon and text to be aligned evenly across all cards? I've tried a grid approach in the example (the stretch needs to be working for this one otherwise i don't believe the ones without the banner would be perfectly centered) https://codepen.io/deerCabin/pen/abregME Thank you in advance.

20 replies

KPCKevin Powell - Community

•Created by snxxwyy on 7/2/2024 in #front-end

revealed content not starting at desired point

Hey, i have 6 paragraphs, 3 of which are hidden that become revealed when pressing a button. When scrolling through with a screen reader and pressing the button, you have to scroll up to read out the newly revealed items as scrolling down just moves on. In terms of this example, would there be a way to put the focus on paragraph 4 after pressing the button (or at the start of the revealed content) so everything can be read out smoothly and in order. Is this a common practice to do with things like this? I'm new to js so any recommendations are most certainly welcome for that too haha (i notice the hidden content flickers when reloading so maybe that's something that could be improved perhaps), thanks in advance. https://codepen.io/deerCabin/pen/KKLOQbY

13 replies

KPCKevin Powell - Community

•Created by snxxwyy on 7/1/2024 in #front-end

layouts that are visually different to the dom

Hey, if you have a layout that is visually different to the way it’s written in the dom, perhaps some elements have been moved around for a design, how would you go about making that accessible for screen readers so they still recite it in the correct order etc. and if the tab order gets mixed up, is there a way to get around that or should you avoid that design all together? Perhaps any rules of thumb for this type of thing? Thanks in advance.

26 replies

KPCKevin Powell - Community

•Created by snxxwyy on 6/30/2024 in #front-end

logical properties

18 replies

KPCKevin Powell - Community

•Created by snxxwyy on 6/28/2024 in #front-end

image not behaving as intended unless wrapped in a div

Hey, why does this image not respect the fact it's in a flex container and cause the text to overflow unless it's wrapped in a div? This is something i haven't understood for a while haha, thanks in advance. https://codepen.io/deerCabin/pen/Baeewbg

8 replies

KPCKevin Powell - Community

•Created by snxxwyy on 6/27/2024 in #front-end

Best use cases for the "lh" unit

Hey, i was wondering what the best use cases for the lh unit are, i see a lot of people use it for spacing and for icon sizes like in this example (https://codepen.io/piccalilli/pen/OJdYxRv), i'd appreciate any insight, thanks in advance.

6 replies

KPCKevin Powell - Community

•Created by snxxwyy on 6/26/2024 in #front-end

margin-top and flow utility clash

Hey, i'd like to align the buttons to the end of the cards. I have the elements within the cards spaced out with a flow utility class which uses margin-top. Setting the flow-space on the buttons to auto does what i'd like however removes the space between the paragraph and button on the card holding the most content (and certain cards when the grid items start stacking when the viewport shrinks) due to the way auto behaves and the fact it's overriding the default property in the utility of course. I can't set this on just the first two cards in the example as i'm looking for a more flexible solution as you may not know which card has the most content or how many cards there could be. So from this i have two questions. 1. What sort of workaround/fix could i do here? 2. Why must the container (in this case .card) have to be a flex container for margin-top: auto; to work? If i remove it it stops working. https://codepen.io/deerCabin/pen/YzbLOvV Thanks in advance.

5 replies

KPCKevin Powell - Community

•Created by snxxwyy on 6/26/2024 in #resources

unicode character list

Hey, does anyone have an easy to navigate list/chart that shows the unicode strings of generic characters like a-z, question marks, brackets etc? I can't seem to find a good quality one, thanks in advance.

28 replies

KPCKevin Powell - Community

•Created by snxxwyy on 6/25/2024 in #front-end

grid-template-columns vs grid-auto-columns

Hey, what would be the difference between the examples below? Other than the ability to define a specific number of columns and how the elements fill the container when using grid-template-columns, when using auto-fill or auto-fit these both seem like they would achieve the same thing to me? Any explanation would be appreciated, Thanks in advance.

grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
grid-auto-columns: minmax(16rem, 1fr);

grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
grid-auto-columns: minmax(16rem, 1fr);

10 replies

KPCKevin Powell - Community

•Created by snxxwyy on 6/24/2024 in #front-end

@font-face practices

Hey, what are some best practices for using @font-face? Perhaps some properties that are a must? I currently use it like this, i'd appreciate any pointers, things i've missed or clarification that i've got it down. Thanks in advance.

@font-face {
  font-family: 'xyz';
  font-style: normal;
  font-weight: 400;
  src: 
    url(fonts/regular.woff2) format('woff2'),
    url(fonts/regular.woff) format('woff'),
    url(fonts/regular.ttf) format('truetype');
}

@font-face {
  font-family: 'xyz';
  font-style: normal;
  font-weight: 400;
  src: 
    url(fonts/regular.woff2) format('woff2'),
    url(fonts/regular.woff) format('woff'),
    url(fonts/regular.ttf) format('truetype');
}

25 replies

KPCKevin Powell - Community

•Created by snxxwyy on 6/23/2024 in #front-end

html/css optimization

Hey, what are some recommended tips for improving performance that you can incorporate into your html/css, i've heard of things like the preconnect attribute for font sites etc. Thanks in advance.

81 replies

KPCKevin Powell - Community

•Created by snxxwyy on 6/23/2024 in #front-end

what should be made into a variable?

Hey, what properties should be stored in variables? I'm aware of things such as colours, things regarding fonts (family, sizes, weights etc) , spacing, and i occasionally store border radius, leading and kerning values if i have a few different sizes with hierarchical naming conventions e.g. x-sm, x-md etc. Is there anything that shouldn't be a variable? Perhaps a rule of thumb or something? Thanks in advance.

26 replies

KPCKevin Powell - Community

•Created by snxxwyy on 6/22/2024 in #front-end

Best way to handle svg sizes

Hey there, what would be the best way to maintain svg sizes throughout a project? Should you keep the inline sizes they are given e.g. <svg width="x" height="y"></svg>? Or should you handle them similar to how you handle images by setting a max-width: 100%; on them and not setting the sizes on them until you have to in which case maybe setting up a few classes like .icon-small, .icon-medium etc could be an ideal way? Thanks in advance.

5 replies

KPCKevin Powell - Community

•Created by snxxwyy on 5/19/2024 in #front-end

how to achieve this design.

Hey, would anyone be able to give me some insight on how to achieve the purple backdrop in this frontend mentor project? I assume it would be done with a pseudo element or position absolute but due to where it ends perhaps it somehow living on the hero grid would be more appropriate? i'm not entirely sure. Thank you in advance.

19 replies

KPCKevin Powell - Community

•Created by snxxwyy on 5/18/2024 in #front-end

tabindex on the main tag

Hey, i sometimes see people applying tabindex="-1" to the main tag on their sites, what does this achieve? Thanks in advance.

18 replies

KPCKevin Powell - Community

•Created by snxxwyy on 5/15/2024 in #front-end

grid-template-areas vs grid lines

Hey, could somebody please explain the difference between using grid-template-areas and grid lines and in what situations you’d pick one over the other. Thanks in advance

3 replies

Gaming

Programming