Chooβ™šπ•‚π•šπ•Ÿπ•˜
Chooβ™šπ•‚π•šπ•Ÿπ•˜
PostsComments
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
KPCKevin Powell - Community
Created by smackalpha on 1/7/2025 in #front-end
Custom border in css
https://codepen.io/chooking/pen/yyBpdOG
7 replies
KPCKevin Powell - Community
Created by usama on 12/21/2024 in #front-end
Complex Figma gradient bgCSS
When an asset is accessible and usable, just use it. Only reconstruct it if there is some kind of problem with using the version that is available, and charge extra for that work.
8 replies
KPCKevin Powell - Community
Created by usama on 12/21/2024 in #front-end
Complex Figma gradient bgCSS
In that case, why are you trying to figure out how to create it? Just use that.
8 replies
KPCKevin Powell - Community
Created by usama on 12/21/2024 in #front-end
Complex Figma gradient bgCSS
If you cannot reconstruct this with a CSS gradient, using an SVG will also not help, unless you figure out what the shape is supposed to be and apply a blur to it. Otherwise, you have to just make the gradient in the SVG, and you would have the same problem. The quality loss of png or jpg is not a problem for this specific image because it has no clear details. Enlarging causes blurring, but it's already a blurry pattern, so the additional blur will be completely unnoticeable.
8 replies
KPCKevin Powell - Community
Created by Vinicius on 12/14/2024 in #front-end
Closures works only because of lexical scope and scope chain?
An extra detail not in your explanation is that Javascript is a garbage collected language. If there is no valid reference to a value, that value gets discarded. In most functions, the parameters and any variables declared inside that function will be discarded when that function finishes execution. If that function returns another function that has references to either the parameters or variables declared in the outer function, that inner function continues to hold references to these values, so they do not get discarded even after the outer function has finished execution.
5 replies
KPCKevin Powell - Community
Created by empty on 9/14/2024 in #front-end
stroke text
The LOREM in my example uses Montserrat, which is one of the fonts that exhibits the problem you encountered, but it works with this technique.
9 replies
KPCKevin Powell - Community
Created by empty on 9/14/2024 in #front-end
stroke text
It is possible to do with poorly designed fonts by using SVG text. https://codepen.io/chooking/pen/emOOQya
9 replies
KPCKevin Powell - Community
Created by Abc on 12/9/2024 in #front-end
How to avoid duplicate if checks when overriding a method in JavaScript?
I just realized a possible third option. You could call super.jump() unconditionally AND set speedY unconditionally if the new value of speedY has no effect on a dead entity. This still does not seem better than what you have.
36 replies