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

no scrolling animation on scrolling with anchor tags

hey folks I'm doing scrolling using the anchor tags, but the problem is it instantaneously scroll to the section I mean there is no scrolling animation I tried adding the scroll-behaviour: smooth; to the body but it didn't worked how do I get the scrolling animation on scrolling with anchor tags

percentage width behaving weirdly

hey folks this is my code ```tsx const OurMission = () => { return ( <section className="flex relative p-8">...

text-wrap: balance conflicting with overflow-wrap: break-word

Recently started using text-wrap balance which works great 95% of the time but there are instances where words will randomly break, despite having enough space to be displayed. I'll attach two images. This happened in Chrome Canary but now the CSS is available in Prod Chrome and it's still doing the same. I read that the CSS white-space property conflicts with text-wrap but I haven't read or seen anything about overflow-wrap conflicting with balance....

How to make a play button with pseudoclasses?

How to make a play button with pseudoclasses? Like '>' icon. For thumbnail of a video play

[vite-plugin-sass] Unexpected token u in JSON at position 0

I just migrated my react sass application from webpack to Vite but I haven’t been able to build since the migration took place. The error below is what I encounter ```js
vite build...

Best way of adding dynamic html?

What' the best way of adding html with dynamic information? Is it doing innerHtml = ` <div class="hourlyhourkey-info"> <h3>${dynamic info}/h3>...

Reading JS ... currying for newbie

My brain is exploding again ... this time it's the concept of currying ```js function curried_add(a) { // has access to the argument for a...

Heroicons vs Font Awesome re: performance

I’m trying to get my webflow website to over 90% mobile performance on pagespeed.dev, and I’m currently at around 86%. One thought I’ve had is to stop using Font Awesome (which makes a javascript call to load the images) and to use svg images, like Heroicons, instead. My question is: is this change likely to produce the desired increase in performance?...

Drag events not working on mobile version. What is alternative?

I have a list that you can order at will by dragging it's items to the position you want. I'm using dragstart, dragover, drop etc. events for it, however they do not work on mobile version. I saw touchstart, touchend events, but they seem much more coplicated to work with. Is that only option I have or are there other options?...

swipe not working on the desktop screen in the carousel

hey folks this is my code for the carousel https://mystb.in/AtmPotterTravelling for some weird reason the swipe works in case of mobile screen but on desktop screen...

how to generate HTML code from a pdf file desing

Hello there, I have an pdf file of doctor’s prescription. My web application takes all the data as input and generate pdf but the design should be like the pdf. So is there any way to generate html code from the pdf so that I can pass the data to the html and it generate the pdf with same design woth dynamic data.

Promises & Async Await Concept Understanding

I'm reviewing async await rn, and I just wanted to clarify something RE Promises. Promises, on their own, are NOT asynchronous... correct? We use async await with promises in order to make them asynchronous?...

InteractionObserver in React

Can someone help me figure out why the first two items in the project section aren't working with the InteractionObserver in React? When I reach the end, the last project does complete the transition, but the first are not. It was originally working entirely, but once I updated and added the photos, only the last one worked. https://www.devjones.space/...

hexagon button with border-radius and border using trigonometry

I'm trying to make a perfectly customizable hexagonal button using just css. So far I still have to use 2 magic numbers for height and translateX. I dunno what's wrong with my math <:pepo_cry:804221412172365834> https://play.tailwindcss.com/1gE4l0GgpT?file=css...

help with grid

Is there a page where I can learn grid in an interactive way, I was reading but I'm pretty stupid learning that way, I'm a person who does everything and learns only by trial and error, I'm trying to make 2 columns, the first with 3 rows and the second with 2 rows and I feel that it is complicating me more than it should be

Constructor confusion ... JS Newbie

In codecademys JS course, a class is defined as an object blueprint, and to call it you must add the constructor function (constructor()): ```js class Dog { constructor(name) { this.name = name;...

Help with grid

im using grid for mobile resonsiveness. when 400px is reached, im changing header from flex to grid so that the logo occupies the entire row, the second and thrid sibling should occupy 3/4 and 1/4 space respectively. ```js <div className="header ">...

Filenames in Github

Can I ask why github dont allowed any different filename when pushing a file in github? Why do it needs to be index.html. My files last year are not even named index html but its not showing error 404.

not able to style the SVG

hey folks I'm rendering an SVG using the img tag like this
<img src='download.svg' alt='download SVG' />
<img src='download.svg' alt='download SVG' />
now I want to change the stroke color and fill color of the SVG how do I do it...