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

@media

hi all, there is a problem when i'm setting media queries. whenever i do this: ```css @media screen and (width >= 1024px) { /* changes layout */ }...

How to stop dark mode transition animation from showing on every page load?

Iโ€™ve got the following css to ensure you get a nice transition when switching/toggling from light to dark mode on a project weโ€™re creating at work. ``` * { transition: color 150ms ease-in-out;...

advice on making first client website

Hello, Im making a website for a client and need advice on tech stack. I need backend to store content - thinking a headless cms like prisimic so client can upload own content as needed. But do I need React to fetch data with express? Or is Pug fine? Thank you....

question about animation

hi all, so, animation-delay specifies the delay before the animation starts and NOT the delay in between iterations right? how can i achieve the latter? a delay in between iterations...

How to make a list animation through height detection

Please help to get block height to animate each of blocks with different time interval. i cant get the height of these blocks as it is hidden https://codepen.io/Mister-Eighth/pen/poZKmdo...

grid-auto-flow: dense not working

hi all, i have a grid container with shapes. why don't the shapes below fill in the missing spaces there? here is my code: https://jsfiddle.net/nczysk8h/17/...

quick question

hey all, i just have a quick question, can i do something like this: so on mobile, i have 4 images, then i set a media query where when we are at 1440px wide, i add more 7 more images, so 11 images in total in desktop....

Is there a way to useParams() in a class in v6 of react-router-dom?

After many videos and googling I can't really find what I'm looking for as useParams() works but with a function and not a class. Dose anyone know a way to fix this? Here is the version I tried as a class ```js class ProductDetails extends Component {...

js file is not working when upload to github

and my pc the js code is working but when i upload it to github it doesn't do aything https://mal-wd.github.io/Travel-Template/...

What is causing this error?

https://glistening-bombolone-928636.netlify.app/ After you start removing selected filters an error pops up in the console about line of code that removes them, but everything works. I ignored it since it works, but it is bugging me and would like to know how to fix it....

Type declarations for a JS library

I want to use the functionality of a JS library in react TS. The lib doesn't have any type declarations. So, anybody know how do I create type declarations for that lib in my project? And btw, TS tag not found...

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