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

Next + TypeScript + Tailwind + pusher - how to show message if I go to prev page?

If I write code here will be a lot of context and you may don't understand If you have experience with Next + TypeScript + Tailwind + pusher - please DM me...

Remove Spacing in navigation in my site

Hi guys need help fixing this issue with navbar in header. Getting space on top and bottom in navigation. I want to remove that space. here is link of the demo site: https://bq3jx3mvt60i6b5q-44149506213.shopifypreview.com/...
No description

scrollbar-track-color and scrollbar-width properties not working

i have tried setting scroll bar width to 5px and track color to hsla(0, 0%, 85%, 1) but it doesnt seem to work
No description

IntersectionObserver Question

Hello, I'm trying to use IntersectionObserver for two different instances. First, to detect when a section is within view, then count from 0 to 500. Then, to detect if any img is in view, and to animate them appearing. Current Snippet:...

Cool Accordion Trouble...

Hi everyone. I was building Kevin's accordion but it doesn't seem to work in Firefox. Has anyone else encountered this? https://www.youtube.com/watch?v=WJERnXiFFug...

JS Illegal Character

Can't for the life of me figure this out.
const period = hours ≥ 12 ? "PM" : "AM";
const period = hours ≥ 12 ? "PM" : "AM";
I get "Uncaught SyntaxError: illegal character U+2265"...

Tailwind Arbitrary Values

This is parent ul
<ul class="grid gap-2 [&:nth-child(2)]:gap-1" href="#">
<ul class="grid gap-2 [&:nth-child(2)]:gap-1" href="#">
Any ideas why this is not working ? I am trying to change padding for the second child and it just doesn't work. I tried with self-reference &, &*, &>*. The last 2 not exactly sure how it works. I assume this > is used for children elements to point they parent and * to select all of the elements. Correct me if I am wrong....

Where do I start with this UI?!

Basically this: https://twitter.com/dvsj_in/status/1733032980728455194?t=cYiZvMSYJRqI6yBYOf6Q7A&s=19 Any feedback, pointers to tools, methods (use 2 gifs/use svg/etc) or any similar implementations you've seen welcome!...

Handle login form

Hello everyone, I’m a newbie in the front end development, now i’m study how to handle the logins form and I have 2 problem: 1)After I send the request for login I have in response.data.role the role of user but I don’t understand how to save it correctly in the state. 2)How to redirect if the user role is correctly to home page(private route). I attach screens bellow. Thanks all ! 👏...
No description

Full screen image zoomed mobile

Hi guys. I have a website which is not too mobile friendly yet. It is wider than the screen so it is zoomed out all the time. (I know I know, but this is the starting situation we have 🙂 ) I need a code to view images in a full screen overlay when they are clicked. I tried max-width/height: 100vw 100vh, but they are calculated based on the 100% zoomed version so the pictures are getting too small in the zoomed out state. Is there any solution to make a full screen img/div base on the vw and the zoom state? ...
No description

flexBox overflowing underneath another flexbox even if the scorll possition is at top

im trying to make a list and a header but the list contentents are overflowing underneth the header
No description

How to move Text-overflow:ellipsis dots when the parent and child ellipsis stacked on each other?

I have list items in a container, i set the container fixed width and height. On each list items i truncated and added ellipsis using Text-overflow:ellipsis.
adding text-overflow on parent div does the job but the ellipsis of last li item and parent div are almost on top of each other and its difficult to diiferentiate. so my question is, is it possible to move the ... ? how can one acheive this https://codepen.io/avinash-tallapaneni/pen/xxMMNLp...
No description

Grid system showing gaps

I've been trying to figure out how to make a responsive grid, with some elements spanning 2 tiles, but I've been running into the issue that there are gaps showing up next to the spanning elements. Is there a good way to fix this? Any tips would be greatly appreciated! Here's the Codepen:...
No description

Button positioning

Hi guys im currently in need of moving a button that im using to in between the bottom left of the screen and the bottom center of the screen, currently ive just added a left: 30% property to my place-self: end start css but its messy as when the screen shifts it doesn't always hit the same spot, anyone have any ideas on how i can get this positioning easier? Included is an image of where id like it to be. ```css...
No description

How to disable cache for a specific page?

I have a website where people can upload there games, and play them. Every game has an embed image what can be changed by the devs throught the dashboard. I don't want search engines to cache the embed images of the games to make it show always the updated image. Is there a way to do this with JavaScript or with PHP headers? Link: https://qwgamers.net

Can't open squarespace local dev server

i Can't setup my squarespace local dev server, i went through the documentation Install the squarespace-server (npm install -g @squarespace/server ), 5 times now, and every time after the Install any command I type like (squarespace-server https://site-name.squarespace.com ) the second command. i get this error...
No description

Tailwind CSS place-content: align-content/justify-content ?

I only see single values on the official website, when this suppose to accept both values if wanted. Is the support not there yet for both values ?

Make Responsive Design with Rounded Image on the Edge

Hi! I've been taking good looks into Kevin's tutorials, and in one of his tutorials with Figma, I came across his layout / design example, which was the image I posted here. If you were to implement this kind of design layout, how would you make this responsive? Thanks in advance!...
No description

Code Help

Hey Guys, I need your help in following Javascript code. I want my input field to format values in this format. +92 ###-####-###
`function phoneFormat(input) { input = input.replace(/\D/g,'') var size = input.length;...