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

CSS in React Native and Expo SDK

Hello all, one more newbie here. I have made a web app and styled the website in a very simple way, adding some simple CSS over Bootstrap 4.6. (https://cgmsim.com) An iOS/Android app adding some features for my web app users (push notifications) is in the works. We use Expo SDK to simplify the development and distribution to TestFlight and Playstore. I open my web app in a WebView, so no need to modify the website itself. My mobile app has a "HomeView", that I am trying to style in the same way as the website itself, but I am stumbling upon a simple issue. I can't seem to achieve the same background "diagonal split" using Expo/React Native as I have in my website using the CSS below....

Need help understanding/relearning the basic structure of a website

Hello, I am getting back into learning web development. I finished and entire html & css course before stopping so it's a bit of overloading looking back at the past projects that I code along with the instructor I was following. I figured I should try and recreate that website on my own but I am having trouble segmenting what I should do first. Maybe if someone can explain the basic structure of a website to me I can have a better time chunking recreating the website. Also what would be the bes...

Application Dark mode on a system which sets to light mode

Hi Friends, I have created a web app with a feature to change light/dark mode. for this i am using a 2 different sets of css (light and dark). but i notices when i use this feature on windows computer and changes the mode to dark. the Select tag (dropdown list option background) is not looking fine. Actually. i am changing all dark text to light. ans usually all dropdown option has only light background (at least for me) so in dark mode my text is now on white background and it has also white color .. so now visible... and i seen this issue only on window computers.. ...

Wordpress REST API, lets talk!

This is unmanagable someone explain this!

Scroll should move to the top of section

in my navbar when i click on the any navbar item i should move to the exactly top of the that section but i am not moving exactly top of the section here is my website link"https://talhamustafa1.github.io/proxi5/#...

how to up the background to up

i want the header cover the background imag
No description

Why does my grid-child with aspect-ratio item overflow the flex-parent?

Hey guys! I'm new here and need some help with something. I have a flexbox container with a fixed height and 3 childs. One of them has display grid, flexgrow 1 on and an item which should contain it's aspect ratio of 16:9. However I don't get why the widths aren't adjusting. https://codepen.io/Markus-Rappat/pen/XWobKrL?editors=1100...

How did I create this cool effect? | Video and the code is in the comments

I was applying Kevin's height 0 to auto video(https://www.youtube.com/watch?v=B_n4YONte5A) but somewhere in the code I had a couple of other issues, so I changed it a bit and solved my problem but now it's interestingly disappear to the middle 😄 I kinda love it but I don't know where it come from. I belive it has something to do with how I position div to the center (top: 50% left: 50% translateX(-50%) translateY(-50%)) but I don't know why exactly. (Now I see there is not a Tailwind tag in he...

Button

How can I solve this this is the code can anyone help me out I want the button to be under the content .button{ width: 200px; padding: 15px 0; text-align: center;...
No description

Need Feedback

Hello, i started learning tailwind recently and i want to get feddback for better practices or whatever
No description

Curve between second and third <li>

I am trying to figure it out, how to get curve border on the bottom between two <li>, I added pseudo for this, but cant figure it out, what to do next. I added background color for <ul> to see what I want to achieve, also added comments to know which line to comment or uncomment to see. For now, it has grey square between second and third <li>. Would appreciate any help....

Unit Test for Custom React Hook

I am practicing unit testing, I am using a react-testing-library with vitest. I have a custom hook that fetches the user data of the given user id. How can I test it with unit tests I am able to write unit test which actually fetches the data from the API. but is it a good approach? I read each unit test should be done in milliseconds. if we fetch data from server it will take longer. How can I avoid this situation and efficiently test it.

Why function does work different?

Hi, I coded a function that counts from 0 to the value provided by HTML. I also have function that starts the counter when the user scrolls to the section ".advantages". When I call the function "counter()" independently it works fine, but when I call it inside another function, the counting process becomes much faster and I can't prevent that. Can someone explain why does that happen? The commented "counter()" works fine, the "counter()" in the event listener doesn't work how I want it to. ``` ...

Horizontal Slider in centered Max width container | CSS | HTML

Hello guys! I had a little chat with Kevin and he told me to ask my question here. See the question below please. I'm currently trying to achieve the slider that you can see in the image below. It comes with some special requirements: - Red lines indicate the max width container at the image...

How to make a button with text which "traspasses" the background?

I want the text to "show" the gradient behind the button. I tried using all the main types of mix-blend-mode and couldn't make it work
No description

Change border color of Select component in MUI

How do I change the hover and focus border color of the Select component in MUI? I was able to change the border color using the class provided by MUI, but I can't do the same on hover and focus (Hover is currently black, and the focus is blue but I'm trying to make it white)...
No description

How create custom hook for login/register with e.preventDefault()

I want create custom hook for login and register functions because its best practice DRY (don't repeat yourself) I use the same function in /login and in AuthModal.tsx Here is my function for register ```ts...

Dot carousel in react js

How can i build vertical dot carousel in react js like in this website"https://oncallservice.co.uk/"

Trying to add a minlength requirement to a DOM created html node - issues

Hey peeps, me again. Before i go into this, can I ask to the experienced devs, is creating a todo list where you have projects, and then tasks to be added/removed inside those projects with dates etc... is that difficult? because I am STRUGGLING massively with building this, and I feel like it should be easier. Anyway here's my up-to-date code: https://github.com/callum-laing/todo-list...