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

several contact forms. need a tool to send it to the related store.

Does anyone know if email.js has the option where I can pass a email in params of sort and make the email send to that email from params instead of my linked account? Or another library that does this? I have 35 different contact forms to stores on my site. and would like it to ship the mail to them not me...

Dynamically requiring images?

I've a module that contains a class that represents the Hero section of my site. The Hero has a slider of images. At the top of the class I'm importing the images: ```...

Is it possible to not overflow image in div with flex-grow?

As you can see from the codepen https://codepen.io/Lko3001/pen/bGxLRMX?editors=0100, I created a simple card with no specified height but with a max with and an aspect ratio, I inserted an image (with weird proportions i know) and I want it to take all the available space, but still keeping the card's aspect ratio the same, how can I do that? in the codepen, if you remove the image in the html, you can see the parent div and the image should not be bigger than that. I tried using overflow: hidden but didnt work, any suggestion?...

PUT requests and data consistency?

Thought I'd just double check a potential mistake related to PUT requests that I think I spotted in Stephen Grider's React course objectA: {id:1, title:'Harry Potter', pages:50} - User1(top left of image) & User2 fetch objectA...

Can somebody tell me how to create a accordion with categories in wordpress

Website : https://probot.io/commands .. so when u are in all categories it shows all categories, but when u go to premium it shows only the premium command if someone has any plugin or knows please let me know...

one of the child div width is not reducing after it crosses 480px in responsive mode

parent div containing two divs and its flex direction is column. i want the width of the lower div to be same as the first div how do i proceed? i tried reducing the font size of future forcast and buttons but still its not reducing. how do i fix this? https://gyazo.com/7ebdbb5cf54c8467848008540db7efb6...

easiest way to add custom font to html/css

what's the easiest way to add a non-google font to your html/css files? i've got the font family files downloaded to my computer already. the font squirrel font kit generator method seems confusing to me, is there an easier way?...

How to mask card glow to image?

I created this hover effect for the card, and now I want to apply the glow to just the image, so that the image has glow and the card and title dont, how can I do that? I tried using mask-image but my browser says it's an unknown property https://codepen.io/Lko3001/pen/VwGyEJr...

When should I move onto frameworks

hey!! so, i been thinking, I'm doing js for a month or so and i think i right now am familiar with most of the fundamentals of js and how they work now I was wondering at what point should I move onto framework? or what things should I complete learning about js before moving onto framework.. cause I'm currently out of thoughts over what things i should proceed to learn in js now...

HTML BOX

I wonder how i can build this, in terms of HTML only.

Terminal kevins sass problems.

I tried following kevins video on sass, but for some reason I can't change font size in terminal to Aa size that is visual .

How to give colour to Radio input circle when unchecked?

I'm trying to have 5 radio inputs with different colours. I can change colour when anyone is selected/checked using accent-colour but don't know how to fill circle with colour when it is unchecked.
what code i'm using for this section?
basic buttons with common names and a class to style...

Need help with Order for display flex

Order is used to change to position of the child elements in a flex box. i tried the same but its not quite the same. there is a main div location-jokes container which has display:flex and flex-direction:column properties . Now i wanted to reverse the order of childs so i used following order to change the position, the child position is changed but the grandchildren position is affected by this, how to fix it, so only child position is moved ? i have attached the code and ss for better understanding ``` .location-jokes :first-child { order: 2; margin: 1rem 0; ...

What is pre?

I was reading Chromes news about nesting being available (YEAH!!), and this Codepen revelas if you're in a browser that supports this new function. Then I started looking at the CSS, and what is actually the pre selector doing? It isn't connected to any HRML element as far as I can see. I tried deleting it and playing wiht it, but nothing happens. https://codepen.io/bramus/pen/oNdrypM?editors=1100...

Webp or AVIF?

I was wondering, if i should choose AVIF over Webp for my images. The AVIF files are much smaller than the Webp, and i don't really see any difference tbh, so idk if there is a downside to using AVIF other than maybe browser support.

why aspect-ratio needs a display to work?

Hi I want to use aspect-ratio to make a rectangle and then make it a circle; but the <a> is not responding to aspect-ratio in my code here until I put a
display:grid / inline-block
display:grid / inline-block
. https://codepen.io/codedkk/pen/RwYxbKL Why? it is from Kevin's tutorial: https://scrimba.com/learn/spacetravel/the-explore-button-part-1-cof6e4b00a7a0928954d4bda3...

Atomic Design and React

I am following Brad Frost's Atomic Design principles in React and am wondering if I'm creating an antipattern. I have a Heading component that just renders a heading tag and some styling. Seems simple enough, but there are multiple different use cases for this simple Heading component, so I'm conditionally rendering jsx and styling based of a type property. This, however, can really bloat up my component and I'm wondering if I'm doing too much in one component. This is a simpler example but I have many other components like this in my project. Below is an example: ```jsx import { PropTypes } from "prop-types";...

Issues with cards in responsive design

im having issues with cards in responsive design, i narrowed down the issue to images where i declared position:absolute in normal design without declaring relative parent, and the images sat in its place...... now in responsive its having this wierd positioning, i removed position : absolute for normal design its working properly but in normal mode images are way off https://codepen.io/avinash-tallapaneni/pen/ExRomwX...