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

template & javascript questions

Hey, just a few questions: 1) with template tags, other than template.content.cloneNode(true), is there anything else that you need to get familiar with regarding those? mdn just seems to show how to make the tag in html and that snippet there. 2) with template tags, what does shadowrootmode do? and why is it useful?...

Web scraping

Hello, everyone! I’m thrilled to join this community, and this is my very first article. I apologize for asking for help, but I would greatly appreciate any guidance you can offer as I navigate this journey. ...

hello everyone please am trying to change the color of the {text} to red or blue

hi everyone am trying to change the color of the text to switch between blue and red color

API integration

hey guys i need help anyone that have a good understanding on api integration using axios for login functionality can you help me on it the problem is i have login component and it have the email and password validation done including the necessary things for the login api call i have created a function here is what function looks like : https://gist.github.com/lost50U1/7caf97f84484ac631da1001efd724368...

Meaning of FPS and how to slow down game animation

Hello guys, sorry to disturb you... I need to build a game for a uni project in JavaScript but I don't really know the game physics/mathematics.... I just came across the word "FPS"... I heard that a lot of time but never bother about what it is but now I need to know 😭 ... it stands for frame per second, what does that mean please, can someone explain, why is it important in game development... is there a way to slow down any animation using FPS? (please bip me) On stackoverflow, there was a piece of code used to create an animation delay but I didn't really understand it, may be because of my poor concept of frames... can someone clarify that please ```JS...

Help: background and background-color in Chrome vs. Safari

Hi! I am trying to create a design that looks like attached image ⬇️ . Everything regarding the background is created on the html element: - The top triangle over the logo is created as an html::after element. - A linear gradient colors the page vertically into two stripes using background: linear-gradient(...); on the html selector....
No description

Ability to zoom out if I want the page to be "larger" on wide screens.

Hi, my webpage contains a lot of text and I wanted to make it more redeable (or less boring) on larger screens (QHD, 4K), so I have used Media Queries (with px) to change font-sizes (in rem) at certain point. Then I have tried it with rem in Media Queries also. The problem is, when I try to zoom out on FHD screen, the page hits these breakpoints and zooms in again on some levels of zoom. I don't want to ruin the zoom out ability on smaller screens, yet have webpage with reasonably large text by default. Could you think of any solution? I also though if it isn't the case that people with 4K monitors, etc. actually desire the small text OR have system-level zoom in turned on (whole system or browser is zoomed in)....

handling elements that use javascript when javascript isn't available.

Hey, if you have an element that utilizes javaScript, perhaps a button that opens up an accordion, however the user either has javascript turned off on their browser or something in your code/browser causes it to fail to load, how do you appropriately handle that element, since it won't do anything? i'd appreciate any insight. Thanks in advance....

help suggestion

I want to recreate this using flex as a practice. Will flexbox work with this layout or i shall use grid?
No description

Grid acting weird

https://codepen.io/saad-shehzad-the-bashful/pen/ZEgOMmQ why isnt the grid getting 1 or 2 column? in the mobile layout its like not changing...

Backdrop blur not working on a specific element in Brave and Chrome

Hi. I am facing a strange issue here. This backdrop blur is working well on other elements and on this element as well on Firefox. It's just not working on this specific element on Brave and Chrome. ```tsx import Image from "next/image";...

Promise in JavaScript

Hello guys, sorry to disturb you all; I'm learning about promises in JS... can someone just check if my understanding is correct and what you guys can add/pinpoint on this concept please.... here is what I've understood so far: Previously, we used to make use of callbacks to perform sequential execution but this can lead to code being really difficult to understand. Now, with the use of promise, we no longer need callbacks. In order to use a promise, we need to create and return a promise object using the following syntax:...

Problem understanding callback hell in JavaScript

```JS function task1(callback) { setTimeout(function() { console.log("Task 1 complete");...

Issue With Layout

I have issue with layout Anybody knows how can I achieve this layout I have one parent and multiple child 1: Parent has display grid 2: I want repetition in this manner > 3 child then 2 child then 3 then 2 and goes on in same manner. ...
No description

Serialization and deserialization in JS

Hello guys, sorry to disturb you; I currently learning about JSON and I came across the words serialization and deserialization... can someone explain in simple terms what is serialization and deserialization (giving examples if possible) and why is it important please.

HTML Canvas .beginPath method

Hello guys, sorry to disturb you; I'm learning about HTML canvas and their is something which is confusing me. When drawing some elements, like using the .filleRect() method, we need to use the beginPath() method while when using the .Rect() method, we don't need to actually do that. Why and what is the purpose of the beginPath please

Using `:first-of-type` with data attribute values?

Should I be able to use a CSS selector like [data-progress="pending"]:first-of-type? Background: I have a series of elements, each with a [data-progress='pending'|'done'] attribute. All elements start as pending and change to done when they finish (they complete in order). I want to set a darker background color for all of them to start. The first with a pending state I want to give a white background. When that one changes to done it would turn green and the next element would turn white. The result I'm getting is as if :first-of-type only recognizes the [data-progress] attribute itself and not the value. Is this the way it works or do I need to be looking for a bug in my code somewhere. I've Googled and MDN'ed and haven't been able to find an answer. Code Example: This is a simplified example of what I'm doing:...

fieldset & legend

Hey, i have a couple of questions: 1) is the fieldset tag simply just used for grouping inputs and labels within a form or is there more to it? 2) is the legend tag used to simply label the fieldset, or is it used for a question like in the example image? 3) what makes the legend tag sit on top of the fieldset border (see image). Is this just built in functionality since there isn't anything in the user agent style sheet that could place it there, such as position: absolute? Is there a way to move it?...
No description

How to Enable Responsive Horizontal Scrolling for Flex Items in CSS?

I'm trying to create a responsive horizontal scrolling effect for a set of .package items using Flexbox in CSS. When there are more items than can fit on the screen, I want the overflow items to be accessible via horizontal scroll. This should be responsive based on the user's screen width. However, I'm encountering issues when the screen width is smaller than 1200px. The items either overflow without enabling scroll, or they don't display as intended. html code ```html...

White space between rows when using flex: wrap

Am trying to make a navbar, but when I use flex: wrap and the navbar shrinks, there is a lot off space between the first row and the second row (see image). Here you is my html and css https://codepen.io/lccua/pen/OJKXRPZ
No description