KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

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

anes039

8/15/2024

Items issue

So basically i finished my project but i have a bug if i have an item and like i double press the cart it adds the item to two places , i want only to add the quantity i have done like in my cart the plus and minus for adding quantity but here is my code addToCart: (state, action) => { const itemInCart = state.cart.find((item) => item.id === action.payload.id); if (itemInCart === action.payload && itemInCart === 1) { itemInCart.quantity++;...

thereturning

8/14/2024

how to style scrollbar with tailwind

this works ```css @layer utilities { .no-scrollbar { -ms-overflow-style: none; /* IE and Edge */...

Marie-ChristineD

8/14/2024

border-radius percentage of what?

when we write border-radius: 25%; it means 25% of what?

SoulSkrix

8/14/2024

Trying to use grid over flex-box in my own work, how would you do this?

Hey there, I'm trying to use grid more in my workflow over flex simply for getting used to it and getting enough experience using it to know when I should opt for grid. What is the best way to achieve the following? - I want to preserve this fraction of on desktop browsers as you see in the image. - I would like to have a mobile friendly version of this which uses a different fraction of space....

rctneil

8/14/2024

Modern CSS without tools

Hi, I've been writing CSS for a long time, but for 99.9% of the last few years, it's all been with SCSS. I've been the beneficiary of nesting, mixins, functions, loops, the lot. It's incredible with SCSS can do....

fluffy bacon

8/14/2024

Cannot make grid-container scroll on overflow

I am stumped on what seems like a relatively easy problem: make a grid container scroll when it overflow, specifically in the x direction. However, the container isn't respecting my overflow: scroll. Im stumped.. Codepen below https://codepen.io/fluffybacon-steam/pen/bGPYyMQ Solution: It was my MacOs settings. System Setting -> Appearance -> Show Scrollbars (Always)...

CDL

8/14/2024

Trying to wrap my head around this example of list rendering in VueJS

I understand id starts at 0, there's a state variable for newTodo, and todos. In the function addTodos I can see we're pushing into the todos array with and id, and a new todo value.. the bit I'm confused on there is literally that array.. ```...

jcayzac

8/14/2024

What `rel` value for miscellaneous feeds?

rel="alternate" is only valid if the feed is an alternate representation of the current document. My documents each serve a few dozen feeds for the user to pick from, and I wonder what rel I should use for those.

Pi, a future fluent jp speaker

8/13/2024

Custom buttons won't fire "input" event

I am building a calculator and I want to allow the user to also type it using their own keyboard, for that, I am trying to use "input" event on the input-text, so it fires on both ways of typing. The thing is that the input event isn't firing when clicking on the DOM buttons, only when I use my keyboard. Why? Codepen: https://codepen.io/leoncelestino/pen/NWZwYgq (Use mobile view for better UI)...

Pi, a future fluent jp speaker

8/13/2024

How to center button's content

I think I should really review some CSS topics. Could someone give me a light why are the contents inside the buttons not centering? They look awfully unaligned to the center. I tried anything I could remember ;-; Codepen: https://codepen.io/leoncelestino/pen/NWZwYgq...

Abc

8/13/2024

How to Vertically Center Logo and Icons with Respect to the First Row in Footer?

I'm working on a footer layout and I'm having trouble aligning the elements as I want them. I need the "Logo" and the icons in the "icon-container" to be vertically centered with respect to the first line of text in the "text-container", not with respect to both lines of text. Additionally, the "Imprint" text should remain horizontally centered with respect to "A long long text". Here's the relevant HTML and CSS code: https://jsfiddle.net/vqL23zu4/9/ `html, body {...

ashielol

8/13/2024

Grid layout scrollbar margin/white space issue

Hi, I'm building a small interface that uses grid for layout, and it's supposed to handle folders with saved chats in them. My problem is that until a scrollbar appears, everything looks good, but once there's a scrollbar, the items (saved conversations in this example) start missing the margin on the right - or rather, the scrollbar appears inside their margin, making the interface look imbalanced/bad. I'd really appreciate any thoughts on how to solve this. Codepen: https://codepen.io/danaxo-the-looper/pen/xxoPYjg...

Mohammed Ayoub

8/13/2024

Should I learn SASS right now?

I have a solid understanding of front-end languages, and I'm eager to take my skills to the next level. Recently, I started using Tailwind for a project, and I found it incredibly useful. However, I'm wondering if I should learn SASS before fully committing to Tailwind. While I know SASS has a short learning curve, after experiencing Tailwind, I find the process of naming classes in CSS and SASS a bit tedious and less efficient.

Patrik

8/13/2024

Shape Outside for envelope

hello i have my animated envelope and i wanna make shapeoutside for bottom to fit in polygons on left and right

somrigostsås 🧀

8/13/2024

Implementing dark mode where you can save your settings

So we have a React app where the user should be able to choose light, dark or system settings for the theme. At first, I implemented all the color tokens (variables) for the light theme, and then wrapped the dark ones in a @media (prefers-color-scheme: dark) {} query. Now I'm wondering what should be done as the user changes the settings within the app. I'm doing a window.matchMedia('(prefers-color-scheme: dark)').matches if the user doesn't have any settings stored locally, and then adding a data attribute to the <html> tag, but I'm not sure that's the right approach. What are you recommending?...

reeee

8/13/2024

is it fine if i completely remove the app.css and index.css files in my react folder

is it fine?

! 🥇 Sher E Khan

8/13/2024

Email Template Design

Can anyone suggest me source to design brand email templates which works nicely for dark modes as well.

Eric Brüggemann

8/13/2024

How to mark errors only if at least one none error field exists.

want to mark all blocks that have an non empty error attribute. But only if there is a block later that has an empty error attribute. (essentially detecting that the user has skipped a block) My current solution is add the marking to all blocks with non-empty error and then remove it if there is a previous sibling that has no error. It works if there is a block that has an empty error attribute but if there isn't one all blocks get marked so when a user opens the form all fields are marked as errors until he fills in the first block....

RIZE Hobberz

8/12/2024

Getting login page over button

brr

8/12/2024

JS Path

I am going through chrome dev tools docs, there is this "Copy JS Path" that they are telling to copy. I also pasted it in a console which evaluated to an expression. But I dont understand what exactly is a JS Path and why we copy it. I googled but still cant find anything... LINK: https://developer.chrome.com/docs/devtools/dom/#path...

Previous Next

Gaming

Programming

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.