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 there a better way than performance.now() to tell how long the execution took?

is there like a 1 line solution i think i saw someone who did it once but i can't remember but is there a way to know how long something took to execute but in a faster way than these 4 lines or 3 if we dont console log start? let start = performance.now(); console.log(start);
...

Items not appearing on mobile with display box?

Hey guys, it looks like the first few divs i have in this codepen aren't appearing on mobile responsive? the first 2 divs i have here just appear to be off of the screen? https://codepen.io/assyrianlegend/pen/OJwjgGJ...

Can I add animations to this project?

Project link: https://glistening-bombolone-928636.netlify.app/ I would like to try adding animation on the job cards when: 1)They are disappearing when not having adequate filters 2)Ones with the proper filters would stack up to the top...

width 100% is not respecting the gap property?

Hey Guys, Im trying to learn display:grid, i set a gap of 3.5rem, the cards i have have a child div that i set to width 100%, but it seems like the 100% is not respecting the gap, and its pushing all the way to the next div? can someone point me in the right direction?

Need a CSS expert (Tailwindcss)

I am trying to figure out chatGPT manage to stick the prompt area to the bottom. I copied their code but it doesn't work as expected and I am not sure how to get the same results. any help is appreciated Simple version: https://play.tailwindcss.com/IVZVV4w0jj Original Version:...

How can I convert a span to an img

How can I convert a span to an img? -- Can I get some help with HTML? What would I need to do in order to make a span viewed the same way as an img while considering accessibility? ...

Pseudo -element

Pseudo-element z-index not working , I want the gradient background to be behind the parent element https://codepen.io/aldrinbright/pen/RwBZNrw...

<datalist> inconsistencies across browsers

Is there any reason why Firefox displays only text between the closing and opening option tag, while Chromium displays both it and the value parameter and WebKit displays only the value parameter? Here is a demo: https://codepen.io/angelovdev/pen/zYLdYNz ...

how to use gradient with variables

linear-gradient(rgb(var(--main-color-1)),rgb(var(--main-color-2)) ) why this is not working...

RegEx with match() and replace()

I have a regular expression that grabs the double quotes and value for an html tag attribute: str.match(RegEx). And then I use str.replace(RegEx, replacementStr) where the replacementStr is a span tag with a class for changing the color in a pre block. It works like a charm when I only have 1 attribute in my html tag. But when I have 2 attributes (e.g. id and class), I get both matches in each attribute. I can't figure out why it doubling since the id and class values are different. Any insight would be great: ```js...

Occasional JS error from fast clicking?

This error is popping out occasionally in console, from I'm guessing, clicking too fast? When I'm slowly handling the app it is doing well, but it shows up when I start going ham(I think). "Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node." If I'm remembering there is a line of code that prevents spam clicking or something? If that is even what is causing it in the first place....

Why is this giving me an error?

```js for(let i=0;jobCard.length;i++){ if(jobCard[i].classList.contains('hidden')) { jobCard[i].classList.remove('hidden'); }...

Using CSS custom property in inline SVG

I'm trying to replace a single character on a website with an inline SVG. I'm basing what I'm doing on Kevin's video "Basic, Intermediate & Pro animated hamburger icons". The main difference at this point is I'm doing it in a pseudo element: ``` .modal .close-button:after { content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="var(--clr-neutral-100)"><path d="m11.36 35.26-2.34-2.35 1.19-1.2 2.35 2.34 2.38-2.34 1.2 1.17-2.38 2.38 2.35 2.37-1.16 1.19-2.38-2.35-2.35 2.34-1.17-1.19 2.31-2.36z"/></svg>'); fill: var(--clr-neutral-100);...

anyone can help me find the mdn resource for return types? example is

function add(x: number, y: number): number { return x + y; } let myAdd = function (x: number, y: number): number {...

3D Genplan of Houses project

Hello to everyone guys! Hope you're doing well today! I'm working on react project for company-builder and they want to see something similar to what you can see on images. I want to ask you, are there any libraries of tools to make something like that? I want it to be responsive and easy to use feature. PS: project on images using jQuery and hardcoded sizes, so it absolutely not adaptive. even on mobile it has 2000+px width and height. It would be nice to find something convenient to use. ...

Any idea how I can achieve a preload effect like this one here?

I try to create such lazy low pixel resolution like they do on this page https://www.searchsystem.co/...

Need help with my JavaScript RegEx

I working on a JavaScript program to output formatted span tags to be pasted into a pre tag for code blocks in my blog posts. 1. I got a RegEx to capture the double-quotes and content in between them for some HTML attributes. 2. I have an HTML entities conversion function for < > ' " and & and I use the result to add a span tag with a class for a paragraph class and image src but not tor a title tag without any attributes. 3. Then I output the html entity conversions with the span tags around them, plus a different span and class around each line. ...

Video not showing when page loads up but fixes when you press on it.

Hello all, the video when the page loads it shows the beginning of the video and it works fine in PC. However, when I load it in my android phone, the video have this background in the image. Is there a way to fix this or... is it because phones have different rules with the videos? ``` <article class="cards"> <h3>Title</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis ipsum odio ratione obcaecati amet, ea ipsa ab fugiat esse alias, iusto sint exercitationem itaque accusantium quisquam perspiciatis aut asperiores in....

Card 2 system is flip from other cards

https://codepen.io/T031C/pen/eYjWpjK this was a card system i was making and the second card's function is inverted from the other cards It was working before with me calling each element but that was repeating everything and i tried making it into querySelectorAll and now this happens...

Is chrome dev tools responsive view working correctly?

Hi there, since 14 days ago I think, when I use the chrome dev tools to see if my website is responsive and move around the responsive bar to increase/decrease the width of the viewport, I can see that my website goes out of the viewport and I can scroll horizontally. Now, if I close the responsive view and then close the dev tools, and then open it up again, it looks ok. Am I the only one?