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

Recommended articles section

This might be a stupid question because I don't know any better, but on blogs/brochure websites where at the bottom of an article - where they have 3 or 4 recommended articles... how does that get coded? Obviously it would depend on the implementation, but would it be unprofessional to just hardcode it in? Since I'm working with Astro, there's probably an easier way to do this as well (collections, just pull 3 random articles from a collection of articles, but that would change on every pageload so I don't think that would work all too well...)...

I would like some constructive feedback

I am currently doing the Frontend Mentor Challenge "Age Calculator" (https://www.frontendmentor.io/challenges/age-calculator-app-dF9DFFpj-Q) and I'd appreciate some constructive feedback about my CSS and JavaScript: https://codepen.io/lena-s98/pen/GRPGXOe But please avoid opinionated feedback like "Don't use comments", etc ... I'm struggling to get the age calculation to work correctly. Maybe someone can nudge me into the right direction ๐Ÿ™‚...

web page lines in nextJS

can anyone explain me what causes theses lines to appear? even if i only have a p tag and button tag
No description

RegExp with g flag with weird behaviour. why?

i was debugging a bug and found this incredibly weird behaviour with a regex. the following code was returning false on things that obviously match: ```js var regex = new RegExp('a', 'g');...

How to achieve this

So this bed room background is my hero image. I want to transition between different wall images (wall behind bed) keeping bed room same, i just want to transition between different walls. Offcourse one way to make this would be make wall transparent and transition different wall background even so, how to make that wall wallpaper match that angle of the wall.
No description

setup redux in react app

can someone help me setup redux in react app i am having trouble doing it

Overflow on my page

HI everyone I realize this page I have an overflow I don t understand what is going wrong https://codepen.io/alpha_66/pen/abPaKpq THANKS by advance....

Changing text depending on url data

Hi is it possible to change text in specific <p> elements depending on the url data? Example: ?period=quarter&periodnr=2&year=2023...

problem with images not containing in the divs

https://vellankiindeevar.blogspot.com/ if you see this site in responsive and mobile-m the images which are more width come out of the div

Anyone help me to breakdown these cool effect

Website --> https://lmpixels.com/wp/kerge-wp/#about-me Yesterday I visited above website in that has a nice transition effects when the page is change . ie: when I click contact in the side nav there is a cube like transition effects . How to achieve these cool effect
...

svelte multiple api calls with subsequent click on a button?

It seems that when using electron api each individual press of a button calls the api function x+1 times where x is the times you've pressed the button prior.

picture tag

Hello, there's any tutorial on how to make a horizontal full page website?

Multiple-level dropdown navbar

Hey guys, I've done this before but it was really convoluted. I was wondering if there was a simple, professional, & accessible way to make a multiple-level dropdown. I'm looking for codepends/articles/youtube videos that can help me with this....
No description

Form submitting

How to succesfully preventdefault ? I've tried a variety of things but it keeps refreshing the page afterwards
No description

Why is my TRY ... CATCH not working?

My CATCH is not catching the error, what am I doing wrong please? HTML ``` <!DOCTYPE html>...

Object method not working

Hi, so if you see my image, for some my method is not working, I have already looked online (Checked few websites, w3schools had an example, this is exactly that, but instead of const object{...} I did Function Object(args){methods and properties}) If I just look for the property using console.log(admin.getAccesKey) it claims it is undefined.... Could someone please point out to me what I did wrong? I feel like it'd probably be something stupidly small but I just can't seem to figure it out This is all there is to the code btw, I am simply testing it out first before going on to the next step...But on step 1 its already going wrong xd...
No description

React Too Many Errors

I tried doing npx create-react-app my-react-app and i got many errors then i tried npm audit fix --force and i got even more, what could it be?
No description

Sidebar layout with intrinsic collapsing grid, CSS-only

I'm trying to make an intrinsic and responsive sidebar design. All the no-media query responsive tutorials that I could find (eg. https://css-tricks.com/responsive-layouts-fewer-media-queries/) have the grid columns the same width, but I'd like the first column to be narrower. Of course this can be done with flexbox (https://every-layout.dev/layouts/sidebar/), but only with 2 layout items??? In the collapsed form I'd like:
1. logo/title bar 2. main content 3. navigation 4. footer...

How would you animate this sidebar toggle?

As you can see I try to use display: none, and it's working fine, because mainMenu expands to full width, but when i use display: none, it doesn't animate smoothly, I have transition: translate 200ms ease-in-out; in my sideMenu element
No description

Animation: Rotate In on Open and Rotate Out Reverse on Close: asking for Feedback

I made this animation, and everything works I as want, but turns it's move complicated then I assumed and it took way more code than I expected. Therefore I just wonder is there a better way to do the same, more efficiently? Please, let me know if you know! Codepen: https://codepen.io/JunSu-Ho/pen/JjwBLwK...