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

Svg animations

Can someone explain what’s the best way to make animations using svg’s I genuinely can’t understand it and none of the videos I watch really help me , how do I get assets how does it work Etcetc

How to make grid go next row like flex-wrap of flexbox?

```css .gallery-page { display: grid; grid-template-columns: auto; grid-auto-flow: column;...

Pseudo On Visited Link

I want the pseudo element to disappear when a link is visited but it's not working. I could be doing something wrong. Need help. https://codepen.io/Arslan-Akbar/pen/mdzvgzB...

interactive mirror

how to make a mirror like this and make it interactive? I want it to expand to the front as transition to the next page. https://www.awwwards.com/sites/cartier-watches-and-wonders...

How to prevent useEffect to render twice

Hello, I have created a function which verifies the access token from the token if the token is valid or not when the component mounts and only when there is a user in the local storage and if the response is false from the backend server I am logging out the user by deleting the user from local storage and state. there is a toast notification function under the logout function, and the is alerting twice. How should I prevent that?

Anyone have any idea of how to replicate this grid phone layout?

The layout from this page, when checking it from phone, has a grid that expands when opening the hamburger menu. https://toweroffantasy.info/ To this blog I'm working on: https://astro-blog-custom.netlify.app/...

issue in chec key

why it says invalid key ?

Slider

Any idea how to make a slider like this ?

How to create empty cards with svg picture inside set to position absolute?

Hi, I have a pickle. I am trying to build a section with cards below. The thing is those 'doggo" pictures are in svg format and can be in 3 centered positions: left, center, right. How can I set those cards to have equeal min-height and min-width and in the same time won't be collapsed? I tried to set width and height but it is not scalable. I mean when I am shrinking screen they overlapping each other. Is there anyway to create empty div with this picutre inside and be scalable? Thanks in advance...

width: max-content not working in firefox with blueprintjs

i have the following codesandbox, which mirrors a private project in which i have a list of recordings and use blueprintjs to display this list. Notice i have set width: max-content to the list, however in firefox the recording number goes to a new line. I then use white-space: nowrap to force the desired behavior. However it does not quite solve the issue. the radio buttons now overlap with the recording+number. 1. on both chrome and firefox, white-space is set to normal by default. Why do they behave differently? 2. how do i solve the issue of max-content not working in firefox?...

React, Redux, Firebase

Hello 👋, Is it relevant to use firebase with redux now in react?

Background color sizing on img hover

Is there a way I can do something like this as it’s done on Google page whereby the background color is really larger when hovered on the icon??… I can’t find a way around to do it as mine is just taking the size of the icon img on hover. I have placed my codes here but the images doesn’t show up as I have it on my local directory here. I also don’t know how to make it show up here! Can someone help on this??...

flex or grid columns based on (modulo) number of Items

So, I'm on a CMS / frontend where the content team can add a collection of cards (like: this is our contact team, these are our sponsors, ...). These cards are listed by default with max 4 cards in a row. Then the next ones in the next row. Now, here comes the problem: It looks WAY better when if you've got 5 items you don't show 4 in the first row and just 1 in the last. But display 3 in the first one and 2 in the last....

Cross Browser testing

What is the best cross-browser testing environment to use? I have used Lambda and Browser Stack and both are subpar.

Flex grow issue

I am trying to grow the div when clicked. Its working fine but when add the content then its not working. https://codesandbox.io/s/clever-christian-7unckn?file=/src/App.js...

Flexbox help needed

Hello I have created nested flexboxes and made a layout but there is problem I am not able to fix that, the nested flexbox when is applied then the in container styles of :hover are not working can anyone please help me in this?

Anyone know a good Parallax course?

I tried doing one on Udemy, I wont say which. But it was more of a course where the person was proving they knew how to an expert rather than teaching people who want to learn.

Any good reason to continue jQuery?

I have been too much adjusted to jQuery eventhough es6+ is an option, the animations are so easy to use... I have also been trying to replicate jQuery any suggestions? BTW the jquery min js would be fast enough right?...

Anyone know how to fix this issue in react?

so i created react using create-react-app and installed react-icons and react-router-dom google search answers didnt work