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

Hover effect

I want realize a hover effect menu an image should appear behind the links but the problem is the background is not center behin each link What should I do to center the background https://codepen.io/alpha_66/pen/RwezEGd ...

svg in the div still showing when the container height is 0

hey folks this is my code ``tsx <header className={sticky top-0 z-[3] bg-white`}> <div className="flex justify-between px-16 py-4 h-0 bg-gradient-black-green"> <div className="flex gap-4 items-center">...

grid-template-columns auto fit not working as expected

```css .videos__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); place-content: center;...

Chatbox

I wanna create a chatbox w/ scss n vanilla js but i'm struggling with making it so that it scrolls to the bottom when a new message is received Codepen : https://codepen.io/RS_2009/pen/NWOZRWq...

What is the difference between text-properies and font-properties?

As of My knowledge text-properties are applied to entire text within a tag where as font-properties are applied to individual character.Am I right?

Tailwind CSS transition not working.

```html <div class="mt-6"> <p class="text-sm">Or sign up with:</p> <div class="flex justify-center mt-2"> <a href="#" class="bg-white rounded-full flex justify-center items-center transition-all duration-1000 ease-in-out" id="googleButton">...

Quick question about securing token

I have a really simple website with no backend that has a couple html files, some css, and 1 js file. I want to grab a user's latest instagram posts, and I don't really want to use another widget service as it's kind of a hassle managing accounts for different clients. If I go about using the official instagram api, I'll have to use tokens which are obviously senstive, and because I don't have a backend, the token is going to have to be exposed on the frontend. I'm not really concerned about someone compromising our token because it's only to grab instagram posts, but is there any way I can secure it a bit to make it annoying for someone to compromise? I'm assuming I can whitelist certain ip's/domains, so if I just whitelist my website is that generally good enough, or am I being lazy?...

arrow function used within an object literal

why does arrow function cause an issue - this.make and this.model are undefined but "normal" function(){} when used, theres no issue of undefined properties in the object literal ```let car = { make: 'bmw', model: '745li',...

New date question

Why does this give me the day before, and how do I change it, to get my time zone? let test = new Date("2023-05-30"); console.log(test); Returns Mon May 29 2023 20:00:00 GMT-0400 (Eastern Daylight Time)....

How can I create this type of online playground?

Hello! I am currently working on a programming language and I wish to allow people to run code snippets from the web. I noticed that languages like Dart, V etc have a neat text editor that allows users to type in code snippets. I want build something for myself as well. But I cant seem to understand the HTML and CSS behind such text editor. ...

Give me advice what I'm doing wrong (html/css) (solved)

I want output modal in body but this modal relative to parent body How I can do this modal relative to body tag inside?...

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...