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

React Unit test case issue with MSW mock service provider

I have been doing React+TS unit testing , where I have bene mocking API response using MSW mock service provider I am able to get mock response in my redux slice but it is not updating respective state and I am not able to test respective components .. Anybody has gone through this if yes then could you please help me on this . I Have created React application using CRA....

Animation on scroll

Hi guys, I want to give each page an animation that when you come to the page it inserts via right for example. What is the best way to do this so I can add this to other parts of the entire website as well? https://codepen.io/Boeroe/pen/zYeRobj...

Mobile Navigation

Please help me fix this error I get a massive space between my header and main content when I switch to mobile here is the code link https://github.com/legend-crypt/Portfolio-site...
No description

Help fix array mirorring each other issue.

good evening everyone, I'm working on a prototype for the to do app section and I have a bug that i have been stuck on for a couple days now, the bug is 2 different arrays mirroring each other when I click confirm when a editing a task prototype. I would greatly appreciate the help thanks in advance, here's my replit => https://replit.com/@Stanbkrylix/Simple-todo-app-prototype#style.css

learning how to structure page

is the structure for the nav good? I want to learn how to structure html documents https://codepen.io/vert-wilson/pen/vYbdNox

cqw not a thing yet?

I was fiddling around with a mobile application lately and stumbled upon the unit "cqw" which I found to be a more elegant approach to dynamic font sizing than em/rem in regards to supporting unknown resolutions. However in my editor I get an error "Expression expected" when using it, and caniuse tells me it's not supported by Firefox yet. Is it simply not a thing yet or does it come with unexpected drawbacks I don't see?

using async on ngOnInit

does using async in oninit good practice ?
No description

run function once but globally in react

when i make webpage, one thing i generally do is set all the divs to a random color using js for better understandng now that i am using react. im confused how to do it my react project goes like this i have a Main.jsx that renders App.jsx...
No description

Layout issue

i am have this issue where i want this button to go down . to stay at the bottom of the page https://codepen.io/alyydd/pen/xxMprjb...

How to achieve a scrolling upwards effect, while parts of prev one still in view

I have this animation that i would like to recreate using js and css based on a list of words from a cms. I lack animation skill, and am in desperate need of help in modifying my code to recreate the wanted behavior. My code: https://codesandbox.io/s/2v85nk?file=/src/TextSlider.js...

CSS layout issues

there are three images the two of the are made-up images and one is I have to create. how can I create this layout...
No description

CSS Flip Animation enhancement

I have a project that is a phone for a game - especially GTA V(FiveM). You can check it in the browser here - YFlip Phone This is a clone of the Samsung Galaxy Z Flip 5, and it is made entirely by me. ...

CSS Overriding Issue

Please check the video, I dont know from where this H1 is coming as I have changed its size, and I want the text to be in big size but how and from where this default h1 of 2em is coming? On Firefox and even on Codepen attached below, it is looking fine, but on chrome I dont know whats the problem. Thanks,...

How to achieve text shrinking instead of overflowing or container resizing?

I want to be able to have a max font size, say, 2rem, in a container, and for the font size to automatically shrink once it reaches the padding limit of the container instead of overflowing or changing the size of the container. This is in the context of a template for, say, a group of titles or users. Is there a way to do this that's also compatible with all browsers (except IE probably)?

How to make a layer behind my div?

i want to add this bluish layer behind the main div how? https://codepen.io/tataa31/pen/LYqeOqZ...
No description

Animation when things are loaded, tailwind with reactjs

It's bassicaly what the title say, i have a animation to when things are loading, but i want to animate when they appear on screen, like, in the current moment, they just pop on the screen, i want to add like a fade. use as example. this messages on chat:...
No description

CSS FLEX — Manage free space left after wrap

I have a flex defined like seen here: https://codepen.io/Jazzigula/pen/jOdYyYp At the moment the flex wraps its width doesn't automatically shrink further to the intrinsic size based on the flex items now stacked one on top of the other, but the flex container rather keeps that breakpoint width leaving the empty space on the side. Is there a way to eliminate that free space but to keep items flush left? ...

Enroll in beyond-css course

Sir @Kevin ,I want you r beyond-css course to learn sass but i don't have enough budget to buy it. Can you have solution for this problem to give your course free to me #front-end #how-to-ask-good-questions #sass...

Design tips

Hello! I have this website I'm working on and the second section (the main one) seems kind of flat and bland and not interesting to look at. Does anyone have any tips on what i could maybe improve? You can check the website out here: https://bazz-tube.github.io/news/ and the sourcode for it here: https://github.com/Bazz-tube/news...
No description

How to handle JWT token cookie from backend in React

Hi Everyone, Need some guidance on a issue I am stuck on. I am mostly a backend developer and new to Frontend. I am working on a service which has Spring Boot app as a backend; which is secured with Jwt token that is returned in HTTP Cookie. It has /login, /refresh-token endpoints to login and refresh expired tokens. ...