Kevin Powell - Community

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

REACT JS Error

Guys why Do I get the Error Under My Function Parameter even if the result shows Up correctly
No description

Image scr

why can't i navigate to my images as they wont display. /images/rabbit.jpg Is what i used or even two ../

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/...
No description

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

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

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!
No description

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

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!

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

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
No description

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.

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: ```...

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...
No description

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?...
No description

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 });
...

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

i need a little help with css

anyone know how i can make this for smart phones
No description

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

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