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

VSCode Help

I'm trying to work on a project & build a website for my bosses vape shop. I'd ask the general question, but I run into too many problems & I'm still a beginner. I struggle with things that I'm sure most people shouldn't & I just don't know how to put it into words or how to fix my issues. Does someone care to chill with me for a bit & help me work on things? Help me understand how things work & help me with the issues I run into? I get worse & worse everyday & I'm loosing my motivation. I love...

Font looking very weird

My code in scss: ` @font-face { font-family: "Bellefair"; src: url("../assets/fonts/Bellefair-Regular.ttf") format("truetype");...

SameSite cookie property

I've a frontend that I'll be hosting on a digital ocean droplet running linux and nginx. The backend will also (hopefully) be on the same droplet. I'm trying to implement session authentication, and was wondering if I'll run into problems with requests between the FE and BE because of the samesite cookie property? I'm obviously new to this and will have to look at how to serve both from one server, but was hoping for some pointers/tips that might save me a lot of time, if anyone has a spare second? Thanks!...

Gsap .from doesnt work with useEffect[]

Im learning now GSAP, so I think it's a really simple question, anyway, the documentation says this:
gsap.from() - Like a backwards .to() where it animates "from" the values defined in the tween and ends at the element's current state.
gsap.from() - Like a backwards .to() where it animates "from" the values defined in the tween and ends at the element's current state.
Whenever I refresh the site, it happens what you see in the GIF https://i.imgur.com/JrVzB11.gif, the animation "glitches", why? I tried to make the animation start when I click the div and it works fine, it start 200px off and then gets in the right position (but it glitches if you click it before the animation ends https://i.imgur.com/owuOWU7.gif, here I first make it end, then I click quickly)...

Finding the skewed offset of an element

I've a full width container, that has a before pseudo element that's 3/5's the width absolutely positioned, and skewed by 12 degrees. I'd like to place another element after it, so get the bounding rect coordinates and update a css-variable with the right value, which will be used as the left of the next element. I can't work out how to calculate/take into account how to adjust for the slant though Codepen: https://codepen.io/nwoodward/pen/JjBGbqW?editors=1111...

Site Best Practices

Hey Guys, Just looking for some best practice stuff, if i am making a landing page like this one, that has a background image, i imagine i would want to have a container on this, and on bigger screens (4k+) they would have black bars? Also i am guessing its not viable to have the image take the whole height of the screen? Attaching two screenshots, first one is the design, 2nd one is my implementation.

two Filters on click

here how can I add current and exits filter for all tabs, based on class or data set

Output the sku

I need this line of code to retrieve and display the sku and so far I cannot get it to echo the sku. Please help. <?php echo $this->escapeHtml($this->getSku());?>...

is there a better way than performance.now() to tell how long the execution took?

is there like a 1 line solution i think i saw someone who did it once but i can't remember but is there a way to know how long something took to execute but in a faster way than these 4 lines or 3 if we dont console log start? let start = performance.now(); console.log(start);
...

Items not appearing on mobile with display box?

Hey guys, it looks like the first few divs i have in this codepen aren't appearing on mobile responsive? the first 2 divs i have here just appear to be off of the screen? https://codepen.io/assyrianlegend/pen/OJwjgGJ...

Can I add animations to this project?

Project link: https://glistening-bombolone-928636.netlify.app/ I would like to try adding animation on the job cards when: 1)They are disappearing when not having adequate filters 2)Ones with the proper filters would stack up to the top...

width 100% is not respecting the gap property?

Hey Guys, Im trying to learn display:grid, i set a gap of 3.5rem, the cards i have have a child div that i set to width 100%, but it seems like the 100% is not respecting the gap, and its pushing all the way to the next div? can someone point me in the right direction?

Need a CSS expert (Tailwindcss)

I am trying to figure out chatGPT manage to stick the prompt area to the bottom. I copied their code but it doesn't work as expected and I am not sure how to get the same results. any help is appreciated Simple version: https://play.tailwindcss.com/IVZVV4w0jj Original Version:...

How can I convert a span to an img

How can I convert a span to an img? -- Can I get some help with HTML? What would I need to do in order to make a span viewed the same way as an img while considering accessibility? ...

Pseudo -element

Pseudo-element z-index not working , I want the gradient background to be behind the parent element https://codepen.io/aldrinbright/pen/RwBZNrw...

<datalist> inconsistencies across browsers

Is there any reason why Firefox displays only text between the closing and opening option tag, while Chromium displays both it and the value parameter and WebKit displays only the value parameter? Here is a demo: https://codepen.io/angelovdev/pen/zYLdYNz ...

how to use gradient with variables

linear-gradient(rgb(var(--main-color-1)),rgb(var(--main-color-2)) ) why this is not working...

RegEx with match() and replace()

I have a regular expression that grabs the double quotes and value for an html tag attribute: str.match(RegEx). And then I use str.replace(RegEx, replacementStr) where the replacementStr is a span tag with a class for changing the color in a pre block. It works like a charm when I only have 1 attribute in my html tag. But when I have 2 attributes (e.g. id and class), I get both matches in each attribute. I can't figure out why it doubling since the id and class values are different. Any insight would be great: ```js...

Occasional JS error from fast clicking?

This error is popping out occasionally in console, from I'm guessing, clicking too fast? When I'm slowly handling the app it is doing well, but it shows up when I start going ham(I think). "Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node." If I'm remembering there is a line of code that prevents spam clicking or something? If that is even what is causing it in the first place....

Why is this giving me an error?

```js for(let i=0;jobCard.length;i++){ if(jobCard[i].classList.contains('hidden')) { jobCard[i].classList.remove('hidden'); }...