Gashy Comments - Answer Overflow

Topics

Gashy

KPCKevin Powell - Community

•Created by Zax71 on 5/4/2024 in #front-end

A11Y dialog advice

To my knowledge the native dialog element can be closed with the esc key - it might require at least one form with a dialog method inside of it to work, I've not actually tried it without one. MDN usually has good docs about the elements so I'd advise looking at that for more info

4 replies

KPCKevin Powell - Community

•Created by CDL on 3/28/2024 in #front-end

Changed the hardcoded Data on my ecommerce site to fakestore API but now having trouble pushing data

Its been a few years since ive used react but you can call functions using their version of event handlers

<button onClick={yourFunctionHere}>
  Click me
</button>

<button onClick={yourFunctionHere}>
  Click me
</button>

then you could have something like

yourFunctionHere(productId) {
 const storedCartData = localStorage.getItem('cart') ?? [];
 // perform a check to see if the product already exist in the cart - add or increment product accordingly
 // update local storage with new data
 // direct user to cart
}

yourFunctionHere(productId) {
 const storedCartData = localStorage.getItem('cart') ?? [];
 // perform a check to see if the product already exist in the cart - add or increment product accordingly
 // update local storage with new data
 // direct user to cart
}

8 replies

KPCKevin Powell - Community

•Created by CDL on 3/28/2024 in #front-end

Changed the hardcoded Data on my ecommerce site to fakestore API but now having trouble pushing data

From your link its passing two queries, id and product

            href={{
              pathname: "/cart",
              query: {
                id: product.id,
                product: JSON.stringify(product),
              },
            }}

            href={{
              pathname: "/cart",
              query: {
                id: product.id,
                product: JSON.stringify(product),
              },
            }}

Because from what you posted above it's looking for a local storage object, which I dont think that link would be doing in its process What you probably want is a post request or a function to add the item to a data object that holds your basket, and then direct the user to the cart page And on the cart page you just loop through the items in that data, or display an empty cart

8 replies

KPCKevin Powell - Community

•Created by CDL on 3/28/2024 in #front-end

Changed the hardcoded Data on my ecommerce site to fakestore API but now having trouble pushing data

To my understanding you have a URL passing some parameters to the cart page, but from the looks of it the cart page isnt looking for that respected data. Are you trying to do a post request instead?

8 replies

KPCKevin Powell - Community

•Created by glutonium on 11/6/2023 in #front-end

can clamp() be used for anything other than font-size

Using clamp for padding and widths should be fine as long as you are using the appropriate units. I tend to use clamp for vertical padding in some cases where I feel the padding could come down gradually with the screen size for example clamp(16px, 3vmin, 50px)

5 replies

KPCKevin Powell - Community

•Created by willko22 on 11/5/2023 in #front-end

Smooth gradient

No description

10 replies

KPCKevin Powell - Community

•Created by willko22 on 11/5/2023 in #front-end

Smooth gradient

Adding onto this I think colourspaces, colour combinations and gradient settings will have an effect on the smoothness of the gradient whilst it's trying to calculate the blended colours

10 replies

KPCKevin Powell - Community

•Created by BlueBeka on 10/30/2023 in #front-end

css `color-mix` not working with paint api.

There might be a chance that the color-mix function isnt fully supported in a custom property just yet or has to be done in a specific way (little bit like how url() can be a bit awkward in a custom property if you are using quotations). Have you tried putting the colour mix function inside the paint() to see if it works?

6 replies

KPCKevin Powell - Community

•Created by roycwilliams on 9/30/2023 in #front-end

Creating an Infinite Vertical Carousel with Framer Motion

All depends on how you are thinking of setting it up, could set up some form of threshold which will let the user scroll down, or what I'd probably do instead is make it so the direction is horizontal on mobile and give some indication that the user can swipe left/right on it. Or even better just have it stack naturally on mobile

6 replies

KPCKevin Powell - Community

•Created by roycwilliams on 9/30/2023 in #front-end

Creating an Infinite Vertical Carousel with Framer Motion

Just be very careful on creating infinite vertical carousel areas especially if you have content underneath it, this can lock the user on mobile devices

6 replies

KPCKevin Powell - Community

•Created by LOKKEE on 9/10/2023 in #front-end

Optimized way of implementing Hero background Video

Working on mine too

418 replies

KPCKevin Powell - Community

•Created by Kepmon on 9/16/2023 in #ui-ux

NVDA doesn't see buttons inside a popup

Have you got any code to present? It will help others debug the situation. As it could be anything from element types, your JS implementation or even CSS

4 replies

KPCKevin Powell - Community

•Created by LOKKEE on 9/10/2023 in #front-end

Optimized way of implementing Hero background Video

Im not 100% sure about lazy loading - but we usually add a preload attribute to it, which might help your situation. Also any images you have on the page that are not in immediate view you can add a loading="lazy" attribute which will make it so the images only start loading when they come in/close to view

418 replies

KPCKevin Powell - Community

•Created by LOKKEE on 9/10/2023 in #front-end

Optimized way of implementing Hero background Video

Just a heads up you can serve multiple sources and the browser will pick the one it has support for - I think it goes in inheritance order so place the WEBM first and then MP4, MOV, etc afterwards

<video>
  <source src="..." type="video/webm" />
  <source src="..." type="video/mp4" />
</video>

<video>
  <source src="..." type="video/webm" />
  <source src="..." type="video/mp4" />
</video>

418 replies

KPCKevin Powell - Community

•Created by LOKKEE on 9/10/2023 in #front-end

Optimized way of implementing Hero background Video

I used that ffmpeg for this client on the hero section https://vanfitsolutions.co.uk/

418 replies

KPCKevin Powell - Community

•Created by LOKKEE on 9/10/2023 in #front-end

Optimized way of implementing Hero background Video

Yeah, it will vary on what is in the video itself - a lot of high motion usually equates in a larger size as you lose a lot of info at lower file sizes

418 replies

KPCKevin Powell - Community

•Created by LOKKEE on 9/10/2023 in #front-end

Optimized way of implementing Hero background Video

Its called ffmpeg

418 replies

KPCKevin Powell - Community

•Created by LOKKEE on 9/10/2023 in #front-end

Optimized way of implementing Hero background Video

Both

418 replies

KPCKevin Powell - Community

•Created by LOKKEE on 9/10/2023 in #front-end

Optimized way of implementing Hero background Video

Theres a CLI program that is a lot better than handbrake, managed to turn 150MB+ videos into like 2 - 5MB

418 replies

KPCKevin Powell - Community

•Created by LOKKEE on 9/10/2023 in #front-end

Optimized way of implementing Hero background Video

You could also look into creating a mobile version of the video to be served on smaller devices

418 replies