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

when making a POST request, an extra key shows up in render.com logs where the BE API is deployed.

i am working on a project for my backend class. I built my backend using PostgresQL and Ruby on Rails for my API. I am having problems with my fetch request from my front end client to the API i deployed on render.com `` export const signinLandlord = async (email, password) => { return fetch(${baseApiUrl}/api/v1/auth/landlord`, {...

How to code this "fade gradient" on image bottom?

I always saw this on popular websites but don't know how to achieve it.

What's the best way to make angled corners?

here's an example: https://www.thetalosprinciple.com/ This fine specimen was made with a border image...

Suggestions on how to start or tackle this problem.

I want a UI that represents mapping and have the ability to do those mappings. With that in mind I am approaching the problem with SVGS. Some questions that comes to mind are, Can I mask my HTML codes with a SVG and have the HTML functions still executable when I click on the mask? Or should I create the entire environment in a SVG and have clickable rectangles. Here's an example of what I am trying to execute. https://codepen.io/Mamboleoo/pen/NWrBoep...

Firebase Dynamic Links

i am having problem with firebase if i visit any page on my website i get 404 error except "/" ``` { "hosting": { "public": "public",...

Canvas images animation

Hello guys! I need your advice! I've never worked with js canvas, but now, on my work i need to make an animation of spinning globe from 140+ images like it maked here: https://rnd.nlmk.com/ (scroll through main page to find the globe). How to implement something like that? I didn't found anything relative to this problem. I made it in react with simple image index change via state, but it's laggy a bit and not smooth on spinning. Any suggestions?

How can I achieve similar animations?

I really dig the waves wobbling animations when the user is scrolling, as well as how blood flows through the page when the menu is clicked (https://devilman-crybaby.com/). Is there a way to replicate this?

Grid Horizontal Scroll issue

I want horizontal scroll when screen size is 768px. The horizontal scroll works. But the issue is, there are 5 div in this example and the first div is not showing and is to the left size of the screen and hidden. Here in the pictures if you see. The 5 div with text Rank 1 to Rank 5 but when screen size reach to 768px the Rank 1 hidden to left size. TailwindCSS max-md:auto-cols-[minmax(12rem,auto)] max-md:grid-flow-col ...

[Vite] Loading CSS from `node_modules`

I want to load some CSS from node_modules/packagename/path/to/file.css into the HTML template file of my Vite project. Is this possible? If so, how? I'm in a SvelteKit project, if that changes anything. ...

horizontal to vertical bootstrap

https://codepen.io/AnthonyBAC/pen/jOeJxWY hI , Is there a way to go horizontal (big screen view) to change it to vertical on mobile devices...

Bond with the nearest ball.

https://codepen.io/-bloop-/pen/jOeJzqr in this given codepen, u can see there's 30 balls each with their respective x and y velocity. the intention of the code was to make so that each ball forms a bond with it's nearest ball. But apart from the first ball, all of the balls don't actually create a bond with it's nearest one unless a ball is very very close to it. Does anyone how why it happens or how I can tackle this? I've added descriptive comments in my code so it'll be easier to understand what each codeblock does. tnx ā¤ļø...

how to identify differences between Server and Client component in Next Js 13

Hey guys just learning next js 13 and installed material ui library for pre build component. I have a small doubt using it as NEXT is about server and client components. Lets say I have created a custom theme provider component using material UI. And next js does not allow to use material ui component with server component so I make it client component with (ā€˜use client ā€˜) and later wrapped all the children component that is on layout.js file with custom theme provider component that I created before. ...

center items in a list while pushing other items to the right

Like i said in the title i want to centre the "home" and "catalogue" in the page centre (like how the logo is centered) but i also want to push the cart and other icons over to the right, this is the best i could manage to do with margin autos

Conditional formatting with vanilla CSS?

Can anyone point me to a function or property that will help me conditionally render styling based on how many elements a user elects to display on the page? I've been combing MDN and Youtube, but I haven't found anything satisfying. I am doing a side project with a friend that displays turn-timers for card or board games. The user selects the number of players and then navigates to a page with that many timers (one for each player). I am looking for a solution beyond implementing a single flexbox/grid implementation. I wish I could find the CSS equivalent to the switch statement in JavaScript 😭
I'd like to independently style what a 5 person gameboard+timers looks like, vs a 2 person or a 10 person. I feel that displays would look better in a round shape, some better as four squares in larger square, some better with space in the middle and the elements along the outside of a centered, empty shape. Maybe I'm asking too much of the language? If my descriptions are too confusing, let me know and I will draw out some diagrams. Thank you in advance šŸ™...

Svg animations

Can someone explain what’s the best way to make animations using svg’s I genuinely can’t understand it and none of the videos I watch really help me , how do I get assets how does it work Etcetc

How to make grid go next row like flex-wrap of flexbox?

```css .gallery-page { display: grid; grid-template-columns: auto; grid-auto-flow: column;...

Pseudo On Visited Link

I want the pseudo element to disappear when a link is visited but it's not working. I could be doing something wrong. Need help. https://codepen.io/Arslan-Akbar/pen/mdzvgzB...

interactive mirror

how to make a mirror like this and make it interactive? I want it to expand to the front as transition to the next page. https://www.awwwards.com/sites/cartier-watches-and-wonders...