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

best way to implement for responsibility

hey! :) I need someone to tell me, whats the best and correct way to recreate this image
No description

Cut-out effect with decal

I have a similar thread here, and I tried following this article, but this time I couldn't do this decal. Any tips?
No description

Tailwind has with aria

Hey! Is there a better way to use tailwind has with aria than doing has-[[aria-invalid="true"]]:...? I have aria-invalid="true" added to tailwind as aria-invalid but can't really figure out how to combine it? Also sorry if it's the wrong tag....

Product dot hover

I'm thinking of using absolute position to place the dot on the product image but I'm worried that this wont work if the image change sizes when it's responsive and messed up the actual correct position. is using position a good idea for this scenario?...
No description

Img being dragged down? Unsure

If you take a look at my landing page it looks perfect, One thing I don't understand is on the bottom of the page there's a black line showing up with the design continuing that isn't meant to be there and I have no idea how to get rid of it I've tried viewing my code and fixing it myself with no luck.

help with footer the scrolls

done research and need assistance on how to make the footer scroll with the browser vertically , does anyone know?
No description

how to check if user lost internet connection

Sometimes losing time on the web I noticed some websites have specific ways to deal with a user who has lost his connections. I wonder how. Is there an event that fires when this happens?

The maxlength attribute for input: text doesn't work for mobile devices?

I'm generating <input> tags through js and each input should have a maxlength attribute. It works fine on pc but don't on mobile. I mean, on PC I can only type 1 digit on each input box, but the same doesn't apply on mobile. Why? Codepen: https://codepen.io/leoncelestino/pen/wvObBax...

How to achieve this cool hover/animation with CSS

Hello! Upon opening discord this morning I saw this cool hover effect on some cards on the Nitro page and decided as a morning "warm up" I would try and recreate as a coding challenge. Low and behold I got stuck so I thought I would see how anyone else might approach this. Here's the effect: https://www.loom.com/share/20bb18705b22479a9f3c6f2863b3d55d?sid=52808e73-95d7-4033-865f-d87fc0bf7e0a Here's my codepen so far: https://codepen.io/Jon-D-the-vuer/pen/RwOboox?editors=1100 ...

Next JS routing got me confused

Hey, I have this simple link in my component but im kinda confused with the routing. ```ts <Link key={product.id} data-type={product.type}...
No description

help with aligning images

so I have this pop-up in which there is the background that represents the shelve, then there are individual "books" which take you to different pages I want them all to be clicked differently I want them to be responsive I want them to stay inside the popup, not get bigger...
No description

'Jotai' Best practices

I've been exploring Jotai to grasp its capabilities and use cases. I created a basic application for filtering a list and adding and removing items from it. Seeking opinions on whether my implementation aligns with best practices and effectively leverages Jotai's functionalities. Store ```js...

Is is wrong or bad to add padding to represent hierarchy in tables?

I got data that is a list of items, got a name and category. Each item could have children, with name and categories there too. And I would like to show all of them. I was thinking of adding a left-padding on the children, making them indented. Am I thinking about this wrong? Is there a better way?...

Testimonial slider responsiveness problem

how to make flex child take the full width of the available screen and other childs take the same width as first one but they should overflows. I want the output to be like the attached image. but in responsiveness it is creating problem, how to solve it? check video https://codepen.io/hamzacodepen951/pen/LYvPPzj...
No description

Translation of item in hover

Hi everyone I want realise this animation
but I don t know to begin can I have some idea .NOT CODE just some idea I want realise it myself ...

Section not loading correctly

I'm unsure on how to describe this situation so I'll try to the best of my abilities I'll send a screenshot below. (Explanation: Basically when I reload my website and scroll down the "My Work" portion doesn't load fast and requires the user to scroll down fully to the section for it to load. What can be causing this? The rest of the page loads perfectly BUT some times it does become laggy I've never had to deal with issue before it started two days ago.

How can I fix this issue? Might be overflow

In the smallest size available using inspect element (320 x 870, more exact 351 x 870) there's a empty white part at the right side of the screen this goes down from the top of the page all the way to the bottom. I can't post a CodePen as some things Im using are Images and I haven't really learnt how to make the Pictures lode in CodePen but I can redirect to my GitHub where the website looks as it should!
No description

Portfolio site

What do you guys think about what I created here? Created with only HTML and CSS. JavaScript I still need to learn. https://agloveswindows.github.io/portfolio/myportfoliosite/index.html...

FullPageCapture ScreenShot

Does anybody knows How Chrome Developer tool Screenshot Full Page in run command works bcoz i m trying to make chrome extension which take ss of full web page

Sveltekit file organizing - Where to write what?

My app will consist of just 3 pages; Main/Home, Cart, and Payment. I vaguely remember doing this on my portfolio and looking back at the code can see I had routes/folder/+page.svelte for each separate page, but for the initial home page I seem to be using routes/+page.svelte for my homepage, routes/Header.svelte for my navbar, and +layout.svelte for.. well I'm not really sure anymore LOL... Github is here though so you can make sense of it: https://github.com/callum-laing/sv-portfolio/tree/main/src/routes The image is my current "start" for this, though I haven't added +layout.svelte yet.....
No description