snxxwyy Posts - Answer Overflow

snxxwyy

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

dl vs ul/ol

Hey, could somebody please explain the difference between a description list and general list and common use cases for a dl? Is the only difference that dl should be used for list items with a description? Thanks in advance.

19 replies

KPCKevin Powell - Community

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

inset behaviour

Hey, I have a position: fixed; header and a .wrapper class for this example. I wanted to center the header on the page with the inset property (top, bottom, left, right works too). However when i use inset: 1em auto 0 auto; which i assume to have the top, bottom, left and right order, it doesn't work, instead i have to do inset: 1em 0 auto 0 which doesn't make sense to me. the 1em is to space it from the top of the page but since i don't want any space at the bottom i would put 0 instead of auto but that stretches it for some reason which also confuses me. That only works if the .wrapper class is directly applied to the header. If it's wrapped in it my flex on header doesn't work and the content seems to get really long if you hover over it in dev tools. I'd appreciate any help explaining this. Thanks in advance. https://codepen.io/deerCabin/pen/BaXbqpP

85 replies

KPCKevin Powell - Community

•Created by snxxwyy on 11/13/2024 in #front-end

@media | print, screen & only

Hey, i have a couple questions for some @media rules- 1) What type of things/content on your site would warrant changing in regards to the print rule? essentially, what would you want to change when printing out a page of your site? 2) i've heard the screen rule represents exactly what it says, being a screen of a certain size. That makes something like @media (min-width: 500px) different since it refers to a window size right? but aren't they technically the same? 3) What does the only rule really do? i've heard it hides media queries from older browsers but why is that? is it for support reasons? Thanks in advance.

60 replies

KPCKevin Powell - Community

•Created by snxxwyy on 11/12/2024 in #front-end

forms | action and method

Hey, i have a couple of questions about the action and method attributes for forms- 1) With action, what necessarily does sending data to other html/pfp files etc do? I can imagine it's so you can use it with js that's hooked up to the page it's sending to to either use it in a query or display it on the page. This makes sense to me since i imagine you'd have to use a database or something similar to retrieve data between pages without this functionality. let me know if i'm wrong though please. 2) With the GET method, what's the function of appending the data to the url? What does it allow you to do? 3) When would you use GET vs POST? I assume POST when sending the form data somewhere with action. With GET, the answer depends on the answer to question 2) but it would confuse me if you had a GET method with a link in action as where is the data going at that point if you're getting data from somewhere else? I'd appreciate any help clearing this up, thank you in advance.

31 replies

KPCKevin Powell - Community

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

quick css questions

Hey, i just a few quick questions 1) is there a way to select an element based off of whether it's a certain count of one on the page? I know nth-child and nth-of-type do this, but only if the elements are siblings. If i wanted to select the 3rd p element on the whole page for example, would that be possible? maybe it's with that of selector that's floating around? 2) I've noticed that if you have a list inside of another list, the child's ul/ol element will have it's user agent margin removed, what causes this? is it because of the way sub-lists work? https://codepen.io/deerCabin/pen/wvVRoVG Thanks in advance.

18 replies

KPCKevin Powell - Community

•Created by snxxwyy on 11/10/2024 in #front-end

svg sizing

Hey, just a couple questions about how sizing of an svg works- 1) If there's no viewbox and you try to resize an svg in css, the content within the svg won't scale with it, why is this? (example in codepen) 2) If you have an svg with a viewbox of 0 0 100 100 and let's say there's a circle in there that has a r, cx and cy of 50 to center it within the viewbox, if you resize the svg with css, what makes the content scale up/down since the svg is now larger/smaller than the viewbox, i'd expect the content to be cut off? I'd appreciate any help, thanks in advance. https://codepen.io/deerCabin/pen/RwXEare

39 replies

KPCKevin Powell - Community

•Created by snxxwyy on 11/9/2024 in #front-end

svg sizing when in img tag

Hey, so if i have an svg in a file, e.g.

// example.svg
<svg width="10px" height="10px" viewbox="...">
  <path></path>
</svg>

// example.svg
<svg width="10px" height="10px" viewbox="...">
  <path></path>
</svg>

and i import it into my html with an img tag, if my img tag has display: block on it because of the img reset, meaning it should take up 100% of the container width, why is the size of the img tag when i take a look in dev tools equivalent to the width and height attribute values of the svg it's importing (in this case 10px)? Is this because those attributes inherit over to the img tag and become it's width and height attributes? I always thought the img tag would be 100% of the container due to display: block; and the svg inside it would just be it's own size. I'd appreciate if someone could help clear this up, thanks in advance.

31 replies

KPCKevin Powell - Community

•Created by snxxwyy on 11/9/2024 in #front-end

<symbol> and <use> layout difference

Hey, i have a couple of questions regarding wha's in the post title. 1) what's the difference between defining your <symbol> tags within an svg tag and without? e.g.

<svg>
  <symbol id="..." viewBox="0 0 16 16">
    <path d="..."></path>
  </symbol>
</svg>

<symbol id="..." viewBox="0 0 16 16">
   <path d="..."></path>
</symbol>

<svg>
  <symbol id="..." viewBox="0 0 16 16">
    <path d="..."></path>
  </symbol>
</svg>

<symbol id="..." viewBox="0 0 16 16">
   <path d="..."></path>
</symbol>

i understand that when you define them within an svg tag you can use the <use> tag by itself whereas if you don't define them in an <svg> tag you have to wrap the <use> tag in an <svg> tag e.g.

<use href="..."/>

<svg>
  <use href="..."/>
</svg>

<use href="..."/>

<svg>
  <use href="..."/>
</svg>

it's pretty understandable to me as to why this is the case, e.g. if you're lacking an <svg> tag wrapping the <symbol> tags, you wrap the <use> tag within one, vice versa. But is there more to it? ----------------------- 2) following from the question above, is there a difference between defining a <title> tag within the <symbol> tag when you wrap the symbol in an <svg> tag compared to defining a <title> tag within the <svg> tag along with <use> when you don't wrap the <symbol> tag in an <svg> tag? e.g.

<svg>
  <symbol id="..." viewBox="0 0 16 16">
    <title>...</title>
    <path d="..."></path>
  </symbol>
</svg>

<svg>
  <title>...</title>
  <use href="..."/>
</svg>

<svg>
  <symbol id="..." viewBox="0 0 16 16">
    <title>...</title>
    <path d="..."></path>
  </symbol>
</svg>

<svg>
  <title>...</title>
  <use href="..."/>
</svg>

i suspect it could be the same sort of logic as the first, but again, is there more to it? or are they both a matter of preference? i'd appreciate any help, thanks in advance.

74 replies

KPCKevin Powell - Community

•Created by snxxwyy on 11/8/2024 in #front-end

icon swap | InnerHTML security risks

Hey, if you had a button with an icon in it, let’s say it’s a theme toggle, and your icon switches from a sun to a moon when you click, the way I’d imagine doing that is by setting the button’s innerHTML to a different svg. I’ve heard this poses security risks though since users can manipulate the data in there. What would a better alternative be for swapping out content like that?
Using adjacentHTML doesn’t seem like it would fit the use case since this adds the content but doesn’t replace it. I know you could then remove the other icon but I feel you could do the whole thing in one swoop without doing that? I may be wrong. I believe there was a method called .replaceWith or something along those lines but I’d assume you would put html in there too so I’d imagine there’s security risks with that as well, and I can’t imagine using a template for something small like this is worth it? Please correct me if I’m wrong with any of this. I’d appreciate any insight, thanks in advance.

43 replies

KPCKevin Powell - Community

•Created by snxxwyy on 11/8/2024 in #front-end

svg width and height attribute + resizing

Hey, when i use svgs, i used to take off the width and height attributes e.g. <svg width="x" height="y">...</svg> and size them using css. Then i realised that if the css doesn't load, they're massive haha. so i keep those attributes now. One thing i've noticed about resizing them with css when they have those attributes, is that they only resize when you define the width and the height e.g.

svg {
  width: 1em;
  height: 1em;
}

svg {
  width: 1em;
  height: 1em;
}

whereas without those attributes, just defining the width would resize it e.g.

svg {
  width: 1em;
}

svg {
  width: 1em;
}

With the attributes, logically it makes sense as to why you have to style both the width and height for it to resize however i'm not entirely sure if this is how you're supposed to go about it? i'm also now confused as to why just width: 1em; worked without them. I'd appreciate if anybody could give me some insight into that info, thanks in advance.

77 replies

KPCKevin Powell - Community

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

pollyfill definition

Hey, what exactly is pollyfill? I've heard it mentioned a lot. I looked into it and it said it's adding functionality for browsers that don't support certain features etc. Is there more to it? Thanks in advance.

16 replies

KPCKevin Powell - Community

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

text in tags & media query vs flex-wrap/minmax

Hey, i have a few questions: 1) When is it appropriate if at all to place text in non text tags? e.g. <div>hello</div>, i've seen this around before. 2) When is it appropriate to pick a media query over using flex-wrap or minmax to wrap content? I know this is a "it depends", but is there any sort of rule of thumb or is it preference? Thanks in advance.

1 replies

KPCKevin Powell - Community

•Created by snxxwyy on 10/29/2024 in #front-end

:focus outline being overlapped.

47 replies

KPCKevin Powell - Community

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

theme system

Hey, what would ya'll recommend as a good method to go about creating themes for a site? I had the idea of applying variables to html and having a data attribute toggle along with prefers-color-scheme (or lightdark()) e.g.

:root {
  --bg-light: ...;
  --bg-dark: ...;
}

@media (prefers-color-scheme: light) {
  html {
    --button-bg: var(--bg-light)
  }
}

@media (prefers-color-scheme: dark) {
  html {
    --button-bg: var(--bg-dark)
  }
}

html[data-light] {
  --button-bg: var(--bg-light);
}

html[data-dark] {
  --button-bg: var(--bg-dark);
}

:root {
  --bg-light: ...;
  --bg-dark: ...;
}

@media (prefers-color-scheme: light) {
  html {
    --button-bg: var(--bg-light)
  }
}

@media (prefers-color-scheme: dark) {
  html {
    --button-bg: var(--bg-dark)
  }
}

html[data-light] {
  --button-bg: var(--bg-light);
}

html[data-dark] {
  --button-bg: var(--bg-dark);
}

I'm not sure if this is a good maintainable way of doing something like this though. I'd appreciate any insight. Thanks in advance

48 replies

KPCKevin Powell - Community

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

pseudo element capabilities

Hey, is there anything that a pseudo element can't do that a normal element can? I know this is quite broad, but is there perhaps certain properties that wouldn't work on them etc? Thanks in advance.

20 replies

KPCKevin Powell - Community

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

px vs em/rem padding

127 replies

KPCKevin Powell - Community

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

running function in class error

Hey, in the code below, the example function won't run and it gives the error "Uncaught TypeError: this.example is not a function". I'm a little confused as to why this is happening, could someone point me in the right direction? Thanks in advance.

class Button {
  constructor() {}

  addEventListener() {
    document.getElementById("button").addEventListener("click", this.handleClick);
  }
  handleClick() {
    this.example()
  }
  example() {
    console.log("hi") // I won't run
  }
}

let button = new Button();
button.addEventListener()

class Button {
  constructor() {}

  addEventListener() {
    document.getElementById("button").addEventListener("click", this.handleClick);
  }
  handleClick() {
    this.example()
  }
  example() {
    console.log("hi") // I won't run
  }
}

let button = new Button();
button.addEventListener()

7 replies

KPCKevin Powell - Community

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

grid minmax

Hey, so i've noticed that if i define grid-template-columns: repeat(2, minmax(200px, 1fr));, when the viewport shrinks, the element that has the min of 200px on it overflows the container due to the fact it can't shrink below 200px. This can be fixed with grid-template-columns: repeat(2, minmax(min(100%, 200px), 1fr));, but i was wondering if there's a more basic solution, something similar to flexbox maybe where even defining a flex-basis/width allows the item to shrink? Thanks in advance.

14 replies

KPCKevin Powell - Community

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

flex wrap behind the hood

Hey, so i created a post a while ago asking how flex wrap calculated when to wrap items. I was told that items wrap based off of their ideal size (flex-basis or width. If none set then intrinsic size) and that the items wrap when their final size (content size + width given by flex grow) = content size. I recently saw on an article that they begin to wrap when the flex items sum total flex basis is larger than the container width. I'm a little confused now on how this functions. I'd appreciate if anyone could help me clear this up. Thanks in advance

4 replies

KPCKevin Powell - Community

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

different ways to write a function in an object

Hey, i've seen a function in an object either being written as a key value pair on simply on it's own e.g.

const obj = {
  exampleFunc: function() {
    console.log("example function")
  }
}

const obj = {
  exampleFunc() {
    console.log("example function")
  }
}

const obj = {
  exampleFunc: function() {
    console.log("example function")
  }
}

const obj = {
  exampleFunc() {
    console.log("example function")
  }
}

What is the difference between these two methods and when would you need to use one over the other? perhaps is just preference too? Thanks in advance.

28 replies

Gaming

Programming