Kevin Powell - Community

KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

front-end

resources

back-end

ui-ux

os-and-tools

help

Create a transparence

Hi everyone can I get some ideas about the nice effect of transparence on top the video on this website:...

Simple JS operand

I got curious about something, but, let's present the following case: ```js let a = 2; let b = 5; ...

Dynamic height: scrolling an element of unknown height into/out of view

I have a page for mobile that should dynamically adjust to the users device. There is a box that I'd like to have outside of the default view and that should scroll the entire page down when coming into view. How can I best approach this problem? One thought is that the entire content could be wrapped and then shifted up/down the height of the afore mentioned box. But that requires the parent to "know" the dynamically set height of a child, which seems bad/ impossible? ...

Parent props render when theme changes

Hi, I want to change the props based on the toggle theme of website. But I dont know why my parents props not updating when the theme changes. Code here https://codesandbox.io/s/sharp-lamarr-hzpcdr?file=/src/App.tsx...

How to pass react props in css??

How to create that splash effect under the cards using tailwind css

Click MouseEvent not bubbling

Maybe it's not bubbling? Maybe it is? I'm not 100% sure, but it doesn't look like it and I can't seem to work out why 🤷‍♂️ ``` const clickEvent = new MouseEvent("click", { "bubbles": true,...

Getting 404 error with font-faces even with correct file path

I've followed Kevin's tutorial on how to sefl-host fonts using @font-face (https://www.youtube.com/watch?v=zK-yy6C2Nck&list=WL&index=19) but I ran into a problem. When I declare @font-face (with 100% correct file path) I get 404 error in browser. And I'm sure file path is correct because I can Ctrl + Click on it and it takes me to that file My file/folder structure: ```...

Cloning Google Font's Light/Dark Mode Toggle

I was following along with this one, not really being a tutorial, but there are certainly things to learn in this video, anyway. I was doing this for fun on a HUGO website I'm playing with. And I pretty much cloned what Kevin did, but I can't get the browser to remember my prefers-color-sheme, no matter what I do it will always switch to dark, which I am using as the main theme for the site. And I've checked all instances of it that I have set up with Hugo in css and golang html. I don't seem to have done anything different than Kevin. The only thing is that I'm on a pretty old 2013 Macbook Pro running OSX 10.14.6. On chrome and yes, everything on this system is themed dark. Google fonts does recognize my preference, so theirs kind of seems to work. Any clues/ ideas as to what might be causing this for me would be great....

How to reduce width of a div without hard coding values? the only element it contains is a image

As you can see in the image the parent component has display:flex, jcc, aic properties. parents has two child divs one containing ul and other is image. the original image is of diff size so i used width:20% on img, the size of the image is reduced but the div surrounding is not reducing in width. how to fix it? https://codepen.io/avinash-tallapaneni/pen/ExRomwX...

How to theme when using CSS modules?

So, I'm currently working on a pitch to dig deep into the guts of https://metagame.wtf and tear out all the Chakra UI. Replace it instead with semantic HTML & class and id-based matched CSS modules as parsed by whatever. The visual appearance of the page is contained solely in external CSS files, the structural appearance in the markup....

How to make a fancy border

Hello, I'm looking for advise on how I might achieve the border attached in the image. In case it doesn't display very well. Its a dashed border, but has little squares placed in corner. Pretty confident there is a CSS solution to this. So the dashed line is simple enough, and I know I have the before and after pseudo ready to be used....

How to style a selector's height based on the height of the selector that is being hovered?

Hello friends, first time poster. A friend I know brought a JS solution to a problem that I think can be solved with CSS. But I just can't put my finger on it. The component is the one under "Qualify self-employed borrowers in seconds." at this website: https://baleensolutions.com/ ...

Button gradient background missing on mouseover

https://codepen.io/dmtractic/pen/eYLvmdg This button has a pseudo-element :before. This is being used only for the gradient stroke. When you mouseover the button, it seems like the pseudo-element overlaps the main background of the button even it has z-index: -1 style....

Alert the user if they are using older version of chrome , edge ?

Hi Which is the best way to alert the users if they are using the older version of the chrome or safari ? I think by using the older versions of browsers they are not able to access few components. this is due to older versions or some other issues (like based on React Version they are not working or due to some npm packages etc. )if it is browser then what approach can i follow and alert the user to update the chrome or safari ?...

When use "use strict"

Hello... First time coding in JS. Cam across this: https://javascript.info/strict-mode Does this mean that I always have to put "use strict" at the top, or only if there is old JS to be implemented along side new?...