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

Cannot read properties of undefined.

Hello πŸ‘‹ So I'm trying to create a class for an alert card. And now whenever i try to use the class methods it throws an error saying Cannot read properties of undefined ( reading 'classList') What am I missing here?...

Blob like hover animation

The vercel dashboard (https://vercel.com/dashboard) has this nice hover animation on the navbar. How would I go about recreating that effect, keeping it accessible too? (Nextjs, so it's stuff is all garbled up and bundled)...

Tailwind CSS

Hello guys I just started using Tailwind CSS and I find it very interesting to use but I've got a question to ask. ⬇️ How else can Tailwind CSS be used without writing it inline html tags? Like is there another way to use it rather that just writing them in the tags, my code really looks ugly after writing lots of it in tags and I'm just curious. What if I've got a big project to work on ? Is that the only way to actually use tailwind?...

Query about compiling JS assets

Working on an old project using webpack, just for a reference it has a main.js file which is importing files from the components folder, pretty standard stuff. Ive noticed that some of these component files are importing the same package in multiple components E.G. foo.js is importing package 1 bar.js is importing package 1...

Separate conditions depending on children

How do i specify separate conditions if element has different children? For example - if a .button only has .icon - set the aspect-ratio to 1/1, if it has .icon and .text - unset the aspect-ratio and set the width to 100%...

Background image

Hi all there was video where @Kevin had background image without css background image but rather div that is paced on background. Don't know if my explanation is good but hopefully someone can point me the video or how to do this.

VSCode Help

I'm trying to work on a project & build a website for my bosses vape shop. I'd ask the general question, but I run into too many problems & I'm still a beginner. I struggle with things that I'm sure most people shouldn't & I just don't know how to put it into words or how to fix my issues. Does someone care to chill with me for a bit & help me work on things? Help me understand how things work & help me with the issues I run into? I get worse & worse everyday & I'm loosing my motivation. I love...

Font looking very weird

My code in scss: ` @font-face { font-family: "Bellefair"; src: url("../assets/fonts/Bellefair-Regular.ttf") format("truetype");...

SameSite cookie property

I've a frontend that I'll be hosting on a digital ocean droplet running linux and nginx. The backend will also (hopefully) be on the same droplet. I'm trying to implement session authentication, and was wondering if I'll run into problems with requests between the FE and BE because of the samesite cookie property? I'm obviously new to this and will have to look at how to serve both from one server, but was hoping for some pointers/tips that might save me a lot of time, if anyone has a spare second? Thanks!...

Gsap .from doesnt work with useEffect[]

Im learning now GSAP, so I think it's a really simple question, anyway, the documentation says this:
gsap.from() - Like a backwards .to() where it animates "from" the values defined in the tween and ends at the element's current state.
gsap.from() - Like a backwards .to() where it animates "from" the values defined in the tween and ends at the element's current state.
Whenever I refresh the site, it happens what you see in the GIF https://i.imgur.com/JrVzB11.gif, the animation "glitches", why? I tried to make the animation start when I click the div and it works fine, it start 200px off and then gets in the right position (but it glitches if you click it before the animation ends https://i.imgur.com/owuOWU7.gif, here I first make it end, then I click quickly)...

Finding the skewed offset of an element

I've a full width container, that has a before pseudo element that's 3/5's the width absolutely positioned, and skewed by 12 degrees. I'd like to place another element after it, so get the bounding rect coordinates and update a css-variable with the right value, which will be used as the left of the next element. I can't work out how to calculate/take into account how to adjust for the slant though Codepen: https://codepen.io/nwoodward/pen/JjBGbqW?editors=1111...

Site Best Practices

Hey Guys, Just looking for some best practice stuff, if i am making a landing page like this one, that has a background image, i imagine i would want to have a container on this, and on bigger screens (4k+) they would have black bars? Also i am guessing its not viable to have the image take the whole height of the screen? Attaching two screenshots, first one is the design, 2nd one is my implementation.

two Filters on click

here how can I add current and exits filter for all tabs, based on class or data set

Output the sku

I need this line of code to retrieve and display the sku and so far I cannot get it to echo the sku. Please help. <?php echo $this->escapeHtml($this->getSku());?>...

is there a better way than performance.now() to tell how long the execution took?

is there like a 1 line solution i think i saw someone who did it once but i can't remember but is there a way to know how long something took to execute but in a faster way than these 4 lines or 3 if we dont console log start? let start = performance.now(); console.log(start);
...

Items not appearing on mobile with display box?

Hey guys, it looks like the first few divs i have in this codepen aren't appearing on mobile responsive? the first 2 divs i have here just appear to be off of the screen? https://codepen.io/assyrianlegend/pen/OJwjgGJ...

Can I add animations to this project?

Project link: https://glistening-bombolone-928636.netlify.app/ I would like to try adding animation on the job cards when: 1)They are disappearing when not having adequate filters 2)Ones with the proper filters would stack up to the top...

width 100% is not respecting the gap property?

Hey Guys, Im trying to learn display:grid, i set a gap of 3.5rem, the cards i have have a child div that i set to width 100%, but it seems like the 100% is not respecting the gap, and its pushing all the way to the next div? can someone point me in the right direction?

Need a CSS expert (Tailwindcss)

I am trying to figure out chatGPT manage to stick the prompt area to the bottom. I copied their code but it doesn't work as expected and I am not sure how to get the same results. any help is appreciated Simple version: https://play.tailwindcss.com/IVZVV4w0jj Original Version:...

How can I convert a span to an img

How can I convert a span to an img? -- Can I get some help with HTML? What would I need to do in order to make a span viewed the same way as an img while considering accessibility? ...