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

Remove header? Or move hero into header?

I learned that the header element is for things like the navigation bar. But what if the navigation bar and the hero section have the same background image? Should I remove the header and move the nav bar into the main section or put the hero inside the header?
No description

Is this a valid comment?

I added this comment because we had a bug that had it update state several times when we used getColumnState() and getFilterModel() -- just wondering if it's too verbose?
No description

Stuck, I Don't Know What to Learn

Guys im pretty stuck in css IDK what to learn or do now I know somewhat intermediate stuff but idk what to learn next I have attaches screenshots of some of the projects i've done so u can get a slight idea on my current position in css...
No description

clipping a path out of text

I'm trying to clip a shape out of a letter Currently in the Figma-file I got, this has been done by an SVG image that's being used as an overlay Is there a way I can just clip it out of the letter? So it becomes transparent with the background coming forward Or is that SVG image as overlay (and trying to figure out the position it needs) the way to go? ...
No description

label color change when radio input checked

Hi everyone In this code: ```html <label className="relative bg-very-dark-cyan text-white text-2xl py-1.5 px-4 text-center rounded-md hover:bg-cyan/40 hover:text-very-dark-cyan [&:has(input:checked)]:bg-cyan [&:has(input:checked)]:text-very-dark-cyan"...

Hover states not working because of stacking layers

I want the bag icon to hide behind the orange section. Just the way it is right now. But when I hover over the ellipsis and the orange section, nothing changes. When I comment out z-index: -2, the hover state works but the bag icon disappears. How should I solve this? https://codepen.io/ksblupzi-the-solid/pen/LENLmRZ

CSS only datetime-local input UI to choose date and time. Is possible?n

Hello everyone! So, is it possible to style and get a good UX/UI to a datetime-local type input with just CSS? Or do I need javascript? If so, what do you recommend? Thanks a lot!

Hosting my front-end using github pages and back-end using render

Hello, I was able to host my front-end on github pages. Now, when it comes to render, I link render to my back-end repo. The server successfully deploy it and give me a particular url. But when I use postman to test the link it doesn't work, here is my code:...

Purpose of Array.from()

Array.from({ length: 4 }
Array.from({ length: 4 }
Hello guys, from mdn docs, mdn, I understood what Array.from does but when it takes an object as argument what does it do? Can someone explain pls....

Why is the div not taking 100% height?

Hi everyone, I have a question. Why isn’t the inner div taking up 100% of the parent’s height, even though I’ve set its height to 100%?
No description

Positioning Header, Main and Footer

I was following along some courses and I got lost with positioning, here is my problem https://codepen.io/username55fda/pen/jEqmwyz . Lets say you have a three main sections for simplicity, Header main and footer. I was using flex column which works perfectly but I started to add disappearing mobile button and tried to put a transparent header above the main section and i lost track. Instead I used position sticky for the header position absolute for the button, its kinda working but I don't understand why, I watched kevins deep dive into position video....
No description

Animating text nodes (Airbnb style)

Has anyone attempted to do this style of animated text (the "Now you’ll see one price for your trip, all fees included." in the video from the landing page of airbnb.com)? I can't tell exactly how this is accomplished: inspecting the HTML, I see that there are as many <div>s as there are letters, and each <div>s contains individual Text nodes for each letter (though I can't tell how that would help) and they seem to have pre-calculated the bounding rect of each letter (seeing `transform-or...

Auto-optimized grid columns and rows

I have a container with buttons inside it. The buttons' text contents is of different sizes, always non-empty and inferior to the width of the container, and there is an arbitrary number of buttons. That means I can't hardcode any width value. I want - that the buttons are filled from left to right, but wrap in another line/row if it overflows, - that each button has the same width as every other one, even those on other lines, - that no button becomes shorter than the size required by its content...

When should I use media queries?

Hi, my website has these kind of squares with different stuff inside like a chatbot. Are there ways to make them responsive just with grid and flexbox? I usually style websites and then always use media queries but they are max 6 or 7.
No description

Using CSS vs image

Is there any advatage to doing something like this with CSS compared to using an image?
No description

Try catch block best practices

Hello, consider this route code: ```js import express from "express"; import { ObjectId } from "mongodb";...

React router dom

export const router = [ { index: true, element: <Home />, icon: null,...
No description

Other external function being executed while await waits for promise in "inner" function

Hello, I have a question when it comes to JS returning promises, more specifically with async and await. Consider these code: ```js async function fetchProducts() {...

figure out the 3d clipping offset?

hmm.. thought I could finally achieve the correct 3d clip but clearly the perspective matrix needs the z transform.. I believe the perspective-origin is correct, what would be the "perspective" (assuming it's the z origin) property math? ...
No description

User flow with email verification

I have a very weird user flow question. I have an account creation system that when a user signs up, they are sent to their home page but they have no access to the main functionality of the site until they verify their email. However, my email changing system requires an email to be sent to the current one and then another one to the new email to verify it. So how can I do this properly without any security vulnerabilities?
Next