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

Differences between browsers

everyone! I've been building a website for someone. It's pretty simple. He just wants to display some of the art he made, so I made a version of an earlier website that he showed me. Just a home page with small version of all the art he made and then a css and js carousel to show the bigger versions. All seemed simple enough, but it's been dragging on an on. A big part of it was that I wasn't getting clear instructions about screen size and he was constantly contradicting himself. But he'd also send me some pictures like the one I've added where in his browser everything would be funky. And if I go through all the different browsers and devices I have, it would look perfectly fine. ...
No description

How to replicate shapes using clip-path or other things

Hello, I want to replicate the "trapeziums", the purple and black one and I don't really know how to proceed, I do have an idea, like I know to have custom shapes, we use clip-path something like that? Would really appreciate if someone can elaborate on that and give ideas on how I can try to replicate the "trapeziums"
No description

Box-shadow vs Text-shadow in CSS

Hello, I know that both text and box shadows produce some kind of "shadow" effects but is there a difference between the 2? For example when would we need to prioritize box shadow over text-shadow or vice-versa please.

Best practice when styling forms

Hello, I read the following in MDN (see picture).... is that recommended?
No description

Questions about IDs in api Database design

Hello everyone I am creating a blog api for practice and using prisma orm. I was previously using text type for Primary Key ID in tables because the orm doesn't support uuid in postgres natively and instead uses it's own implementation to generate uuid and put them in. My thought was uuid would make resource id less guessable due to what I read somewhere. Some people here told me I should use autoincrementing Integer instead and another field that has uuid if I need uuid. However do I need uuid? The resourse Id would be exposed to the frontend as I will put them in links components so routing frameworks can use them as route params....
No description

Tool for creating something with the shape() function?

Does anyone know if there's a tool, like Clippy, but for the newly available shape() function? I'm interested in creating this trapezoid with rounded corners and arcs. https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/shape
No description

Dialog element not rendering over another dialog element on mobile view

i have 2 sibling dialogs the first one has a button that opens another dialog over it it works on laptops but not on mobile view ? why is that the case??...
No description

Courses explanation

Hi everyone, I'm new to this Discord server and I'm wondering if there is a bundle of Kevin Powell's courses? Currently I noticed that every courses is priced individually and I'm wondering if one of the courses contain the other ones? (Additionally, are they updated?) I'm also a little bit confused where to start, I already have some experience with CSS. My main purpose is to refresh my memory and learn a little bit more about the topics....

Css Responsiveness

Am having issues with pure css responsiveness. But I can use it for all things. Should I leave it and focus on tailwind responsiveness because I am good there too...

Can someone explain how background-attachment is used in css

Hello, can someone explain how background-attachment is used and where please. I tried to experiment with it a bit: https://codepen.io/Fakeur/pen/YPXqzQd...

Link has underline even with text-decoration: none !important

I am working on a project for a friend. They use Material Design Bootstrap for their site. Its currently behind a wall, otherwise I would just show you the issue. The problem is the dropdown menu appears to display an underline as part of the links, this does not appear to happen on the mdbootstrap.com site though. I've even added text-decoration: none !important; as part of the styles on the achor element....
No description

Help me figure the container size.

Should I give the container a max width of 1728px or what should it be ? Please help
No description

React native SVG in a MapView

Hey everyone, I'm having an issue displaying my custom SVG blue dot with a cone on a MapView component. I can't figure out how to make it fully scalable — I suspect the problem is related to the viewBox. Here are some screenshots and my code. thanks !...
No description

Equal card height content

Hey guys i have to make cards with different content heights. I have seen Kevin video's about responsive cards layout, but he is using grid and subgrid. Subgrid is not working on all browers etc, so old flexbox left? or do recommend sth else?

CSS if() style query not working like @container style query

In this codepen, I tried to use the new if() css function but it seems like the style query used for it cannot be used with declarations like it should => if I do style(color: red) it doesn't work but if I use custom props instead : style(--color: red), everything works well. (this is exactly the same with @container style queries but on mdn or in this article it seems like it should have been possible 🤔) Does anybody know why or what I am missing? ...

JS module export/import does not work

I need help getting what amounts to a straightforward module export/import to work. I followed docs/notes online for construction a rudimentary module, with the export statement at the top, then in the calling script, I reference the item within the module in the import statement and the "stupid" error appears Uncaught SyntaxError: import declarations may only appear at top level of a module Here's the jist: ```html <script src="/scripts/project.js"></script>...

I have unintentional scroll down

hi like the title said i have a scroll down which i dont want on my landing page ,the issue is i dont know where it came from i set the body height to be 100dvh ? https://ilyas-draissia.github.io/huddle-landing-page-with-single-introductory-section-master/...

page reloads on saving a file

how to stop a page from reloading when i save a vs code file

What is the name of this component? What sites use something similar (I need inspo)

Just wondering what others would call this component? - story reel? - shorts carousel? - vertical video shelf? ...
No description