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

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

OfficialHobberz

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

depthark

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

snxxwyy

10/19/2024

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

snxxwyy

10/19/2024

super()

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

TheOneThatPlaysTooMuch

10/19/2024

Css grid

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

i_lost_to_loba_kreygasm

10/19/2024

Why is there gaps on both sides of the children in this flex container ?

Can someone explain me this?

snxxwyy

10/18/2024

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

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