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

Oothman

9/12/2024

How to align top of picture with header title?

Hey everybody, I'm a beginner software dev and I'm currently working on a practice flexbox project, I wanted the top of my image to line up exactly with my header title "Heroes for Hire" and I can't think of a way to do this although I'm sure there is, anybody able to help? Here is a pen: https://codepen.io/Oothman/pen/MWMRwGB

smackalpha

9/12/2024

how to create protected routes in Nextjs 14 on client side

I am creating a next app. In there, i have login, home pages at all. I created one Authentication file for protecting pages Authentication code: https://controlc.com/75886140 and i wrapped this in _app.js...

Islandstone

9/11/2024

Fonts will not load correctly

Hi everyone. I'm doing a "mockup" of parts of a website of a festival I attend every year. On my local server (via Live Server VS Code Extension) both the images and the fonts load correctly. However, on the github pages I only get "404 Not Found" for the fonts. I checked the "Network" tab in DevTools, and it shows that the request URL for some reason doesn't find the root folder when loading the fonts. It is missing the repo name from the URL. I've been trying for a while now, experimenting with how I reference the fonts in my _fonts.scss file, to no avail. Hope someone here can figure out the exact issue. Thanks!...

Bret

9/11/2024

Detecting language via JavaScript (i18n) best practices

Hey all! I have a site that uses navigator.languages to redirect a certain route to a locale-specific route (English to /en, Spanish to /es, Spanish (Latin America) to /es-latam, etc) and am curious about best practices. Using the Sensors/Location tab in Chrome, I am able to change locale to test that it works properly. It seems to be fine in this perfect environment, where navigator.languages only returns a single locale. However, I sent it to a friend in Mexico, and it defaulted to English for him. It turns out his browser has navigator.languages set to ['en-US', 'en', 'es']....

Vandana

9/11/2024

Condition overlaps?

```if (randomNum >= 0 && randomNum <= 1 / 3) { compMove = 'Rock'; } else if (randomNum > 1 / 3 && randomNum <= 2 / 3) { compMove = 'Paper';...

utku

9/11/2024

Why does setting `min-width: fit-content` on grid item influences the width of the sibling?

In this pen, there is a title, description and horizontal images. If you view it in a screen that's between 1024 and 1660 pixels wide, you should observe that the horizontal images (ID "social-media-images") overflow their container, which is a grid. The width of the "social-media-images" should stay fixed at 1660 pixels as long as the screen width is like described above. At the same time, it's above sibling (the element that wraps the text) has the same width (1660 pixels). Now, if I set the min-width of this "social-media-images" element to fit-content, the "social-media-images" element still overflows its container (it still has a width of 1660 pixels). However, it's above sibling now becomes as wide as its container (which is the grid element). Can you explain what's going on here? Why does setting the min-width of a grid item influences the width of a sibling, while not influencing the width of the element that it is set on? Why was the text container initially as wide as the "social-media-images" elements but upon setting min-width on "social-media-images" elements, the text container now shrunk to fit the container?...

Arrowzzz

9/11/2024

Why is .column2 having a height greater than what its children size is?

https://codepen.io/AccurateArrowz/pen/LYKqPON?editors=1100

Raskin

9/11/2024

background positioned paragraph is above hamburger menu

I have an issue with my hamburger menu not covering up the paragraph that is positioned in the middle of the background image. Could some one please tell me what i'm doing wrong? Google hasn't helped ``` .paragraph { color: rgb(255, 255, 255); font-family: Zilla Slab;...

Rochelin

9/10/2024

Help fix animation flip timer

Hello everyone, I'm working on a project and I'm having trouble finding a solution. My project is to make an animation of flipping through a page of a book on a Timer (flip timer). To test my animation, I tested it on the seconds. The problem is that the animation isn't synchronized with the change of second, so it runs twice as fast....

Kypac

9/10/2024

Nth child not selecting.

I'm trying to select the first div and move it around with position absolute https://codepen.io/eforempanada/pen/WNqmRpP...

snxxwyy

9/10/2024

regulated css vs @layer and @scope

Hey, what's a major difference between using regulated css and @layer/@scope? With @layer, if you generally make sure values don't clash and add exceptions for cases where they might then @layer seems like extra work to me? The same with @scope, rather than saying "make all text from a to b orange", then you could wrap the contents of a to b in a utility class called "text-orange" or something, at least that's what i've commonly seen used. All in all they both seem like more work? I'd appreciate...

Scott Borrowman

9/10/2024

Question about Vuejs and disabled links

I'm currently doing an ADA assessment on a project that is failing on their disabled links because the html rendered is <a disabled="disable"> instead of <a disabled> As far as I can tell, this is how Vuejs renders it because even if I change the <a v-bind:disabled="disabledValue"> to just hard code the <a disabled> Vuejs still seems to change it to <a disabled="disable"> Does anyone know if this is just how Vuejs handles its boolean attributes and if so is there a way around it? I've never used Vuejs before so I'm assuming I'm just missing something....

AbhijithB

9/10/2024

Why aren't the margins collapsing?

Can anyone explain why the margin of each sibling MUI TextField components aren't collapsed? sandbox link - https://codesandbox.io/p/sandbox/c3kptp?file=%2Fsrc%2FApp.tsx%3A10%2C24 ...

vexatyious

9/10/2024

Looking for a resource / tutorial on how to add interactive maps on website.

I am trying to add a section where if u click on a country, the map interacts, however with a simple png, i cant do much, where can i find svg or interactive maps for free to add it in my website? Something like in the image beside. Or maybe when I hover over a country name, the country should highlight.

kikuti

9/10/2024

How to maintain the proportions of an SVG across different screen sizes? (1920x1080 / 1440x900/ ...)

I want the SVG to always stay in the same position with the wave touching the exclamation point. Can someone help me, please? ```html <!DOCTYPE html> <html lang="pt-BR">...

VXLN

9/9/2024

Infinite scroller switches direction mid way through

Hey I'm trying to make a animation for a case opening component, for some reason it seems to switch direction mid way through, another thing is my approach right now might seem wrong as I need to make it stop at where ever the winning item is (in the centre) and I'm not sure how I'd approach that either

theboyduddus

9/9/2024

Issue from kevin's css course building a space travel website

why are my colors not working? https://codepen.io/Adhurim-Gashi/pen/rNEPwwL...

snxxwyy

9/8/2024

forcefully make items wrap with flex-wrap

Hey, it's been a while since i've taken a look at anything frontend related, so i'd like to double check something. given that you have some items in a flex container with flex-wrap applied: 1. If you wanted to make a specific item wrap at a certain point/width, what would be the best practice for that again? i believe giving the item a min-width could cause problems as there's no value you could put that wouldn't potentially cause overflow? Unless that was the right method? ...

vic

9/8/2024

Rendering components in reactjs

I have 4 component in app.jsx <Component 1 /> <Component 2 /> <Component 3/>...

Vishwa Teja Reddy

9/8/2024

horizontal scroll

actually i am working on my portfolio website i want to scroll through different section of my page, i used this : html{ horizontal-scroll: smooth;...

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 🙂.