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 can I put the asterisk in the same line?

I can only use CSS (no HTML edits). On some viewports, the asterisk wraps to the next line. I tried using a non-breaking space ( ), which keeps it on the same line but adds visible spacing between the question mark and asterisk, breaking design consistency. How can I prevent the line break without introducing extra space?
No description

How to determine when to move code into its own component?

Thought about this just now when thinking of what to add to my Pomodoro Timer. At what point or when is it beneficial to split out components into smaller pieces? For example, my Pomdoro a timer right now is 1 component for the Pomodoro, and 1 component for the Todo list. I was thinking about adding the date, time and local weather to the nav bar which would be another component (or 2). For small projects I imagine just keeping it like this is fine, but at what point would I want to start splitting them out? ...

why position absolute is not working properly here with overflow hidden?

Hi Hi, been watching kevin's video:https://www.youtube.com/watch?v=HbBMp6yUXO0&t=2482s (Responsive navbar tuto) and I want to ask something, why wen put position:absolute instead of fixed and I add the overflow hidden to the body it still crashes but with postion:fixed everything working fine...
No description

making to-do-list

round checkboxes

GSAP MotionPath: How to keep object aligned with path during d attribute mutation

https://codepen.io/fluffybacon-steam/pen/VYYNBaG I am trying to get the hang of the MotionPathPlugin from Greensock and having some trouble. I have an svg who's path goes from relatively flat to highly curved, and I want my object (.social-link) to stay glued to the path through the mutation. However the object seems to lose reference when the path animates/mutates. What am I doing wrong?...
No description

CSS => Too Good βœ… | Pt.2

I'm back again complaining about CSS. My last post a while ago helped me a bit but I'm still stuck with something. I'm currently creating my own App and still struggle with a few things such as units, rules and accessibility. I don't know know which units to use for what and what I have to consider with my design and technique. I'm still thinking about using Bootstrap. But with Bootstrap comes alot of trash and code breaking stuff. I've already built my own HTML structure and if I try to switch to Bootstrap now much stuff will break (probably) and you can't really customize stuff that well with Bootstrap aaaaannnddd its outdated! Summary: My head goes boom πŸ’₯...

Working as a solo developer (full stack) for my comp, their website's frontend is in shambles

Working as a solo developer (full stack) for my comp, their website's frontend is in shambles, UI,UX is just taken from what every last person liked from other's website in similar domain. Too much inline css and js unused styles and what not. Now I want to re-write the frontend and what to do it in such a way that this time makes changes will be easy and website becomes more responsive and better, I have little exp in responsive designing (I can get by for desktop screens) and I need help/guida...

Setting a default CSS scroll snap point

I am trying to implement a scrollable container using CSS scroll snap that defaults to a middle snap point, rather than to the snap point closest to a scrollTop position of 0. I found in Chrome that if I initially rendered without a scroll snap on the first element, then it would snap to the next (middle) element. Afterwards, I could go back and add the scroll snap point on the first element, so that the user can scroll to it. ...

What are bundlers (Webpack, Rollup, Parcel, esbuild, Vite) ?

Can someone explain what bundlers are. For example, I know "Vite" is a bundler, I only heard the term but never bother to find out. From what I've read/understand, a bundler is just a kind of "pre-processor" that process our JS files before being rendered on the web? Can someone clarify and add to if if needed please. I was read that using a bundler can result in less files being used and "unnecessary" content being removed. I'm kind of confused about this point, would really appreciate if someone can elaborate....

Sticky Labels in an Overflow-X div

I currently have a component like in the picture. When I scroll left/right only the overflow-x div scrolls. The div contains a list of numbers at the top, that you can see in blue in the second picture At the moments the numbers are in an absolute overlay like so:...
No description

Css way to make this cool grid background design

I want to recreate this sites homepage css grid background design

Comprehensive grid guide

Hey all, i’d say im a pretty advanced css user however i really struggle with cas grid. Can anyone link me a good guide or β€œcheat sheet” so i can learn

Should we declare mongoose schema in database connection script?

```js async function updateProfilePicture(newFileName) { await connectDB(); try { ...

What is "URL-encoded" Form data?

Hello, I know form data is just data when we submit a form but can someone explain what do we mean by "URL-encoded" form data please, why "encoded" ? I know we have 2 encoding, the URL-encoded thing and the multipart-formdata. How does these 2 differ?...

Object prototype in JS

Hello, I was reading a bit about object prototype. From what I've understood, it's just a chain where objects kind of inherit the properties of other objects. So basically, every objects we create already have some properties, so I guess we have a "super" object or something like that from which all the objects "inherit" from? Why is this prototype chain important and is object prototype useful/important?...

What is requestAnimationFrame and how does it work?

Hello, I'm learning a bit about canvas and requestAnimationFrame (I want to make a rectangle move), can someone explain what a requestAnimationFrame is please. I know as its name suggest, we just draw multiple "animations". Is this something related to "FPS" or something like that? Is there a difference here please....

@custom-media replacement in 2025

I've been using @custom-media declarations in my app for a while now that PostCSS translates to regular media queries. Example: ``` @custom-media --larger-than-mobile (min-width: 431px);...

Can't reason how to span grid item?

Hello everyone. I am new to CSS grid. Given this code ...

JavaScript not counting correctly

Hello, In this code : https://codepen.io/lanszelot/pen/NPPJKoG Inside the for loop workoutHrKarvonen variables counting wrong. Line 42 : intensity/100 this is not counting somehow. intensity not devided with 100 , and it count with intensity itself....