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

Background-Color won’t cover iPhone notch

Hello , I am thing to have the background color I have set to fully cover the view on an iPhone. If you look at the top you can see there’s two different colors and want the hole entire screen including the notch to be white , thank you...

SCSS @use with @layer.

So I'm setting up a project and I'm looking to use @layer to implement ITCSS. I've worked with it before, but it's been a while and I can't find an example project implementing it. I want to have a style.scss file that combines a bunch of my ITCSS folders into the final CSS file: ```scss @layer base, components, utilities...

BEM with nested elements

How would you name clasess in nested elements following BEM? ```html <div class="review"> <div class="review__author">...

Attempting a todo list - have I made life difficult by hardcoding the HTML?

https://github.com/callum-laing/todo-list I've built the layout and now I need to add the interactivity to the page. When I hit "Add Task" I want a popup box to appear with title, due date and the details (project). When you hit OK I want this to populate either into a list, or a card, and down the sidebar on the left it'll populate the title as a list....

Click on "Choose a map"

Hi everyone, I have a normal "Choose a map" button. I wanna make it so that when clicking on it - two pictures pops out and you can then press on one of them. Right now im only use HTML and CSS. I wanna keep is a simple as possible. ...

Imposter syndrome

HI guys, I have been learning frontend web development for about a year now, but I still feel like I haven't learned enough. What can I do to measure how much I actually know?

wrapper issue and question

Hey, I'm having a little issue with my wrapper working correctly, my hero section doesn't seem to respect the wrapper on the desktop view, could anyone help me see why this is happening? and a question, in the design for this site there's a white box that shifts positions in the background of the image gallery, I've used a ::before element to achieve that and I'm wondering if it's the correct thing to use to create that sort of design? many thanks to anyone that can help, here's a codepen if that helps πŸ˜„ ...

Best way to handle many possible components to render?

I just ask this on twitter, but what would be your approach to it, imagine: U have a page, that calls a hooks, that loads your data, ok. The return of the hooks is: ...

Looking for resources that either have transparent images, or have ways to make transparent B/G's

Like the picture. I'm trying to do a similar thing for a background but have zero luck so far in finding anything. I wanted to implement an image as a background to a page I'm building but I need the background of that image to merge into the same color scheme as my page.. hope this makes sense!...

How to pass useRef to child components from parent component in React.js?

I am trying GSAP animation library, where i have nested component an I need to ref to child components but it's not working. So how can I fix this issue.

Child 'react-router-dom' <Link> not respecting parent BS padding, sibling margins. Can't figure out

I have a react component, called 'dashboard.js': ``` const Dashboard = () => { return (...
No description

Hi, how could I do this layout with grid?

Hi, how could I do this layout with grid? The edges need to be aligned, but I need only the 3rd element to stretch. I remember I did something like this in the past but I don't remember how.
No description

Help me fix tailwind warning about the same CSS properties

Somebody know what is this error? ``` 'translate-x-[20%]' applies the same CSS properties as 'translate-y-[20%]'.(cssConflict) Switch.tsx(11, 43): translate-y-[20%] .translate-x-[20%] {...

Help with svelte component in astro

This is my [page].astro- which is supposed to be index of all episodes fetched from spotify api. It only fetches 20 episodes, I want to fetch more episodes when ''next" button is clicked. The next button is in my component folder as NextButton.svelte. I want to trigger a function but the button in svelte component not working [page].astro ```js ---...
No description

OTP auto foucs (React js)

Hi everyone, I would like to implment OTP verification and it has 4 inputs, and I want if the user enter a number for the first input, it will auto foucs to the second input and so on....

Webflow grid help

Hey guys im stuck in this exercice im try learn webflow and i cant understand how grid works in responsive. i make a grid in display 1200px, but in mobile when i trie put all in one columns doesent work.

When to make website responsive?

Do you guys handle responsivity from the literal beggining of a project? Or do you wait until you finish the website completely for mobile/desktop then start implementing responsivity for other dimensions? I always do the second one (im still a beginner in front-end) and i wonder if im doing it the right way...

How do you make a website using β€œboring” tech these days

My frontend career basically kicked off when JAMstack became a buzzword, so most of my time experience is in static site generators and JS frameworks. I used to work with devs who used things like Grunt and Gulp to build websites before static site gens and frameworks were everywhere and I’m curious about this way of working. Are Grunt/Gulp still good options (ie, are they being maintained?) to making a site or are there more modern tools (like ViteJS) that can accomplish the same things?...

Simple Array question

how to print first, middle and last items of this array with a clean code?
No description

Is the font size adjustable for long words?

I have a <H1> tag with a set font size that works and looks decent most of the time. Only sometimes does the client type incredibly lengthy words that shouldn't be broken and shouldn't disrupt the layout. I am aware that I could use a PHP function to count characters for a word and add a sub-css class for long words. ...