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

How to eliminate padding from photo in a grid

JSfiddle: https://jsfiddle.net/a215fL3s/4/ Basically I need the left grid item (text) to have padding still applied when viewport is smaller, but not the image on the right. I can't add padding internally since that'll cause the item on the left not to align with the other sections (e.g. "Another section with regular text" above it. Also if viewport goes to mobile view, and the grid becomes 1 col, same thing i want the image to extend edge-to-edge and only the text to maintain the padding....

Code Review

Can I get a code review for a project I'm building? Just need feedback on the readability, things you would change and any tips....

How to auto update my github repository ?

Hey, i'm new to all this and ive tried for hours to find a way to 1- link my repository to VS to modify my website files 2 - update the files after every saves Can someone help me?...

Best approach for this dropdown in the navbar?

Hi everyone. This navbar has a dropdown that when clicked it protrudes below the navbar as you can see. what's best way to approach this? (along with the slanted button corner effect in the nav bar)
No description

Anchoring a pseudo-element to another pseudo-element

I have this demo (warning: uses native carousels & anchoring): https://codepen.io/Venyl/pen/LEVvxaR Right now the ::before doesn't see the anchor-name of the ::scroll-marker-group and therefore I can't use anchoring, how could I fix this?...

Understanding utility classes

When using utility classes is it best to use them for design elements that won't change too much? I'm asking this because I created a text-align-center class but the alignment will change depending on screen size. So is it better to just use a media query on a component rather than using a utility class? I'm new to using utility classes so I'm not the most familiar with how they work......

New Mobile Developer Seeking Guidance on React Native Security for Banking Apps

Hi everyone, I’m a new mobile developer and have recently transitioned from web development to working on a banking application using React Native. Since this is my first experience in mobile development, I'm eager to learn about the best security practices to protect sensitive user data effectively. Given the highly sensitive nature of the information involved, I want to ensure that our application is secure and compliant with applicable regulations. Here are a few questions I have:...

Globe.GL & Three.JS Object?

I'm currently working with Globe.Gl to create a check in system, for someone's live stream. I'm currently struggling to figure out how to add a custom 3D Object? Or a custom Object in general as part of a point made on the globe. Earlier I was using Markers, but would like to make the markers or something like it in 3D. So it hovers above the point. Which would display the users name, and image from the bot currently being used. ...
No description

Sticky mid screen without large gap above, how?

Hi everyone, I have a 200vh parent, and I have an element that i'd like to sticky to the middle of screen while i scroll the parent (and there are GSAP actions triggering based on the scroll progress through the 200vh parent). I tried two approachs: 1- Set parent 200vh, put element inside, sticky top 50% and translateY -50%, problem is that the element starts off quiet high above bounds of its parent (due to the translate), so that didn't work. 2- Set parent to 200vh, set child 100Vh stick top 0 and flex center align what's inside, then put element inside the chils - this way the element is in the middle of the 100vh. Problem is in the start there's a bit of a gap above the element since it's center in a 100vh. ...

h1 responsive

Hello I want to make my h1 responsive. I know I can do that with media queries but I wonder if there is also another way ?...

How to equalize sizes across different components - or a better approach

Hi everyone, I have a slider containing several cards (see attached). The issue I have is that depending on the content of the header (for exaple if venue name spans 3 lines instead of two) the date component next to it expands causing the cards to look inconsistent. But on the other hand if I set the date component to stick to the top right with no expansion it also doesn't look nice. Is there a possible way so that if the date component expands in one card it expands in all the cards, or is that impossible? What would be the ideal approach to achieve consistency here?...
No description

Free plugin like Advanced Custom Field (ACF) please?

I am new in wp, please suggest me a good plugin like advanced custom field which allows some good features for free version; thanks! #wordpress #plugin #acf...

What is the best way to remove scrolling when you have a fixed navbar at smaller screens?

When I open the navbar I don't want the user to be able to scroll the content underneath it. How can I do this?

When to move on from html,css,js to react and tailwind

How to know that we are prepared or start moving to next phase coz i'm facing difficulty in making many small features integrating html,css and js doing it for so long now

How to maintain letter spacing when breaking a text element?

Another question. I'm trying to position an inline-block inside a text element, but clearly if I do <span>abc<div class="inline-block"/>efg</span> the standard letter spacing disappears and the inline div is flush to the left side of the 'e', and the right side of the 'c'. Is there a way to keep the spacing consistent and avoid manually adding arbitrary pixel margins to the inline block? I can create a variable and manually set both the letter-spacing on the <span> and the margin on the <div> to the same value, but I was wondering if there are better/other ways of doing it?...

Whats the proper way to semantically define a dynamic H1 tag?

I have a <h1> tag that I'm splitting into multiple spans for css/animation reasons. What is the correct markup in this case? Should I have <h1><span>AB</span><span>CD</span></h1> or are there other more correct ways of handling it?...

How would you make the image section on the right ? Grid or background-image ?

but on mobiles , the image wont show if you know what I mean , so grid is the best way? and idk how to make the gradient too , please give some hints on that too
No description

optimal js module design

@Zach Jensz shared me this article after looking at the source code for xoram.dev. While I understand the premise of the article and agree with them, I think I'm mostly good on for the @xoram/core package as I'm not shipping the source files only a minified dist and type declaration files (as you can see on NPM), so even if you used it in browser without a bundler you would only ever get a single download. On top of that, you would use close to all the exported code in an actual use case, any non-default feature being it's own package under @xoram/plugin-[packagename] that you can import/install independently....