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

Promises question

I have the following code: ```js function geocode(location) { geocoder = new google.maps.Geocoder();...

Real-time Chat Messages Not Appearing in Angular & Spring Boot Application

Hello everyone, I'm working on a chat application using Angular on the frontend and Spring Boot on the backend. The chat messages are not appearing in real-time for the recipient, even though the WebSocket connection seems to be established correctly. Here’s a summary of the setup and the issue: Problem Description...

please help me wrap my head around flex-basis (particularly flex-basis:0)

Ok so i understand flex-basis sets an initial starting point width for a flex item. In the case of flex-basis:0 though (or really any flex basis smaller than the min-content width) , doesn't this effectively just give flex items an initial width equal to their min-content width? (since they can't literally shrink lower than this). With this said, let's say i have 3 flex items with different intrinsic min-content widths, and I set them all to flex-basis:0 and flex-grow:1. How does this result in...

Match width sizing on flex containers?

I was wondering if anybody knew a neat way to grab the width of a flex-item container and apply it to a sibling flex container inside the same flex parent. I have a screenshot here showing a search component ("enter an address") and then below it a second component with a "browse" button. I was thinking there's got to be a simple way to make the browse button component as wide as the search input component. (Each component has the purple-gray background.) I am sure I could switch to grid or use a different flex solution, but I only want the browse component to match the width of the search input component, and for other siblings to flex the default way. CSS/SCSS for reference, the parent has: ```css align-items: center; display: flex;...
No description

<enhanced:img> in masonry layout

I am using <enhanced:img> and Svelte Bricks to create a masonry layout. The setup worked great with a standard <img> tag but had an atrocious Lighthouse score! Hence, I have switched to <enhanced:img>. Upon doing this, I switched my images from ./static/ to ./lib/ and also used Vite's import.meta.glob to correctly import the images. Once I did all this, with the code as below, I now get the RangeError: Invalid array length error when loading the images and I am unsure where it is coming from. The stack trace seems to suggest it is svelte-bricks so if that is the issue then I would be happy to switch to another lib. Here is a SvelteLab project But this is displaying different behaviours I think it is something to do with how SvelteLab works, but the same project gives the RangeError: Invalid array length error locally so make sure to run it locally!...

Giant White Space

Hello im new to this community. I need some help regarding this practice project as im rather new in web development and im learninh HTML and CSS. The problem im having is whever i add a new line of code to my html code, it keeps going down the more lines of code i add. When i move it to the right position using css, it just leaves a giant white space at the bottonm of the page. What can i do to fix this?
No description

vertical alignment for an element in the middle

Can anyone help me out to center vertically in the middle as i always fail to achieve this.(min-height is given in the requirement) https://codepen.io/kvandana451/pen/pomWzgK...

Button Hover switch effect

Hey! I wanted to ask what would be a way to achieve a hover effect when the buttons are hovered we the background and left border will look like switching from button to button; not just like fading in. It would be great help!
No description

Results summary component Frontend mentor

Hey, I decided to go back to basics in frontend web development so I did a level 1 Frontend mentor project. I would like feedback on the semantics of my HTML, the organisation of my CSS, and also my javascript if possible. Thank You (I couldn't put this on codepen because my javascript reads from a json file, and you need codepen pro to upload JSON files) So here's the link to:...

My div is bigger than the icon inside of it

I want the red div to have the same size as my icon, but for some reason it has this 'margin'. I already tried to use inline-flex, but it didn't solve, my div becomes the same size as my icon, but the space is still there. ...
No description

Scroll-snap and smooth scrolling

So I have this scroll snap and I am trying to use it and smooth scrolling going left and right. I have some code here but once I add scroll-snap it stops it from scrolling smoothly. Additionally how can I get rid of the scrollbar and have the same affect? ```css * { margin: 0;...

modal show/hide animation

check this code pen https://codepen.io/rohan031/pen/ZENJMar when i click outside the modal why does my closing animation behaves differently than when closing with esc or close button....

Can't center text after setting max-width

I wanted to center some text with them having a max-width of 65 characters but when I set max-width: 65; my text can't be centered and they go to the left of the screen ```css * { padding: 0;...

Images format

Can we still have a mix of webp and jpeg images ?

clamp()

can we use font-size: clamp(0.9rem, 1rem, 2.2rem);? but the syntax says font-size: clamp(0.9rem, 1vw, 2.2rem);...

Breaking out a descendent

Hey everyone, I've got this https://codepen.io/bbonsaye/pen/mdYMpKe I'm trying to make the section element take up the space given to the named grid column breakout. If I make it a sibling to article it can be done but I am wondering if I can do this while section is a descendent of main? I even tried doing it by applying subgrid to article but I just learned that article only aligns it's own grid lines to the parents grid lines, and doesn't inherit all of the parents grid lines....

Input not dissappearing

Was trying to make the input dissappear when the counter hit 0 but it doesnt work and nothing happens with it https://codepen.io/SirYido/pen/VwOzroq

Infinite horizontal scroll menu

Hi everyone! I'm looking for a bit of guidance on the following: I'd like to make an infinite horizontal scroll-menu, preferably where the middle "card" is a bit larger than the others. My absolute dream would be to create something like the (purple) image. However that was coded in GSAP and looks a bit too complicated for me. Hence I'm looking for alternatives. Do you have any tips/Youtube-vids on what do to next, without making it instantly complicated? What I have so far It's just a simple set-up so far. The second image is what it looks like at the moment. ...
No description

3D animation

Good evening Mr. Kevin , my name is Antonio, very nice to meet you. I'm Italian, sorry in advance for my English. I knew you from your YouTube channel (awesome) . Recently I checked out a movie and at the end of it there are some amazing 3D animation (for me) about the casts and production; I think it could be fun and amazing try to replace this with CSS (for me would be a dream) and I thought about You and Your amazing YouTube channel and what if it would be interesting for Tutorial or else !!...

Deployment

Idk what I'm doing wrong, but this won't deploy: https://github.com/General-Evie/food please help🥺...