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

help

Are hardcoded dimensions a must for CSS animations and animations in general?

Hello! I was goofing around with animations, and was tunnel-vision-ed with figuring them out, that I only did them for desktop version. And after triumphal results, the disappointment that sank in when I remembered It will not work in mobile version because of my hardcoded dimensions was something. So, any workaround for this? I'm sure hardcoding them for every possible form your app takes is not the way to go. xD ...

Need help with <Route>

Hello, I'm learning react by following a video, however I did everything the same but I came across this error below. Since the video is about 1 year ago, I'm guessing that the react has updated by then since "<Routes>" was never mentioned. How do I fix this? "Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>." ```js...

DIV with transition effect

Trying to add a transition to a div so when it hovered over it changes smoothly

In React Hook form, can't reset nested object

I'm trying to reset otherSuppliers when buyFromOtherSuppliers is false.

Running mocha tests and nodemon

Just wondering how I'd run my mocha tests on every save with nodemon? And whether that would even be desirable, or if it would too much on each save? Couldn't really seem to see much about it Here are my scripts: ```"start": "nodemon app.js",...

:first-of-type selector behavior question

Hi, I'm trying to make a simple typing game, similar to hangman, where the user types in a word to be guessed. I want to add a visual hint to the user by using :first-of-type so that the next empty slot is highlighted. However this only works with the very first element when all slots are empty, but as the user starts typing the highlighting disappears. Probably easier to understand with a demo: https://codepen.io/D10f/pen/rNrvrzK ...

I'M using library table react-data-table-component, trying to have one row get free overflow.

import DataTable from 'react-data-table-component' ```js <DataTable data={data} tableColumns={orderListColumns}...

Word Game failing auto testing

I have been racking my head against the wall trying to understand why I am failing these auto tests when the code seems to work fine manually. The errors are saying my code isn't handling these words appropriately, but when played the game updates the win/loss counters, the underscores, and the incorrect letters as necessary. It also resets upon completion and stores the previous word as needed....I am at a loss. Here is a pastebin for my code: https://pastebin.com/vhEZxQh6...

make the text have margins on both sides

I know I can just make margin left/right, but then I cant add a max margin so if the page is expanded more than a certain amount, the text tops expanding how would I go about doing that?...

CSS Grid without Floats #cssgrid

Hi everyone, I’m looking to create a css grid with 6 cards altogether, 3 columns and two rows without using float, can someone help me with this? #html-and-css #cards #cssgrid

How would i go about making the hero fill ONLY 80% of the page?

I want the hero to take up the entire top visible page, no matter the size, and the Stencil image to be centered at all times but i can not figure out how to do that. any help?

child escaping parent on float: right;

if i remove the float:right;, the text says inside the header, but when i add a float right, it decides to leave. any help on making this stay inside the header and float right?

how to create a "preloader"

the title essentially says it all ^ this is my first time doing it, so i'm not sure where to start/what to do. to be specific, i really like the loading screen shown here with her name (can be replaced with a title) and a line (or some sort of unique squiggle): https://indiharris.webflow.io/ any help/suggestions on this is appreciated, thanks!...

CSS Grid Issue

I'm creating 3 column grid and getting dynamic data in the columns. So one column can have more data than the other one. With the same thing, next row is taking space according to the more content column. I want the next row to take up the empty space so there is no empty space in the page. I've tried creating main container as grid with 3 columns and grid-template-rows to be minmax(100px , auto) but it's not working. I'm new to grid, so not getting how it can be achieved. ...

How to prevent focusing first input inside form when opening page on the mobile ?

Like in the title. I have application which when it is opened on mobile the first input inside form is focused and keyboard is displayed. I want to prevent this. The input does not have attribute autofocuse but it is focused still. Looking for some valid solution for this

css animation with css variable

Hey everyone, I have this dark mode /light mode theme going on with css variables declared within :root{} and I have two icons, the sun and the moon. In light mode, the moon shows up and in dark mode, the sun shows up. When you click on it, it changes the theme of the website here is a little clip...

How do I call callback on blur but only when the focus item is not a child

So i have this structure: ``` <div onBlur={...}> <input type="text"/>...

how to make favicon bigger ?

i've been trying to find a way but still looks so small ? is that im using wrong or what ?

Masking

I am trying to mask an svg with a solid color. I know I can only mask with a gradient or an image. Is there another option to mask with a solid color?

Common folder names for organization in React

Hello, I started learning about react and after many videos I notice that there were a lot of folders in the src folder with many names. As of right now, I learned that there is a components folder in which have files which is reusable in other apps, a services folder in which has the data/json files and there functions to get the data, a utils folder where we have functions that help with math. Can anyone tell me the common names or the best practice to start doing with naming the folders and what types of code in the files to put in there?...