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

Cool effect I have no idea why it's happening

I accidentally made this cool effect, but the problem is, I have no clue why it happens or how to reproduce just the effect. The intended use of the thing I made is basically turning text into a bunch of dots that the cursor can move about (inspired by igloo.inc). The effect is on https://shenanigans.shoghisimon.ca/collection/textdots/ and can be seen if you click the Presets > Cool Effect that I have no king clue how to replicate button if anyone has any hint of an idea, I'd be very appreciative. I suspect it might be due to the shader and/or browser shenanigans, but I'm not sure...

How to create stacking order where 2 different elements can legitimately be on top of each other?

The images show what I'm building and trying to fix. 1. Normal layout with a tooltip which correctly overlaps the 'Home' dropdown control. 2. Having clicked on the dropdown control, all the buttons that have a tooltip are still shown higher. In this situation the dropdown should be on top. I've read articles on stacking context, and seen 2 of KP's videos. But I'm still unsure if what I want is even possible, let alone how....
No description

Why most companies use react not other frameworks?

Others like vue, svelte I saw most job description mentioned react and angular not others...

Font is not working

On one of the FEM challenges I had to use a font But on a wierd way I does not work Can anyone look what is wrong with my css file : https://github.com/RoelofWobben/blog-preview-card2/blob/main/style.css LIve site : https://roelofwobben.github.io/blog-preview-card2/...

What is going wrong here ? Layout is a mess

Hello, I have this so far : https://codepen.io/RoelofWobben/pen/MYYjYKN And it want to look like this : ...
No description

Help me recreating Mac Genie Effect

https://codepen.io/ahad4387/pen/zxxWozN (my pen) I'm trying to recreate the closing genie effect when I click on the delete icon. I was able to get it till this point. it's scaling down and fading away. ...

When should I use em and %?

After reading about the topic and watching some videos from Kevin, I think I should use em for margins and paddings. I'm using % for input widths to make them responsive, but I'm not sure if that's the best approach. Do you have some real-world examples of when to use em and %?...

does grid css has flex-direction: column/row reverse option

does grid css has flex-direction: column/row reverse option

unable to design simple UI of dice game.

i'm working for a casino took a contract but looks like my UI design spirit is dead and like i'm unable to design anything as i was off for 10 days cause of exams. this is the ui i designed and i hate it, i tried to search on google for inspirations but i was only getting in gaming style but not in luxury style as this platform is luxury crypto casino. is there any ui designers here ? who can help me out ? thank you for reading and helping i appreciate it....
No description

What does this JavaScript do?

I'm trying to add a simple collapsing section to my website. I don't know JS at all yet. Does this script reference content only within the same file? That seems to be my problem, but I'm unable to confirm. The function seems to break when I move the CSS to the CSS file rather than having it in the same file as the script. I'm willing to figure out enough JS on my own to fix it, but I'd rather not go through all that effort if that's not even the problem to begin with. It's from W3S https://www.w3schools.com/howto/howto_js_collapsible.asp ...
No description

React -> Vue Comparison

```js import CoreConcept from './CoreConcept.jsx'; import { CORE_CONCEPTS } from '../data.js'; export default function CoreConcepts() {...

CSS => Too Complicated 😡

I'm a Web-Developer for about 4 years now and I love every aspect of it except for CSS. Don't get me wrong I do like CSS because it has so many possibilities. But that is kind of the problem. I'm currently building my own website and I'm struggling on how to setup my CSS. I'm developing all native but I was thinking switching to Bootstrap or something because designing isn't my specialty. I wanna start my CSS from zero so that all user agent styles are gone for my website but I also want to keep my CSS as little as possible. My head is currently exploding right now because I'm wasting time with this overcomplicated and stupid CSS language. Summary: I just want an easy and effective way to write CSS code without any issues with user agent styles and responsiveness....

Building multi-tenant applications

Hello folks. I need some help with tech decision I'm about to make. I'm less experienced, so inputs from the more experienced folks will be invaluable. I lead a very small team and we're in the very very early stage of the product we're building. It's meant to be a multi-tenant SaaS app, related to healthcare. We expect our customers to have their own users, activity logs and so on (multi-tenant). The tech decision I'm trying to make right now is which database to go with. I already setup postgres with our backend, so we isolate each org's data by postgres schema. But lately I've been thinking about the scalability of the system and after doing a little research, I'm finding that traditional sql databases are not that easy to scale, especially horizontally. I'd have to look at efficiently implementing sharding at that point. I'm tempted to forgo it for now as we literally have no users yet, but I also don't want to do something that would come back and cause the product harm in the future. I don't want to let my team down or incur unnecessary tech debt for everyone. This is the first time I am building such a service, that is, a multi-tenant application like this, so I'd like to know how best to approach this. How are these types handled in the industry nowadays? I hear nosql dbs, like mongodb, are easier to scale horizontally, but I don't know. ...

Web Dev concepts/tools - what's essential, and what's optional?

I won't lie, this is an LLM effort (you can see that by reading it), though I've given it as much input as I can... SO... because reading into this is getting overwhelming.. let's discuss! High Priority HTML5 – Semantic structure, forms, accessibility basics....

grid same height for second block via aspect ratio

```html <div class="grid grid-cols-[5fr_3fr] gap-10"> <div class="h-full overflow-hidden"></div> <div class="aspect-[4/5] border border-(--_color) rounded-4xl p-3">...

Why big data storage medium like data lake, data warehouse and data lakehouse matters

Hello all, I have a question: I was reading a bit about big data in general and often, I came across the terms data lake, data warehouse and data lakehouse. I know each storage medium have their way of storing data, for example, from what I've read, data lake is more suitable to store unstructured data while data warehouse is more suitable for structured data while data lakehouse involves both....

CSS Vertical Text Alignment

I haven't messed with my website in a few months and I've been sick for 2 weeks. Trying to add a new section of buttons and my brain is frying trying to get the text to align. 😭 ``` .nav2{ background-color: #1C1C1C;...
No description

Setting overflow on child cuts off content and removes scroll behavior of nested grid

I have an (horizontal) overflow of hidden and some ellipses on some child inside a grid inside an other grid (or flex, doesn't matter), which squishes the content and thus removes the (vertical) scroll behavior of the inner grid. Removing the grid/flex from the outer container produces normal scroll, but then I can't distribute the height of the inner grids. Removing the overflow from the child also restores scroll behavior, but then I'm not responsive to long text and/or a narrow window. I've created a minimal reproduction here: https://play.vuejs.org/#eNrtV02P0zAQ/SuWTyA1LVC4hFAEqKDlwKJlJS65eO1p413HtmynyWrV/87kq23aqnwcUXKazJt582Ymspwn+sHa6aYAGtMkQG4VC7BIdaoJSYTcEK6Y9+9Sel0EcF+cFClFmOAzgK+0PoKPAm5MiVDiLdOLZWWBBxDJrHn9C+cMKUf+kX/kH/n/c/6B/c9H7c/bz+8HFS86/qy9kXPkHDlHzt9y7u3eSmaDO2biw6OqTUKmuwsmeWqzhfQY+RiTlYLqbeurzUhIh4emNDom3Kgi1x24xuSo54+cKX1MXq0cma9cH8EsumzLtm1vuQeFF1hz05c3G3ArZcoIFXjujFIdyZ1xAlxMXtqKeKMw704x/jDg3J3RJ83UIs/qbVtByQ4ssPBsPiGsCOZ5F5yzKspArrOAHbx5cdTDvt6CTHF3J2W50QF08OezYtx6iHgmlSD1Fk9mUMUkk0JAP+oykygZQznERJvSMdshAaoQ9XkxAaWk9bCri19Js3I6ocGjqJVcT++90fj70dRMKTe5lQrcta1X7FMa92pSyhSSfm18wRUw6f08A/5wxn/vq9qX0u8OPLgNpHSHBebWEFp4+eMbyj4AcyMKhdEXwBvA5Re1xjbsY6EFyj6Ia9Re5da4IPX61i8rXIHvm6qFNkNp4lOK/2CfLrS+lzufvu6GuaXbX2BikOQ= The vue part is irelevant, it's just a nice rapid prototyping playground with everything included in the url 🙂 How can I work around this unexpected behavior?...

Simple clock

Hello Can someone help me why it is not working? https://codepen.io/lanszelot/pen/yyyzPwL...