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

I need help

I need help from you! I can't figure out why the progress container is not visible when the width is larger than 700px.

How can I use webpack5 and postcss7 with es6 import syntax

I have a website built using TS and SASS then compiled down to vanilla es6 JS and CSS. The compiled code then gets built into a compressed production ready version, using webpack, I want to use webpack to remove unused css, autoprefixer and cssnano. The problem is there isn't very clear information on configuring webpack with es6 modules. Currently I don't have any errors, but whenever I run my webpack build script nothing changes between the compiled code and the production code. Here's the code...

do you know how should i create this layout? will it be great step to go with grid or flexbox??

do you know how should i create this layout? will it be great step to go with grid or flexbox??

Need help with button click output

Hey, can anyone help me with this big issue I'm having right now. I'm trying to have an alert be printed out if one set of buttons are clicked, and a different type of alert be printed out if a different sets of buttons are clicked. It's for a pool business website, and I'm trying to print out a different price based on the buttons the user clicks. I tried if else statement, but it gets stuck on the first if statement, and doesn't switch if another if else statement is true

Simply how important is `"use strict";` to use it in every JS script?

Was reading a tutorial on Javascript and I finally came to the summary but where it mentioned "use strict";. Is this extremely important to remember?

Which one is better ?

I'm wondering which one is better in terms of 'best practises"

problem

hi anyone know how we can do this...

CSS: option did not get style on PC, why?

Hello, Why option did get only the font styles, and nothing else? https://codepen.io/lanszelot/pen/BaboBxB On tablet and phone get all the styles, only PC did not....

How to create a responsive card with an image ?

Hello, I would like to create cards to display projects I have worked on for my portfolio. I would like to create something like that. My problem is mainly with the images, I don't really know how to display them properly on different screen sizes. I have tried to give them a certain height in % but it messes the height of the card. I have tried to give them a fixed height in rem but it's not really responsive even with media queries....

Why Next local server is not working πŸ˜”?

When I run npm run dev in the terminal it doesn't show any error and my Next project starts running at port: 3000. When open localhost:3000 in my browser it keeps loading and then show unable to connect. Please me anybody....

relative width not working while animating div collapse using MUI's transition API

I have an input bar that can collapse and expand on onClick but the issue is that it's not expending entirely in a single go. As you can see in the video, the element expands, stops, then expands completely. ```tsx <ButtonGroup sx={{ justifyContent: 'flex-end',...

How do I copy this cool bento style website

https://lucasporterbakker.com/ I suck at anything that I can't use flexbox. I'm aware that he used display:grid but I don't know how to get a bunch of boxes with different sizes and also make it responsive. Do I need a bunch of media queries to achieve it?...

Wrap button around another button

In my code, how can I cause the text of the second button to wrap around the first one? With flex they are always next to each other, but I want it to just wrap around as you see it with images and text in newspaper for example. Here the playground: https://jsfiddle.net/jytb2n61/18/...

No Scroll bar design

I am working on a project and the client has said that their shouldn't be any main scroll bar (either horizontal or vertical). There can be scroll bars for individual sections and most of the time, user will be navigating using buttons (like carousels). The project is having a user panel and admin panel. I want to ask if this is practically possible since it should be responsive as well. If there is an article on it, please share the link....

Side Scrolling Issue

I have fixed these issues before but this one has me stumped. As soon as I apply flexbox to the nav bar links and I resize to a certain point, the about link overflows to the right instead of resizing. I have tried the grid repeat auto-fit feature with grid-template-columns after I changed the nav>ul from flexbox to grid and everything I can think of and nothing is stopping it. I have not used media query because I feel there is a way to fix it without doing so. All help is appreciated. https://codepen.io/Donald-Rankin/pen/NWJqaVb...

Stack vs Call stack

What is the difference between stack and call stack?

How to force parent grid to flow when nested grid content overflows

Is there a property I can give the parent grid to stop this from happening?
No description

Clip a image given xyhw

I have a spritesheet like image, and I only want to show a certain part of it. I have the top, left, height and width of this part within the image, and I want the image to be 1em wide (this is different than the pixel width of the clipped section). The image() function with the xyhw seems like what I want, but it's not supported in browsers yet. How do I do this?...

POST request is not shortening links in my project

Hello, please I need help with my project, it’s a URL shorter. I'm trying to get the shortened links to show but when I submit there’s no shortened link. Please how do I solve this? Live project : https://url-shortner-delta-nine.vercel.app/ Github link : https://github.com/kenekc18/URL_Shortner

How do I shorten this code?

https://jsfiddle.net/sf6zdx9p/1/ From lines 9-32 I have conditions for each index of the li that is clicked to either remove or add an active class to that list item as well as the corresponding review in the container above that matches its index. I am looking to shorten that into less code with a function, but I am not sure how....