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

Eslint: Unresolved Module Errors in "Monorepo"

Hi, I have set up a project containing two separate sub-projects, one for my headless CMS and one for the frontend. Before then all modules for custom paths (set up in the tsconfig.json) did correctly resolve, but now that the root is no longer in the project root, but in the astro sub-directory it can no longer resolve them. Everything still works, except for eslint complaining, and CMD-Clicking the paths opens the right file as well. ...

Sass @use won't import partial

I'm working on a project with vite. I'm trying to import a partial, but for some reason I keep getting an error saying can't find stylesheet to import File structure: ``` /src...

Best approach to add an SVG image positioned bottom of a ClipPath.

Hey guys and gals, Firstly, thanks for taking the time to checkout my question. Any help or insight is appreciated, spent a good part of today with no success unfortunately. We're currently building a basic portfolio site for a client. The client has provided a UI of what they want their website to look like (don't judge). The Problem:...

Why is my nav not responsive?

I don't know why my header is not responsive. I've been looking around for about an hour and I can't seem to find what's wrong. What's the problem with my code? I'm using tailwind for the styling, the rest is pure React. ```ts import React, { FC, ReactNode } from 'react' import DiscordLogo from './svg/DiscordLogo';...

Is it possible to combine the "Pool Design Pattern" and the "Immutable Design Pattern" in JS?

I'm working within a complex application that uses a lot of new instances of a given class in big loops (multiple million iterations per frame for image processing). To mitigate the (huge) impact on performances that the use of the garbage collector would provoke I am using the "Pool Design Pattern" (tl;dr: reusing the same instances when they are not used anymore to prevent garbage collection and the creation of new instances). The issue is, I need to apply a lot a consecutive operations on my instances, so to make sure I'm using an instance that has the value that I need at any given moment I want to add Immutability to the mix (tl;dr: when created, an instance's values can't be modified). If I want the pool of object to work I need to send the instances back to it (recycling). The process would look something like : ```ts const myObject = myObjectPool.getOne(/* some initialization parameters */); ...

page props undefined , `Subpage undefined` SVELTE

```js <script context="module"> export function load({fetch,params}){ console.log(params.id); let id =params.id;...

Keep getting error "Uncaught TypeError: Cannot read properties of null (reading 'classList')"

I'm making a js-actuated modal but I keep getting the error "Uncaught TypeError: Cannot read properties of null (reading 'classList')". This is my code: `<!DOCTYPE html> <html lang="en"> <head>...

CSS selector for a div followed by another?

Hello. I'm trying to create a CSS selector that would select a div followed by another one. Take a look here: https://codepen.io/CZghost/pen/poOrYze What I'm trying to do is this: I have a div with class labelced-message, and following is a div with class labelced-note. What I want to do is to select the message div, but only if there is a note div following (not directly). The reason why I want that is I'm making a MediaWiki template. Something similar to the ~ selector, but the other way around. Instead of an element preceded by another, I want to select an element followed by another. In other words I'm trying to select an element that has a sibling following. In other words something like this: div.labelced-note < div.labelced-message....

Background in page

Hello I put this picture on a background

Why does my Log say the Value is NaN?

well, i have this part of my code inside the js now everytime the loop runs it's supposed to generate a random value for x , y , vX , vY and r but when I log the value inside the loop it says all those variables r NaN this is the part ``` for(let i=0; i<100; i++){...

Opinions on this gsap parallax?

I've made this parallax section with gsap and it's just a bit stuttery/has issues with continuing to scroll as the image gets higher. I've pretty much topped out in terms of skill on this one I think, but I'm still not really happy with the results and was hoping for a bit of input ๐Ÿ™‚ https://codepen.io/nwoodward/pen/zYJdKox?editors=1011...

Front end projects where its only empty divs, full of css and js. how is it done? without content

``` <div class="container"> <div class="calendar"> <div class="month"> <i class="fas fa-angle-left prev"></i> <div class="date">...

How to speed up the asynchronous multiple request in a single fetch link?

The code that I will post is working properly but the only problem that I did encounter, it is not yet optimized for fetching a lot of chunks data it tends to overload/lag. What kind of fetching should I use that is optimize for fetching a lot of data? I am clueless now. Thanks for the help guys ! ๐Ÿ™‚ Note: ...

React Query state management

Can other states management tools be ignored over React Query being used for state management in a react application?

css properties as global variables and can be used as a call back function?

hello, are there any similar method in CSS that can be used as global variable like in JS? i feel like im using display flex, aic,jcc over and over, instead of combining classes is there a way like call back function? like color: var(--primary) where primary is defined on top think

CSS doubt

I want to put the glowing animation around the helmet. It is desktop size wallpaper.
Can we bend the div element from this to --- something like this ( ?...

Responsive design

Is there a way to make it work? or start from fresh?

Image doesn't fit in its parent div properly

I have a div(card) , Inside it i have two more divs 1. top div and 2. bottom div, inside top div i have placed an image and have set its width to 100% and height to auto, but I'm noticing some extra pixels(green horizontal line) at the bottom of my top div ,I don't have any margin or padding set on top div. How can I fix this. img{ width: 100%, height:auto...

Fetching data from an API and putting them inside an array but it works differently in browser/IDE?

It's React. Something weird happens. When I reload directly from the browser, it still logs an empty array, but when I save the file from VSCode, it displays the array just like I wanted. ```js const [country, setCountry] = useState([]);...

Css Inheritance Question

Hi everyone! Asking this as a refresher for myself. I'm trying to set a font-size: 13px; on my h5's. But the user agent styles are applying instead. I set the font-size: 13px; on the <div class="footer-col"> thinking the styles would inherit but the user agent styles are applied instead. Is this because my <div class="footer-col__1"> is acting as the actual parent and not my <div class="footer-col">? https://codepen.io/ezekielswanson/pen/KKxqWEp...