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

When do we need to lift state in React?

Hello, can someone explain when and why do we need to lift state in React please. Like what should come to our mind for it to be spontaneous, "to achieve this", we must lift state "because lifting state allows us to...", I need the fill in my mental model gap :c

Free smtp

anyone who can recommend a free smtp server?

where do I start conversion of an old static html site over 1500 pages? a bit overwhelmed

I set up a codepen https://codepen.io/steveo212/pen/qEORdLr to illustrate the basic structure. Looking for help on where to start. The site needs to be responsive, so the main menu needs to collapse to a hamburger (minimal to no JS if possible). FYI, this is a passion project and the site does not generate revenue, I'm just trying to modernize it and practice some of what I am seeing on Kevin's youtube videos so that I keep the consistency on the approach.
Question: Is the HTML structure appropriate or should I consider a different approach? The channel-menu-bar-section is a bit redundant. What I'm trying to accomplish is that when the site is being viewed on a mobile device, the user can still understand which channel they are in and select a different article within the channel. When viewing on a desktop, have two columns where the channelName is displayed and articles are listed. Please direct me to which videos I should watch as I do want to learn. Thank you...

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.