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

fetch

I'm aware fetch has a getReader within it's response for handling streams but can I append chunks of mp3 data into some html audio file to achieve Audio buffering before play (so I can play the audio before it's fully loaded) kind of like SoundCloud and what YouTube does with video... I tried with Audio type didn't work any other web audio things to achieve this?

Why do only some styles in my media query work?

(Jsfiddle for context: https://jsfiddle.net/0w34L6sr/10/) For some reason, it seems that only some styles defined in my media query for width are applying when their parameters are achieved. Like when the screen width is less than 50rem, the icon font size should reduce from 2rem to 1rem and the left border on the span should disappear, but neither appear to apply. Another problem with media queries that I'm encountering (not in the jsfiddle) is that some styles have to be in their own media query to work, even though the query parameters themselves are identical....

Keep text within a div with complex shape created with clipped path

Hi! I'm looking at code examples to create a hex grid using CSS and want to achieve a hex grid that allows content of all types. The examples are all graphical or photo based, and when I play around with them trying to add text elements, it is clear that clipping paths don't actually define a hexagonal box but rather adjust the visuals to look and act hexagonal for visual purposes. However, I want a true hex shape that I can place text within that will allow automatically breaking and adjusting text to the hex shape. Has anyone had any experience with similar designs?...

Issues with time (rfc2822Date to longformat)

im getting time from api's and i wanted to change the styling of time from Sat, 25 Mar 2023 10:05:20 GMT to Saturday, March 25 at 3:35 PM the only issue is the time, it has to be 10:05am instead its taking 3:35pm. i dont know where this 3:35is getting from, im not in that timezone etc. this is the code which im using ...

Guidance on how to handle .json with many objects which contain .svg images

#general I have a "jobs.json" file which holds many 'job posting' objects which will be imported into my index.js and then looped thru, in order to ultimately have their information be added to the html via template literals. My issue is that each object includes, as its "image" property, an .svg image. ...

animation: rotate linear + scale alternate-reverse

https://codepen.io/JunSu-Ho/pen/dyqwQGd how do I combine those animations?, I need scaling to be alternate-reverse, but I want rotate to be linear, rotating same direction not reversing...

How save changes to HTML on reload?

So if I dynamically add HTML elements, and reload the page, for it to not return to default but to be shown with the changes. I'm wondering is there simple code for it? ```js...

HTML Image Maps - Is this feature worth learning?

Hello. I'm currently learning HTML and have came across the HTML Image Maps element. For those of you with experience, is this used often? I can't seem to think of a scenario as to where this would even be useful. Not to mention that its probably not that good for assistive technology? It seems pointless, and just wanted to ask if its even worth researching and learning about the feature. Thanks.

Weird button hitbox(click-area?)

Hello! I'm having problem with button click-area when using Event Delegation. Basically only a small part of button is respond to being clicked if button has content inside of it, but if I directly target it with EventListener it works fine. Why is that? Picture below is example of a button, consisted of <img> and <p> tag. It only registers click when clicked between the "arrow" and "Reply" text when being targeted by EventDelegation, but works fine when you attach Listener to it. Project link below if you want to test it. When you click in between arrow and text, in console "Not working" text will appear, when it should appear when clicked on the whole button....

getting two different value for the full viewport height using css and javascript

hey folks I'm using these two different methods to get the full viewport height I dont know why these are giving two different values 1st Method by pure css ```css .root {...

Input Field Function on JS

Hey guys can I ask how can I implement a function on js. This is my brain thinks when click on a input field the h1 title should be change to somewhat any color to make the title h1 focus. I have a h1 title which is Question 1 that has color black and I have also a Input where they should put an answer....

Website jumps around when virtual keyboard is up

I have a login page. ( used in full screen mode like a PWA. Added to home screen ) When the user clicks on one of the input boxes the virtual keyboard pops up. When the user finishes typing the username he either wants to click away from the box to be able to click to the login button or wants to click to the password input box. When the user clicks away the virtual keyboard hides but bring the page with itself to the bottom. And if the user clicks again, the website jumps back to it's normal position. I have included a gif demonstrating the problem. and here is a codepen link: https://codepen.io/drrandom/pen/eYLbBdq...

Need help regarding cubic-bezier function

Recently, I came across a function named cubic-bezier function through this article: https://css-tricks.com/advanced-css-animation-using-cubic-bezier/#comment-1803198 I, however, almost got this article, except for the 'Math Part' for Parabolic approximation when the article reached the line "...We used V = 500 in the last example, so the max value there would come out to 375 (or 37500%) and we get the following:"....

Scroll like in ChatGPT

I developed a ChatGPT-like app with React and Nextjs, I need to scroll while streaming the output, but couldn't find the logic behind it! anyone has an idea?

header height

Good day everyone. Some confusion abt this project: https://github.com/bedimcode/responsive-halloween-website/blob/main/index.html ```media screen and (min-width: 767px) .nav {...

Confused between Web And Game Developement.

I am confused between Web and game developement, I have some experience in Front end developement but recently Game developement excites me more, so I am confused. Also, I lost all my previous works and projects and Now am low in motivition to do that thing again.

Checkbox Problem or my HTML?

Hi guys I.ve been debugging this for almost an hour. The problem is when checking the button it does not stay in active and wont stay on the checkbox Image provided of desired solution. Active state + checkbox https://codepen.io/pen?template=XWPyZMm...

CSS radio button

hello guys plz i need help with this ,how can i do it with the best solution

CSS solution for this

Hey guys, to get the notch in middle I've used two divs with border radius. But now because of that text inside one div wont expand. I can I use css so that the blockquote expands all the the way across ?? CSS:...

.box:hover:after fade in transition

I'm trying to animate a fade-in transition for a .box:hover:after property, and am not having much luck. Codepen; https://codepen.io/rainbow_blacklight/pen/qBMQXXB Would I need to make use of the animation property to achieve this?...