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

Faker

1/1/2025

Meaning of the term "context" in programming

Hello guys, I was reading a few things and I noticed several time the words "depends on the context" is used. What does the term context refers to in programming please

BlueBeka

1/1/2025

Dropdown component made from popover

I'm trying to make a dropdown component using the new html popover and css anchor positioning apis. I was wounding if anyone could help me with the semantics and accessibility side of things. I think I've got it going pretty good but would love a second opinion from others. In terms of keyboard accessibility, do I just need to add support for the up and down arrow, as well as page up and down? I think everything else should be handle by the button elements. Do I just add this as an onkeydown event listener to the popover element?...

stealthy

12/31/2024

Next js SSR Issue

The tech stack I am using in Next js,Tankstack query in client, graphql-request to call graphql API in server actions I'm fetching data from a GraphQL API using server actions. On the server, I prefetch the data with TanStack Query and pass it to the client through a hydration boundary. On the client, I use useSuspense to render the hydrated data. ...

Germán

12/30/2024

Best approach to support light-dark function

Hi! Does anyone know if one of these options is more appropriate or correct than the other one? ```css /* 1 */ ::placeholder {...

ilyes

12/30/2024

Eventlistener for a div fully occupied with childrens

hi i am trying a to do an interactive image panels gallery when you press the panel it gets bigger via event listener ,the problem is the panel div has childrens that occupy the whole div clickable space i want the event listener triggred when clicking on any spot on the div (ive handled similare problem with a bad code which i wrote a condition for the parent and every child seperatly) . here`s my code : https://codepen.io/ilyas-draissia/pen/JoPrbqE...

共産主義のト二イ

12/30/2024

How does Bootstrap transition the height back and forth?

Bootstrap simply adds the .collapsing class, and do some cleanups after every transition and it somehow works. Here is a Bootstrap navbar demo. The viewport must be below 1400px for the toggle to appear. https://codepen.io/noobcoder137/pen/KKbpEzx?editors=1100 pay attention to the classes in div.navbar-collapse. ...

empty

12/30/2024

how to make flex items stack on each others when the width of items is below a certain width

Hi guys, I have watched this video https://www.youtube.com/watch?v=fuiEYR6Hoe0 and I try to make flex items stack on each others when the width below 500px but it does not work. Does anyone know where I'm wrong?

nookayisee

12/29/2024

media query not triggering on source tag when page is resized

Is it expected behavior here for source to not change when screen is resized and use the source which matched when the screen size when page loaded? ```jsx <video> <source media='(min-width: 640px)' />...

fish_chips.dev

12/28/2024

Using "Pattern" within the input in a form does not work

I've watched Kevin's video "Improve your form validation hints without JS!" I've added the "pattern" attribute with the regexr code. But this is not working. The form validate even when the email input is not fully complete. Need some help. Here's the link: https://jeancyjr.github.io/newsletter-sign-up-with-success-message-main/

богдан

12/28/2024

Position absolute with overflown parent

Hi, I have an element that is positioned top right of the parent absolutely <div className="absolute right-2 top-2">X</div> The parent has overflow-y scrollbars, and when I scroll, the absolute child scrolls with the content, instead of being fixed there, but I cannot use position fixed because it's bound to the viewport, position sticky doesnt work either...

i_lost_to_loba_kreygasm

12/28/2024

Can somebody help me fix this animation using GSAP ScrollTrigger?

https://codepen.io/sougataghar47/pen/RNbZVyQ here is the pen

ahmd shajmeer

12/28/2024

Infinite Scroll text behind and infront of a image

I am trying to achive this section where a text scroll like marquee behind the image and another text scroll in front of that image. I tried positioning it with z-index but not working as I wanted. I am using tailwindcss for styling

Lua Kenai

12/28/2024

Hamburger responsive menu not closing

Hi! It is my first time trying to edit a hamburger menu for resposive view, it works well except it wont really close after clicking the X, what can I do? Code is here: https://codepen.io/luakenai/pen/VYZzyRa Thank you in advance!...

devdrivenai

12/27/2024

Positioning an element relative (or anchored) to anchored-positioned dialog element

Hi, As stated in the title. I have been trying diverse approaches to position a div (it's essentially a... how is it called? a bubble arrow/pointer?) relative to a dialog element that's opened and connected through the popover API (it's popover target to a button). The dialog is by default [positioned fixed, but I changed that to position absolute and anchor-positioned it to it. The thing is I want an arrow/pointer that points to the dialog from the button and for the life of me I can't make that work. I've tried both positioning absolute the div, but I've also tried anchor-positioning it to the button (I have also tried to use the div as the anchor, didn't work either)....

skizhom

12/27/2024

My webpage isn't responding to some of the properties I have set in my CSS file

```html <!DOCTYPE html> <html lang="en"> <head> <title>kokoro</title>...

DooMGuY086

12/27/2024

Tailwind border gradient

``` <div style={{ border: "2px solid", borderImageSource:...

i_lost_to_loba_kreygasm

12/27/2024

how to make this animation in this website?

https://www.btsbioengineering.com/

vic

12/27/2024

how to override the inline css with external css

So I created a reusable component in reactjs and I use inline css for that and I use inline css on whenever I use that component depends on my page now I need to edit component as reusablility , i try css normally it won't work ! But if I tried with ! important rule in css , it works .. is it ok to add ! important on every media queries ```js const button={ width:'100px',height:'100px' , color:'#fff' } ...

NeilVanGotham

12/26/2024

Animate to just the initals of a name

Hello, I have been trying to have an animation where a name is reduced to just the initials. I have tried setting keyframes from width: auto to width: 1ch (with interpolate-size: allow-keywords; set), but 1ch is too small to have the letter fully visible. Then I have tried setting the letter spacing to 0.2ch, and have the width animate to 1.2ch, but not every inital has the same width then. ```html ---...

ilyes

12/26/2024

What do i need to know how to do in JavaScript ?

hi iam a beginner in frontend learned html and css last year got a good grasp of the basics which implemented it in one or two projects so jumped to JS and oh boy !! the feeling of knowing nothing after weeks of js learning is frustrating. Learned the fundamentals practiced here and there like WesBos 30 js challenge (which is free by the way) one of his challenges was to change css variables via js ,i like it so much it showed me the practical use of js in a website unlike other projects that you cant implement in future my 2 question are : 1-what are some things must know how to code that i will use in future in client website allegedly ?...

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 🙂.