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

Would it be better for Product Card & Carousel Image alt tags to be empty for accessibility?

I am working on an accessibility push for an ecommerce platform, and I am leaning towards empty alt tags for the product images. My primary reason the product name is on the card or the product page and we don't have specific descriptions for the different angles or lifestyle images. Also repeating the alt tag content is too verbose for screen readers and don't really add value. These are major brand items and we get their data from them or scraping their website. Most are pretty poor at alt tags. Any thoughts or experiences anyone would like to share?...

svg clip path overflowing container

Hey guys, I have an svg clip path image that's overflow its container. I tried object-fit: contain & cover, but it's not really giving me what I want. I want it to take the full width of the container (so it bleeds to the right edge of the screen) https://the-fine-art-group.webflow.io/...
No description

data-* attributes for styling

I'm wondering what people's opinions are on this vs using multiple classes. I work mainly in react and use CSS modules and I feel in that context it makes sense. 1 base class and then modify that via data-* attributes. I think this will also be more powerful when the new attr() functionality hits all browsers and not just chrome. ...

Is this a good tutorial to learn masonary layouts ?

For a site I need a masonary layout. and I found this one which is very good looking : https://piccalil.li/blog/a-simple-masonry-like-composable-layout/ But I wonder if it is a good tutorial or do I learn something which is not good ? ...

Duplicate data from API

I’m fetching countries from the REST Countries API and displaying their regions in a dropdown. Problem: every country comes with its region, so I keep getting repeated values like "Africa" 50+ times. How do I display unique regions only?...
No description

how to keep shape of svg with responsiveness

I have been stuck now for three hours trying to keep the shape of a svg path. the only way i can describe it is that i want the mask to keep the same height as row 2 in this grid when changing the width. or maybe more precisely: at any time fill the entire height of row 2. https://github.com/AMarlonG/kork the principle is from this by jen simmons...

Books on Accessibility

Hello All, Does anyone have any recommendations on books to learn accessibility. I am asking for books here as I have company budget that I'm going to lose and also like learning from books....

Webkit currentColor

Hi all, I'm using currentColor to dictate the stroke color of an SVG. This works fine in Chrome & Firefox but on Safari Webkit it's a shade of blue. Any ideas on how to get this rectified? The SVG is just an inline <svg ...> tag with stroke=currentColor give by the the global css file....

What's the best way/stack to create websites for others?

I want to start creating websites for others, in particular non-profits. The problem is that: - I want them to have a very smooth experience, which means, a good CMS. - I also want them to not pay a lot of money for something they don't need in terms of hosting, for example, netlify or vercel, that offer a free tear, are fine for most cases....

[Algorithm] Two Crystal Balls for Square Root Time Complexity

I cannot figure out why my second algorithm doesn't work, yes it is bad and ugly compared to the first one, but still wanna debug it. The one that works: ```ts export default function two_crystal_balls(breaks: boolean[]): number {...

Improve Kendo Chart height when there are a lot of elements

When there are a lot of Kendo Chart entries, they become unreadable ```scss .k-chart { overflow: auto; // need to trigger overflow bar...
No description

How to keep image same height as text in a grid two column layout

Hey all! Been wracking my brain trying to figure this one out for a while... I've been given a design to replicate which is a two column grid layout. Text on the left, image on the right. The catch is the image should always be the same height as the text on the left. It also has to use grid and not flexbox, because I have to rearrange the order of the image from mobile to desktop. I went through a few solutions, and the closest I got was using contain: size on the image, and having its natural aspect-ratio create a box for it to live in. While this does work in Chrome and Safari, Firefox is broken....

Educate me - when building a site/app for someone, how do you set it up and transfer to the client?

I’m actually curious for both a WP built site and a codes side in say… React, for discussions sake. I’ve always wondered how it’s done 😅 how do you build the site and transfer the domain/code/build over to the client once finished? I’ve heard of devs charging a fee to maintain, in which case they likely hold onto the code and update it based on client requests… but what if the client wants all of the data after?...

How to hide native safari smart banner?

Has anyone had any success with hiding the native, safari smart banner? Safari has great docs https://developer.apple.com/documentation/webkit/promoting-apps-with-smart-app-banners on how to show and customize it. But no where in their docs do they show how to hide it completely in case a site doesn't want to show the smart banner. I know there's https://github.com/ain/smartbanner.js but i don't want to customize it. I also don't know how this smartbanner behaves on safari. Maybe it will show the custom one it enables + the native safari smart banner 🤷...

`::slotted` behaviour and Firefox

Hey all, Hoping you can help me in getting to a solution. I've got two web components that work together, ```html...

[SOLVED] Can't figure out how to do this layout with css grids and `aspect-square`...

Im trying to make a card with the following layout. the main requirement is that the red box should be a square, with an icon/logo inside. this will be a 2x2 grid. the red square should have the same height/width as the blue cell's height, so if the blue cell gets bigger, the red square will size accordingly the pink cell is essentially blank, but will have the same height as the yellow. the yellow cell height will change dynamically based on the content. sorry if this is confusing, maybe this will clarify:...
No description

ARIA for this type of sidebar

Hi all, new to frontend and especially CSS. I've made a sidebar, semantically like this: ```html <c-sidebar data-hidden="true" data-opened-by="c-headerbutton-open" data-closed-by="c-headerbutton-close">...
No description

vscode integrate terminal Color issues with C#

I am trying to set background color of the console with Console.BackgroundColor property. ```js ColoredItem<Sword> blueSword = new ColoredItem<Sword>(new Sword(), ConsoleColor.Blue); ColoredItem<Bow> redBow = new ColoredItem<Bow>(new Bow(), ConsoleColor.Red);...
No description

innerText appending words weirdly

https://codepen.io/latuza/pen/vENMEpB Hi, when I use .innerHTML += it reserves everyhting inlcuding classes on other tags, and add text to it. But, when I use .innerText +=, it destroys everything and just add the text, why?...