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

optimal js module design

@Zach Jensz shared me this article after looking at the source code for xoram.dev. While I understand the premise of the article and agree with them, I think I'm mostly good on for the @xoram/core package as I'm not shipping the source files only a minified dist and type declaration files (as you can see on NPM), so even if you used it in browser without a bundler you would only ever get a single download. On top of that, you would use close to all the exported code in an actual use case, any non-default feature being it's own package under @xoram/plugin-[packagename] that you can import/install independently....

Custom border - possible?

Hi everyone! I need to create the double border border in the attached image, and have it dynamically fit the content inside (be it image or text). what would be the best approach?...
No description

talk description wording

what do yall think about this talk description ?
Open-Source maintainers and team leads, let's face it: bringing people into a project is way harder than it looks, even more so in the open-source space where maintainers can't help everyone individually. As maintainers and active team members, we must make this process as easy as possible for first-time open source contributors and new team members. We'll go over the most common problems faced by first time contributors and see how to address them to make your projects more accessible....

Package.json vs Package-lock.json

Hello, I have a small question. I know that a package.json is a file that contain metadata about a project, such as the project's name, entry point, scripts, dependencies etc while a package-lock.json is important so that when we npm install, we get the same dependency tree as our project. My question is, if in our package.json file, we already have the version of our dependencies, then why need another separate json file? (small aside :c, if I need to git push the files, do I need to git push both? )...

Best accessibility course? Thoughts about Practical Accessibility.today ?

I want to learn a11y better. I've already seen a couple of courses, but they all seem really basic and focused only on the theory. They only focus on "obvious" stuff like color contrast, text sizes and stuff like that, but they never teach you how to actually use those thing in the web. For example, nobody tells you that using display: contents might make its children not accessible ...

Why do we have so many different browsers?

I know that we have different search engines and each one display pages based on their algorithms but why so many browsers? At a particular time, people used to say that firefox was the fastest, then later on, we use to say it's chromium based browsers, is that true or we do have so many different browsers based on how they handle our data?...

Dropdown causing vertical overflow in table.

As from the image I shared you can see a table that holds few data, and one of them is status selection. I created dropdown for that. But on opening that it is not overlapping the table. Instead it creates a vertical scroll bar and empty space in the bottom.
No description

Is there a way to make this selector work?

.panel-body:has(.filtered-search):not(:has(.vg-filter-pills.ng-hide))
.panel-body:has(.filtered-search):not(:has(.vg-filter-pills.ng-hide))
...

help understanding conflict handling during git rebase

I am working out how to use git rebase. I created a repository and did these steps. - I created index html and then commited it on main branch. - I created a branch called modify and in it i added a blank line to index html and commited. I created index.css and commited that to the same branch. - I created another branch called delete and deleted index.html then commited it....
No description

Google I/O CSS carousels polyfill

Google showed off Pinterest saving 90% in code using these new CSS features: - ::scroll-button() - ::scroll-marker() - ::column - interactivity property...

Designing a Modern Desktop Automation App with Python Backend and Intuitive UX

I am planning to build a desktop application that leverages a Python backend to automate tasks—similar to what tools like Manus AI offer. The core functionality will be built in Python to take advantage of its powerful automation and scripting capabilities. The frontend should deliver a modern, intuitive user experience that feels native and sleek. My challenge is to decide how to architect the application: Architecture Decision:...

Get max-content value without using JS

is there any way to get what value is in place where the max-content is being used and use it dynamically ? i need to use the maxHeight's value here in the top's position...
No description

Override overflow for specific elements

I can't seem to figure get the dollar sign to overlap. I would like overflow to stay clipping for the glows and other items, however I don't want the dollar sign to be affected. The problem is that I am using Vanilla Tilt. If you put it outside the tile it doesn't tilt with the tile. If you wrap the objects in an overhead parent using relative and such, it almost works, but now the glow effect no longer works. You can see the full website: https://awesome-roblox.vercel.app (full site isn't up to date with the latest push)...

how to get that 100% corner smoothing that i've designed in figma ?

hey i'm back AGAIN!! first two images are the new thing i was trying (it looks good to ME) frontend guy tried it but he can only get that normal corner round thing but cannot get 100% that shows in figma !! WHY ??? there's nothing useful on google or youtube as far as i was able to see. what should we do ? also the third image is what we're doing. For NOW...
No description

Want some help regarding timer-based game

I am thinking of creating a web app— a platform — for creating and playing custom timer based games using python for 2 players. Example: - Task: type an idiom in under 30 seconds. - Users can set a timer for the whole game session. For example, if a player sets 15 mins, then the game will end in 15 min. And the player with the highest score wins or it's a tie if both have equal scores....

What do you guys call your colour custom properties?

I find it easy if you have 3 colours where you can just call them primary, secondary and accent but the project I'm working on has like 7 different colours. So how do you name them? Is there a particular rule to follow when naming them?...

**Internship Opportunity: Webflow Developer & Web Designer (Remote · 3 Months)**

Gain hands-on experience by working on real-world projects in a modern digital agency. We’re looking for ambitious and creative interns ready to gain practical experience in Web Design and Webflow Development, by working on real projects for real clients. Our agency specializes in web application development, AI and no-code automation, and creating modern, scalable digital solutions. During the internship, you’ll be part of a collaborative team where you learn by doing – not just by watching. **🔍 Open Roles:...

Defer sizing to parent element

I am looking for something that I thought I saw in one of Kevin's (recent) videos. Possibly could have been on a blog though (or State of CSS survey but I went through it again and couldn't find it). It was a (new I think?) CSS property/value that changed the sizing of an element to be defined by the parent. Say for example you have the following: ```html...