KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

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

Doksuri

1/13/2025

local css variable ?

i have this test code : https://jsfiddle.net/wmfgyo7p/ can somebody explain to my why each div have a different color ? and why aren't all my div blue ? when looping on my divs, i change the ":root" css variable...but set it for my current div. does this mean a "local" css variable is created for each of the divs ? (with the same name)...

rctneil

1/13/2025

Display none => block transition example

Anyone able to post a super simple demo of transitioning between display: none and display: block with the new discrete transition stuff? I've been messing about with it but can't seem to get anything working. Thanks...

snxxwyy

1/12/2025

picking arrow functions vs regular functions

Hey, i understand that picking whether to use arrow functions or regular functions is sometimes based off of preference but mainly based off of what behavior you'd like, however why are functions such as setTimeout mainly seen to use arrow functions not regular? e.g. ```js setTimeout(() => { console.log("xyz"); }, 1000);...

bockster6669

1/12/2025

Hover effect

How I can make smooth width ransition to review the icon on hover?

Tok124 (CSS Nerd)

1/12/2025

Responsive Canvas in Flexbox Container

Hi, i have a flexbox container, inside this flexbox container i have a canvas and a div, both the div and the canvas has flex:1; so they should take an equal width. but the canvas is a lot wider than the div, it also seems like the canvas has an aspect-ratio which cannot be removed or changed it any way. So how do it actually remove the aspect-ratio and make the canvas responsive? It seems like the only way to actually resize the canvas is to put fixed width and height, i obviously don't wanna do that because then the canvas is not responsive... I really don't have much experience using the canvas element since i put 100% focus on CSS, so i am not really interested in JS and other stuff, so this is a problem that i have never encountered before... Codepen Example: https://codepen.io/tok124/pen/RNbMyyJ...

Zach

1/12/2025

list or no list for nav links

Just noticed that Porkbun just have the bare <a> tags separated by <br>

Nick

1/12/2025

Centering a div vertically... (Kevin's shape-outside video)

So I'm following Kevin's video on using shape-outside: https://www.youtube.com/watch?v=sifXs4XVK7g It's probably a skill issue, but while it works great for say the start of articles, it seems limited if the text doesn't take up more height than the image? For example, it seems almost impossible to center any text vertically with the image, because the wrapper is display:block?...

Nope

1/11/2025

Menu hover animation.

How's it going everyone, I'm new here . Getting back into building site from scratch and not using the wordpress framework. Not sure if this is the right place to ask this, but i wanted to get some insight on the process to achieve the function of the navigation for this site. Im looking to replicate the menu text movement and im not worried about the image fade function of the menu. Please let me know if this needs to be posted somewhere else and i will it there. Below is the site in question. https://tigermilkrestaurants.com/en/...

snxxwyy

1/11/2025

use cases for arrow functions inheriting their this value

Hey, mdn says that the this value of arrow functions equates to the parent scope, i don't understand how that could be useful? For example, if i defined an arrow function in an object below that utilized the this keyword, how would i benefit from it being equal to the window object? (i'm aware if i want that behaviour then to use a regular function of course but the concept confuses me) ```js const myObject = { arrowExample: () => { console.log(this) // Window...

bzzt

1/11/2025

What is a good workflow for developing response frontend apps for web+mobile?

Hey all! I have got some older sites I want to refactor whilst i brush up on my frontend (in particular css!) I dev on a 32" 4k Monitor which makes frontend dev a bit weird as I can have my site looking good on my 32" but moving it to a smaller resolution and smaller monitor it can have weird sizing issues (this is what I am filling my knowledge in to fix!) My question is, if I wanted to make sure my site is good/responsive for both mobile and all monitor/browser sizes what workflow would people use to check the sizing whilst developing? In my case I am using React. Would it be a case of having the browser open twice in my local dev environment and having one use a mobile view in the browser and one using a more generic browser size?...

Faisu0p

1/11/2025

Need Help with Multi Step Form Submission - specifically handlePreviousStep Function()

Note : My Form is working perfectly fine.Also -> Form is submitting fine. Problem Description in short : When i click on Previous the data resets and old data goes away Brief Problem Description :...

Lexi

1/10/2025

CSS Scalloped Border

Any advice on how to make a scalloped border only on the top and bottom border of an element? https://codepen.io/Alexandra-Pierson/pen/emOMZKM This is what I'm currently working with and I can't seem to find a way to just make it along the top and bottom....

Kivory

1/10/2025

What's wrong with my JS code here?

This is code to make each ".user-message" div that's created test if its font-family is "Roboto", and if it is, to change the font size to 40px. ``` let paras = document.querySelectorAll('.user-message'); ...

i_lost_to_loba_kreygasm

1/10/2025

How to make this layout using grid ? Is it possible?

corizon.

1/10/2025

How do I implement this animation with GSAP 👇

Hello guys, everyone’s opinion, help or solution is highly appreciated. I want to create the animation below with GSAP and make it responsive if possible. Basically, when I get to the section with the animation it triggers and plays once. Thank you, I’ll be looking forward to hearing from y’all:)

snxxwyy

1/9/2025

transferring the "this" value to a function

Hey, i have a class with a function in that logs out a this. variable. When i call that function inside of a function outside of the class it works, however when i call that function as a callback, it can't find the this value and i have to use .bind (i'm sure call and apply could potentially be used too) to allow it to work, since the callback parameter has the function as the value, i don't understand what causes that error compared to straight up calling it. i'd appreciate any help, thanks in advance. https://codepen.io/deerCabin/pen/RNbQvbd...

snxxwyy

1/9/2025

class logic questions

Hey, a few questions about the logic in classes- 1) If i define a this. variable inside of a function, why can i use it outside of the function globally within the class? I understand it's because it uses this. and that refers to the object but that defies the regular logic of how that would work, is that specific functionality for this or classes? (example: https://codepen.io/deerCabin/pen/xbKYQPG) 2) Why don't i need to use const or var when defining this. variables?...

Kivory

1/9/2025

How do I make an animation where a div goes from height: 0px; to [its regular height]?

one of my divs has a height that depends on the content inside it, and i want to make an animation for it to start out with a height: 0px; and then expand to have its regular height. How could this be done using @keyframes?

lanszelot

1/9/2025

CSS how did he do that?

Hello I am wondering how did he do the next and prev buttons to the side of the image? The site is responsive. He used CSS only. The html code is: ```<div class="banner">...

snxxwyy

1/8/2025

use cases for a closed shadow dom

Hey, i was taking a look at the difference between a closed and open shadow dom and found that if it's closed you can't interact it with the shadowRoot method e.g. ```js const element = document.querySelector("..."); element.attatchShadow({mode: "closed"}); ...

Previous Next

Gaming

Programming

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.