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

What is the best way to wrap text intentionality

This might seem like a dumb question but I always feel like I'm doing this wrong. If I have a h1 for example and I want to wrap it over 2 lines for design purposes is the best way to use a br tag or max-width? I feel like both of those solutions aren't great so if there's a better way to do this please let me know 🙂...

nth selector not getting the right first element.

I have a simple layout. 5 divs in a parent div. All the divs are colored green alright? However, i have some of the divs in the parent the class .alternate These alternate divs i wish to color the bachground based on even and odd. ...

Workplace Stress + Wellness apps

Just your friendly neighbourhood UX Designer looking for input on an interview assignment (I got laid off so I'm really trying to smash this) So if any senior devs are online, what part of the work week is most stressful and how do you manage it? Do things like wellness budgets for yoga classes really work? Do you have strategies to prioritize time on your calendar? (We're supposed to address improving well-being in the workplace through an app/AI.)...

3D Text Effect, Challenging Text Effect

Greetings, i am very new here, but i am already watching Kevins amazing videos for a while. Since i have searched already 2 days for a working idea i thought maybe the god of css could help me. (Or some of his minions) 🙂 I am trying to create a dynamic text effect in this 3d style i am sending in a screenshot with this post. It seems there is no filter or masking trick which dynamically reacts on this. I would like to avoid adding a 3d javascript library for such a thing, i guess this would be overkill. If there is no other way around it i would probably stay with images. But since this text is also the h1 of the page it could be problematic for semantic. Please forget the branch structure underneath. I know this will be an overkill to make this change width automatically. 😄 ...
No description

Resources to learn typescript

Hello, does anyone know any resource where I can learn typescript please

What level of mastery do we need in JS before learning typescript.

Hello, quick question, what kind of mastery level do we need in JS before moving to learn typescript please. By the way, can someone explain why is it recommended to learn typescript please, like why not stay with JS everytime, what does typescript bridges?...

Is there any disadvantage in using jsdoc for library authors?

I haven't used that many npm packages but I see that some don't use any kind of inline documentation at all. Prisma, zod and better-sqlite3 being one of the few. React uses some but it mainly redirects to official documentation via the @see tag. Is there a reason some of these libraries don't do inline documentation like lower performance when bundling? Or is it just preference for not cluttering the js files and instead having separate docs...

need help with ui design

In that picture the first 2 was experience and last one was project I create , idk how to add experience , in a recent company I worked on multiple projects with multiple stacks but what design I can use to display that project wise ? And I use Max height on <ul> to scroll that points And Like project wise and stack but if I add all it would feel like alot to scroll , should I add new page as view full to new page ? Or any other better...
No description

`position: absolute` issue

Hey guys! Having a really weird position absolute issue. Parent .fg-btn-wrapper has position: relative on it. Child .fg-btn has position: absolute on it with top: 0, right: 0. Instead of it being to the right of the container inside of it, it's outside of it to the left. This is unfortunately behind authentication so I can't show a live link but I have no idea why it's doing this. Just looking for ideas...
No description

Targetting web component parts using ::part in the shadow dom itself

We can use ::part outside for styling a part in a web component but for the life of me I can't find out how to use this selector in the shadow dom <style> block itself. [part=thing] works until you have multiple parts. I've tried looking around and absolutely nobody talks about using this selector in the shadow dom but I refuse to believe it's not usable...

Background Blur: Yay or nay?

Getting my 💩 together to start recording some videos and I think I need a blur on my background when it's just my big fat head. Thoughts? First is just my head, no blur. Second is a 10% Gaussian blur. Third is 15% blur. Thoughts? Opinions? hashtag-roastMyImages...
No description

Title: Improving a Responsive Photo Gallery – Any Pro Tips?

I'm building a responsive photo gallery using best practices: •rem units •responsive images •max-width for layout...

Mask Highlight Effect

Hello! I'm a beginner that's only self-taught by watching youtube videos. So sorry in advance if I'm lacking some common knowledge. Anyways, when I add the ".highlight-texts" class to the body, I want the whole page to darken except the elements I've marked with a ".text" class, bring all the focus or highlighting those elements. attempt:...

Style queries - inherited and changed

Was watching KPows latest video on style queries. I’m confused on how it works when custom properties are changed further down the cascade. If we aren’t defining a container, does it just look for the custom properties value on the elements nearest ancestor ? For example: ```css body { —clr: skyblue; }...

Is this an ok speaker bio?

Zach is a web evangelist, conference speaker, Google developers Melbourne organiser, CSS Expert and leader of Melbourne CSS. His mission is to make the web faster, more engaging, and easier to understand....

In Firefox dev tools how do I know if my srceset attribute is working?

In Firefox dev tools how do I know if my srceset attribute is working and changing images at different screen sizes?

When designing this layout using grid how many columns would you split it into?

I'm finding it hard to visualise how many columns I need for this design
No description

What are good css normalize/resets for a button?

I wanted to add some button normalization styles, but I was wondering what is considered good practice or not. I found around 3 options, the first being very simple and direct is all: unset, but I vaguely remember Kevin saying it's not really good to use that because It can remove some good/relevant styles and I'm not sure it's the case here. The other ons ie the one below: ```css button, input[type="submit"], input[type="reset"] {...

I have problems using PDF in a JS project

so I was working on this project and I need to accurately convert pdf to something with structure (I choose markdown for now) so I can analyze it. The result text has been very inaccurate, page numbers would get in, multiple repeated headings like h2 h2 h2 ```js async function extractPdfMarkdown(file: File): Promise<string> { try {...

Strange transition using anchor positioning and popovers

I am using anchor positioning (the solution can only be described as 'interesting') to position some 'toast' popovers (top-layer), with a transition (translation) using allow discrete behaviour. This works fine for transitioning in to view. However, when the popover is being hidden, the element suddenly loses its anchoring halfway through the transition. Codepen link: https://codepen.io/reuseaux/pen/pvJOzaJ...