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

What files can or should not be put into GitHub when you build your app?

Hello, since this is going to be my first time putting something into GitHub when building something with React to share to others... what files do I put? When I was only using html, css, and javascript it was very easy as I just put everything into the folder and BAM, it's in gitHub and working fine. Now that I'm using React, theres a node_modules, public, src, and build folders. There is also a package-lock, and package json files. There is so much other folders and files that I don't know which of theses of should I put into a folder so that publish into GitHub like, do I just put everything from the folder into github or do I only put the build folder? I'm kind of confused about that. Thanks in advance 🙂...

Help center the container without it breaking!

Project: https://benevolent-seahorse-6c9816.netlify.app/ If I do it the regular way with either display:flex or position:absolute with that weird transform centering way, it breaks, due to container having Grid I guess? Help centering it without that happening, while it still retaining responsiveness?...

track element in real time

can anyone tell me, if i have an element in my webpage that's moving how can i always keep an update of it's coordinates in real time basically js will always be looking for the coordinate of that element regardless of it moving or being stationary...

How do I get the audio to stop after x number of time

how do i get the the audio to stop after a 7 sec

ideas for tech with my project

I'm slowly coming up with ideas for the layout of the radio site redesign. What id like to do is make it extremely easy for them to update the content daily. Based ok how people are with tech in my area, the easier the better. I was thinking of building a tool that can convert something like a word doc of their daily updates that can parse the document, convert it to markdown then pass it to the website for a final review before publishing. I was thinking of using python to handle all that then letting svelte and the markdownx converting the markdown into html for the site. The issue im running into is the company being able to run python for it. After the design and site is built I want to purpose that and the tool with it. Any thoughts on handling the simplification with handling python? I'm thinking maybe an executable could work....

Inset and pseudo elements

Hi! Is there a way of setting the red stripe to be glued to the left side of the .content container (inset-inline-start)? I thought that the pseudo element, when container is position: relative; and pseudo element is position: absolute, would use the container as the layout referance, and not the viewport (or is it body / html?). Would love to avoid the position of the red stripe to be a magic number thing, especially for responsiveness ... ...

Cracked Design only in Instagram-Browser

Hey there one wired shit is going on. A customer of me had a strange instagram browser issue. Maybe anybody here can help. Randomly the instagram browser shows his website not responsive (but it is responsive). It happens not regularly and I cannot replicate this problem but customers of him reported it....

What are other solution to use @use in scss for retrieving nested class names?

I know using @import can work, but it is going to be deprecated, so I don't want to use that. Does anyone have any other solution? Example a nested class: ```css...

Nested aliases in node-sass create-react-app

Hey guys, I hate to be asking another question so soon but I've legitimately tried every avenue I could for figuring this out and can't find anything on Google, chatGPT, or stack overflow. I'm trying to aggregate partials into 1 partial file and use the variables from the aggregated partials in one file. Here is my Stack overflow post: https://stackoverflow.com/questions/75467857/how-to-correctly-access-nested-aliases-with-sass-node-sass-in-create-react-app?noredirect=1#comment133154900_75467857 Curious if anyone has any ideas?...

Scroll in absolute item with body overflow: hidden

Hey, I have a body with a fixed sidebar and a absolute main section. Both components are in the body which has a width of 100vw and a height of 100vh. The body has also overflow set to hidden. My Problem is now that when I am in the mobile view, I can scroll like 50vh further down and 50vw further to the side....

Honeypot for spam/best practice for mailto links

Evening! Just wondering if anyone has a good link/advice for cutting down spam for forms/mailto links? A while ago I read that for forms you can have some success with an invisible field which a bot will likely check - and filter based on that. I was also considering taking that IP and banning on the backend based on that range or something? (I run fail2ban on the server, but don't really know much about this) RE the mailto link - don't i have a similar problem here too in terms of exposing the email address?...

::before & ::after

Hi people! Two questions: 1. Why isn't my ::after showing up (or to be precise, why is it sized 0 x 0) 2. Why is the height of the ::before so tall?...

Debugging a Safari redrawing performance issue, causing finished animations to slow down rendering

I have a proof of concept for an interactive tool that leverages javascript to track mouse movement and update custom properties on the html element. There is some css that is centering a radial-gradient at the coordinates of the mouse. It's actually really performant in Firefox, Chrome and Edge. But it's very strained in Safari. In the timelines, I've tracked it down to power being used reapplying intro animations that have already completed. These are CSS animations that are applied to certain elements to make them popup when they are scrolled into view (they have animation-fill-mode:both set). When I turn off all those animations (e.g. just unset all animation-name on all elements), then the effect is very smooth again in Safari. And the intro are smooth when scrolling....

declaring and calling a function in one line strangeness

Can anyone explain, why this returns 'string'?
function testTwo() { return 'return'; }('string')
function testTwo() { return 'return'; }('string')
...

Passing in data to change Style/HTML

Ill start of by saying I'm very new to CSS/Website making. I'm trying to build a feature where I have a timeline of a day. it should also be possible to add different time slots, lunch break etc. https://codepen.io/d0kefish/pen/WNgNKjL...

Quick question on design token philosophy

(This might be better for ui/ux) I've recently read Brad Frost's Atomic Design and looked into design tokens. Really cool stuff and seems super useful for bigger projects/scalability. My question is, I'm not sure if I'm using it right. Should I go all in with every css property being a design token, or is it okay to use a mix of both, or other? For example:

Calculate the sum of elements in a matrix diagonally

I'm creating a function sum_diagonal(arr) to calculate the sum of elements in a matrix diagonally but when it reaches the center, the element is repeating. for example: 2 6 4 1 3 5 6 2 2...

CHANGE COLOR SVG

hi guys plz how can i change the color of an image with svg type????

Origin/anchor point for scaling

Is it possible to change the point towards where something scales? Ive set my font to 1vw (which might be stupid), and when I make the screen smaller, it seems it scales towards the top left. This is what it seems to be doing top is currently, bottom is what i'd want: https://i.imgur.com/qw7Espr.png Here's the example: ...