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

dinki

1/26/2024

Looking for ways to visual CSS Grid

Hi all. Looking for a little help. I know only a little about CSS but I have dabbled with it, html, php, etc over the years. I'm a Home Assistant user and I am looking to replicate some of my Alexa Show screens as Home Assistant 'cards'. These cards allow for CSS elements including grids. I think I understand the concepts but I am having trouble getting things right. I'm looking for a resource that allows me to fiddle with settings and see the results live. I found this site: https://www.cssgridplayground.com/...

hasnain

1/26/2024

how can i make a single grid item from many grid items have multiple rows or automatic height.

<div className="grid grid-cols-11 gap-1.5"> <p className=" col-span-3">বরাবর</p> <div className=" col-span-8 flex justify-end"> <p>তারিখঃ ০৭ November,2022</p> </div>...

hurrrrricaaaaane

1/26/2024

CSS: Hide team card's inner text elements by default; show it while hovering on the outer element

Anybody CSS Pro here? 🙂 I need your help guys! /* Hide card without Hovering */ This is a member card - I want to make it hidden by default to just show the photo of the person...

Cortezano

1/26/2024

input border active issue

hi guys how I remove this, I try to manually input this in css like input:active - > border: none but suddenly this border still showing on my website. Hope u can help me, thank you!

GaryCJ

1/26/2024

React - Updating useState as a Multidimensional array.

Hi, I am looking at the performance consequences of managing a state via a Multidimensional array. Currently, I am representing a 15x15 grid as a multidimensional array, each cell (gridName[row][col]) contains five "key:value" pair pieces of data about that particular cell. When a user clicks a cell, it calls the useState function to update the contents of the key:value pair for that cell, and depending on the update, it may also update another cell; this updates are then used to change the visual data within the cell. This is done by returning a new version of the array. This is my first react project, so I am wondering what the performance impact of this may be, as I can't seem to find a better way to do it, and in the dev console, each update is around 4ms. Also note, that the grid size will always be 15x15, so larger grids aren't an issue....

obodo

1/26/2024

Tailwind Stressful

I don't know, maybe it just me but I find tailwind a bit stressful. I wanted to do a dropdown but couldn't. Later I found out that I need a plugin to make it work. Tried different plugins and tutorials but didn't work as I wanted. Had to drop the idea and switched to bootstrap which I am more comfortable with. Do you have a tutorial on tailwind? I find your tutorials more refreshing and your explanation is second to none!

BrianSBoros0342

1/26/2024

Help with Blog page design

I'm a bit stumped with hwo I'd liek my design. I'm not a great designer... What background gradient do you think I should use? I'm using this light bleu now just to make the blogcard pop out a bit, but I'm curious inyour thoguhts. ...

1/26/2024

Fixing image height

How Would I get the image to fill in the rest of the height. I used flexbox to make this as well

4115steve

1/26/2024

Should a beginner learn tailwind or sass? What's the difference?

I'm learning and I don't know which to invest more time in after learning CSS fundamentals.

thethingisback

1/25/2024

background-video: using the <video/> tag, how to save performance for large video size?

I currently have a 471.9 MB .mp4 video in my local directory that I want to ultimate use for a background video for a portal landing page. I"m bringing the video into my component like so: ```...

Suna

1/25/2024

Creating a speech bubble tail using linear gradient

Hi, i've been trying to recreate this speech tail, but currently having hard time recreating the inner tail which should match the linear gradient of the body. Tried a few things, but with no avail. Would appreciate some help. Codepen: https://codepen.io/CruelAngelsThesis/pen/vYPeMvK...

Mathies

1/25/2024

Hover dropdown menu next to normal <a> navigation items, use a pointer cursor or no?

Hi all, I've created a navbar that has normal clickable <a> links but also 3 items that are not clickable but instead have a dropdown menu when hovered/focused. What offers better usability, making that item have a cursor: pointer or keep it standard as it is not clickable itself?...

👻Ghost in Your pants👻

1/25/2024

How to get Json data from a fetch response object (using react router loader with defer)

hi guys im using defer loding the data using loader of react router dom

const responce = fetch(FetchUrl.toString());
  console.log("in loader", responce);
  return defer({ responce });

const responce = fetch(FetchUrl.toString());
  console.log("in loader", responce);
  return defer({ responce });

...

ssh

1/25/2024

Judge the crab 🦀 out of it (and also suggest design changes it's just a template)

https://khtml.vercel.app/ How can I make the css code re-usable since the header is only on the main page and every page other than the TIMELINE is same as MAIN PAGE minus the main section ... But in TIMELINE i can't key my main empty right now since I don't have a design I just code stuff whenever I get any design ideas ...

Anonymous DEV

1/25/2024

i need a little help with css

anyone know how i can make this for smart phones

Moweyy

1/25/2024

LocalStorage and useEffect

In a typical CRUD scenario, one would be using the above mentioned like this: • useEffect => On load: check if localStorage data exists, then parse it and save in state. • useEffect => Listens for changes in state data, then saves it to localStorage. How can I prevent the second useEffect from running after the first on initial load? ...

Skriti mož

1/24/2024

svg with color-scheme: dark light, automatic BUT BACKGROUND!

Hi, I have this website https://goetzeiscool.github.io/presernove-poezije/. color-scheme: dark light; is used, so I don't have to set any variables for colors. with the svg-s (for bottom navigation) having svg path{ fill:currentColor...

Zerthz

1/24/2024

Overflow-x auto causes button to flicker

Hello, I got this div with a button, that when you click it you can add an image and the button moves to the right side. And there's a button on the image to remove it. And when there's enough pictures the div will scroll. All that works as intended. But when you remove the last image the button becomes basically hard to interact with. there's like a few pixels of good space where you can get it to work. Removing overflow-x auto solves this. But obviously it also removes the behaviour I want.

itsMU1X

1/24/2024

Performance things in lighthouse

Hey, i'm wondering can't know what LCP, FCP, and others means. and what type of images should i make them lazy loading? should i add the lazy loading to large images or specifically on small images? and in this image the image is 15KiB what should i do? what she wanted from me?...

Jimster

1/24/2024

Typeform Button

I want to make a button that opens a typeform form but typeform website has their own built in ones how can i make my own with css?

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