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

I find this impossible to achieve

I'm trying to horizontally align an arbitrary number of <li> elements so they're all the same width as the widest one, and so they wrap to a new line when needed. I need to do this without hardcoding any values in the CSS. Here is my CodePen: https://codepen.io/cos4ni2s/pen/KwdBVyz?editors=1100...

Event loop in JS

Task Queue (Callback Queue): Stores tasks waiting to be executed after the call stack is empty. These tasks are queued by setTimeout, setInterval, or other APIs. Does someone know why the call stack should be empty for the callback queue events to take place?...

On Creating a Design System - Course Required

Hey guys i was looking for a good course to learn how to create design systems in css, specifically using creating reusable tokens and the various abstraction layers one may need in order to create a design system, and themes using that design system. I saw beyond CSS might be offering the information needed, but it seems like only the 4th module actually touches the subject which is important to me. It might stem from naivety but my general idea was to have a two step solution to solve my problems:...

Help with snap scroll

I'm currently working on my on-line portfolio, and I've reached the limit of my css skills and knowledge. I have a portfolio page on the site I'm designing, and I've gotten the snap scroll to work great. But I'm not sure how to handle the overflow if the text is too long. I'm setting the element containing the write-up and a slide show to 70vh, so if there's any overflow, if I don't hide it, it overlays the item below it. Does anyone have any suggestions on how to deal with it, or do I just need to be brief in the write-ups? Thanks in advance!...

How do I go to reverse the order of GRID Items?

Codepen to provide context: https://codepen.io/NotNegative/pen/bNVKzmY I just completed the Absolute Beginner Course yesterday and have been experimenting with what I learned. I’m also exploring things closely related to the course to take it step by step. I’m not even sure if what I’m trying to do makes sense in terms of practice, so please let me know if it doesn’t. I’m looking for a way to reverse the order of items in every second section (like the 2nd, 4th, 6th) and so on. ...

How do you guys built your roadmap which you follow

How do you prepare your roadmap, like what to follow and where to learn, currently I am using YouTube for learning

Confusion about Aligning Image Height with Text & Proper Use of <figure><figcaption>

Hey there. hope you're having a great day, and apologies in advance if this is a bit of a beginner or stressful question. I just completed the Absolute Beginner Course yesterday and have been experimenting with what I learned. I’m also exploring things closely related to the course to take it step by step. I’m not even sure if what I’m trying to do makes sense in terms of practice, so please let me know if it doesn’t. Goal:...

Closures: var vs let

```js for (var i = 0; i < 3; i++) { const log = () => { console.log(i); };...

is it possible to align div below other div even if they arent under same parent?

I'd like to know if its possible with css, I dont think so. but just in case asking here! for example in the select component, the dropdown will be in a portal so not under the same parent, so I think ive to get the trigger button's position and then make the dropdown aligned below it using top...
No description

Today's CSS Battle

Hey guys :D I'm not a CSS professional (yet) and I'm having some problem with today's cssbatle. Can someone help me out how to do the scalloped border here?...
No description

nice template/design for a website

I can make a website with html and css . But finding or designing a site that I cannot do Now for practice reason I want to redesign the site of my reintegration work place. ...

Help regarding Dynamic Responsiveness in Tailwind

Hey there, I would like to know how I can achieve the Dynamic Responsiveness that can be seen in this website https://www.seanhalpin.xyz/ in Tailwind visit the website and resize, you will see the text getting smaller or larger dynamically instead of jumps, that we get with tailwind's breakpoints thank!...

CaptionAI: Early Build, Looking for Feedback

I’ve been working on a small project called CaptionAI. It’s a backend-powered app that generates captions for posts using the Gemini API. So far, I’ve implemented some core APIs for caption generation and basic functionality. Since this is still an early version, I’d love to hear your thoughts: ...

[JS] Factory Functions

Instead of using the new keyword to create an object, factory functions set up and return the new object when you call the function. They do not use the prototype, which incurs a performance penalty - but as a general rule, this penalty isn’t significant unless you’re creating thousands of objects. Let’s take a basic example to compare them to constructor functions.
I don't understand what is meant by "they do not use the prototype"...

Required attribute | Form Validation ignored

Hey, for some reason javascripts skips form validation, without it validation fully takes place. I have to submit form without page reload, thats why theres preventDefault: ```js bookFormSubmit.addEventListener("click", (event) => { const bookValues = [];...

How can I have the hero image be display full width without cropping on both sides?

this is the media query Im currently using. I'm not an experienced coder: @media (min-width: 768px) and (max-width: 1024px) { #hero-section { background-size: cover !important;...
No description

Advice on approach for my trending feature in my website

Hey everyone! I’m working on a trending pain points feature that shows recurring posts with issues over time (today / last 7 days / last 30 days). The plan: /trends route displays trending pain point labels. Clicking a label shows all posts under that trend. ...

Help Recreating this mountain clip path effect

Hi all, if you check this codepen you will see that 2nd image down the page has cool mountain clip-path CSS set to the top and bottom of the image. I was trying to recreate this but was unsuccesful. Main issue is that my clip path (or custom SVG) stretched when resizing viewport, while in the codepen you can see that mountains retain their aspect ratio, never stretching or squishing regardless of viewport size. What I missing here, how can I recreate this effect? When applying identical CSS to my markup the mountains always squish down 🙁 ...