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

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

Need ideas for a nested ul layout

I need ideas, suggestions or examples for a nice way to display a nested ul (or perhaps, a better way of displaying it). I tried a grid, with a flex inside, but I'm dry of ideas. Here you can play with the HTML: https://codepen.io/myntsu/pen/OJwQaoz...

How to add web workers in react components for 3rd party scripts like google tag manager etc..

I have been trying to implement web workers in our static page when I implemented the web workers the main thread got increased to 16SEC and for mobile main thread taking 8SEC and adding few more script's to worker file it's increasing more work thread process I'm no able to figure it out can anyone help me in this ? for both mobile and desktop version it's been different. Thank you in Advance....

Hovereffect with opacity on gallery

Hi, I'd like to make a hovereffect on a gallery where if you hover on the whole gallery, the opacity lowers except for the image you are hovering on within that gallery. Actually something like this: https://secretlab.eu/nl/products/magnus-metal-desk?sku=MagBdl15S-C9 (scroll a little down, about 60% on the page is that gallery) Here is my codepen: https://codepen.io/axl-prudhomme/pen/BaPYJjq?editors=1100 I hope I explained it well....

CSS centering in div..for multiple screen sizes

I have a CSS element project ..centered in a div...centered in large screen. But when I go to mobile screen, it is offset to the right. Is there a special key to get this to work. Thanks.
css ...
css ...
html.

Image file src problem

So i have some images which are within folders when i hit Go live on VS code they works properly but when i open index file directly o browser the source broke

im trying to make image bigger but it just doesn;t get bigger

this is just an extensions from vscode and it is on iphone x so please can somebody help me...

Form submit button not having click event in browser, yet form is getting submitted?

Both on right click and left click? And only when submit button is clicked, nowhere around the form. Any explanation for it? Can you just submit form without Click event?...

i can;t fix the image

i wanna put image on the center(on mobile view)i need help can somebody help me please

Select Style a "Placeholder" Option

I'm looking for some help trying to style my 'default' option as a placeholder, to match other placeholder for input (a lighter grey). I'm also doing something with with the label trying to keep it displayed after the select loses focus. I have created a codepen that demo's what I have so far. Thanks for any help. Codepen is https://codepen.io/hoskinsconsulting/pen/PoBQbRZ

Can't import SVG via ReactComponent

I need to import logo.svg, but I'll have to change its colors later on so I can't just import it and use it as src in <img> tag. So I've googled if it's possible to import it as a component and I've got people telling me to do it this way: ```js import React from 'react'; import { ReactComponent as Logo } from './assets/logo.svg'; ...