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

Need help fixing a glitch with my button

I'm not sure how why its doing what it's doing but whenever I hover and then hover off the btn it does this glitch where it sort of spazzes the background color. Would appreciate some help with this and any other feedback as well!!

<div> cannot appear as a descendant of <p>. at div

Guys help me I am a beginner in JS Some one help me how to solve this error plz Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. Image...
No description

Key and Code values for "enter" key in mobile

My project isn't working on mobile devices. On desktop, it works when the user press "enter" or "backspace" keys, but not on mobile. Is there key and code values for the relative "key" and code event for enter and backspace properties on mobile devices? code:...

backdrop filter cannot work on firefox

i deployed this webon vercel , some errors occur when I hover on "Product" and the text does not appear in white. Anyone can help me ? pls https://personal-eight-theta.vercel.app/...

Is there another way to do this?

I want to generate a random word, when the users enter the site I want it to generate a random word, then generate the grid. The way I thought to do this was to use an IIFE asynchronous, but it takes a few milliseconds to generate the first grid. Code:...

How to optimize for embed videos?

I have multiple videos I have showcased on my website but they look awful. I'm using the imagekit CDN to upload the videos. Is there a way I could optimize my videos further without decreasing the quality to be potato? I've read that videos should be under 1mb but some sites like Teeange Engineering have videos that look crispy. I've checked what they use and it seems to be Vimeo. How different is it to upload the videos directly to the website and have Cloudflare CDN take care of the rest vs Vimeo/ YouTube? Website in question (Ran a lighthouse and the video is supposedly 10mb) https://teenage.engineering/products/ep-133...

Transparent Button Background with Gradient Text and Border Effect - Hover Problem

As a beginner in CSS, I've been learning for a few months now, and I recently encountered an issue while practicing gradients. Specifically, I created a button with a gradient background and wanted to add an effect where the background becomes transparent upon hovering, while the button border and text maintain the gradient coloring. I've made progress and gotten close to the desired result, as you can see in this CodePen: https://codepen.io/Si1enzio/pen/gOEVwNz. However, I'm facing a problem where the link text disappears when hovering over the button....

I need somebody who explain me cypress e2e (in discord call)

Can I grab 15-20 minutes of your time for call in discord? Please send me when you available too meet in discord - I have question how to fix some errors with cypress and what should I test in my project e.g 29.02.2024 at 14:00 CET...

Disabling CSS Animations on Lower End Devices (Is this a good idea?)

Hi! I have a general design question on whether disabling css animations on devices with poor performance is a good pattern to follow or would be considered a bandaid fix to underlying performance issues. I'll provide an example scenario with using Interaction Observer and a blur + translate animation to animate elements appearing on user scroll in the thread. That is one scenario I'm running into where it lags on slower devices (for instance even my M1 macbook when on low battery) so I'm wondering if there's a reliable way to get a performance measure and disable the animation based on this....

Grid - defining elements

Hi, I'm a beginner and I have a really trivial question. Is there any way to avoid writing p elements 17 times, but define them by grid?

Altering size with media queries

So i made this form and decided a good size for it is 50vw, the problem is when the screen gets to around 560-580px the space between it and the edges is too large and it gets squished. I wanted to make it 70vw using a media query but no matter how i type it the query refuses to target the form at all. Here are the html and 2 parts of the css: <div class="form-parent row"> <div class="form row"> <form id="form1 col-6"> <div class="contact-1">...

My site is not being responsive

can someone help me make my website mobile responsive beginner here. I tried using media queries but they don't seem to work, maybe it's me idk https://codepen.io/haamid673/pen/yLwdKQE...

How to make header cells full height

https://codepen.io/kodee/pen/WNmqMKQ Trying to fix the first column or maybe two. When the content in other cells is taller I need to adjust my absolute ones, any suggestions?...

How to make this smaller?

Hey there! Appreciate you guys taking time to help me out. I had a quick question as you see the three containers take up a good amount of space I was tryna screw around with it to make it smaller but can't because it keeps screwing with other stuff I'll send a CodePen of the HTML/CSS related to it if anyone can help make it better looking.
No description

Updating @property with JS for animation on load

https://codepen.io/Miss-Fox/pen/BabgmjK?editors=0110 hopefully the video explains better with the visuals than i can type out but basically i am trying to update the :root custom property so that its value is equal to the respective javascript variable (days, hours, minutes) and then update that on each "box" class of '.option' so that the angle on that box matches (if days is 24, angle is 24). Its actually written as a percent not an angle but im not sure if that matters here? Elements involved: +@property for dark-grade-angle, dark-grade-day, dark-grade-min; ...

Put a blur

I want realise this effect
No description

Special button effect on hover

Hi, does anyone have an idea on how to approach this effect for a button: https://www.poppr.be/en; where there is a kind of radial and linar multiple single color effect from the bottom?

Strike line continuing through text regardless of lengthโ€ฆ

Hello, I am trying to recreate the styled text attached and I am running into problems. I have tried various ways to achieve this, and none quite workโ€ฆ 1. Pseudo Class Works great until the line breaks...
No description

Mantaining field alignment across rows

Hello, I'm working on a Svelte app for a medical history application. I'm trying to render out a list of patients with name and id data, last visit and an arrow to expand the card. The issue I'm facing right now is that due to the characters not taking up the same horizontal space, there's a small miss alignment that I can't seem to fix. Here's my code:...
No description