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

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.

naiden

11/6/2024

Help with a CSS selector that targets all elements that have "aria-*" attributes

Is it possible to target all elements that have an attribute with a specific prefix like "aria-"? I want to select all aria attributes like "aria-label", "aria-labelledby", "aria-level" and so on...

Dev_HK

11/6/2024

how is it absolute position is outside of the doc structure yet still i'm getting this composition

i mean how is it that the h3 is after the pic & still is being above it; i went to the inspect & duplicated it & i got this,

Vito

11/6/2024

Best practice for forcing text to wrap onto new line on a specific word

Currently I'm trying to wrap text onto 3 lines. I want the text to wrap on a specific word. My current solution is using <br/> elements but I read that is not a good practice and is bad for screen readers. How do I force line breaks on a specific word without affecting accessibility? ```html
<h2 className="text-2xl sm:text-4xl text-center sm:text-left mb-6 font-bold drop-shadow-[3px_3px_0px_hsl(0,0%,82%)] "> Lorem ipsum dolor sit,...

Faker

11/6/2024

Trying to understand the concept when callbacks are passed as arguments

Hello guys, sorry to disturb you all; I didn't understand the importance of callbacks, like here in the following code, why use callbacks please... I'm learning about asynchronous javascript, promises and all these stuffs but I didn't understand the concept what we try to convey when we pass callback as arguments. I understand the syntax but not how they work or how we should think of them.... can someone elaborate why callback is important in the code below for e.g. and what if we don't have them and what therefore introduces the idea of promises please. ```JS function doStep1(init, callback) {...

Faker

11/6/2024

How to prevent an array storing items from local storage from initializing each time

Hello guys, sorry to disturb you all; I'm working on a to-do list small project; I was able to add items to the localStorage and retrieve them when web page loads but the problem is each time the page loads, the array is emptied, it's re-intialized and I lost my previous saves. Have a look at my codepen: https://codepen.io/Fakeur/pen/OJKwvor...

Grant

11/6/2024

Text that fills the width of a container

Hello, I am trying to write some SCSS to control the size of some text. The text needs to fill the width of the container but maintain the correct proportions on different viewports....

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