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

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="/"...

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

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?

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

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');...
No description

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

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

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

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">...
No description

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

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

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

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';...
No description

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

When text gets in two lines

I am always running into this problem. Lets say i have a button which is display: inline-block (or flex, or inline-flex) and max-width: fit-content; As long as the inner text does not break into two lines it looks good. The width of the button is defined by its text. When the text breaks in two lines the button gets width 100%. I want it to fit the content. Any ideas what to do? I cannot use max-width because its a cms and i dont know what text will be inside....

Trying to understand what JSON is and why is it important

Hello guys, sorry to disturb you all; I'm confuse about how JSON works and why is it important, can someone confirm whether the following are correct and what you guys can add to it please: 1. JSON is a data structure use to transmit data (e.g. from server to client). 2. In order to retrieve data from a JSON format, we must use the JSON.parse() method 3. In order to format an object into a JSON format, we must use the JSON.stringify() method...

how to make a text p tag fills it from parent container

Code link : https://codepen.io/Vicky-clowdy/pen/OJKwzye So I want that p tag text to completely takes width and fills it...

Understanding the "this" keyword for objects in JavaScript

Hello guys, can someone explain why it is important to use the "this" keyword here, what would happen if we omit it please. Also, I notice that when we create a class, for e.g. say class Person {. . .}, in this case, I don't remember we would have use the keyword this. I know that the this keyword is use to reference the current object but in the example below, don't we have a single object? So can't we omit the "this" keyword? ```JS...

Safari background color with opacity problem

Hi 🙂 I got a strange problem that i have never encountered before. So If the .scroll element is scrollable, the background color with opacity is darker. Any reason for that behavior on Safari? Here is a simple example of the problem: https://codepen.io/Todor-Todor/pen/OJKEbQQ...