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

Not able to maintain aspect ratio of image in small screens

My images are shrinking in mobile view. I want to maintain aspect ratio of image in small screens just like the given picture. Can anybody help me with this. Here is the code pen - https://codepen.io/adarsh88/pen/xxJZZrM

Not able to span for the entire height of the viewport

I have got three divs that have specified heights. I spanned the entire width using width:100%, but the height of 100vh is not working. I want to span for the entire height of the viewport. Here is the codepen for reference - https://codepen.io/adarsh88/pen/xxJZGvq

Chakra UI import error

Help! I just installed Chakra UI in my Next Project and its throwing an error:

Getting the svg's into the search bar

I got the icons I needed from font awesome and the container for the search is in flex row. I tried css ::before and ::after but I dont have the icons installed so I cant use a background url. Here is a pen to see what's going on https://codepen.io/MD-2016/pen/KKBwaXy...

Scope vs Lexical Scope

What is the difference between Scope and Lexical Scope in Javascript?

There are so many issues on this project. can someone guide me

1. not being responsive 2. image being oversized, reduced with but it doesnt fit the border on that div. tried object-fit to contain, no changes in general not a single thing is working apart from header section ...

unable to divide the section into equal 4parts using grid

parent container code .weather-forecast-today{ border: 2px solid blue; display: grid;...

Frontend Roadmap for 2023

Frontend Development interview checklist and Roadmap for 2023

How to fix these lines(pseudo elements with before)

i want em to be just like as the 3rd pic

Add a circle to a CircleProgress component

Hi there, I'm looking to create something similar to this component from Apple's website (picture below) but there's one part that I'm not sure how it can be achieved: the tip of the progress indicator has a circle/ball inside it with a 3px white border, how can that be replicated with React/CSS? https://codesandbox.io/s/base-react-circular-progressbar-examples-forked-um3bev?file=/index.js...

Footer in bottom right hand corner

Having trouble getting my footer down in the bottom right hand corner. I got it in a flex display and trying to use ::before to get the icon svg to be before the div inside the anchor of the footer tag. Any thoughts on what I'm doing wrong here? https://codepen.io/MD-2016/pen/KKBwaXy...

Some Question about of grid in CSS and some other

1- Which one is better of these: grid column and row templates or grid template areas |------------------------------| ...

Canvas - permanently apply Y-axis offset to all future drawings

I want to have everything drawn onto the canvas be given an offset in the Y axis which will increase each frame, imagine gravity (without acceleration, just constant speed) and there's no ground at the bottom of the canas to prevent objects from falling off. I want this to apply to everything, not just some drawings, not just stuff in the foreground, I want the entire canvas to shift down by a fixed number of pixels every animation frame. I thought I might be able to do this by using ctx.translate(0, 10) without wrapping it in save/restore, but this hasn't seemed to work. Here's a snippet from one of my draw functions in case anything here is causing issues;...

Mapped images not showing in production

Hello, I'm developing a practice project from Frontend Practice (https://www.frontendpractice.com/projects/stark) using React + Vite.js and SCSS. After almost 3 months of work each day I am ready to deploy it to showcase it on my github, but... after building and running npm run preview to check the images in my testimonial slider section are not showing (I get a 404 error). I am mapping an array of hardcoded data (https://github.com/naiiiden/frontend-practice-stark-homepage/blob/main/src/comp...

useSelector() in Redux not rendering new value ❓

I am learning redux , so made a demo webApp and in that I am incrementing and decrementing the value by 1 on button click . The problem is useSelector() hook in redux get fired once when the component is mounted but after that it doesn't re-render the changed value .. Here is the code :-> ...

Hello I've been trying to figuring out how to make a link that lets people email you.

Hello I've been trying to figuring out how to make a link that lets people email you. like that links sends you to a new message with my email i've seen someone done this before but idk how...

how to paste something into an input from clipboard without using document.ExecCommand('paste') ?

how to paste something into an input from clipboard without using document.ExecCommand('paste') since it is considered obsolete by MDN ?

need a library that helps me to resize the window (we want the layout like codesandbox).

hey! everyone... I'd like to ask you a question: I'm looking for a library that will allow me to resize the window (we want a layout similar to CodeSandbox). ans i have been trying to use this react-resizable library but didn't get anything from this nothing is working https://www.npmjs.com/package/react-resizable we want it exactly like this https://strml.github.io/react-resizable/examples/1.html...

CSSComb for nowadays SASS

i work for a long time now with a tool called CSSComb that allows me to order my CSS declarations in a content centric way - like this https://gist.github.com/awkale/ad46e2ade70e833fa178 Sadly over the years the maintainer of the project: https://github.com/csscomb There is stylelint, prettier and many other tools out there but nothing that works like CSSComb. ...

I want to extend builtin HTML element classes (I know why you shouldn't and cant)

class MyCanvas extends HTMLCanvasElement is obviously out of the question, but there's surely some hacky stuff we can do with .prototype. I can't figure it out though, at least not in such a way that TypeScript will agree with me. The general idea I'm thinking of is;...