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

help

Quick question on design token philosophy

(This might be better for ui/ux) I've recently read Brad Frost's Atomic Design and looked into design tokens. Really cool stuff and seems super useful for bigger projects/scalability. My question is, I'm not sure if I'm using it right. Should I go all in with every css property being a design token, or is it okay to use a mix of both, or other? For example:

Calculate the sum of elements in a matrix diagonally

I'm creating a function sum_diagonal(arr) to calculate the sum of elements in a matrix diagonally but when it reaches the center, the element is repeating. for example: 2 6 4 1 3 5 6 2 2...

CHANGE COLOR SVG

hi guys plz how can i change the color of an image with svg type????

Origin/anchor point for scaling

Is it possible to change the point towards where something scales? Ive set my font to 1vw (which might be stupid), and when I make the screen smaller, it seems it scales towards the top left. This is what it seems to be doing top is currently, bottom is what i'd want: https://i.imgur.com/qw7Espr.png Here's the example: ...

Dynamic overflow scroll effect

so I have two sections in a parent , first section has headings and paragraph, second section has no of items, this second section should be scrollable and it should have a max -height of remaining space of the parent. how to achieve that .https://codepen.io/naveen570/pen/NWLWZaE , code pen for reference.

How to answer the best project that you worked in JavaScript?

I did work a lot of projects before like this (Student and mentor project - where student asks a question and mentor answers questions, students questions are matched to mentors based on their ratings and subjects that they have in their profile The tech stack we used, we had mobile app and web app? Web app - is using react just for admin to view the questions asked by student and answered by mentors and some other extra functionalities...

Hey folks, I wrote this code to create 2 * 2 grid layout for cards with dot navigation.

It seems to be working but card has to be multiple of 4. If there are 9 cards (which is in the example code) the last dot in the navigation renders wrong card. I've concatenated js/css/html in one page for ease. Codepen: https://codepen.io/Abhi1234567890/pen/yLxLGXV...

css theming

Hey everyone, I been trying to implement a contrast theming palette for my website. What I've managed to do: 1) The site contains light/dark mode toggle button 2) The site contains 4 additional contrast themes. If a user selects a theme, the light/dark mode toggle is turned off. 3) When user visits the site with their own OS contrast mode(Contrast Themes on Windows and Increase Contrast on Mac), the sites contrast themes are hidden, to prevent the user enabling a contrast theme on top of their OS contrast theme. 4) When a user visits from from Mac and they have "Increase Contrast" enabled, I've chosen one of the contrast themes of the site for that request. ...

scrollable marquee

I want a marquee that: 1. scrollable (ideally without reimplementing scroll function) 2. continuous 3. change speed on hover This is my weird take but I notice on a higher "speed", scrollTo doesn't appear smooth?...

Crop transparency from a video

so I have a video which have the dimensions of the red square, but it's all transparent except the cyan square, is there a way to remove all the transparency and make the cyan square automatically fit to the size of the video?...

How to add a bootstrap toast message when internet is not connected

I have a code which shows an alert when Internet is not there. I want to add a bootstrap toast instead of the alert. Does anybody know how to achieve that. Here is my internet status code. ``` constructor(private connectionService: ConnectionService) { this.connectionService.monitor().subscribe((isConnected) => { this.isConnected = isConnected.hasInternetAccess;...

Pop up Modal Problem with other element behind it.

Short brief about the issue is, since I made a pop up modal and centered it to the screen with position fixed. I cant click or interact the landing page anymore on mobile view because of the modal is in the center. The css property I used to make the modal pop up is
visibility hidden
visibility hidden
then target it on Js to make it
visible
visible
...

CSS

plz guys how con i do this with html and css

Typescript Generics

I want to create a class who's signature is modified by function calls. For example; ```ts const thing = new Thing(); // Thing<"">...

Anyone used the spotify api? Do removed tracks still appear?

Initially feels like a stupid question, but do "removed" tracks still appear in api queries? Thought perhaps they had a more extensive list of songs, with a smaller number marked as active For example you still tend to be able to google and browse the tracks that are no longer playable, they just don't appear in your app searches...

Modal Issue

Hey I've been searching for some easy tutorial about pop up modal and I made this simple Pop up modal. Basically I follow it from the yt I've saw. and now running the problem that it is not working. IDK why. a help would be appreciated from u guys. https://codepen.io/pen?template=WNgeMZJ...

What is the best property to use when it comes to text responsiveness?

I'm pretty new on using media Q. I'm just wondering what is the best property to use to make a text responsive ? Im only using a vw on my font units and sometimes clamp().

how to make flip cards self sized

Hi guys! How to make both height and width of the flip cards self sized? Right now the width is self sized. I want it to have no excessive white part like the one in the middle. https://codepen.io/codedkk/pen/wvxVVrz Original code is from the article in the js pen. ...

Problem with For Loop

Can someone help me figure out the difference between the function afficher() using for...in vs the for loop? Using for..in the output is correct but with for it's not. am I missing something? ```function afficher(tab, n = 10) { let output = ""; for (let i = 0; i < tab.length; i++) { if (tab[i] % n == 0) {...