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

thereturning

8/19/2024

help with react context

Im making a tooltip that is on the topmost part of the document, and it needs to know if a component is being hovered, that component is nested. TooltipContext file ```jsx import { createContext, useState, useContext } from "react"; import PropTypes from "prop-types";...

Alex King

8/18/2024

Need senior front end developer for part time job

I am going to build the car renter website for my business. All most developers are ready to start to work but I need one more front end developer. Tech: React/Tailwind CSS Salary: 4000$~$5000...

prophile

8/18/2024

Highest contrast colour in pure CSS

I’m setting up a button component with a few different variants (.btn-primary, .btn-success, .btn-danger, that sort of thing)—these switch the background colour. Is there a way to set this up so the foreground colour is automatically selected between a dark and light option for whichever gives the most contrast? In pure CSS that is, rather than using some JavaScript. Being able to do an if-then-else for whether the L component of var(—btn-bg) is <50 would do the trick to select between the two as an approximation, but I’m not sure how to go from there. Is this possible?...

conmeomaunau

8/18/2024

Config 2 line code on vercel

Please anyone help me

NIMA

8/18/2024

api problem

api problem in js

Draken ∆Toman

8/18/2024

File upload bug

`<DropdownMenuItem > <label htmlFor="profile-picture" className="flex items-center gap-2 cursor-pointer"> <FileUp strokeWidth={1} width={20} height={20}/> <span>profile</span> <input...

brr

8/18/2024

conosle log value undefined?`

textBox.addEventListener("keydown", (event) =>
  console.log(`You pressed "${event.key}".`),
);

textBox.addEventListener("keydown", (event) =>
  console.log(`You pressed "${event.key}".`),
);

...

elaineleung

8/17/2024

Kevin's code from his CSS Day talk

Guess this is a question for @Kevin primarily but if anyone's got an answer I'd also appreciate it: Where can I find the Codepen that was in the demo in Kevin's CSS Day talk (the one on overengineering CSS)? I was already something based on Ryan Mulligan's post, which was also mentioned in Kevin's talk, and I had a look at the layout builder code generator Kevin introduced, but in the end I wanted to see how Kevin's original code as there were some differences from the layout builder. Thanks in...

Jeluxe

8/16/2024

weird border-radius behavior

i have created card in vite-react and i dont see something that have caused this issue, and the issue is that so i have image that take all of the size of the card and for some reason at thhe edges of the card, the card background is slightly visible like 0.0001px. like between the img's edge and the card's edge the is small gap, which i cant find the cause. Here card file:...

reeee

8/16/2024

how to start a react app after i closed it

i started the react app yesterday and reopened it today and im not getting how to reopen the react app

存恺汇

8/16/2024

How to make a dynamic chart component in Svelte, using plain HTML and CSS with minimal JS?

It's important to make it themeable so that replacing the CSS actually reflects on its styling. I do not want to use Chart.js or any other framework, as they do not support what I want, unless you have any suggestions for chart frameworks that are more customisable, not ugly and can be themed with CSS.

thereturning

8/16/2024

my popup is being hidden

```jsx const Server = () => { return ( <div className="relative mb-2 h-[48px] w-[48px]"> <div className="avatar">...

Nick

8/15/2024

Not sure how to make this hero text animation responsive

Just wondering how I can make this hero text animation responsive? https://codepen.io/nwoodward/pen/ExBomaq The problem is that the h1 is a fixed width of 250px, and I animate the wrapper, title to its full width with overflow hidden. That just means that I can't have it take up the full width of the screen as it grows, I have to rely on breakpoints and fixed widths, which looks ugly (image 1 to image 2). I feel like it definitely should be possible to make this responsive, but I feel like it's beyond me! 😄...

skywizard

8/15/2024

Object Element in Responsive Design

Is there a way to ensure that the contents of an object/embed element, in this case that content being a pdf, is always rendered on all screen sizes? The issue seems to be when an object/embed element is rendered on a mobile view/device, it doesn't render the pdf contents. if the view is set to "view in desktop mode" then the object contents renders properly. I've already looked at my view port meta tags and ensured that the correct attributes are being set, and that the correct mime types are declared on the object attributes. could there be another way to ensure consent rendering across all screen sizes?...

ilyes

8/15/2024

My first solo project a google page and i need feedback plz

Hello ive been learning front end (css+html) for like 5 months now ,had a couple front end mentor projects with guiding from youtube ,now i made a google page solo with no guiding i have little problems mainly with dropdown menu positioning i want your feedbacks please and should i move to java ?. ( sorry for the code soup and roots violation) https://ilyas-draissia.github.io/google-page/...

sheikh

8/15/2024

Why is the after elemant appearing in front of my main elemaint even after i specified z-index

https://codepen.io/version-2024/pen/jOjYyXM

Londonpeteharrison

8/15/2024

Vertical Header

I am using a left aligned vertical header (I know it sounds cheesy but I need a lot of page height) that's width is specified with a css variable --header_width. I then set the <main> with a margin of the same. This works fine, but when the page width is reduced, the header shrinks to a mobile header of 3 bars, but the <main> still has the width it had before. What is the best way of dealing with this, just a media query? I'm not sure if I should redefine the css variable or whether I should set the width another way, so I'm looking for recommendations. Many thanks...

Sveta

8/15/2024

Flexbox for a long page.

Hello everyone! I am a beginner and I still have not understood what is the best way to use flexbox if I want to have a long main page. If i have a quite long main page should I have some containers (5-6) for (navigation, main (if this main is long), sections, footer) and then display :flex for every container? Or what is the right way to do it? All examples at Mdn or W3schools are made only for one container.

marco567

8/15/2024

Adjusting my image to fit within a column (grid).

Hello, I am currently studying HTML and CSS. Why doesn’t my image fit into the image grid? Is there any way to fix it? ```html <div class="container"> <header class="header">Header</header>...

anes039

8/15/2024

Items issue

So basically i finished my project but i have a bug if i have an item and like i double press the cart it adds the item to two places , i want only to add the quantity i have done like in my cart the plus and minus for adding quantity but here is my code addToCart: (state, action) => { const itemInCart = state.cart.find((item) => item.id === action.payload.id); if (itemInCart === action.payload && itemInCart === 1) { itemInCart.quantity++;...

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