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

help

Vinicius

11/9/2024

CSS Custom Props Good Practice

First off, I recently found out that local custom properties in CSS can be inherited by child elements, and I’m honestly blown away 🤯. Second, I have a CodePen with a snippet that illustrates my question. Is it considered best practice to set custom properties on elements and then modify their values with inline styles? Everywhere I look, people advise against inline styles, so now I’m unsure if this case is an exception or if there’s a better approach. I set --_hue: 10 local custom props inside .card element, then i changed the colors of the two others elements with inline-styles...

snxxwyy

11/9/2024

svg sizing when in img tag

Hey, so if i have an svg in a file, e.g. ```html // example.svg <svg width="10px" height="10px" viewbox="..."> <path></path>...

Ayomide

11/9/2024

Flex wrap issue

so i have this flex element which is great on large screens, but on mobile it isn't so good even tho i have flex-wrap:wrap here's the code: ```.oAuth-logins{ display: flex; flex-wrap: wrap; /* justify-content: space-between; */...

ShenZo

11/9/2024

How to make a fixed position element responsive

Hey guys, I'm trying to make the width of this searcg bar responsive to its parent but it does not work accordingly 😦 Any tips on how to get this done right? ``` <DialogContent> <Box position={'relative'} width={'80%'}> <Box position={'fixed'} zIndex={10} width={'50%'}> <SearchBar name={''} placeholder={'Search'} />...

banjobongo

11/9/2024

Semantic HTML Question - Does paragraph text have a parent/child relationship with headings?

I am looking for a semantically correct answer. It likely doesn't matter that much, but I've been wondering this for a while. If I have a heading structure like: H1 Body Text...

curiousmissfox

11/9/2024

Testing workflow

I'm trying to figure out the best workflow for testing devices and browsers- I know it differs from site to site, and project to project but I just wondered if anyone had any tips on how they make it a smoothish process. And I'm not at the scope where I want to pay $20/month for a service like BrowserStack. I have a couple older iphones, a couple older galaxies, MacBook and two windows pcs, an iPad and a Samsung tablet. Different versions of their respective oS's. But i dont have all the browsers on all of them. Since any browser on an iPhone or iPad uses safari engine that cuts down on a few, but testing Safari, Samsung internet, Opera, Chrome, Firefox and Edge (6 browsers) as the bare minimum on say 6-7 devices is lots to do. ...

bri

11/9/2024

Image Optimisation

I'm trying to optimize my image using a libary called next-image-export-optimizer but everytime I run build and test it on the dev this is what I always get, I'm using a static export. this is my config file /**...

snxxwyy

11/9/2024

<symbol> and <use> layout difference

Hey, i have a couple of questions regarding wha's in the post title. 1) what's the difference between defining your <symbol> tags within an svg tag and without? e.g. ```html <svg>...

snxxwyy

11/8/2024

icon swap | InnerHTML security risks

Hey, if you had a button with an icon in it, let’s say it’s a theme toggle, and your icon switches from a sun to a moon when you click, the way I’d imagine doing that is by setting the button’s innerHTML to a different svg. I’ve heard this poses security risks though since users can manipulate the data in there. What would a better alternative be for swapping out content like that?
Using adjacentHTML doesn’t seem like it would fit the use case since this adds the content but doesn’t replace it. I know you could then remove the other icon but I feel you could do the whole thing in one swoop without doing that? I may be wrong. I believe there was a method called .replaceWith or something along those lines but I’d assume you would put html in there too so I’d imagine there’s security risks with that as well, and I can’t imagine using a template for something small like this is worth it? Please correct me if I’m wrong with any of this. ...

rctneil

11/8/2024

JS Date Picker in <dialog>

Anyone know of a JS date picker component/widget that works in the <dialog> element? FlatPickr and AirPicker all fail as the calendar is rendered outside of the top layer....

Raskin

11/8/2024

skip eggs function

I'm doing a code challenge to test my skills as a fledgling coder trying to learn new concepts. The challenge is to write a function that will remove the first two strings 'egg' from the end of an array. I'm doing this from a youtube video and was wondering if my solution does the same thing that the youtube video had referenced as its correct answer. i see the same out put in console.log(): I will post my code first and then the "correct" answer second.
``` // My code starts here. function noFuckingEggs(array) { let emptyArray = [];...

snxxwyy

11/8/2024

svg width and height attribute + resizing

Hey, when i use svgs, i used to take off the width and height attributes e.g. <svg width="x" height="y">...</svg> and size them using css. Then i realised that if the css doesn't load, they're massive haha. so i keep those attributes now. One thing i've noticed about resizing them with css when they have those attributes, is that they only resize when you define the width and the height e.g. ```css svg {...

Zempai

11/7/2024

CSS – managing grid-template-columns sizes with classes

Sup (: Thanks for your time – I am looking for a clever and perhaps overengineered way to add padding on demand without altering the vertical text/content position. While layouting with grid, the idea is to have a nice (padding)class, that adds to the element area but keeping the content in line. It is very likely possible to fake with before/after, but that always feels last-resort-ish to me....

kikuti

11/7/2024

Sidebar sidebar like explorer

Can anyone tell me where I can find an npm package or tutorial teaching how to create this type of sidebar, please?

Nibelung Valesti

11/7/2024

Two Column Layout, but the other one goes to edge.

Hi everyone, may I ask the best way to make a layout like this responsively? The red square will be an image. The red line indicates the container of the site. But the image should go way to the edge of the view port....

EasyToKill_ (long break)

11/7/2024

Cursor Pointer on transparent image

Hey, I was wondering if there was a way with css only to only show the cursor: pointer; if the mouse is hovering on the part of an image that is not transparent?

peterpumkineaterr

11/7/2024

how can i achieve this section ?

it is quite difficult as i didn't understand how i can put tags on side and and keep name on other side. https://codepen.io/kev00690/pen/zYgpNVV...

Faker

11/7/2024

How to make varying labels width and input-fields take same horizontal space

Hello guys, sorry to disturb you all; can someone explain how I should proceed for my login labels and input fields to take the same space horizontally please, for e.g in the picture, if the label is longer, our input field will be further to the right... I don't want that.. I want both labels and input fields to take the same width. Here is my codepen: https://codepen.io/Fakeur/pen/WNVaMxx...

peterpumkineaterr

11/7/2024

how to center a <div> ?

https://codepen.io/kev00690/pen/zYgpNVV i'm trying to make date and time div to center while keeping logo on the left, but it's not moving at all. what i'm doing wrong ?...

snxxwyy

11/7/2024

pollyfill definition

Hey, what exactly is pollyfill? I've heard it mentioned a lot. I looked into it and it said it's adding functionality for browsers that don't support certain features etc. Is there more to it? Thanks in advance.

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 🙂.