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

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

How to work with a consumption API? (with Svelte)

I genuinely have no idea what I'm doing here. I'm watching some videos on people kinda using it, but it's all vanilla JS, I'm not really sure where I'm storing this data in Svelte. In a nutshell, I want to use the Pokemon API to get say.. 10 pokemon, but I only want to use their images for my memory-card game, to replace the numbers I have there currently. https://github.com/callum-laing?tab=repositories...

Use of breakpoints with intrinsic/fluid design

Hello, Looking for ideas or feedback on breakpoints. I like the simplification of fluid design and using clamp for text/margin/padding fluid design etc.......

Text overflow ellipses for a flex container

I have a flex container with 2 columns with an image in one and text in the second column. I want to terminate text with ellipses according to image height but I can't give a fixed aspect ratio or fixed height for an image. Can someone help me with this? https://codepen.io/AparAwasthi/full/ExMMJpw...

Responsive Design

I'm trying to interpret between these few variables here and just trying to make sure I understand them: https://viewportsizer.com/devices/ So because some screens have high dpi or ppi, that's why CSS width/height comes in (I'm looking at a list for mobile devices) ...
No description