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

snxxwyy

10/22/2024

different ways to write a function in an object

Hey, i've seen a function in an object either being written as a key value pair on simply on it's own e.g. ```js const obj = { exampleFunc: function() { console.log("example function")...

Faker

10/22/2024

Height of after pseudo-element not matching original height of element acting upon

Hello guys, sorry to disturb you all; can someone explain why the height of my after pseudo-element is not the same as the height of my li block even though height has been set to 100% please, here is my codepen: https://codepen.io/Fakeur/pen/poMWrbz...

Hatzu_Hanna

10/22/2024

Style error, modules, styled components.

Greetings! I am working on a project using electron, react js and typescript, one of the components I am using is a tablem this table was made in styled components, we use css modules on our project, howeer, when the table is used, we have to reload (ctrl + r) so ite shows the styles from the css modules, otherwise, it shows other styles, I believe the ones from the original component, any ideas on how to fix this issue? the blue one is before i reload the project. thanks for the help!

Faker

10/22/2024

What is the difference between backdrop-filter and filter properties in css

Hello guys, sorry to disturb you all, can someone explain what is the difference between backdrop-filter and filter properties in css please For eg, consider the following code: ```html...

Faker

10/22/2024

What is the difference between transition and animation property in CSS

Hello guys, can someone explain what is the difference between a transition and an animation in css please, like those 2 seems to be the same in the sense that they add some "effects" to our web page but I don't really know when we should use one over the other, like when to use what and their use cases

just-andy-1888

10/22/2024

How to create responsive utility classes in SCSS like Tailwind/Bootstrap?

I am working on a CSS library for our Design System. It contains a wide set of utility classes, similar to those of Tailwind and Bootstrap. We are using SCSS to manage our CSS, which is separated similarly to Kevin's Beyond CSS course. I am stuck creating utility classes with a prefix to determine how they should be presented at specific breakpoints....

EasyToKill_ (long break)

10/22/2024

Convert SVG to CSS properties

Hey, I saw this video of Kevin https://www.youtube.com/watch?v=4ALLynsZ0u0 I was wondering if anyone knows some tool to import a svg file and have it be converted in this way with border-radius. Or is there another better way? I know you can import SVG via a link the the point of me wanting to do it this way is to improve speeds on my website....

DooMGuY086

10/22/2024

How can I replicate this vignette effect for an overlay cover image using tailwindcss?

https://letterboxd.com/film/incendies/

snxxwyy

10/22/2024

Prefixes (e.g. -webkit-xyz)

Hey, how do you know when you should you use prefixed properties such as -webkit? Is it when a property you write doesn’t work in a certain browser? Then you’d use that browser’s prefix on it? Thanks in advance...

snxxwyy

10/22/2024

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

vinicius!

10/21/2024

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?

isOttiz

10/21/2024

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?

Macro

10/21/2024

site looks horrible on mobile

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

snxxwyy

10/21/2024

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

Inna Bulatova

10/21/2024

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

snxxwyy

10/20/2024

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

RIZE Hobberz

10/20/2024

How do i get it so when the menu is checked the welcome message gets hidden

Lucas Kennedy

10/20/2024

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

Lukáš Chylik

10/20/2024

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

kasir-barati

10/20/2024

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

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