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

arrow function .this value

Hey, so i'm aware that in an arrow function, .this equates to the window and not the current object. If this is the case, in an arrow function, wouldn't defining a .this value essentially be the same as defining a global variable outside of the function since they both equate to the window? If so, why would you need to utilize .this is in a arrow function? thanks in advance....

JS Garbage Collector

In js, primitive values don't get garbage collected, right? but if a object is set in the global scope, do they get garbage collected?

Applying filter on an image - CSS

Hi, guys, I'm doing this project, and I'm having a little trouble getting the filter right. I need to do something like this image. Can someone help me?
No description

site looks horrible on mobile

really speaks for itself. site looks like garbage on mobile, no idea how i can fix it honestly.
No description

Where to store data awaiting to be put into the html

Hey, what is the recommended way to store data awaiting to be inserted into the html? for example, let's say when i click a button, the text inside changes. Where would it be appropriate to store that awaiting value? ```html <button id="button">Not clicked</button>...

self-hosting font won't work

I've been trying to apply Roboto Black as self-hosted font (@font-face) downloaded from Google Fonts in all three formats - .ttf, .woff2, and .woff but it is displaying nothing like Roboto Black on Google Fonts and as compared to importing it with @import tag. I have been trying to debug but I've run out of options. Actually, I even checked the woff2 files as they come with HTML/CSS samples - and they look nothing like Roboto Black on Google fonts. That's why I tried .ttf, which is on screenshot - yet it too does not look as it has to be. Is it possible that downloads from Google Fonts are originally of worse quality than @import fonts from the same Google Fonts? Because that is the only conclusion I came to. #front-end...
No description

Object vs map

Hey, what are some situations where you’d use a map over an object? To me, they’re essentially the same thing with map’s keys not only being limited to strings, but personally, I don’t see a need to put any other data type as a key? I’d appreciate some insight, thanks in advance...

Scrollable area

How can i fix this layout? I have a global layout with grid areas: header, sidebar and main area. Inside my main area, i need a scrollable area that streches automatically without affecting the global layout Here is the source code https://codesandbox.io/p/github/lucaskfp/react-dnd-kanban/...
No description

backdrop-filter

It doesn't matter if you put the static values, CSS custom properties, or inherit them via inherit, the backdrop-filter will not be reflected on the children 😦 Is it bug or feature? https://codepen.io/luko248/pen/bGXrejO...

adjusting height automatically in a grid system according to the wide images and not taller ones

So here is the issue, I have a grid container called with the class gallery__group applied to it. It has two column. And I am putting images inside a figure element and right now their width is 100% but height-wise each row is as tall as the taller image in that row. I do not like this, I want it to pick the height of shorter ones. How can I do it? Here is a simple React app in codesandbox: https://codesandbox.io/p/sandbox/galler-react-ytgklf

rest operator | ...

Hey, I've looked into the rest operator and came to my own conclusion that it handles a group of things allowing them to be placed somewhere else. I've mainly seen it being useful in situations regarding objects and lists e.g. ```js const john = { name: "John", age: "25",...

super()

Hey, am i using super() correctly in this case? I had a bit a trouble understanding the functionality. ```js class Animal { constructor(species) {...

Css grid

How do I make elements in a display grid not fill up their cells completely? (And use intrinsic sizing instead)

javascript questions

Hey, i have a couple of questions. 1) What is the difference between changing a string to a number using Number("5") and parseInt("5"). I know that with parseInt it can separate a number from a string e.g. it can pull 5 out of something like parseInt("5Text"). But in the original use case, is it a matter of personal preference or is there a correct practice? I assume if you don't want to pull a number from a string you'd just use Number()? 2) What does the term "closures" mean? I've researched it but i don't really understand anything regarding it. I might have found a poor resource though....

Help a fella make his project section look better?

https://callum-laing.com/ https://github.com/callum-laing/portfolio-v4 I'm struggling to make the project section look less crappy, and I think the better way to do this is by following what I've expertly designed on this image.. I have my project card, and within that I have my h2, p, and image elements.....
No description

How to use a common header (eg a nav bar) or a footer on multiple html pages

Hello guys, can someone explain how I should proceed to use a common nav bar on multiple html pages, like I don't need to define them, like having their individual mark up and style, I only want 1 mark up and 1 style sheet which could be use.

get a random number after keyframes done its work / just get a random number every second

hi guys ```let x x = Math.floor(Math.random() * 100); var r = document.querySelector(':root');...

checking if a string is empty.

Hey, i had a string that started off with the value "" and wanted to check if it was empty. I first tried if (xyz.length <= 0) {...} but found out that "" equates to null and that it wouldn't work due to this. i researched it and found you could do if (xyz) which ended up working, this resource said that that tests for a value but i always thought that sort of if statement was for checking booleans (if (xyz) being "if xyz = true"). Is this a recommended way to check for an empty string and is that a recommended check to do if it's not checking for a boolean? thanks in advance....
Next