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

Is it possible to animate filter: blur with ViewTransition?

I am using viewtransitions to animate opening an image to fullscreen, but can't find any way to get the backdrop with filter: blur applied to animate via viewtransitions. I am trying to achieve a fade-in effect. I could get it working with regular colored background with animating the opacity, but not with blur filter (same approach, tried to animate opacity from 0 to 1)

Help on a very simple react project

I am very new to react, and I want to build a simple horizontal timeline(preferably with adjustable ticks - years, months, days). I will have people data like name, age, role, etc.. and also quit_date and an avatar. I would want to put the avatars on the timeline according to their quit date. The timeline should be able to scroll endlessly left and right, and when an avatar is clicked the data about this person will be shown on a side drawer or something. I am not sure if I should use existing timeline components or build my own, but I would like to finish this project as fast as possible. I am not sure where to start in general, any help would be highly appreciated 馃檪...

Should I start my database connection on server start?

Hello, quick question, I'm working on my back-end code for my product page website. My question is when connecting with my database (mongoDB in this case), I was wondering, as soon as the server starts, should we connect the database and then we just add functions to query it when needed Or we implement a connection string in each function. That is for example, consider this code: ```js...

How can a temporary variable be "saved" inside an event handler

Hello, quick question, consider the following code: ```html <h3>Click these buttons (Created with 'let'):</h3> <div id="let-container"></div>...

Content security policy and default-src

Hello, I'm currently using express to serve my html files from a static directory but it seem my index.html web page isn't being served; I have the error cannot get \ and in the console, this error: Refused to connect to http://localhost:8080/ because it violates the following Content Security Policy directive (connect-src) here is my code:...

Sticky footer with CSS grid with an unknown number of children?

Sticky footers with display: flex; flex-direction: column; min-height: 100dvh; on the body and a bottom element with margin-block-start: auto; are well known. From time to time, one also sees css grid used, for example with display: grid; grid-template-rows: auto 1fr auto; min-height: 100dvh; on the body to allow the main section to expand between native height header and footer elements. See this simple flems.io code example [a short-link to stay within discord's post length limit]. Is there a way of doing this with CSS grid when you don't know how many elements there are between the header and footer? As in, for example, this expanded flems.io code sample [short-link] with an additional breadcrumb nav and pre-footer div added to the mix. The background: I was experimenting with Ana Tudor's Super Simple Full-Bleed & Breakout Styles as an interesting means of potentially dispensing with wrapper containers inside full-width elements. Her example is long, and she sets display: grid; on the body tag, which means using display: flex to achieve a sticky footer is not an option without wrapping the entire page in an additional wrapper div. ...

KPow vid: glow behind card only where cursor is hovering

I cannot find this video!! I saw a thumbnail recently in my suggested and now it鈥檚 nowhere to be found. It was a grid of cards with semi-transparency and when you hovered the border glowed only where you were hovering and reflected onto other cards borders...

Hosting both front-end and back-end on github pages and render respectively

Hello, quick question, I need to build a website and host it on github pages for the front-end and render for the back-end. My first question is, how does the communication takes place here? Like how does render know how to communicate with github pages to fetch my index.html? Now, normally, I'm working locally, I have 2 folder, front-end and back-end....

How to use dynamic viewport units with a fallback in tailwindCSS?

<div className="h-screen h-[100dvh]</div>
<div className="h-screen h-[100dvh]</div>
heres what im trying to do, i recently came across dynamic viewport units that take into account the address bar on phone browsers! ...

How to serve private images (any backend framework) but particularly NestJS

this is not necessary to anything im currently working on but just curious to know, since i tried this before in firebase and failed miserably, im wordering if a dedicated backend can solve this, while i know how to serve public assests in a public uploads folder, i am wondering how do we control the access of these images to the owner, let say we have a get posts api endpoint the get posts will obviously use the token to check the request and return the posts array among the attributes will be the image url, that images url is public and even if the post is private once the url is leaked there is no stopping any user from copy pasting that url in the browser and see the image and they have to be like that from my research so the <img> element can render the image i've found that i can create a url that will expire in a matter of 2 minutes, but im not convinced about that method, any ideas how to approach this?...

405 Error for POST request

I'm working through a Coding Train tutorial on data and APIs, but I got to a point where I keep getting a 405 error when trying to make a POST request. index.js: ```js const express = require('express');...

Why is justify-self not working at certain widths?

I have a simplified non-working example at https://codepen.io/thejgc/pen/zxqvzOa of a grid layout. At most widths it works fine, with the preText class (here with added blue highlighting) is right-aligning its content nicely with justify-self: end;. But when the window is narrowed, and the text in the class has to wrap, the alignment seems to stop working. I have tried justify-self: flex-end; and justify-self: self-end; as well, but neither work. What am I missing?...
No description

How to debug in the back-end

Hello, I just realised that I never make use of debugging tools when it comes to web development. Every time I use console log statements and this might not be the best way to debug things especially if things get really complex. I was reading a bit how to debug JS files in the front-end, I grasp the concept. But for back-end, when a server is running, is there a way to debug in these scenarios pls...

CSS Full-bleed effect stacking issue

I was using this CSS full-bleed approach for having background on contained elements: https://www.youtube.com/watch?v=81pnuZFarRw ```css .full-bleed-bg {...

2 elements in header: <nav> + <div>. Can I perfectly center the nav or it will be slightly off?

Does Inspect Tool allow me to check if something is perfectly centered? Working on a project and it feels that the nav is not centered despite going margin auto. I've no clue where to post NEXT files, so I just recreated it on codepen: Codepen: https://codepen.io/NotNegative/pen/LENpmOb...
No description

I need some help with this chat box...

Hi, I need to do the following things: I want the first message on the left and the second one on the right. You know like a usual chat and then I would like to have my input where the users type expand to a certain max to then become scrollable. So far I tried to play around with grid stuff but I just can't make it and regarding the input I know I should use textarea but then im confused about the js to make it expand it. Codepen: https://codepen.io/Gabriele888/pen/OPNyWGx thanks for the help.

Transparency and overriding

I'm curious, if we have 3 elements on top of each other, lets say blue is the lowest (takes the full screen), orange is in the middle (also takes the full screen), and on the top is the square elememt (like 400x400px) that's transparent Can we do anything do make the square area show blue isntead of the orange? Aka somehow make the middle layer transparent from the square? Like piercing transparency? If that makes any sense? ...

Is breaking the atomicity rule justified here?

working one a side project and i came across a problem , i want users to save to their profile their preferred colors, user can have one or multiple preffered colors , the good way to do it is to just have a separate table UserPreferredColors
but im thinking, since its use case will be very limited why waste a whole table for that, maybe just add it to the user table as column where the value is a list, the colors will not be detailed, there isnt specific hex or names just a standardised list of colors the user can select one or multiple like this screenshot i took from Color Hunt...
No description