KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

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

Renato L.

6/18/2023

Container Size Queries and Firefox version

Hello everyone, I've been putting off learning Size Queries due to the fact that Firefox support was missing. But Firefox supports it from version 110 onwards. ...

Rook

6/18/2023

Invert text color when elements overlap

Hey guys! I was trying to re-create the "inversion" effect with the cursor and text that I saw here, and it got me thinking a bit: https://drigmatic.com/ This site uses mix-blend-mode: difference and setting the color of the cursor to white to get this effect, so it seems it only really works with the specific colors they picked. I've seen a few other examples of this effect in action as well, but they mainly stick to black and white due to the nature of blend modes. In a lot of cases, you won't have the perfect set of complimentary colors, or be working in exclusively black and white. Is there a way to have more control over blend modes so you can control which color gets displayed when elements overlap? For example, if you wanted to keep the background and the overlapped text colors the same, but have the default text and cursor colors be red, you would end up with some really wonky colors on the cursor and the overlapped text due to the blend modes....

al_pol

6/18/2023

Nav menu disappeared on desktop

I had a fully functioning nav and mobile button menu but styled my mobile nav for so long, that I created an issue somewhere and can't seem to solve it 🥲 Somehow my desktop nav menu is in the mobile menu, only when you widen the screen whilst in the mobile menu after clicking the hamburger button. I've tried cancelling each class in the media query and hiding them all together but can't seem to crack it. This may be a start again for my last commit, but hopefully someone can help 😄 My codepen has the isolated issue in with nothing extra, however you can also view the full build on my github below. ...

Zenon

6/18/2023

Localization: multilingual website

Hey all! I want to build my personal website in three languages I speak without using translation services and I am not sure what the best approach would be. Is there a good guide on the web I could follow? I tried googling and searching YT, but couldn't find anything satisfactory. Thanks! P.S. I don't know which tag fits here....

Lumberjack

6/17/2023

RN or flutter for a react dev

Hello again, im a react/next dev and im interested in the cross platform field but im confused between choosing flutter or react native even tho i already know dart , but im still not sure if changing the ecosystems is good or not for me.

Saika

6/17/2023

CSS slider

Hey. I want to create a slider where there should be X elements shown and last element should be overflowing (hidden partly) So whenever user hits breakpoints it adjust how many elements are seen and it would help me later on add a button that moves the slider to another X elements

Mert Efe

6/17/2023

Why this Carousel Kevin made significantly sliding better than most sliders?

https://www.youtube.com/watch?v=gBzsE0oieio&t=1788s&ab_channel=KevinPowell hello , this slider is sliding better than rest since Kevin is using a different tactic here, I know there are ton of other ways to make a slider, but in Kevin's approach, i noticed that the Sliders follow each other when sliding effect is happening. Like their tails are touching each other in a way. Is this the only way to do it? Otherwise like in other slider makings they just change but not this cool effect is there...

Seema

6/17/2023

boiler plate

Learning front end every day and loving my journey. Is there some sort of must haves in css like we have the builder plate in html. Thanks #front-end #html-and-css

Mert Efe

6/17/2023

Why do we need keyframes where basically it seems a more detailed version of transitions?

What are the main differences between them? From my usage there's no need keyframes if you can set up transitions. Or is there?

222alon

6/17/2023

How to get all values lines up on a list of key: value

Hello! I want to display a list of values and their keys sort of like so: A: 1 B: 2 ...

Avinash

6/17/2023

How to disable youtube cards,title and other controls in React Player

I'm using ReactPlayer module and I want to disable the cards,title, autoplay etc. Does anyone know how to fix this?

``js
 <ReactPlayer 
                    url={

https://www.youtube.com/watch?v=${mainTrailerShowcase.key}`}...

thethingisback

6/16/2023

A basic react filter component

I have some checkboxes that I want to filter a .json with. There's three 'categories' or groupings of checkboxes; make, year, and color. https://github.com/nnall/Inventory/blob/main/src/filter.js ...

Nikita

6/16/2023

framer motion - show - wait 5s - diashow (solved)

How do it I want animate - wait 5s - diashow...

Å Marlon G

6/16/2023

JS in JSX for newbie

Hello! What is the square brackets in the const img doing here: ```js import React from 'react';...

SoPH

6/16/2023

Aligning 21 icons

Hi. Im trying to align 21 icons in a container. Each line has 5 icons, except line 3 with 6 icons. So far the last icon always goes to a new line. How can I achieve this result and make it responsive? I was trying to play with the col-xxl number but it also doesn't work so much. I added an image of how it suppose to look. Codepen: https://codepen.io/SoPH89/pen/yLQONbr...

redtypoOooOo

6/16/2023

how to read n rewrite package.json re: react-scripts

here is the package.json. I need to upgrade it to react-scripts 5.0.0 but I don see react-scripts, where is it? how I can add this. I am doing this bc failed to fetch data from strapi using axios due to err process not defined according to solutions here :https://stackoverflow.com/questions/70368760/react-uncaught-referenceerror-process-is-not-defined ```{...

Jenny Hodge

6/16/2023

General question about responsive

How would you handle getting rid of the tiny bit of white space on the right of a responsive screen when it transitions from 1280px to 768px to 375px?
thinking

Nikita

6/16/2023

Where I can find developer for collaboration?

Now I'm looking for frontend or backend or FullStack developer to collaborate We will write site with React + Vite + TypeScript Main direction - write site to put it in your portfolio and improve collaboration skills to get hired and make $ ...

Satya

6/16/2023

Linear Gradients

Hi all, I'm trying to add two linear-gradients on a div - one starting from the right and one starting from the left-most corner. When I'm separating both the gradients only one of them persists. Can someone tell me what am I doing wrong?

background: linear-gradient(-90deg, #FF6D00, #FF6D00 20px, #FD4602 20px), linear-gradient(139deg, #FF6D00, #FF6D00 98px,#FD4602 98px);

background: linear-gradient(-90deg, #FF6D00, #FF6D00 20px, #FD4602 20px), linear-gradient(139deg, #FF6D00, #FF6D00 98px,#FD4602 98px);

I want the white part to be the 2nd gradient that I've mentioned. Thanks...

Donhoyt

6/16/2023

How can I give my table header a border-radius on chrome browser?

that the table headers are slightly different between chrome and Firefox. 1. Firefox browser applied border-radius around the table but chrome browse only applied the border-radius to bottom and not top of the table. 2. I have tried using using border spacing, border-collapse but still the same even VS code is not applying the border-radius. https://codepen.io/ajanaku007/pen/YzRwgrR...

Previous Next

Gaming

Programming

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.