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

what is the best ever available React tutorial on the internet ?

Not override spreaded value

I'm exporting some objects: ```js const PA28_161 = { ...aircraft, name: 'Piper Warrior PA28-161',...

Javascript Object.create inside object?

This doesn't seem to work: ```js const myObject = { masses: [ Object.create(mass, {...

Comparing two arrays

Here is my code: https://codepen.io/lukakuwu/pen/zYyPYRm?editors=0010 I have an array with prices and a function to add the tax. I made a second array with the expected results and used jest to test. I know theres something wrong with how im calling the results arrays values but I dont know how to fix it. The tests should pass through the array dishes twice and compare all of the items in the array results with the price. Maybe theres a better way to reformat it but Ive tried everything I can think of...
No description

TypeScript behavior

I'm doing some simple JavaScript coding exercises in TS and have come across this odd behavior I haven't encountered before. I have only the following code: ```ts const inputs: Array<Array<any>> = [...

Background image

As you can see in the attached image i have a image which is moved towards right side and some of its part is showing .Can anyone tell me what is the best practice to do this as if i will use position absoulte than for every screen size i have to set it accordingly is there is a better way to position image like this
No description

google extension to extract words from every websites everytime I click in it

hi, I want to make a google extension to extract words from every websites everytime I click in a certain word inside the page. And I want it to popup it as a list of words. But I don't know what i wrong with my code so I don't achieve what I want. popup.js ```js document.addEventListener('DOMContentLoaded', () => {...

Sentry is not logging the errors

I integrated the sentry on my nextjs 13 app but the sentry is not even logging any errors even through there’s no errors on my code.

Transparent outlined text

I'm trying to make a transparent outlined text with css, but some characters look weird. Is this because of the font or am I doing something wrong? code: ``` .text-stroke-md {...
No description

How do I achieve the effect of the sub nav on this Apple Website

I'm trying to achieve the sticky behaviour on this site https://www.apple.com/apple-card/ Where the Sub Nav overlaps with the first's section's content, and sticks to the top of the screen on scroll. Here's a codepen with my attempt. https://codepen.io/HanielU/pen/zYyEVYW ...

How fix issue 'Blocked by CORS - No 'Access-Control-Allow-Origin' header'

Access to XMLHttpRequest at 'https://pro-api.coinmarketcap.com/v2/tools/price-conversion' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
CartModal.tsx?t=1695060428915:119 Error - AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
axios.js?v=d21b1d92:1511 GET https://pro-api.coinmarketcap.com/v2/tools/price-conversion net::ERR_FAILED
Access to XMLHttpRequest at 'https://pro-api.coinmarketcap.com/v2/tools/price-conversion' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
CartModal.tsx?t=1695060428915:119 Error - AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
axios.js?v=d21b1d92:1511 GET https://pro-api.coinmarketcap.com/v2/tools/price-conversion net::ERR_FAILED
...

lazy-loaded `<image>` in `<symbol>` always loads

the issue is simple: i have an svg with a bunch of <symbol> that have an <image> tag with loading="lazy". all images in the <symbol>s load regardless of <use>ing the <symbol> or not. https://jsfiddle.net/cqugnLb9/ <-- disable the cache in f12 and check the result...

Background overlay with overflow html

Hi, My css structure looks like this: <html> //scrollable overflow <div className="fixed inset-0"><loadingSpinenr/></div> </html/>...

Issue with react-router-dom (Route in Routes)

I have this routes ```tsx <Routes> <Route path="/" element={<HomePage />} /> <Route path="/login" element={<Login />} />...
No description

i am having error messages while creating react app

can someone please look at it and tell me whats causing it
No description

How add blur effect on geometry in three.js library

I make circle Geometry in three js I want to add a blur effect on this circle
No description

Styling Components with SASS

Hello there, I am working an a Portfolio Website for a friend. I've decided to do it in React.js. And I am having some trouble with styling using SASS. I've created a separate reusable component with props, <Button />, that goes inside the <Nav /> component. ...

Where is this slide transition coming from

I have this navbar on my site and I want it to slide in just like in the video but I couldn't understand how is it working, I need to know which property makes this so I can only add transition to that property and not to background color. I exaggerated the transition duration to show what I mean. I'm writing css version of important parts for those who don't know tailwindcss. Before scrolling the page navbar has these properties....

background img

i can't seem to get my picture to be the background img on my site. can some tell me what's wrong with my code?
No description