snxxwyy Posts - Answer Overflow

snxxwyy

Posts Comments

KPCKevin Powell - Community

•Created by snxxwyy on 1/16/2025 in #os-and-tools

vim | extra files

10 replies

KPCKevin Powell - Community

•Created by snxxwyy on 1/15/2025 in #front-end

Classes: private variables

Hey, i don’t really understand the use of private variables inside of classes e.g. #example. Mdn says that it means they can’t legally be referenced outside of the class but isn’t that the default behaviour anyway since it’s defined within the class scope? Thanks in advance

5 replies

KPCKevin Powell - Community

•Created by snxxwyy on 1/14/2025 in #front-end

Promise questions

Hey, I have a couple questions about promises- 1) how does the promise object pass in the values to the resolve and reject parameters in const example = new Promise((resolve, reject) => {…})? I understand they are methods within the promise object so does that mean the function you pass in is a callback and that callback is used within the object somewhere and they pass them in via that? 2) I see people chain on promise methods to a function that returns a promise e.g. fetch(…).then(…). How is fetch for example able to use that promise method since it isn’t a promise object or assigned a promise object such as a variable? I understand it returns one but that doesn’t mean it’s equal to one right? Unless it does? Thanks in advance.

122 replies

KPCKevin Powell - Community

•Created by snxxwyy on 1/12/2025 in #front-end

picking arrow functions vs regular functions

Hey, i understand that picking whether to use arrow functions or regular functions is sometimes based off of preference but mainly based off of what behavior you'd like, however why are functions such as setTimeout mainly seen to use arrow functions not regular? e.g.

setTimeout(() => {
  console.log("xyz");
}, 1000);
//not
setTimeout(function() {
  console.log("xyz");
}, 1000);

setTimeout(() => {
  console.log("xyz");
}, 1000);
//not
setTimeout(function() {
  console.log("xyz");
}, 1000);

at first glance, there doesn't seem to be any more benefits to one than the other in this case so is this more of a personal preference one? thanks in advance.

21 replies

KPCKevin Powell - Community

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

use cases for arrow functions inheriting their this value

Hey, mdn says that the this value of arrow functions equates to the parent scope, i don't understand how that could be useful? For example, if i defined an arrow function in an object below that utilized the this keyword, how would i benefit from it being equal to the window object? (i'm aware if i want that behaviour then to use a regular function of course but the concept confuses me)

const myObject = {
  arrowExample: () => {
    console.log(this) // Window
  }
}

myObject.arrowExample()

const myObject = {
  arrowExample: () => {
    console.log(this) // Window
  }
}

myObject.arrowExample()

i'd appreciate any help. thanks in advance.

9 replies

KPCKevin Powell - Community

•Created by snxxwyy on 1/9/2025 in #front-end

transferring the "this" value to a function

Hey, i have a class with a function in that logs out a this. variable. When i call that function inside of a function outside of the class it works, however when i call that function as a callback, it can't find the this value and i have to use .bind (i'm sure call and apply could potentially be used too) to allow it to work, since the callback parameter has the function as the value, i don't understand what causes that error compared to straight up calling it. i'd appreciate any help, thanks in advance. https://codepen.io/deerCabin/pen/RNbQvbd

5 replies

KPCKevin Powell - Community

•Created by snxxwyy on 1/9/2025 in #front-end

class logic questions

Hey, a few questions about the logic in classes- 1) If i define a this. variable inside of a function, why can i use it outside of the function globally within the class? I understand it's because it uses this. and that refers to the object but that defies the regular logic of how that would work, is that specific functionality for this or classes? (example: https://codepen.io/deerCabin/pen/xbKYQPG) 2) Why don't i need to use const or var when defining this. variables? 3) Why don't i need to use the function keyword when defining functions within classes? Thanks in advance.

23 replies

KPCKevin Powell - Community

•Created by snxxwyy on 1/8/2025 in #front-end

use cases for a closed shadow dom

Hey, i was taking a look at the difference between a closed and open shadow dom and found that if it's closed you can't interact it with the shadowRoot method e.g.

const element = document.querySelector("...");
element.attatchShadow({mode: "closed"});

console.log(element.shadowRoot) //null when mode is closed

const element = document.querySelector("...");
element.attatchShadow({mode: "closed"});

console.log(element.shadowRoot) //null when mode is closed

meaning if you wanted to add elements or styles you'd have to save a reference to it e.g. const elementShadow = element.attatchShadow({mode: "closed"}); and style it via that. I don't understand any useful purposes for this, would anyone be able to give some insight? Thanks in advance. additional question- why are the curly brackets needed for {mode: "closed"}? is attatchShadow an object or something?

8 replies

KPCKevin Powell - Community

•Created by snxxwyy on 1/4/2025 in #front-end

what does the model of a (global?) object look like?

Hey, what does the model of a (global? i'm not sure if that's the right word) object look like? For example document in document.querySelector. I understand that document is the object, but is it a class that has a function called querySelector in along with the others? e.g. I'd appreciate any help, thanks in advance.

2 replies

KPCKevin Powell - Community

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

Separator list method

16 replies

KPCKevin Powell - Community

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

:has() alternatives

Hey, are there any polyfills or alternate methods for :has() for browsers that don’t support it? Thanks in advance

20 replies

KPCKevin Powell - Community

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

How does the cascade affect media/container queries?

Hey, if I’m catering for browsers that don’t support @container, I may do something like so-

@media (min-width: 55rem) {
  .element {…}
}

@supports (container-type: inline-size) {
  @container (min-width: 45rem) {
    .element {…}
  }
}

@media (min-width: 55rem) {
  .element {…}
}

@supports (container-type: inline-size) {
  @container (min-width: 45rem) {
    .element {…}
  }
}

Since the media query will run despite the support for @container, if the browser supports containers, do they both run and the container query styles take over the media query ones due to it being lower in the cascade? Or does the media query styles activate as well and if so should you wrap it in an @supports not block? Thanks in advance

4 replies

KPCKevin Powell - Community

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

optimization | @font-face with <link>

Hey, i know pre-loading fonts or links of any sort of importance aids in optimization. If i have a local font that i have a @font-face declaration for, can i also include something like <link rel="preload" href="fonts/fontName.woff2" as="font" type="font/woff2/> alongside it or am i unable to have both? Thanks in advance.

15 replies

KPCKevin Powell - Community

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

Class overwriting styles it shouldn’t?

Hey, I’m trying to style a button with two classes with the [class|=“”] selector, if I add with-icon and button at the same time it overwrites all of the styles for the button class. This would totally make sense if both classes had the same properties in which case the cascade would handle which values are used, but it overwrites things in button that with-icon doesn’t have, such as background-color. I want it to overwrite the display property only in this case, which I thought it would do. It doesn’t do this when I use regular class selectors e.g .button so it must be selector related, but this selector says ‘if the element has a class with that value or one that starts with that value”, this doesn’t sound like they should clash in any other way than expected? https://codepen.io/deerCabin/pen/EaYyaqr I’d appreciate any insight. Am i missing something? Thanks in advance.

15 replies

KPCKevin Powell - Community

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

display contents use cases

Hey, what are some use cases for display: contents;? To me it seems very similar to subgrid but since it comes with the reduced styling consequence, i don't really see any positives for it? I'd appreciate any help, thanks in advance.

19 replies

KPCKevin Powell - Community

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

Drop down menu & position absolute sizing

Hey, I’ve never really looked too in depth into dropdown menus and decided it’s time haha, what’s an efficient way to “dock” them so they don’t sit off screen when the screen gets too small like in this example codepen? I saw the recent video Kevin made on it however due to the lack of browser support in things like anchor-positioning, I was wondering about more general approaches. Following that, I’ve never really noticed that position absolute makes elements min-content or if not something similar, what is it that shrinks a position absolute element and how do you effectively expand them back to an intrinsic size without setting a width/min width which presents overflow issues in some cases? https://codepen.io/deerCabin/pen/ogvbVKJ Thanks in advance

6 replies

KPCKevin Powell - Community

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

revert vs unset & svg focusable attribute

Hey, i have a couple questions regarding the topics in the title- 1) mdn says the difference between the revert and unset values is that revert changes a set of styles back to the user agent styles whilst unset changes a set of styles back to the inherited value and if not then the user agent styles. I don't understand logically the need for unset since the default behavior would be to inherit a value if possible anyways right? unless there's more to it? 2) I've seen people add focusable="false" to svgs to stop them being added into the tab order or being caught in a screen reader, i don't quite understand this since i don't believe svgs are focusable by default anyways? I'd appreciate getting some help clearing those up, thanks in advance.

6 replies

KPCKevin Powell - Community

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

svg path creating space

15 replies

KPCKevin Powell - Community

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

How to correctly import fonts

Hey, if I have some @font-face declarations inside of a css file and import the css file in the html, I understand that this shouldn’t cause a problem because the assets wouldn’t load sequentially since they’re being imported through the html, thus not blocking the page render if it takes too long, but should I be importing fonts using a different method? Perhaps a link tag if that exists for this? If so, how do i still get the benefits of @font-face? Thanks in advance

8 replies

KPCKevin Powell - Community

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

dialog questions

Hey, I have a couple questions regarding the dialogue element- 1) mdn recommends to avoid toggling the open attribute to enable the dialogue and to instead use .show() or .showModal() in js. Why is this? 2) I’ve seen that .show() makes the dialogue “non modal” and .showModal() makes the dialogue “modal”. What’s the key differences? 3) mdn also says it’s recommended to use the autofocus attribute on important content or the close button in the dialogue. I haven’t seen this attribute until now, is it a dialogue only thing or can you use it with other things? I’d appreciate any help, thanks in advance.

12 replies

Gaming

Programming