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

what to do next

im just done with dictionary api app and dont know what to do next these are the projects i have made until now: 10-20 basic responsive websites with like 4-5 sections on average (multiple page) rock paper scissor...

Bootstrap responsive container

bootstrap question ```twig <section class="c-blog container"> <div class="row">...
No description

Semantic question

```twig <article class="c-product"> <a href="/shop/{{ product.slug }}"> {{ img.responsiveImage(product.productPhotos[0], {...

How to Change the Mobile Bottom Nav Bar Color on Android (Shopify Site)

Hey everyone! I’m trying to figure out if there’s a way to change the bottom system navigation bar color (like the one with the 3 buttons or gestures) when someone visits my Shopify store on mobile. I know <meta name="theme-color" content="#000000"> is supposed to change the Chrome address bar color, but I’ve seen that on some Android phones it also changes the bottom nav bar color—or at least blends into the page background. I tried adding the meta tag and matching my page background to it, but the results seem inconsistent across devices. Sometimes it works, sometimes it doesn’t. So here’s my question:...

I want to animate the list if one item is removed. Is it trivial in modern CSS?

I have 10 items and say I remove the 3rd one. I want the rest to move into place smoothly and not just teleport with no animation. There are many ways of doing it but I was wondering if any of the modern CSS features has made this problem easier to solve. Like the @starting-style or height: auto maybe? What's the simplest way of doing it? ```html...

If TypeScript is.... adding types... what is this, and why is this allowed?

```js export type InternalAddress = { firstName: string; lastName: string; kind: "internal";...

[Help Needed] Add Wishlist Icon on Product Page

Hey y’all, I’m working with the Kalles v5 Shopify theme and ran into an annoying limitation. The Wishlist icon only shows on the product cards in collection pages — not on the individual product page itself. I reached out to the theme devs, and they basically said they won’t help with it 🫠 I’m trying to add the Wishlist icon (like the heart) over the product image on the product page — similar to how it appears in collections. I’ve attached screenshots titled "Wishlist 1 & Wishlist 2" for reference....
No description

props in react

Hello, I know that a props is just an argument that we passed in to components in reacts, but I don't know, I feel that I don't have a strong mental model of what props is, it's not clicking in my head, just wanted to know how anyone here would explain what a prop is and why is it useful

Scrolling animation using motion.dev

I want the outer circles to shrink & merge into the butterfly's circle from sideways as I scroll down. The butterfly is a svg tag and I have all the IDs for the butterfly's circle. I am using motion.dev with react. I've got most logic correct but not sure how exactly I would bring the circle right into butterfly precisely using x,y co-ordinates More context: As I scroll down the butterfly scales up from 0 to 1....
No description

event handler vs event listener in JS

Hello, quick clarification, an event handler is the action that happens when a registered event has been triggered? An event listener is the thing that registers an event? For example, someButton.addEventListener("click", doSomething ) someButton is now registered, if we click on it, the event handler is triggered which is doSomething?...

how to go about email validation with zod?

im trying to validate emails with zod and have errors for when its required and invalid for example z .object({ email: z.email({ required_error: "Email is required.",...

Need css help with "growing" div upwards.

The goal is having #body push the rest of the content upwards. Is this even possible without js?
https://codepen.io/KB04/pen/EaVZgoG ```css...
No description

How does react updates counter variable when used in useState hook

```js const [counter, setCounter] = useState(0); const increment = () => setCounter(counter + 1); return <button onClick={() => {...

Apply 100% width after scaling

I have an element that needs to be scaled to 0.9, this element also needs to occupy the 100% of available space. But these two settings seems to go in conflict. See attached pics. The elemnt is inside a flex container and has a flex-grow: 2 property
No description

Complex section

I have no real clue how to start doing this section nor do I know how to properly make this responsive that it also look good. (I did not made this design, this is a design I got from school and have to follow)...
No description

Give me advice

Hi i have 2 years sisce i started front end journey i learned html css javascript ,scss htmx ( and npm + git ) and currently learning three.js after that is tailwind and react.js ,here and then i do some projects but i find myself googling docs for stuff that i learned time ago is it normal ? + the feeling of whenever i think about offering my services that i am not qualified yet ? should i start and as they say learn in the process ? (Picture is for attention only )...
No description

Grid lines in grid being greater than actual number of rows and cols

Hello, can someone explain why in display of grid, the grid lines are always 1 greater than actual number of rows and columns. For instance, if we have 3 rows, then grid line number for rows is 4 and if we have 2 columns, grid line number for columns is 3.

why can't we use justify-item in flexbox but we can in grid?

Hello, can someone explain why we can't use justify-item in flexbox but it works in grid, what's the difference?

Why do devs prefer linux/mac for development rather than windows?

Hello, quick question, why do people prefer linux over windows when it comes to developping stuff? I'm used to windows so I only have windows experience, will really appreciate if someone can explain why other people prefer linux/mac for coding. From what I've read this is why microsoft has enabled WSL. When it comes to using linux machine as server rather than windows I understood their pros we don't have licensing etc....

Make select options show full width

Client doesn't like the select options cutting off (see picture #1). They want it like picture #2. This works fine OOTB in Firefox, but it doesn't work in Chrome only when you initially click the dropdown box. If you click it again, it'll expand the width like it should. Any suggestions?...