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

Do I have the gist of the purpose of CSS?

So I'm starting to understand the way we must think about CSS if we want to have a good relationship with it. And after watching this amazing video: https://www.youtube.com/watch?v=aHUtMbJw8iA I wanted to make sure that I got the gist of it ❤️...

typescript error when flattenting a zoderror object

```js function flattenError(error: ZodError<z.ZodObject>) { const treefiedError = z.treeifyError(error); if (treefiedError.properties !== undefined) {...
No description

float: inline-start with line-clamp?

Hey everyone. I was wondering if it's somehow possible to combine float: inline-start with a line-clamp Here's a codepen illustrating the issue: https://codepen.io/thevinter/pen/ogXezKB ...

Implementing a Field Group Link(?)

Not sure that's a good name for it, but I want to visually indicate that two groups of fields are linked (i.e., changing one will update the other). What I have is this: When birthdate is updated, the age updates. If the age is updated, then the DOB is updated, etc... I need each end of the bracket to line up centered on the field, and I got it to work by hard coding margin top/bottom...
No description

typescript simplify a type guard

```js const validationResult = UserLoginSchema.safeParse(req.body); if ( validationResult.error instanceof ZodError ||...

`:has(::after)`

Can you use :has with a psuedo element inside of it? It's not working for me but I don't see why it wouldn't but I can't really find anything For context, I'm trying to style a tooltip based on whether the label has a required asterisk: ```css label:has(::after) button[title]:hover::after {...

Can I add margin-top to sticky top

Is it possible to add margin to the top of a div with position: sticky? I want some white space on the top of the page when the row is sticky. I'm also using Bootstrap5 for styling ```html <div class="resource-container no-border d-flex sticky-top">...</div>...
No description

JavaScript

JavaScript is very hard for me to understand Please I want someone that will help me with a good source where I will study it from beginner...

Border and outline on focus on input text field

Hello, small question, I forget that each time, when we click/focus on an input text field, we do get a border or an outline? Or both? Now say I don't want that border/outline, do we set it to none or transparent?...

What's the difference between spread radius and blur radius in box shadow

Hello, can someone explain what is the difference between spread radius and blur radius in the box shadow property in css please. How are both used together ?

MySQL Self Join Table

Can you help me understand JOIN a bit more ``` SELECT * FROM Weather AS yesterday JOIN Weather AS today;...
No description

SQLite what is the correct way?

Hello, I would like to store data with SQLite after a few steps. Example : first page I ask name and age, second page birth and gender, third page ....so on. Till the last page. But I would like to store data only when someone finished all pages....

Purpose of background-blend-mode in CSS

Hello, can someone explain how background-blend-mode is used and why is it important please. From what I've read, we use it where we have several background images but I didn't really understand how is it used.

Where to find stock images

hello i need images for my sign in and login page where to find them? they will be showed in caraousel i tried this but those images don't look good please help...
No description

Image not resizing

I could resize an image in any way I wanted, but as soon as i added alt text, the image resized itself to its default size and i couldn't make it smaller no matter what.
No description

Static noise in background

I just encountered this site which has a very subtle static noisy texture in the white background (appears when zooming in). How is this type of thing implemented? Which parts of css should I look into to remake this? Thanks https://www.basicagency.com/...

Grow section without changing wrapper or main

Here is a minimal reproducible example: https://cdpn.io/zachjensz/fullpage/QwbKRYB I have a <section> nested within a flex child with display: block that I cannot change, but I need <section> to take up 100% height. Been stuck on this for a while....

Overflow: auto causes flickering vertical scroll bar

Hi everyone, I'm currently working on a React component that has a maximum height limit. Once it reaches this height, overflow: auto is applied to allow scrolling. The component's children are collapsible accordions, which are initially collapsed. When all accordions are expanded, the content exceeds the max height and the scrollbar appears as expected. The issue comes up when collapsing the accordions. As the content height decreases, the scrollbar briefly flickers before disappearing. I’ve already tried setting scrollbar-gutter: stable, but the scrollbar thumb still flickers before it goes away. ...

Grid alignment inconsistency

Hello. I have 4 cards in a grid. As you can see in the image, the 2nd one got a little bigger due to the extra line. To remove the consistency, I am hoping to make other cards extend as well but I am unable to. Please guide me. Code: ```tsx function PeoplesGrid() {...
No description