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

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

3 column layout where outer columns are the same width with middle taking up rest of space?

This is for a header, I have a logo and logotype on the left, buttons on the right, and I am planning to have a search box in the middle and I want it to be central which does mean that I need left and right to be the same width even though content on one side will have empty space I can use grid to make all columns the same width but I can't then specify that the middle column should be super wide. Also tried flexbox but that appears to be a dead end. My usual front end person is dealing with stuff so I can't ask her I've tried:...
No description

Table Header Borders & Sticky Behavior Not Working Properly on Refresh/Resize in Chrome (Windows)

Hi everyone, I'm running into an issue where the borders and sticky behavior of table headers are not working as expected in Chrome on Windows, especially when the page is refreshed or the window is resized (like during responsiveness testing in DevTools). I've attached a video and screenshot showing the issue. Video - https://www.loom.com/share/d5f0926c4e1f4e9b95a1e117981b079b?sid=62187e15-f803-4b70-beb0-a46b6ebf0a8e Codepen Link - https://codepen.io/Amit-Soni-the-vuer/pen/RNwWjra...
No description