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

debug problems in my basic webpage

so I have to finish this website in a very close time and I dont know how to fix these problems:

what do you called an input type text and has an x in it to clear the content?

in some of the search bar we can observe there is an x button inside the input element to clear the input field what it is called technically?

zoom out html document

hi , does anyone know how to eliminate whitespace from the document when zoom out? #front-end
No description

button fill:hover

Hey, i don't know if someone can help me but i'am trying develop this button but i'm stuck i dont know how to do a incline https://codepen.io/andresantos2460/pen/gOEVzbL...
No description

Is <time> used?

Hi! Just wandering if <time> is used at all? So many websites have some sort of time data, but I've never seen the time tag used on them. Is there a reason for this?...

Design for A11y, hide accordion section with css or javascript ?

This is for an application that requres log in. I wonder if what I see visually on the page should be same as what does exist in the DOM? Is it ok to hide some sections with css? They will be visible to screen readers if they exist in the DOM. This is about components like accordions or similar where you see more content after clicking a button. ...

Is there a bug in Chrome for Android for the position fixed grid children?

Hi everyone! Does anyone know if there is any recent change in Chrome for Android generating this weird behaviour in the position fixed grid children? As far as I know (and I think it was behaving this way a few weeks ago), when you set a position fixed to an element, it is removed from the normal document flow, so if I have a grid child and I set a position fixed to it, it should be removed from the grid container and therefore, not being affected for its constraints. This is how the grid children are behaving in all the browsers and devices except for one case: Android Chrome browsers (not even Chrome browsers from other devices or OS)....

Website responisve

Hi, i started my journey towards fullstack developer about 3 weeks ago and i accepted to create a website for a relative but i run into a problem with website responsive, i don't understand how to do it properly and i have to finish this website to be able to fully dedicate my time towards programing , i used only html and css and i will put my github repo here, could someone please help me finish this project, the website looks good on the desktop version for a 2k monitor because this is the m...

How to display content in a separate smaller window while still being on the main page?

Hello everyone, I am designing a desktop app using Electron and React. I would like to display some content on the user action in a separate smaller window while still being on the main page ( the background is the same). I am not sure about the approach to adapt. Should I HashRouter and Routes to redirect the user to the other page (but then how to keep the intial main background)? Just as an example, I was ispired by this app : https://lk.zont-online.ru/demo#/. If you toggle one of the car...

Having trouble centering nav bar with content on right/ nav bar shifts depending on text length

I've created a demo here: https://4c6584fa.portfolio-8nc.pages.dev/ At the very top I am having trouble figuring out how to center the nav bar (Work / About). The nav bar does not have a defined width nor do the external links on the right. I am also having issues with the nav bar on the bottom, it's currently set to the center of the screen but whenever the content becomes too long on one side, it shifts and no longer centers. This nav bar also does not have a defined width which causes the animation of the hover effect to change the parent div. However, the solution to the weird hover effect changing its container size is to set a defined width. Unfortunately, because the nav bar is based on the content, I am unsure if setting a predetermined width is the right move. Thank you in advance!...

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?