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

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?

Natejoestev

1/24/2024

css column expand to fit area

i have: ```html <div class="a"> <button>Btn</button> <span>Text</span>...

beary

1/24/2024

Need help with responsie header icon 2

I shouldn't have deleted first post, sorry I am learning I am struggling to make the icon responsive on my project, it disappears on a smaller screen. (I know my right arrow does as well but this is a different issue as well as other issues like displaying 1 to 5 cards, I am not fixing this yet). https://codesandbox.io/p/sandbox/github/lilshebeary/AbeeCDEFG/tree/main/...

clevermissfox

1/24/2024

custom cursor effect

Someone posted this awhile ago asking about the custom cursor (I think it’s only visible on desktop) and I’m trying to figure out how these hover effects work. From what I can tell the button has its hover effect and on hover the custom cursor is transparent so it just looks like the cursor is becoming the hover state. Anyone else have any thoughts on this ? The timing seems a little tricky on when the cursor goes transparent and how it’s animated out and in. It’s a site for accessibility so would be ironic if so but any issues with this kind of effect being inaccessible for those using assistive technology? https://design.google/library/designing-global-accessibility-part-1...

Timo

1/23/2024

need to couple class to my js file

ps im tired it is 1 at night here trying to fix it

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