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

Make element sticky relative to parent?

Hi there, I have a <code> element displaying some content with a floating label to copy the text next to it. Sometimes, the content inside gets too long and have set a width limit and allow for horizontal scrolling. The problem is when this happens the floating label does not stick to the right corner of the element in in the way that I hoped. It should be fairly obvious what I mean with an example: https://codepen.io/D10f/pen/RwmpRjN...

simple discord.js bot question

hey, I have a bot for my NFL server and I wrote this script to ping a user who hates the player Trevor Lawrence anytime tlaw is mentioned. It will read a message for tlaw and ping the user, but for whatever reason capitalized t in Tlaw does not work -- I thought using the | | operator would work but it isn't, thoughts?
No description

Slider animation except at first page load

I have this basic slider and it works pretty good but I want to prevent the animation of the first slide when the page loads for the first time. https://codepen.io/Andreica289/pen/ExzZzME...

cookies data on website

How developers can focus on cookies with websites ? #front-end

Really cool text effect

Hey yall, I kind of wanted to recreate the effect that this website has on their Header text for their home page https://www.homagames.com/homa-lab Does anyone have any idea how to replicate it? the closest ive come, is just doing a typewriter effect, but with a randomized letter being shown before the intended letter....

Tracking cursor position over window rather than individual elements

I've been playing with an effect where a partially masked element positioned over the mouse adds filters in a glowy blob over a background grid of dots. See the codepen at https://codepen.io/Beanie127/full/RwmKvmz. The problem I'm having is that when the cursor is over any element other than the div in the background, the circle positions relative to the cursor's offset over the element that the mouse is over, rather than relative to the whole viewport. I've tried creating a new contentless element that sits at the top of the z-index and tracking the cursor's position on that element, but then the cursor can't interact with any elements underneath, so it's degrading UX....

choppy animations in Firefox with mask

Hi guys, I have run into a performance issue with my personal website. I have this background animation that runs infinitely. On top of it there is a mask, making the edges fade out. This all works perfectly in chromium based browsers, but on firefox it lags a lot when using the mask. Disabling or removing the mask stops the lag and makes the animaton run smoothly....

Chrome vs. Firefox 😳

For this site: https://amarlong.github.io/Deichman/frontpage.html I have the picture set at 70dvh, and it works fine in Firefox (img 1), but not in Chrome (img 2). This in unchartered territory for me, so not sure how to attack this issue....
No description

Help me position the object.

I need to place the object next to the <aside> but I can't get it to work. I'm working with the Django framework. The screenshot shows how I want it to be positioned. The second screenshot shows what I'm trying to achieve. I will show the next HTML message. main.css css is not a complete code...
No description

Trying to inject styles in shadow-dom but element.shadowRoot is always null

SOLVED: Shadow Dom created by the browser cannot be altered. I am trying to style the timeline of an audio player and need to inject a stylesheet into the shadow-dom to do this (::-webkit are not enough). edit: Now this codepen https://codepen.io/fluffybacon-steam/pen/dyENayJ...

Dark Mode with Vue

Hello guys, is it good idea that i use class binding in dark mode feature with vuejs? Any Suggestions, Recommendations, Opinions?...

Why aren't these grid elements moving next to each other?

I'm using the following scheme in a 3-column grid layout: ```css img:nth-of-type(2n-1) { grid-column: 3; }...
No description

how do i select the content

newBook.children[0] contains ```<div class="bookTitle"> <h3>Title:</h3> <span>Think and grow rich</span> </div>...

How to prevent Flickering caused by backdrop-filter:blur() when transforming/moving on ChromeBrowser

For some reason there is no flickering on codepen. Here is my codepen: https://codepen.io/noobcoder137/pen/WNBRMPx Also it works fine on mozilla firefox and OperaGX. I am using Chrome Browser on Mac. Don't know if it's same on windows Chrome.:raisedbrow:...

space travel frontend challenge not able to implement universal selector

I am following the scrimba kevin powell course for space travel website challenge I am in initial stage only but i am stuck on universal selector issue What exactly is the issue the nav bar that have active , hovered , idle state i am unable to add the hover using universal selector as kevin has directed the hover is supposed to add a border bottom to the elements I tried using li selector instead and it works fine ...

“collapsing margins in action” section

In the “collapsing margins in action” of CSS Demystified, Kevin adds a padding top & a padding bottom & that brings the hero image into view where prior to that, it was partially covered. I think I am somehow not understanding where the part is that explains why the lack of padding prevents the image from being in full view. ...

need help to turn my ugly routes to dynamic routes

i didn't read the doc because i don't have time this is an assignment have to be completed before an 1h routes:...

i need help with aray

hello how can i all item in aray Random with no reapeat ? in java script ! what is the simplest way to this

My TranslateZ not working at all in Chrome or Edge

I've been trying to translate a Javascript example from a YT video of a animated card with both rotation and translateZ effects. I thought most of the original code done in Javascript could be handled in CSS with just the mouse tracking done in javascript. However, niether th original code's 'translateZ' or my CSS version actually do anything, I read another post here about a solution to translateZ issues being something to do with : "backdrop-filter: blur()". Net being sure what this was, I tried commenting out some box-shadow blur css lines, but that didn't help. I've had to upload the coide as it makes the post too long if anyone can help me narrow down the problem...