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

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

fatihinn

11/6/2024

Routes Route and render={(props) => ()} using

I started an old course and the video shows that it has a rendering feature like this. I researched it and I think it is used with the Switch structure. Am I doing something wrong or what is the correct one?

<Routes>

{/* <Route exact path="/"...

Vito

11/6/2024

How does uniqlo maintain video placement on their site while vertically resizing?

Here you can see me changing the vertical size of the page: https://gyazo.com/57e63ca1ac808820695281a4071910a8 When the page loses vertical height, the video doesn't move in any way. It maintains the same position, the frame just gets cut off from the web page losing height. I know that the video is being set to the full width of the screen because it resizes when reducing the page width. Just looking for what css properties allow this behavior?...

Kernix

11/5/2024

Which of Kevin's courses would you recommend?

I took his free course Conquering Responsive Designs back in 2020. I was thinking of either CSS Demystified or The Responsive Design Bootcamp or Beyond CSS. Whihc would be the best one to start with?

snxxwyy

11/5/2024

text in tags & media query vs flex-wrap/minmax

Hey, i have a few questions: 1) When is it appropriate if at all to place text in non text tags? e.g. <div>hello</div>, i've seen this around before. 2) When is it appropriate to pick a media query over using flex-wrap or minmax to wrap content? I know this is a "it depends", but is there any sort of rule of thumb or is it preference?...

Faker

11/5/2024

How to properly call a function in an event handler

Hello guys, sorry to disturb you all; I'm getting an error on line 7 but I didn't understand why, can someone explain why please ```JS const btn = document.querySelector('#__btn');...

Faker

11/5/2024

Reviews on To-do list project

Hello guys, sorry to disturb you all; I'm trying to make a to-do list... the project isn't complete yet but I need some reviews about the styles, what can be changed/modified for a better visual. Also, I feel that the orange circle isn't centered with the text, is there a way to center them perfectly please. Here is my codepen:...

Faker

11/5/2024

How the ::before and ::after pseudo-element works

Hello guys, sorry to disturb you all; I'm trying to understand how the ::before and ::after pseudo-element work but I have a few question: 1. In the video I'm watching, from what is being told, we should always use the content property irrespective if we have any text content or not; even though the text content is null, we should use empty quotation. My question is why is it so please, why can't we just ignore the content property in this case? 2. If ever we use the content property with empty quotations (that is we will be using the pseudo-element mainly for styling), if we set a height, width and background color, we won't see any visual drawing until we set the position to absolute. My question is, why we should explicitly set the position to absolute? Even if the position is set to relative, it doesn't work, why position of absolute is important here please...

vos

11/5/2024

Horizontal scroll with smooth scrolling anchors (PURE CSS)

I have this challenge because I want to know if its possible. https://codepen.io/deinternetarchitect/pen/ExqemNO In my codepen I have this horizontal scroll, I would like to have the anchors with smooth scrolling scroll to each section. As you can see this is buggy in my version....

Dev_HK

11/5/2024

issues with svg being resized based on their parent flexbox

i have an issue here, big svgs in width that i fetch from a source i have a list of svgs, that are 100vw long, they're 6 of them & i want to use them in a flex container & to resize based on the container if i substracted or added a new element here's the blade file ```html <div class="trademarks-belt mt-24 flex max-w-full h-auto">...

Rio200

11/5/2024

Huge table excel into html

Hey everyone! I have an Excel file containing structured table that I need to convert into clean, readable HTML code (ideally including a table). Does anyone know of a tool or software that can help -i have multiple files so if i want to make them manual it will take too long Thanks in advance!...

Full_table__4.xlsx

empty

11/5/2024

how to select the last div that has class 'visible' in a container using CSS selector?

Hi guys, i want to select the last div has class visible using css selector. Is this possible? Here is my example: ```html <div class="container"> <div class="visible">Item 1</div>...

vic

11/5/2024

is reusable good for 200lines of code in reactjs

So I m going to have 3 different component with different Imgs for each component and texts too like ( different for each titles or names) So I was wondering i can do like Fetch from Mongodb and use useNavigate to pass with state value like this ...

bri

11/5/2024

SEO

Hello, I'm trying find solution to this problem but until now I haven't solved it yet this is my page.js import dynamic from 'next/dynamic';...

Blake

11/5/2024

Background video playing on scroll

I'm trying to figure out how to get a short video clip to play in the background as the page is scrolled. I want to replicate something like what is on the ESE Agency home page, but I'm having trouble even figuring out what terms to search for. https://www.eseagency.ch/en...

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