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

Idempotent vs Safe HTTP Methods

Hello, was just reading a bit about HTTP Methods. From what I've understood, a safe HTTP request/method is one that doesn't change anything. For example a GET will only retrieve information without changing their values. Similarly, the OPTIONS http method creates a request that ask the server what the client is allowed to do (used in preflight CORS). Now, idempotent means one that has no side effects. That is, it's a method that will always produce the same result. Here is where I have some confusion, when we talk about idempotent in this case, we are talking about how the values are sent?...

How does microservices work?

Hello, quick question, what are microservices? I hear that term often but didn't really understand, is it some kind of api that we call for third party services?

Same Origin Policy, CORS, browser to server and server to server communication

Hello, I was reading a bit about Same Origin Policy (SOP) and Cross Origin Resource Sharing (CORS). From what I have understood, a particular website can access data from its own origin (that is, same protocol use, same domain and same port number). For example if abcd.com tries to communicate with bank.com, the browser will block that request unless on the server-side of bank.com, CORS is enabled for abcd.com. Now, the reason why initially, we don't want any windows opened in the browser to be able to communicate/interact with another is to prevent malicious files from running and fetch data. For example, if abcd.com was allows to fetch data from bank.com, we could have fetch for e.g. user accounts and we don't want that. This is a communication from browser to server....

PHP Syntax Issue.

I wrote a script while running PHP 8.4. The server this is going to run on is using 8.2. I can't change it, it's not my website. There is, apparently, a syntax difference between 8.4 and 8.2 when it comes to dynamically filling in both which Enum type and which case of that Enum it is I'm wanting to use, and now chunks of what I wrote no longer work. I didn't realize this would happen at the time. All of that to say, this works in 8.4:...

"Focusable elements should have interactive semantics" when `:focus` is used to toggle a popup.

I'm working on adding a feature to my site where you can see what song I'm listening to via a small widget. In order to show what the name, album, and artists of the song, I added a popup which displays this information. It can be brought up by hovering the element or focusing onto it. In order to make this work without JS, I just use :focus/:hover with display:none/display:block, and set a [tabindex=0] so it can be focused. When I check my accessibility in Firefox's built in accessibility checker, I get a warning:
Keyboard
⚠️ Focusable elements should have interactive semantics.
Learn more...

Feedback on making navigation and hero sections responsive when managing a lot of content

I'm looking for different perspectives and ideas around making navigation and hero sections responsive when there is a ton of content to manage. The process is very time consuming. that part I do not mind. I want to get ideas from other developers' perspectives and see how they would tackle such a task. I would also be able to review my code and make sure I'm following proper standards. I attached an image to help provide detailed information about the navigation and hero section I'm referring t...
No description

Dropdowns

I have to make a custom dropdown with a custom design, since its almost impossible to style the select and option I would need to make a custom one without using the native select and option tag. I know there is ::picker and ::picker-icon now but can I already use this and is there a way to have similar result with firefox browsers without having to change much?...

Making my site responsive

Hello everyone, I made a website and tried to see it on my phone. But i was terrible. I don't really know how to make my website responsive. Could you guys help me?...

Problem with overflow-x

Hello, i have this custom inputs, but whenever i try to remove flex-wrap and add overflow-x, suddenly i need to scroll inside the filters container which is totally not what i want, i was wondering what is the cause of the issue, and how can i solve it code: https://codesandbox.io/p/sandbox/z442t7...

How does a web worker work?

Hello, we say javascript is single threaded, I was wondering how come that it's possible to run multiple web workers which act as different threads? What happens the the hood? Is it that our browser, built say in c++ has many threads available and each one is assigned to a particular thread? But still, our web page is still single threaded, no? Where do the other threads run?...

Idea for a project design for a shopping card

Hello, I want to build a kind of shopping card where we can add products, remove products, proceed to checkout, increase amount etc. Does anyone has a good UI recommendation that I can replicate? I don't want to build a full e-commerce website for now, I'm more concerned about the shopping card...

overflow-y auto does not work

Hi everyone, I'm trying to make the content scrollable using overflow-y-auto, but it's not working as expected. Here's my layout structure ```tsx <div className="grid h-dvh grid-rows-[auto_1fr] overflow-hidden"> <Header /> <div className="grid grid-flow-col grid-cols-[auto_1fr] grid-rows-1">...

Weird overflow

I'm confused: why is there an overflow and the scrollbar is displayed? The container only has a height of 20% and the margin is 2rem, which is way below the viewport height, right? https://jsfiddle.net/KonerDev/u8jb3fmk/4/ In the devtools it looks like the body has been shifted down by 2rem. I'd like to understand what's causing this problem? If I set the 2rem as padding on the body, everything works as intended....
No description

Span padding

Why the words that come before the span is covered by the span padding and background here is the word "paragraph" is covered but the words that comes after the span is not covered by the span padding and background and appears over it?
No description

Where to validate Mongoose Schema - Frontend or Backend?

I'm building a simple app with a login form and currently working on the backend. While creating the Mongoose schema to store user data, should I add validations like required, minLength, lowercase, match (for regex), etc., directly in the schema? Also, should I add similar validations in the frontend form as well β€” or is backend validation enough? Just want to understand what’s the best practice here: frontend, backend, or both?...

Grid auto-fill or auto-fit min and max-width?

Using grid-template-columns repeat(auto-fill, minmax(300px, 1fr)) gets me 75% of the way there But this still allows for the cards to grow too much, if i instead use a single value like grid-template-columns repeat(auto-fill, 300px) it is also almost what i want but now the columns will stay the same size without any shrinking/growth, using grid-template-columns repeat(auto-fill, minmax(300px, 1fr)) ...

Navbar Help- How can I move it to have a central and right position

As you can see here the nav bar is central, with the icons on the right
No description

Why do we have so many free hosting websites

Hello, there are many free hosting websites, like vercel, github pages etc. Why there are so many hosting websites? How are each one different from each other?...

Make button width be determined by text after text wraps

My button looks great until the screen width gets too small and then the button text starts wrapping. That’s fine but the problem is that the width of the button stays the same and so it looks like there is a ton of padding even though there is not and the element overflows because of that. A width of fit content works until that text wraps. How do I make fit content work even after the text wraps?