Choo♚𝕂𝕚𝕟𝕘 Comments

Choo♚𝕂𝕚𝕟𝕘

•Created by Marco Mundt on 3/8/2025 in #front-end

Hello everyone,I'm struggling to implement a layout, and I just can't ...

There are various ways to position items around a circular path. Here is one option: https://codepen.io/chooking/pen/yLGgBMG

10 replies

KPCKevin Powell - Community

•Created by MC23 on 2/23/2025 in #front-end

Reproduce flex behaviour with grid

That solution is still not ideal, because it requires specifying the number of columns in advance.

15 replies

KPCKevin Powell - Community

•Created by MC23 on 2/23/2025 in #front-end

Reproduce flex behaviour with grid

https://cssence.com/2020/prevent-orphan-in-flexbox/

15 replies

KPCKevin Powell - Community

•Created by MC23 on 2/23/2025 in #front-end

Reproduce flex behaviour with grid

The problem is your flex basis. You set a fixed pixel value instead of a percent. My original response was to the image and the the full text of what you said. The number of items on the last row depends on the total number of items.

15 replies

KPCKevin Powell - Community

•Created by MC23 on 2/23/2025 in #front-end

Reproduce flex behaviour with grid

In addtion to using the 10 columns, you also need a media query. I don't know if you tried changing the width of the viewport. It switches to 4 columns for narrower displays, and it does this without the need for a media query. Flex is definitely the simpler solution to achieve this.

15 replies

KPCKevin Powell - Community

•Created by The_thoughts_loop on 1/21/2025 in #front-end

NotAllowedError: play() failed because the user didn't interact with the document first

I don't recall the source, but Youtube doesn't make use of this directly on their site. What they are able to do is autoplay an embedded video that isn't muted when you embed on another site. I haven't tested recently, but it was working as recently as last year on both Firefox and Chrome.

13 replies

KPCKevin Powell - Community

•Created by The_thoughts_loop on 1/21/2025 in #front-end

NotAllowedError: play() failed because the user didn't interact with the document first

Youtube is the only site that was granted special permission to do this. All other sites in existence are not allowed. It had been allowed in the past, but this ability was abused by advertisers. That was so annoying that the rule was created to never allow it again, but Youtube was able to get a special exception because it is owned by Google, and Google owns Chrome, so they had enough leverage to also get that exception accepted by other browsers.

13 replies

KPCKevin Powell - Community

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

Is there something like `object-fit: contain` for non-replaced elements?

Flutter is not HTML or CSS. There is a way to make web apps using Flutter, but that is not by writing HTML or CSS.

37 replies

KPCKevin Powell - Community

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

picking arrow functions vs regular functions

My IDE offers an arrow function in the autocompletion whenever a callback is needed, so it's easier to just use that instead of deliberately overriding the suggestion.

21 replies

KPCKevin Powell - Community

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

use cases for arrow functions inheriting their this value

I just realized that I should have renamed it because it's not an arrow function anymore, but that wasn't the main point. I used your code as the starter for simplicity.

9 replies

KPCKevin Powell - Community

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

use cases for arrow functions inheriting their this value

const myObject = {
  num: 42,
  arrowExample(){
    console.log(this.num);
  }
}
const external = myObject.arrowExample;
external();//undefined
const bound = myObject.arrowExample.bind(myObject);
bound();//42

const myObject = {
  num: 42,
  arrowExample(){
    console.log(this.num);
  }
}
const external = myObject.arrowExample;
external();//undefined
const bound = myObject.arrowExample.bind(myObject);
bound();//42

9 replies

KPCKevin Powell - Community

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

use cases for arrow functions inheriting their this value

No. It depends on how the function is called. It doesn't always bind to the object that it is in.

9 replies

KPCKevin Powell - Community

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

use cases for arrow functions inheriting their this value

You are looking at it from the wrong perspective. Referring to the window object is a consequence of how things work rather than a goal set forth by the designers. The proper way to think about it is that arrow functions don't have a "this" binding of their own. For any regular identifier, like a variable name, if it's not defined in the local scope, outer scopes are searched until a match is found. The same is happening with "this". It's not defined in the arrow function, but there is one in some outer scope, so the one in the closest outer scope is used. The window is an object and it's the outermost object, so that is what "this" refers to if there is nothing else for it to point to. Also note that window is only the outermost scope in the front end. In the back end, it could be module or globalThis, depending on if the code is run in a module or not.

9 replies

KPCKevin Powell - Community

•Created by corizon. on 1/10/2025 in #front-end

How do I implement this animation with GSAP 👇

https://codepen.io/chooking/pen/mdoXRPq It's not the exact same thing, but I did something similar in vanilla JS/CSS that could be modified slightly to achieve the exact same result.

7 replies

KPCKevin Powell - Community

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

use cases for a closed shadow dom

If you want total freedom to do whatever you want, don't use shadow DOM at all. As I said earlier, it is not for ordinary usage. When someone develops a custom web component for public use, they make available a specific set of capabilities. If you want to do anything else beyond that, it won't be easy. It's the same with OOP programming. Some things are made private. If you want to access it directly in ways that the getters and setters weren't designed for, it won't be easy. It only seems like no added benefit because of your perspective of thinking about it.

8 replies

KPCKevin Powell - Community

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

use cases for a closed shadow dom

The goal is to make it harder to interact directly. Components that use this approach accept attributes for setting the properties. For example, there might be a color attribute for setting the text color instead of relying on CSS. This does not make it difficult for the user. They just have to interact in a different way. This is similar to the approach of having private properties in a class definition in OOP. The user must use getters and setters instead of setting the values directly.

8 replies

KPCKevin Powell - Community

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

use cases for a closed shadow dom

This is not for regular usage. This is for developers of web components. The goal is to avoid contamination between the component and the rest of the document. It is possible to plan properly to avoid this if you are the sole user of your own component, but it's a problem if your custom web component is part of a library intended for others to use. You cannot know in advance all the class names and ids that every user of your component will ever use on their page.

8 replies

Gaming

Programming