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

Slot content piling on top of other content?

I have been working on implementing an SCSS template in a SvelteKit project. My styles are coming through to the UI, however I am having trouble figuring out why some of the markdown is coming out piled up. I've tested and toggled so many things at this point, I'm not sure what to mention. If I remove all styling, the markdown paints to the browser the way you would expect: header, over main & slot content, over footer. My routing works fine, my route pages display their <h> tags, and while I've removed most styling at this point the root & body styles come through from the SCSS folder. My root layout looks like this: ```javascript <script>...
No description

why media queries is not working?

isn't the 'em' unit used in media query is relative to the root font size, which is 10px. Therefore, 50em should be 50 * 10px = 500px. but I am not getting expected result.
No description

React quiz app

I'm currently working on a quiz app for a Scrimba project but I'm a bit stuck on how to proceed. Right now, my app can fetch data from the API and display them on the page. However, I'm not sure how to make only one button active per question or how I should manage state for user selections (would this go in <App /> or in the component that's rendering the quiz questions?). Hopefully this made sense and I would appreciate it if anyone could take a look and offer some suggestions. https://codesandbox.io/s/quizzical-nqjq39...

Media Query

If there is no standard breakpoint then how can I utilize media queries 100% to make a responsive web

Warning: Invalid hook call. Hooks can only be called in of the body of a function component.…

I got this warning when I use any of these ( Autocomplete, Formik, YUP, React-Hook-Form, Rect-Select ). Please help, THANKSπŸ™
No description

Animating multiple elements using gsap

Hey all! I am trying to animate the rotation of an element based on the scroll direction using gsap. While it works, it only works for the first element, and not the other instances. What are some changes I can make to fix it? Thank you in advance! ```c const logo = document.querySelector("#union svg");...

Accept any type that satisifies that other type in function

Is there like ```typescript type AWithFields = { foo: string }...

Force break short words

Is it possible to break a short words by force, even when elements' width is larger? I don't need to minimize width, just want to add some padding around, also do not want to use <br>. TRIED:
word-break / overflow-wrap / inline-size
word-break / overflow-wrap / inline-size
...

Scrollbar area

Hello there, I am working on a website. The main page is a grid layout, when you click CONTACT in the nav, a modal overlay opens up, which is a form for contact information. I am extending this form to have more questions and options. ...
No description

Need help with exporting useref const.

in my app() function, i have all the content for the website imported as components. And i want to modify the imported components via another component in HeaderNavigation using useRef however i cant seem to actually get the referenced element in my outside component, so i am guessing i am doing something wrong with exporting, or i have something wrong with useRef fundamentally. App.js ```js...

Designed a handoff guide for UX and now I'm planning a similar document for developers

I’m sure this happens everywhere but at work we have this issue that no website we develop ends up looking like the original design. So I was tasked with doing a guide to close that gap between design and development. So the designer guide was focused on how to better communicate some of the details or concepts. Provided components for base variables such as color or typography. But that’s finished so it’s all good. Now, I’m doing the same, but for front end developers. And I’m struggling with how to tackle this. This is the outline I have....

Centering

Hi guys i want to center something like this, especially the pictures. What is the best way to do it. I gues with cols? Any ideas. Would love to hear it
No description

React

Hi all, I have just learned React, and I would like to ask for any useful platform or channel that can help me dive deeper into React, If there is anyone who knows please give me links or names of them. Thank you πŸ™

Repeat HTML code among pages of a project

Hey I am just wondering, is there any way that when I create the header for a project, it will be repeated to every page then without copy/paste. And when I change the initial header all of them will be adjusted. I am refering to the HTML code of the header πŸ™‚ Thank you!...

How do you reset a state on certain breakpoint?

Im trying to set the navMenu to false when i reached sm:(640px above) im wondering if where can i put a code that when sm:(reset NavMenu to false) ```export default function Home() { const [navMenu, setNavMenu] = useState(false); const handleNavMenu = () => {...

Styling / Getting rid of Scrollbars in Chrome on "Card Design"

I have an Issue that I do not seem to be able to change or remove those random ugly scrollbars showing up. None of the Scrollbar styles seemed to work. In Dev Tools mode they automatically appear as smooth slim gray bars just like they would on mobile sites but regularly they look like the screenshot. I have added a Codepen https://codepen.io/Zen-Gheist/pen/KKbryRX ...
No description

defaut Value of width in certain div

can anyone tell me what is the default width of a certain div? because i want to use
w-full
w-full
className on my <ul> below 640px and set it to default above 640px, im using tailwind btw...

Need explanation: Why .reduce() returns wrongly ordered object

Hi im currently working on a project where i want to store and order ids in groups, which can also be sorted. So my datastructure looks like this: ```ts // Key is group id and value is an array of item ids that belong to that group const itemGroups = { "1": [10, 11, 12],...

Grid / Flex solution

Hi frontenders, how would you solve this? 😁
No description

How to put Images or divs on top of another in html

In an HTML for my school website for an admission page, I was struggling to put the forms for admission or pictures of the forms on top of one another. Not literally on top but almost like line-by-line. here is a picture of the problem. And I want it to be central, what should I do?
No description