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

What is the down side of FLIP animation method?

hi, when search about FLIP animations in web (https://css-tricks.com/animating-layouts-with-the-flip-technique/) i realize that in paper we should use this method for all kinds of animations which affects layout therefore other elements. so i wonder why very few people uses it because of it is complex or what?...

firefox fouc error

Can someone help me with fouc? I am using macbook pro m1pro and styles arent working on firefox...

SWIPER JS Help

I am trying to make this infinite autoplay swiper. However I have two issues. 1. The slides are not centered even after using centered : true 2. The loop is not working as expected, it is taking too long to load the images which does not look good Here is my code. f and f-c is flex row and flex col respectively...

Is this good practice?

<a href="#"> <button>Read More</button> </a> If I have button and I want when user clicks on it, the user should be moved to other page, is it consider a best practice wrt accessibility? ...
No description

variable within :root variable not changing.

Hey, i recently tried to test out a new design system method i saw andy bell using on https://piccalil.li where a property has a base value stored in :root with variables that can be changed from within the component using it (in this case --border-color). However my variable is not changing as intended. Am i not able to use variables this way? Though it must be possible since he's using a similar syntax (see image). I just can't quite figure out how it's working for him. I'd appreciate any help. Thanks in advance. https://codepen.io/deerCabin/pen/QWXXjKa...
No description

Stacking cards

Hey, does anyone have an idea how this card stacking effect (https://webisoft.com/) can be made? I used position sticky and a padding-top with a calc, but it affects the content "HEIGHT". Any ideas or what would be your approach?

Responsive layout - grid with image

Hi everyone, I was asked to create a layout of a table next to an image. There were a few constraints: * The table declare its width * The image aspect ratio is 16 / 9 * Table and image should be aligned (table should be scrollable if content does not fit)...

Astro npm run dev does not work

Hi everyone, As the main subject says, when i first start a new Astro project, with the following installation options steps: 1- npm create astro@latest 2- Choose a directory name "example"...
No description

weird react problem

I just downloaded NodsJs and tried to write this code in VSC terminal and this showed to me ``` PS D:\New folder> npx create-react-app my-app npm error code ENOENT npm error syscall lstat...
No description

flex component | weird padding behavior

Hey, i'm using a flex utility for a responsive two column layout. The layout should switch from single column to double column when the container reaches 45rem in width. When the container has padding on it though, it switches over a little later. I don't really understand the reasoning for this other than it's possibly adding the padding value onto the 45rem, but even if that's the case, if the container that doesn't have padding has reached 45rem and switched, then the padding shouldn't make a difference? Thanks in advance. https://codepen.io/deerCabin/pen/VwJOqYW...

need help with grid in responsive

codepen link : https://codepen.io/Vicky-clowdy/pen/jOjoQPY So the red circles will be replaced by images on my project but the problem is the images are displaying correctly in devtools responsive like that picture but when i use vs port forward and saw on mobile the first column is not displaying , it shows from 2nd column. i tried grid-auto-flow:row and still the first 2 elements not display properly...
No description

Sticky nav not working on mobile view

Inside of a div, I have header component and a nav component which I wish to make sticky but it is not working
No description

Hosting React Laravel Project

Hey guys just wanted to ask for suggestions. Im planning to deploy my project of Laravel React. As of now I'm nearly to 100% completing the frontend which is react and just wondering if you guys can help me where to deploy this? (For sharing purposes using URL) I did try on GitHub and Vercel and runs some problem. Is there any deploy drag and drop site you can recommend? Folder structure is the main img...
No description

how to make sidebar scroll-able.

hey, this is something i've been stumped on for a while. How would i make the sidebar on the left scrollable on the vertical axis, but not the "page" or content on the right? So the content on the right sticks whilst you're able to scroll through the would be nav. I'd appreciate any insight, thanks in advance. https://codepen.io/deerCabin/pen/QWXRage...

:is vs :where

hey, what are some example use cases where :is and :where do separate jobs? from what i've seen they mostly do the same thing? and the mdn docs give the exact same code in the examples for both of these? an example of this is ```css :is(h1) { color: red; }...

Should i use @container instead of @media?

Hi, if do not care about browser support should i completely discard @media usage ?

calc-size(auto) not working when parent element has display:flex;

Hi, i know calc-size(auto) is an experimental feature so maybe that's why. but i have realized that you cannot animate height:0; > height:calc-size(auto); if parent element had display:flex; probably wont work with grid either. I'm just wondering why, is it just because it's an experimental feature? Or is it a bug? Or is there any solution to this? Video that shows the issue:...

#search has an overwritten color and i can't seem to pinpoint it.

I've placed my search input next to my ul list that turns into a hamburger icon when it is in dev tools for a mobile phone. problem is that it seems to be inheriting a style. I've thought it was the #menu__box background-color but it isn't removing that color when i remove it. when i remove all colors it isn't updating it. its only when i move it away from the hamburger menu in html that it update the #search color back to white instead of gray. Also using !important does nothing for the color either. could any one tell me what i'm doing wrong? Code pen is bellow with image screen shot to show what it looks like. https://codepen.io/Jwfrank3/pen/WNqBoWZ...
No description

horizontal scrollbar disappears when an element is a container and you zoom

Hey, i recently discovered that on one of my project sites. If i zoom in until around 500% and shrink the browser window, the horizontal scrollbar disappears to view the overflowing content due to the parent being a container. When i turn that off, it works as intended. The overflow is not a concern as i was told in another post i asked in that this is normal behavior at that zoom scale. I'd appreciate any help, thanks in advance. https://codepen.io/deerCabin/pen/xxoNZGg...