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

how to run this project live locally

https://github.com/safak/youtube2022/tree/ecommerce I have downloaded the files and below are the command I tried. I want it live so I can inspect the website. ```@r youtube2022-ecommerce % npm start npm ERR! Missing script: "start"...

SCSS variables dependent on extra class

I have a class whit a variable that i would like to change depending on wich class is included. Here is an example ```scss...

Following Kevin's advice as best as one can ... how well do you need to understand vanilla JS?

So Kevin put out this video (https://www.youtube.com/watch?v=HuI4fDxDM0g), and it was a nice reminder that having commited to the "boring" route of become a web dev he endorsed the choice I made of sticking to my guns and finishing codecademys JS courses, plus filling in gaps with javascript.info, Kyle in Web Dev Simp., etc. But then it hit me from watching this video – how well do you need to know vanilla stuff before you go on to react, next.js, etc? Because I now know some very basic JS structure, and with the help of the resources I've mentioned and the power of googleing I could probably build very basic stuff with JS, like a calculator, etc. Objects are important, functions are important, having done the JS course first, I really felt like TypeScript is something I can see as a good tool (and actually felt easy to understand), but what I don't understand is how well should I understand when I should use classes instead of basic objects? When do I build a function from scratch and when is it better to use specific methods? And having googled this issues I don't really find any good resources. ...

Display elements in one line

Hello i want to create boards with 4 cards that will have title which have transform: rotate(-90deg); , but i want this text to have for example margin-left: 10px aplied to every card title. I dont know why every one is at other position maybe its cause i use display: flex; but i dont know how to fix it. Here is link to code: https://codepen.io/artusss0/pen/jOQEVmq

drawer sliding animation not working

hey folks this is my code I'm trying to have sliding animation from right when drawer open and closes but it not working ```tsx import { useRef, useEffect } from "react"; import { Link } from "@remix-run/react"; import { Close } from "./icons";...

Resize a nav

Hello everyone I realise this herobanner https://codepen.io/alpha_66/pen/KKrKbML...

Want text to wrap when larger than parent

https://codepen.io/Antony-Collin/pen/WNYejKZ So I want the text underneath the .game spans to go underneath itself when it's larger than the container. I guess I need to have a fixed width to it's parent, but I don't want to hardcode a fixed width, is there another solution ?...

make text wrap when larger than parent

https://codepen.io/Antony-Collin/pen/WNYejKZ So when the text beneath .game spans is larger than it's parent I want it to continue underneath instead of the parent expanding its width. There's no width set for the container so I guess I need to put one so that it doesn't expand but I don't really want to hardcode, is there a way to avoid putting a fixed width ?...

Question with invalid away in async function

Why is the await on the same function invalid in the error call back, but not in the success. Does the event cause a conflict? It gives the error, unexpected reserved word. ` const successCallBack = async function (position) { try {...

Please help me create this transition

Hi I am using vue transition to create this drawer menu. But I don't know how to create this semicircle open close transition.

Separate HTML files VS injecting data via JSON for super similar content?

In project I'm doing, I have multiple pages that have exact same structure and differentiate only in pictures and text they use, but everything, structure vise is the same. My question is, what is standard and better for performance? When you click on the menu links, do I just point it towards separate html file, or do I just inject all that different info via JSON? Project allowes me to choose what I want to do, but I'm just wondering what is better!...

[For Hire]

I am looking for new jobs as frontend develioer

Make checkbox width "thicker"

Is there a way to increase the thickness of a input type=checkbox? https://codepen.io/squidiw/pen/Poxombo here you can see the border of the checkbox is kinda light but then I want to make it "thicker"...

The script broke all plugins in the project

Good day. Please tell me why, because of the second script, all js constructions on the site break for me. For example, swiper js stops working, as well as menus and more https://codepen.io/Mister-Eighth/pen/KKGGJLQ...

Strange difference between ::before and ::after

I was taking a look at this post https://discord.com/channels/436251713830125568/1115936302458736711/1115936302458736711 by @Pat66 regarding an issue they were having with a pseudo element. Asides from their issue (which @mannix_ quickly provided a solution for) I noticed something else. Pat66 had set text-transform: capitalize; on the "a" tag. This worked correctly on the first link but not on the second link. If I removed the pseudo after element the capitalise worked as expected. This led me to assume that something was broken in the CSS of the pseudo element however, if I changed it to a "::before" rather than an "::after", the capitalisation worked correctly. In summary, ::after appears to break the capitalisation on all but the first <a> element....

Make underline effect

I want realise a underline hover effect on my link but the problem is the undreline take only one link https://codepen.io/alpha_66/pen/JjejLwG?editors=1010 can I get some ideas please ?...

How do i handle different logo sizes on a single web page with page load time in mind?

suppose i have 2 same logos on my web page, one is 64px wide, one is 160px wide. is it better to have 2 separate files for their respective resolutions or just 1 file but style the logos' widths in css differently? also, not losing the quality, should i always use svg or is png enough?...

getting different font-size for button element in different browsers

hey folks I have set font-size: 1.6rem and font-family: Merriweather Sans, sans-serif on my body element and set font-size: inherit to all button element like this
button {
font-size: inherit;
button {
font-size: inherit;
...

Suggestions for a header blurry background

I need a suggestion for the h1. I'm trying to get a blurry background, but I don't like how it signals the containers behind it. Does anyone have a better suggestion, or is it possible to make a radial blur effect? https://jovial-sunflower-25dc31.netlify.app/...

Why does using e.preventDefault() in this way in React not work?

I see in the docs that e.preventDefault() is supported, https://react.dev/learn/responding-to-events#preventing-default-behavior, however I am getting an error when I apply it in the following way. In the returning JSX, I'm adding an onClick() event handler to one of the html elements, and passing into that handler as an argument an already-invoked deleteBtn() callback function (pic 1), the callback of which activates an alert box and console.logs something. I have this deleteBtn() handler set to receive an e (event), and the first line of the function is e.preventDefault() so as to prevent the rest of the function from continuing to be executed. Or at least that what I assumed it would do. (pic 2)...