KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

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

anes039

2/19/2024

Cors Error

const [dogData,setDogData] = useState([]); const express = require('express'); const app = express(); const cors = require('cors');...

Igor Petrovic Design

2/19/2024

Why browsers show elements bigger than defined in CSS

The developer has implemented my design. The logo is intended to be 180 x 180 px. In Inspector it indeed reads 180 x 180 as the rendered size, but using Screen Ruler (Windows Power Tools) I measured 225 x 225 px, which is 1.25 times bigger. Then I made a test HTML/CSS project, put div to be 100x100px and it is also 125 x 125 px on my screen when opened in Chrome and Firefox. My screen is 1920 x 1080px with 16.1 in diagonal, which gives around 137 PPI. Why the object size is bigger in the browser than defined, and does screen resolution and PPI affect this?...

unemployed

2/19/2024

Need help from anyone with safari browser on their iphone would like to know if my site UI looks ok

website: https://nasa-image.onrender.com issue: a friend of mine (from japan) is getting stretched out images and UI is looking horrible in his phone Thing is he is the only one I knew who have an iPhone however he is not an web dev I'm stuck and don't know how to solve this...

naman

2/19/2024

Setting barba.js

how to I setup barba up using the the functions mentioned below? I've added the comments on what each one does ```function delay(n) { n = n || 1500; return new Promise((done) => ...

Psyzen

2/18/2024

Scrollbar margin disappears ?

Does anyone know how to fix this ? When I refresh page multiple times the white corner appears + horizontal scrollbar + vertical scroll bar left margin disappears. In one of the images you can see that it is not all the time. When I hover over side navigation bar, the navigation bar expands and it fixes itself or when I go to developer tools. Not sure what causes this. I use for scrollbar overflow-y: auto + max-height as 100vh - 5.125rem because of margins and borders...

FryBlaster

2/18/2024

Why picture isn't taking full height?

Hi everyone, hope you're doin well! 🙂 I'm actually testing myself with some challenges on frontend mentor, and I was struggling a little bit with this one in the image. I took inspiration from Kevin's video for some things (like accessibility classes), but I want to try a different approach rather than using grid (just to do some practice)...

Irfandeva

2/18/2024

How can I set browser url manually in react js

I'm using outlet component to render child components, I have also set up ProtectedRout component which wraps <Outlet> component, ProtectedRout returns children component if isAuthenticated is true and returns <Login/> components if it is false, It works without any problem, Since I'm directly returning login component instead of using <Navigate to ="/login/> the url in the browser address bar doesn't change, but I want it to be mydomain/login, How can I achieve this? const ProtectedRout = ({children})=>{ const {isAuthenticated}= useAuth()...

naman

2/18/2024

GLB model not displaying in three.js

Hi all, I am trying to import a model and display it on my canvas, but it doesn't seem to work. What am i doing wrong? ```import "./index.css"; import * as THREE from "three"; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; console.log( GLTFLoader );...

4rielF

2/18/2024

angular landing page

Hi, I'm working on a project, and the initial page serves as a landing page. It's my first time creating a landing page, so I have some questions. Since a landing page typically consists of multiple sections, is it recommended to separate each section into different components and then display all components within a pageComponent? Or is it preferable to include everything in the same HTML file and differentiate the content using section tags, for example? For now, the content is all static and its working with the first aproach, but will I be able to manage scroll animations correctly? I recently watched the video "Incredible scroll-based animations with CSS-only" , and I found it very interesting to apply in the near future, so i want to modify as little as posible when implementing this Thanks!...

francis

2/17/2024

Content Width on Websites

I'm curious why content on certain websites doesn't expand beyond a certain width on larger screens. Is this intentionally designed as part of responsive design, or is there another common practice for controlling the maximum width of content?

yuki_toki

2/17/2024

Remove default margin/padding on elements;

hi, is there a proper way to turn off default margin and padding on html elements; I set both to 0 in the body tag but notice some children h1,p,ul tags still apply theirs. I don't want to override it each time for each scenario. is there a better way?

nookayisee

2/17/2024

Is it possible to animate components based on layout changes as opposed to change in CSS value?

My flex container has two flex item. I am hiding the left flex item on the click event but when this happens, I would like the right component to animate when it takes the entire space of the flex container. Right now, it just snaps into place instead of doing an expanding animation. ```jsx <Box sx={{ display: 'flex', border: 'solid red 3px', width: '100%' }}> ...

maxK997

2/16/2024

animation-timeline works only with scroll(root)

I am getting familliar with new CSS-based animation. I followed Kevin's tutorial and I tried to replicate stuff, but animation seems to work only with animation-timeline: scroll(root); animation-timeline: view() produces very weird results for example with translateX, but nothing moves nowhere no matter the scroll. scroll(root) get things to work but it works for me only on my hero section because it is always on top and it is 100vh tall, but when I want to make some images to appear, I can't get it to work as expected....

NZAA

2/16/2024

How to blend out a image?

I'm trying to achieve something like this with a photo. What's the best way to try this? https://i.pinimg.com/originals/f5/04/9d/f5049d576c1c03cc1ce79fe8ff835b37.jpg

Almopt

2/16/2024

How to remove an eventListener with a listener using .bind()

Hi guys, does anyone have an idea how can I overcome this problem?

mtt-4242

2/16/2024

dialog toaster

Hi 👋 I'm was hoping to create a toaster that works with showModal dialog. The toaster is a popover element. It is outside the dialog and opened after the dialog element. Even if the last element of the top layer stack is visible, that doesn't seem to be the case for the ::backdrop....

Juan Ierace

2/16/2024

Does anyone know how to make an animation like this?

Krazydog

2/16/2024

Overlay size

How can I make the overlay always same size as the image? The overlay is the eye image

rumbelina

2/16/2024

How can I expand each box wider with flex-grow?

https://codepen.io/mycenas/pen/NWJodRE I have created 4 rows of 3 boxes with flex, and on click a flex-grow property is applied. No matter how much I increase the number, the boxes will only expand a small amount. I want the clicked box to expand to take up approx 2/3rds of the row, and the other 3 boxes on the row shrink to accommodate it....

Stan Long

2/16/2024

Adding data-bs-slide-to

Hi everyone, was wondering on how I can add a data-bs-slide-to-(number increases by one everytime I click on a button) into a li tag. Here's the HTML code <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-bs-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>...

Previous Next

Gaming

Programming

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.