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

Input profanity filter

Hi, For the last day I've been searching for a (good) profanity filter for user input. It's pretty important that it's good. On my website, people can name whatever they have created and I would rather not have the following:...

Help with grid

Hello. Really sorry to ask a beginner question here, but I just recently started learning grid and im not sure why this isn't showing the desired result. Code: ```scss...

github page is not working

today I hosted my code on github and deployed but It's not working but in my local machine it is working fine. Could you tell me what is the problem ? code repository is given below https://github.com/sabuz796/nav-menu...

front-end projects criticism

Would love a honest criticism on my recent resolutions if anyone have the time , some of them are not responsive so bear with me I learning how to fix that and also some tips of what I could've done better thank you. This was all done w/o watching tutorials of the project(s) and just tried it myself while researching instead of going directly to the answer. https://www.frontendmentor.io/profile/mikewil245...

Identify .js file that changes an HTML element

Hello all. When I am looking at a website and I see an element that is changing, eg a countdown element, how do I find out which .js file controls it? Some pages have a lot of .js files. Thanks....

Sizes attribute

When creating src sets with sizes, can it be done like this, sizes="(min-width: 320px) 346w, (min-width: 400px) 548w, (min-width: 600px) 346w, (min-width: 800px) 474w, (min-width: 1100px) 548w,...

How to animate summary/details tag height?

https://www.youtube.com/watch?v=B_n4YONte5A I saw this video of Kev's but can't see a simple way to apply it to details tag. Is it possible?

LeetCode: Single Number II

Hey all. Link to the problem: https://leetcode.com/problems/single-number-ii/description/ Picture of the problem included in case you don't want to use the link. I am hoping that someone explains to me what this algorithm does and why does it solve the problem? ...

Does anyone know what is used to do this 3d tilt on mouse move effect?

https://www.flowchef.co/ Hello everyone! I saw this cool website and wanted to try and emulate a similar design in my own. One thing I was wondering about is this 3d tilit on mouse move. Can anyone tell me what is used for this?...

Problem with infinite scroll on table when big screen size

Dear Community, Hope that you are all doing well! I have a problem with infinite scroll on a table when the monitor screen is way too big. The problem is that only the first page of data is loaded, and then no way to fire events for other fetch requests cause a table size is still not scrollable....

button with icon break vertical position alignment

I'm trying to keep two button on the same level, but the button with an icon in it breaks the vertical alignment. I've tried to Google for answer but I couldn't come up with the right keywords for this bug. Desired behaviour Two buttons stay on the same level vertically ...

Having trouble positioning hamburger menu below container in a table header.

Hello, I have to create a table with a settings button in its header's first column. When clicking on the button it should open a pre-defined checkbox list below the button. My problem is that there is a little offset of the pop-up checkbox list. You can see it in the images. http://jsfiddle.net/mbence16/sanLy0u5/176/...

Why am I having extra spaces in my Grid Items?

Hello everyone! I wanna know why there's extra space in my grid items although I did not set any height to each component? If you look closely, contents in 'nav' and 'footer' area is not centered. (See 1st & 2nd pictures attached) My goal is to set my 'nav' to its min-content and 'aside' will take the available row spaces. (See 3rd picture attached) I'm using Grid components in ChakraUI. Here's my layout code in App.jsx:...

Having issues recreating a list format

so, I'm new to front end development 😄 and I was trying my hand at recreating a site with some of the knowledge I have now. I'm kinda stuck on how to align this list beside each other. im creating the first 2 pages of the squarespace website. reference: www.squarespace.com my code: https://codepen.io/eyesoffme/pen/BaGdKyx...

Super quick question about clamp and sass

I want to be able to evaluate the resulting clamp value and put a negative on it. -#{$height} doesn't work since it evaluates in the browser to -clamp(1rem, 2vw, 2rem). You'll probably say to just use media queries (😉) but I want it to be fluid. ```sass...

Adding text over the top of an image with a "banner" behind it

https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-sign-up-form I'm being tasked with creating a signup form, and I think I have an idea of how to do the majority of it, but I'm struggling a little bit with the positioning! My issue: As you can see I have the leaf background and text where I want it, however I'm trying to figure out how I add a background to the text which currently has "position: absolute" on it....

Mobile responsive site in inspection tab doesn't match live website appearance

I am developing my digital agencies website and for some reason a lot of the svg i have in the files have altered some of the logo and text when starting from mobile responsive 1024 width. I also have a line that appears in each section on the live website and want to get rid of it. It looks clean on the initial inspection page but when pushed the live mode it doesn't look the same at all Please if you have any insight on how to fix this I have attached my github repository below:
...

Tailwindcss +Next.j themes/libraries that meet AA WCAG standards and are semantically sound for SEO?

Hey all, I have a client requiring a static landing page. It must meet at least AA (ideally AAA) WCAG standards, and be semantically sound for SEO....

Transition after hiding flex child

I have 3 flex children in a row, set to 100% width, so it spaces evenly. Now, using js, I'm hiding one conditionally, and I'd like a short transition to make the change a little more organic, but I'm not sure how best to approach it. What I've tried so far is to add transition: width 500ms ease-in; to all 3 of the flex items. The hope was that the expansion of width would trigger it, but it doesn't....

align text and image

Hi all, I'm currently working on the Workit landing page from frontendmentor, and everything is going well so far. However, I'm facing a bit of a challenge with the section that includes the founder's image and text. I'm unsure whether applying margins to align them is a good idea (like I did), as it may not be ideal for responsiveness. Ideally, I want it to resemble the design in the Figma file. There should be a box around the image and text, with the box centered on the page. I've tried placing them in a div, but that hasn't solved the issue yet. ...