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

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.

Next JS MDX

Plugins in mdx do not work. I have configured everything in next-config.mjs and created mdx-components.tsx in the root folder, but plugins refuse to work (all of them). Environment Information ``` npx --no-install next info...

how to code images that will pop up when i hover over the center image?

im still a newbie at css and html. just like in the image, there should be four images that will pop up if i hover over the circle in the middle. i also want these images to be clickable so that they will go to a different page in my website. is there a way i can code this using css animations?...
No description

How do I make the inside of clip-path rounded?

I have this https://codepen.io/Lko3001/pen/ExJNEKw And as you can see the outside is rounded but the inside of the clip-path is not, how do I fix it?...

Astro : How to import local images in framework components that will work in the build

For normal astro components, I can use import(...) in my <Image/> component ; however, in my use case, I am dynamically rendering content through JSON, and my file paths start from /src/assets/.... I am passing them as they are to my React components. They work just fine in development, but show an "image not found" error in the production build. ``` export interface Props { title: string;...

@supports with animation-timeline

Hiya, I’m using chrome on a version which supports animation-timeline functions like scroll() and view(), yet @supports does not function properly with them. Is it possible for @supports to check such compatibility?