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

Line chart in react

if I'm making a line graph in react how can I make it so that the x-axis is consistent regardless of the number of elements in the array. for example if I had an array of 20 elements or an array of 10 elements. I thought about doing it as having 20 tics but if then were 40 elements each tick would go up by 2 elements but when if I don't have an whole number such as 27 each tick ends up being like 1.35 and I don't want decimals

Unwanted clipboard behavior flex inline table

Concerning https://jsfiddle.net/a2bsvoer/ Visually I have what I want. However, the linked jsfiddle causes the browser to copy cells into the clipboard with each cell (character) on its own line. How do I make it so that the browser copies full lines into the clipboard? I'm open to completely refactoring with these requirements:...

Container with image bleeding out while text stays in.

I have a container which max-width so it doesn't stretch too much on big screens. Now I have two columns in which left column is an image and right column is text. I want the image to take all the space available on the left (overflowing the container) and on the right, the text stays in the container (no overflow). How do I achieve this? I have attached screenshot of design for reference.
No description

html/css optimization

Hey, what are some recommended tips for improving performance that you can incorporate into your html/css, i've heard of things like the preconnect attribute for font sites etc. Thanks in advance.

what should be made into a variable?

Hey, what properties should be stored in variables? I'm aware of things such as colours, things regarding fonts (family, sizes, weights etc) , spacing, and i occasionally store border radius, leading and kerning values if i have a few different sizes with hierarchical naming conventions e.g. x-sm, x-md etc. Is there anything that shouldn't be a variable? Perhaps a rule of thumb or something? Thanks in advance.

why is my html/css layout behaving this way?

to preface, i've already figured out the fix to this. I'm still curious though as to why the elements are laid out this way. why did 3 of the empty divs get their own row, meanwhile the other 3 are hidden behind the row of images. Also, what did the empty divs even base their 100% height off of ? thanks. https://codepen.io/Joseph-Huff-the-scripter/pen/bGyMvJr...

What is the best practice for responsive font resizing?

So, as far as i know I should use the rem unit for fonts to not interfere with users preferences. But what should I use for dynamic font resizing? Like there will be a difference between the size of the font on desktop and on a mobile phone. AI suggested to do something like this: font-size: calc(! * @) Where: ! - default size like 1.5rem etc. @ - scale factor determined by the vw unit. Something like 0.5vw etc....

Help with css

Hey guys i need help i'm making an game launcher in electron so i'm using html and css and i'm don't know how to fix the place of the objects on the screen, and i'm using bootstrap css too i opened an issue on github if someone can help https://github.com/Good-Game-devs/LauncherGG/issues/1...
No description

Learning HTML and CSS

Hello guys, I'm learning HTML and CSS, I need some projects to build before moving to JS so that I can learn how to apply the things I learn... would really appreciate if some of you can share some projects (irrespective of whether they are hard or easy... my main objective is to learn)

not working on apple

I have an issue on my portfolio where i use different layout depending on the width of the screen but on apple it seems to be completely broken... link to my portfolio : https://mon-portfolio-sigma.vercel.app/ and th github repository : https://github.com/tototriou/mon-portfolio ...
No description

Is it possible to use container queries on container itself?

Hey guys, recently been trying to get back to container queries research, and found that styles don't apply on container itself. I think I saw Kevin do that in one of his videos, and now it doesn't work. Or maybe I'm trippin. Anyway example below didn't work. Google suggests using wrapper, but it doesn't go well when there is a list of such containers. I assume that I can use display: contents on wrapper, but overall wrapping doesn't seem like a good solution. Maybe someone figured out how to do this properly, or knows if its planned in specs. Any answer is appreciated! ```html <!DOCTYPE html>...

How to filter specific key + values in Javascript

I am working with the swapi API. I want to return an object but only specific entries. For example; Obj = { name: "Luke", age: 10, gender: "male"} But I specifically want to return a new object which is the name and gender with it's key name and value....

JS why everythingis changing in the array?

Hello, When I add (Hozzáadás button) object to my array with push, and after I add another object, why everythingis changing in the array? How should I have to add correctly?...

trusted HTML Element

Steps to reproduce: 1]As soon as i open the google chrome search engine ,and open a new tab and then open console to type document.body.innerHTML = 'hEY' it gives me an error stating This document requires 'TrustedHTML' assignment. 2]But then the same process when i open the new tab and in the URL I type google.com and open the console and type document.body.innerHTML = 'hEY' there is no such error . Could anyone have any idea about this....

Why is there a margin/padding?

Why when you run the animation by clicking on the checkbox, it scrolls the text creating some padding/margin on the bottom of the card?https://codepen.io/Bard-the-scripter/pen/vYwjKKo?editors=1100

Can't seem to understand the CSS em unit and the why should I use it for padding and margin

Basically what the title says, yes, I've watched Kevin's video about it, yes, I've watched the webdevsimplified video on it; but still I can not understand this. Also why should I use it over percentages ? Please explain it to me using simple examples, do not overcomplicate things

tr background image

Is there a way to apply a tr image to the row just once without it adding the image to every td within the tr? https://codepen.io/tvu1313/pen/vYwjGOj...

Best way to handle svg sizes

Hey there, what would be the best way to maintain svg sizes throughout a project? Should you keep the inline sizes they are given e.g. <svg width="x" height="y"></svg>? Or should you handle them similar to how you handle images by setting a max-width: 100%; on them and not setting the sizes on them until you have to in which case maybe setting up a few classes like .icon-small, .icon-medium etc could be an ideal way? Thanks in advance.

Div with fixed width How to make responsive ?

Hello, On the CLR course I learned that a fixed with with px is never good. But now I want to try to make this challenge : https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H ...