Choo♚𝕂𝕚𝕟𝕘 Comments

Choo♚𝕂𝕚𝕟𝕘

•Created by Faker on 4/23/2025 in #help

What's the difference between Vue/React Framework vs CSS Framework like bootstrap/tailwind

Vue/React are for specifying content. They enable conditional styling, but they don't define any styles of their own. Tailwind is for specifying styling and not content. Bootstrap provides a mix of both, but the content it provides is predefined. Vue/React help you to specify content but don't predefine any.

42 replies

KPCKevin Powell - Community

•Created by KTO96 on 4/15/2025 in #help

Metallic animated CSS Gradient

True metal shimmer involves reflections. You don't need to do ray tracing or even simulate it, but you do need some extra bright or even white lines or spots, depending on the geometry, to simulate parts of extra high reflectance that occur when the angle of the surface is just right to reflect the light source directly into your eyes.

4 replies

KPCKevin Powell - Community

•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

Gaming

Programming