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

how to set image for domain when paste into socials

i want add image when i paste link website into facebook , it will show image , web that i use deployed on vercel
No description

Dynamic scroll with fade in/out

I am attempting to create a dynamic scroll, where a single paragraph and corresponding image are displayed one at a time. As you scroll, the first paragraph/image is replaced by the second with a fade transition. I can't seem to get only one paragraph and image to show at a time. Would appreciate any help and if there is a cleaner way to do this with a React component or similar happy to explore that too! https://codepen.io/mycenas/pen/oNOZgoR

Is it possible to create this 3d button ?

Hello community is my first post on this Chanel. I'm french guy and my English is not perfect πŸ˜‰ I'm not pro in css and i want some help πŸ™‚ I want to create this 3d button but the problem is to keep all the black edge. I have try many solutions :...
No description

How to customize default <input> date picker?

Is there a way to edit the appearance of the default date picker? Right now, I'm just looking to change the primary color from blue to a specific color of red. (see image) Currently, I'm using the <input type="datetime-local"> HTML element through React. The project I'm tasked to work on is using React Bootstrap, but that doesn't seem to have its own date picker, so I went this route...
No description

Priority Plus Navigation

Hello, I am currently working on my portfolio site using react and I was wondering how someone might go about designing a priority plus navigation in react? Any interesting element measurement hooks I’m not aware of or something of the like? I currently have a version somewhat working with a useEffect hook that attaches a handler to the resize event of the page but would like to improve on it....

Is there an efficient way to handle SVG usage in Svelte?

Instead of this hideous block of code in the picture, is there an easier way to handle using an svg? it really does make it very difficult to see what the hell is going on when I scroll through my code.. ```js <div class="react"> <svg...
No description

Looking for any constructive criticism on how I could do better or best practices.

I've just completed a front-end coding challenge from @frontendmentor! πŸŽ‰ You can see my solution here: https://www.frontendmentor.io/solutions/blog-card-with-responsive-units-G4A0-rcpJ6 Any suggestions on how I can improve are welcome!...

How to use reusable containers in vanilla html

I cannot use php since I am planning to host this on Github

Footer

Does anyone know how to make a footer stay at the bottom of the page?

Animations/Transitions with React - how do you handle these?

Never done it, apart from some basic CSS transitions, wanted to mess with it a bit whilst I'm learning backend. I know Svelte has a pretty easy way to do it, but how does React handle animations?

Anyone know how to use yarn generate for react components? My Google search is burning time. Thanks

Just trying to create a component. My Google search is burning time. Thanks...

How to style multiple lists like a single table?

Hello no longer "friend and friends" but front-end ones, How would you go about formatting multiple (unrelated) lists like a table? See the attached example (blue dashed guidelines for better understanding only). What I'm specifically after is:...
No description

admin dashboard errors

Hi guys need help on creating an admin dashboard for a website am still learning don't know much. I want the dashboard to cover the whole screen and for the table to actually fit not leave that gap
No description

Frontend Development

Hello guys, Any suggestions which approach offers better readability, maintainability, and faster performance in front-end development: using plain CSS, a CSS preprocessor, or a CSS framework?

How to prevent text-shadow from overlapping previous letter

I need help with text-shadow. I'm trying to do a 3D effect text reveal, but letter's shadows are overlapping previous letter, which is rendered by <span> inside of a container. What I want to achieve, is that with each child's index increasing, I want it's z-index to decrease, so that previous letter is on top. ...
No description

Irregular image grid help

What the best way of making an irregular image grid. Where pictures have different sizes and start at different places?
No description

centering a div horizontally using margin auto doesn't work when width set as a percentage, why?

Hi, I have only a div in the body. I'm trying to center the div horizontally. I added width: 60% and margin: auto, but it doesn't center it, but when i change it to width: 600px, it centers it. Why is this?

Pre Set Select Option

i want to pre-select this input when page loads but when I add the a value it goes blank ``` const input1 = document.querySelector('.publicationsList #type');...
No description

Infinite, scrollable, animated link Cloud

How can I create a component like the one Perplexity has? I have the animation working but if I let the user scroll, the animation gets all messed up. The component needs to have β€œinfinite” items (the one that disappears from the left appears from the right and vice versa), scrollable, and animated.