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

Text sizing to container

Yet another question which feels basic, but hey, here we go ... Is there a way to make the size of each p fit the container content, so I don't have to go in and set every single font size? I've been looking around, but it seems hard to do. Looked into variable fonts but that doesn't really work here. There is no grid on this yet, but after a discussion the other day, could that be a solution since grid tend to have strong willed parents, making sure the children do what they say?...

Testimonial vertical infinite scrolling

Hi I have four Testimonial cards which are side by side what I'm trying to do is I need the top cards should go down and bottom two should be in top where it can be in circular loop for better understanding i have given a video and images as well it's like marquee vertically where both pair of cards should loop simultaneously so how can i achieve that could anyone help Thank you in Advance thanks

keyboard accessibility

Hey everyone, I have a menu where the links are keyboard accessible. I just learned that for mobile viewports where the menu is minimized, the menu links should not be keyboard accessible unless, the menu is not minimized when in the mobile viewport. so, my nav looks like this ```html <nav class="menu">...

Thoughts on attribute selectors

Want to open this for thoughts on using attribute selectors. Iโ€™ve always used classes for modifying elements to different presentation configurations. What I mean is, as a contrived example: <div class=โ€œfeature feature-icon-top feature-full-width feature-reduced-paddingโ€> Then using simple selectors :...

.scrollIntoView() state of the element

Let's say I have an element that I scrollIntoView with JS, does the element becomes focused or active or something else? Because if I try to tab trough the elements after it being scrolled into view, the tab indexing starts after that element, but if in CSS I use :focus to change bg-color it doesnt work

Why do MediaQueryLists make me feel so dirty?

I've been looking at how to implement media queries in my js, and while they work, they just leave me feeling... ugh. I know window.matchMedia() returns a MediaQueryList (mql), an object which has a property matches, and has an onChange listener. So in an arbitrary view I'll call the following to get all the mql objects for my breakpoints...

how can two front end developers work on the same project effectivly

I want to work with my friend on the same project and we want to find the way that developers do

word break

Hey everyone, I've got a tricky situation where I have my logo that has each letter in a span (because I am adding animation to each span) but at a certain screensize if the logo overflows, I want it to break at a specific index so I have something like this

Font

Hi people! I'm going for this design, but don't know where to start to look for this font. I could obviously go through every single one on Google fonts, but is there a site, or tool to find out what font is being used? Much like a Google images search will find that image and information about it ... The quotes are especially important since they are so square and kind of makes a frame to the quote. https://in.pinterest.com/pin/make-awesome-designs-with-4-questions-creative-beacon--500673683549390583/ ...

help simple project

how trying to build this countdown and I want to display 'left with 5 min when the countdown is left with 5min' and at the end of the time I want to add a music how do I do that help

I have an SVG animation that animates when we reload a page

But the animation should apply when I scroll down and when we scroll up the animation should keep on applying i tried using begin element with JavaScript but it's not working is there any way we can do that ? could anyone help me in this issue ? Thank you in advance ....

Force text to stay on single line & select class in js

https://codepen.io/devxan/pen/poZYpOo - I want this text to stay on one line to reach the effect shown in the image - & to only select paragraph elements (or h1 later) of a specific class in the JavaScript code. Maybe I should rephrase the text above to ask ...

Centering circle

Justify, align, place ... this is driving me crazy. So why isn't my .red-circle centering inside the .circle-box with place-self: center;, when .katana is doing it inside of .sword. It's even disappering which just throws me off completely! I just know there's some stupidly easy way of doing it, but I am missing it now ... main.css in css folder:...

next js with reactDOM portals

Hello everyone! I need your help, currently I'm working on a next js + mui project, where I need to throw a modal using react Dom portals, but I can't use document.body or window objects or query selector as pointer elements (I don't have index.html). How to use portals with next js dev server?

know when datalist option was selected

assume I have the following; ```html <input type="text" list="mylist"> <datalist id="mylist">...

SVG newbie needing help

Hello! So I'm using a SVG for the first time, and quickly found out there are more than meets the eye ... 1. I originally screenshot a sword from a bigger picture (assets, original print.png), then did a png to svg conversion, and it kind of worked, but I get this white bottom (katana.svg). How do I get rid of it?...

Zoom through logo to content behind upon scroll

I have a logo with an O in it, and I want it such that , when the user scrolls it increases in size and eventually goes through the O in the logo and shows the "next slide" or the content that would be otherwise below it. Do I need something like three.js for this?...

When to use sass variables

Hello guys, I'm getting a bit flustered when it comes to refactoring my sass sheets. I'm kind of confused on when to use sass variables, as my understanding of a variable (or even functions) is DRY -- so if you use a value more than once, put it in a variable. But when I have things like mixins, or inheritance, I feel like the line becomes a little blurred and I'm feeling like my stylesheets are becoming a mess. Right now, I have it so that anytime I would use a variable twice (even if it's in a...