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

JS Path

I am going through chrome dev tools docs, there is this "Copy JS Path" that they are telling to copy. I also pasted it in a console which evaluated to an expression. But I dont understand what exactly is a JS Path and why we copy it. I googled but still cant find anything... LINK: https://developer.chrome.com/docs/devtools/dom/#path...

Question about web components

I'm working on a project that will require being able to add a bunch of different components to the page at any given time so the plan is to try to use web components. I'm having a debate with my coworker, however, on the best way to set them up and hoping anyone might know the pros or cons of one way compared to the other. My argument is that everything should be built inside a singular class constructor with all the logic built into it. So something like an accordion would look like this and the class would loop through each details tag to set up all the logic needed ``` <accordion-list>...

Should the HTML5 dialog tag be used for a toggleable responsive navigation menu?

It is common practice to have the primary website navigation always visible on larger devices (desktop and tablet) and shown/hidden with a toggle button ("hamburger menu") on smaller devices (mobile). Is it proper to use the HTML5 dialog element for this type of responsive navigation? Dialog Pros...

How to get flex item to remain fixed?

So I was trying to make an insult generator for fun and ran into the following issue: https://gyazo.com/29b1019b9220b9f1a8f25b242769735a The content div at the bottom has fixed with auto height. And so when content randomly changes on every submit, the height changes relative to that content. The height's changes then also end up changing its sibling's position. The sibling is just the input-button pair div. The pair div and the content div are items in a flex column container. ...

How to center grid content in the middle?

hello, i have 3 elements that should actually be in one line next to each other with the following grid template... but it doesn't work as intended, if i remove the layout-right element it works. but only the layout-left is next to the content any suggestions for a solution? ...
No description

Why is the autofill text color not white in my form input?

I have created an HTML form and I am trying to set the text color of autofilled inputs to white. However, it doesn't seem to be working as expected. Here is my code: https://jsfiddle.net/76crfwjv/1/ `input:-webkit-autofill { background-color: #000 !important; color: #fff !important;...

Next js Custom Field Component With React Form Hook

Hey everyone, I need help! I'm trying to create my own custom Field Component in Next.js with the React Hook Form library for form validation. I'm a bit confused about how to use Controller inside my Field Component. Here is my code This is the parent component. Currently, I am using Controller in the parent component. It works, but I want to use it in the child component. ```tsx...

infite scroll text animation

Hi guys, I want to create a infite scroll text animation. But it does not work as I expect. First, It does not start at the begining of the wrapper. Second, It creates a weird effect at center of the wrapper. Can anyone help me? Here is codesandbox https://codesandbox.io/p/sandbox/infite-scroll-8clmdx?file=%2Fsrc%2Fstyles.css%3A12%2C16...

How to fetch data from a function?

This works, but I need to elaborate on it ...
name1 = getname(names)
name1 = getname(names)
I am sending a list of names to a function that sorts them in various ways and retrieving the name at the top of the list. The function has
return name1
return name1
...

nested scss, css

why does the nested scss not working but plain css does? working ```css .text-container {...

need help with fetch json files ( from files) in reactjs

I created a jsx for all json files like this ```js import Vowels from './file' import consonants from './file' ...
No description

How to debug this kind of issue and what it is called?

This is the first time i'm coming through this issue static/js, i've never seen this kind of issue before, May i know what it is called and how to debug it?
No description

Invisible Video With Only Audio

Does anyone know why this happens? I can add controls to the video and play it normally, but I can only the audio come through instead of the video itself. I thought it was just chrome so I tried firefox and safari, but its still the same issue. Am I missing something? I just have it as <video controls src="video.mp4"></video> with no css or javascript. Any ideas would be greatly appreciated!...
No description

hide api key

hello is there anyway i can hide my api key in vanilla js ?

Frontend Development Jobs

I'm looking for some advice really I've been working as a front end developer working with wordpress for a very small business for the last few years. Currently I only know html and css & want to progress in my career currently the company I work for doesn't deliver on their training promises and I'm now not learning anything new. My question is what do I need to focus on to have a chance of being hired by a larger agency/company. It seems like theres a huge range of requirements companies are looking for so I'm not really sure where to start apart from the obvious javascript, php etc ...

Can i put a header tag inside a section?

im still practicing on how semantic html placement work all i know is it should look somethign like this <header></header> <main> <section></section>...
No description

how to render a component by clicking in reactjs ?

I want to render a component by clicking? Here's the code I want to display that language component when I click button from that user.jsx and only render language component and disappear that user component Language.jsx...

Accessing multiple HTML ID selectors and changing innerHTML of them.

This is part of a more complex code (relating to a multi-tabbed calculator). What I am ultimately doing is compiling all the IDs that need a formatting adjusting and wanting to utilize a function to make the necessary adjustments (for example adding a $ or a % or decimals, etc), but I was having trouble with it so I condensed it down to bare bones to show for example. Ironically I thought this would be the easiest for me to do, but all the other code I have written I had a much easier time handling. These IDs hold values in their actual state, which I have being pulled from form data inputs and calculations handled in other functions... but I wanted this to happen last (so to not interfere with the calculations)....

Y offset when toolbar is visible (Chrome Android only)

When the toolbar is visible, my circle's center's Y position is above the clip location by an amount that seems equal to the height of the toolbar. When the toolbar auto-hides during scroll, the circle's center is at the right place. It's only on Android, not on desktop even when enabling toolbar autohide....