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

WEB SCRAPPING

"Lately, Iโ€™ve been doing some web scraping projects and spending time learning more about it, but I keep wondering if Iโ€™m wasting my time. Is web scraping actually useful for companies? Can I get a job with web scraping skills? And whatโ€™s the best language for it โ€” Python or Node.js? These questions are always on my mind. I wonder if anyone else has gone through the same thing.

WORDPRESS MIGRATIONS

I need to migrate a huge Database Mysql in wordpress for other wordpress like "dev.website" to actual website, but the DB is largee anyone knowss how to do it ?

Use of IndexedDB

Hello, I make use of session storage and local storage in one of my side projects but never make use of indexedDB. I'm currently learning a bit about it and just wanted to know where, when and why indexedDB can be helpul over session storage and local storage. Basically, from what I can see, it's like a NoSQL (kind of like mongoDB, which stores object store) database but it's a web storage. If anyone can share any use case where IndexedDB is prefered, would really appreciate....

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